import React, { useState, useContext } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import PropTypes from 'prop-types'; import BigNumber from 'bignumber.js'; import Box from '../../components/ui/box/box'; import NetworkAccountBalanceHeader from '../../components/app/network-account-balance-header/network-account-balance-header'; import UrlIcon from '../../components/ui/url-icon/url-icon'; import Typography from '../../components/ui/typography/typography'; import { AlignItems, BorderStyle, Color, DISPLAY, FLEX_DIRECTION, FONT_WEIGHT, JustifyContent, TEXT_ALIGN, TextColor, TypographyVariant, } from '../../helpers/constants/design-system'; import { I18nContext } from '../../contexts/i18n'; import ContractTokenValues from '../../components/ui/contract-token-values/contract-token-values'; import Button from '../../components/ui/button'; import ReviewSpendingCap from '../../components/ui/review-spending-cap/review-spending-cap'; import { PageContainerFooter } from '../../components/ui/page-container'; import ContractDetailsModal from '../../components/app/modals/contract-details-modal/contract-details-modal'; import { getCurrentAccountWithSendEtherInfo, getNetworkIdentifier, transactionFeeSelector, getKnownMethodData, getRpcPrefsForCurrentProvider, getCustomTokenAmount, getUnapprovedTxCount, getUnapprovedTransactions, getUseCurrencyRateCheck, } from '../../selectors'; import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network'; import { cancelTx, cancelTxs, showModal, updateAndApproveTx, updateCustomNonce, } from '../../store/actions'; import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck'; import { getMostRecentOverviewPage } from '../../ducks/history/history'; import ApproveContentCard from '../../components/app/approve-content-card/approve-content-card'; import CustomSpendingCap from '../../components/app/custom-spending-cap/custom-spending-cap'; import Dialog from '../../components/ui/dialog'; import { useGasFeeContext } from '../../contexts/gasFee'; import { getCustomTxParamsData } from '../confirm-approve/confirm-approve.util'; import { setCustomTokenAmount } from '../../ducks/app/app'; import { valuesFor } from '../../helpers/utils/util'; import { calcTokenAmount } from '../../../shared/lib/transactions-controller-utils'; import { MAX_TOKEN_ALLOWANCE_AMOUNT, NUM_W_OPT_DECIMAL_COMMA_OR_DOT_REGEX, } from '../../../shared/constants/tokens'; import { ConfirmPageContainerNavigation } from '../../components/app/confirm-page-container'; import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning'; import SimulationErrorMessage from '../../components/ui/simulation-error-message'; import { Icon, ICON_NAMES } from '../../components/component-library'; export default function TokenAllowance({ origin, siteImage, showCustomizeGasModal, useNonceField, currentCurrency, nativeCurrency, ethTransactionTotal, fiatTransactionTotal, hexTransactionTotal, txData, isMultiLayerFeeNetwork, supportsEIP1559, userAddress, tokenAddress, data, isSetApproveForAll, isApprovalOrRejection, decimals, dappProposedTokenAmount, currentTokenBalance, toAddress, tokenSymbol, }) { const t = useContext(I18nContext); const dispatch = useDispatch(); const history = useHistory(); const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage); const [showContractDetails, setShowContractDetails] = useState(false); const [showFullTxDetails, setShowFullTxDetails] = useState(false); const [isFirstPage, setIsFirstPage] = useState( dappProposedTokenAmount !== '0', ); const [errorText, setErrorText] = useState(''); const [userAcknowledgedGasMissing, setUserAcknowledgedGasMissing] = useState(false); const renderSimulationFailureWarning = useSimulationFailureWarning( userAcknowledgedGasMissing, ); const currentAccount = useSelector(getCurrentAccountWithSendEtherInfo); const networkIdentifier = useSelector(getNetworkIdentifier); const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); const customTokenAmount = useSelector(getCustomTokenAmount); const unapprovedTxCount = useSelector(getUnapprovedTxCount); const unapprovedTxs = useSelector(getUnapprovedTransactions); const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck); const replaceCommaToDot = (inputValue) => { return inputValue.replace(/,/gu, '.'); }; let customPermissionAmount = NUM_W_OPT_DECIMAL_COMMA_OR_DOT_REGEX.test( customTokenAmount, ) ? replaceCommaToDot(customTokenAmount).toString() : '0'; const maxTokenAmount = calcTokenAmount(MAX_TOKEN_ALLOWANCE_AMOUNT, decimals); if (customTokenAmount.length > 1 && Number(customTokenAmount)) { const customSpendLimitNumber = new BigNumber(customTokenAmount); if (customSpendLimitNumber.greaterThan(maxTokenAmount)) { customPermissionAmount = 0; } } const customTxParamsData = customPermissionAmount ? getCustomTxParamsData(data, { customPermissionAmount, decimals, }) : null; let fullTxData = { ...txData }; if (customTxParamsData) { fullTxData = { ...fullTxData, txParams: { ...fullTxData.txParams, data: customTxParamsData, }, }; } const fee = useSelector((state) => transactionFeeSelector(state, fullTxData)); const methodData = useSelector((state) => getKnownMethodData(state, data)); const { balanceError } = useGasFeeContext(); const disableNextButton = isFirstPage && (customTokenAmount === '' || errorText !== ''); const disableApproveButton = !isFirstPage && balanceError; const networkName = NETWORK_TO_NAME_MAP[fullTxData.chainId] || networkIdentifier; const customNonceValue = ''; const customNonceMerge = (transactionData) => customNonceValue ? { ...transactionData, customNonceValue, } : transactionData; const handleReject = () => { dispatch(updateCustomNonce('')); dispatch(setCustomTokenAmount('')); dispatch(cancelTx(fullTxData)).then(() => { dispatch(clearConfirmTransaction()); history.push(mostRecentOverviewPage); }); }; const handleApprove = () => { const { name } = methodData; if (fee.gasEstimationObject.baseFeePerGas) { fullTxData.estimatedBaseFee = fee.gasEstimationObject.baseFeePerGas; } if (name) { fullTxData.contractMethodName = name; } if (dappProposedTokenAmount) { fullTxData.dappProposedTokenAmount = dappProposedTokenAmount; fullTxData.originalApprovalAmount = dappProposedTokenAmount; } if (customTokenAmount) { fullTxData.customTokenAmount = customTokenAmount; fullTxData.finalApprovalAmount = customTokenAmount; } else if (dappProposedTokenAmount !== undefined) { fullTxData.finalApprovalAmount = dappProposedTokenAmount; } if (currentTokenBalance) { fullTxData.currentTokenBalance = currentTokenBalance; } dispatch(updateCustomNonce('')); dispatch(updateAndApproveTx(customNonceMerge(fullTxData))).then(() => { dispatch(clearConfirmTransaction()); history.push(mostRecentOverviewPage); }); }; const handleNextClick = () => { setShowFullTxDetails(false); setIsFirstPage(false); }; const handleBackClick = () => { setShowFullTxDetails(false); setIsFirstPage(true); }; const handleCancelAll = () => { dispatch( showModal({ name: 'REJECT_TRANSACTIONS', unapprovedTxCount, onSubmit: async () => { await dispatch(cancelTxs(valuesFor(unapprovedTxs))); dispatch(clearConfirmTransaction()); history.push(mostRecentOverviewPage); }, }), ); }; const isEmpty = customTokenAmount === ''; const renderContractTokenValues = ( ); return ( {!isFirstPage && ( )} {isFirstPage ? 1 : 2} {t('ofTextNofM')} 2 {origin} {isFirstPage ? ( t('setSpendingCap', [renderContractTokenValues]) ) : ( {customTokenAmount === '0' || isEmpty ? ( t('revokeSpendingCap', [renderContractTokenValues]) ) : ( {t('reviewSpendingCap')} {renderContractTokenValues} )} )} {isFirstPage ? ( setErrorText(value)} decimals={decimals} /> ) : ( handleBackClick()} /> )} {!isFirstPage && balanceError && ( {t('insufficientFundsForGas')} )} {!isFirstPage && ( {renderSimulationFailureWarning && ( setUserAcknowledgedGasMissing(true) } /> )} } title={t('transactionFee')} showEdit showAdvanceGasFeeOptions onEditClick={showCustomizeGasModal} renderTransactionDetailsContent noBorder={useNonceField || !showFullTxDetails} supportsEIP1559={supportsEIP1559} isMultiLayerFeeNetwork={isMultiLayerFeeNetwork} ethTransactionTotal={ethTransactionTotal} nativeCurrency={nativeCurrency} fullTxData={fullTxData} userAcknowledgedGasMissing={userAcknowledgedGasMissing} renderSimulationFailureWarning={renderSimulationFailureWarning} hexTransactionTotal={hexTransactionTotal} fiatTransactionTotal={fiatTransactionTotal} currentCurrency={currentCurrency} useCurrencyRateCheck={useCurrencyRateCheck} /> )} {showFullTxDetails ? ( } title={t('data')} renderDataContent noBorder supportsEIP1559={supportsEIP1559} isSetApproveForAll={isSetApproveForAll} fullTxData={fullTxData} userAcknowledgedGasMissing={userAcknowledgedGasMissing} renderSimulationFailureWarning={renderSimulationFailureWarning} isApprovalOrRejection={isApprovalOrRejection} data={customTxParamsData || data} useCurrencyRateCheck={useCurrencyRateCheck} /> ) : null} handleReject()} onSubmit={() => (isFirstPage ? handleNextClick() : handleApprove())} disabled={disableNextButton || disableApproveButton} > {unapprovedTxCount > 1 && ( )} {showContractDetails && ( setShowContractDetails(false)} tokenAddress={tokenAddress} toAddress={toAddress} chainId={fullTxData.chainId} rpcPrefs={rpcPrefs} /> )} ); } TokenAllowance.propTypes = { /** * Dapp URL */ origin: PropTypes.string, /** * Dapp image */ siteImage: PropTypes.string, /** * Function that is supposed to open the customized gas modal */ showCustomizeGasModal: PropTypes.func, /** * Whether nonce field should be used or not */ useNonceField: PropTypes.bool, /** * Current fiat currency (e.g. USD) */ currentCurrency: PropTypes.string, /** * Current native currency (e.g. RopstenETH) */ nativeCurrency: PropTypes.string, /** * Total sum of the transaction in native currency */ ethTransactionTotal: PropTypes.string, /** * Total sum of the transaction in fiat currency */ fiatTransactionTotal: PropTypes.string, /** * Total sum of the transaction converted to hex value */ hexTransactionTotal: PropTypes.string, /** * Current transaction */ txData: PropTypes.object, /** * Is multi-layer fee network or not */ isMultiLayerFeeNetwork: PropTypes.bool, /** * Is the enhanced gas fee enabled or not */ supportsEIP1559: PropTypes.bool, /** * User's address */ userAddress: PropTypes.string, /** * Address of the token that is waiting to be allowed */ tokenAddress: PropTypes.string, /** * Current transaction data */ data: PropTypes.string, /** * Is set approve for all or not */ isSetApproveForAll: PropTypes.bool, /** * Whether a current set approval for all transaction will approve or revoke access */ isApprovalOrRejection: PropTypes.bool, /** * Number of decimals */ decimals: PropTypes.string, /** * Token amount proposed by the Dapp */ dappProposedTokenAmount: PropTypes.string, /** * Token balance of the current account */ currentTokenBalance: PropTypes.string, /** * Contract address requesting spending cap */ toAddress: PropTypes.string, /** * Symbol of the token that is waiting to be allowed */ tokenSymbol: PropTypes.string, };