import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import copyToClipboard from 'copy-to-clipboard'; import { getTokenTrackerLink, getAccountLink } from '@metamask/etherscan-link'; import UrlIcon from '../../../components/ui/url-icon'; import { addressSummary } from '../../../helpers/utils/util'; import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'; import { ellipsify } from '../../send/send.utils'; import Typography from '../../../components/ui/typography'; import Box from '../../../components/ui/box'; import Button from '../../../components/ui/button'; import EditGasFeeButton from '../../../components/app/edit-gas-fee-button'; import Identicon from '../../../components/ui/identicon'; import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message'; import CopyIcon from '../../../components/ui/icon/copy-icon.component'; import { TYPOGRAPHY, FONT_WEIGHT, BLOCK_SIZES, JUSTIFY_CONTENT, COLORS, DISPLAY, } from '../../../helpers/constants/design-system'; import { SECOND } from '../../../../shared/constants/time'; import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content'; import GasDetailsItem from '../../../components/app/gas-details-item'; import LedgerInstructionField from '../../../components/app/ledger-instruction-field'; import { ERC1155, ERC20, ERC721, } from '../../../../shared/constants/transaction'; import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network'; import ContractDetailsModal from '../../../components/app/modals/contract-details-modal/contract-details-modal'; export default class ConfirmApproveContent extends Component { static contextTypes = { t: PropTypes.func, }; static propTypes = { decimals: PropTypes.number, tokenAmount: PropTypes.string, customTokenAmount: PropTypes.string, tokenSymbol: PropTypes.string, siteImage: PropTypes.string, showCustomizeGasModal: PropTypes.func, showEditApprovalPermissionModal: PropTypes.func, origin: PropTypes.string, setCustomAmount: PropTypes.func, tokenBalance: PropTypes.string, data: PropTypes.string, toAddress: PropTypes.string, currentCurrency: PropTypes.string, nativeCurrency: PropTypes.string, fiatTransactionTotal: PropTypes.string, ethTransactionTotal: PropTypes.string, useNonceField: PropTypes.bool, customNonceValue: PropTypes.string, updateCustomNonce: PropTypes.func, getNextNonce: PropTypes.func, nextNonce: PropTypes.number, showCustomizeNonceModal: PropTypes.func, warning: PropTypes.string, txData: PropTypes.object, fromAddressIsLedger: PropTypes.bool, chainId: PropTypes.string, tokenAddress: PropTypes.string, rpcPrefs: PropTypes.object, isContract: PropTypes.bool, hexTransactionTotal: PropTypes.string, isMultiLayerFeeNetwork: PropTypes.bool, supportsEIP1559V2: PropTypes.bool, assetName: PropTypes.string, tokenId: PropTypes.string, assetStandard: PropTypes.string, isSetApproveForAll: PropTypes.bool, isApprovalOrRejection: PropTypes.bool, userAddress: PropTypes.string, }; state = { showFullTxDetails: false, copied: false, setshowContractDetails: false, }; renderApproveContentCard({ showHeader = true, symbol, title, showEdit, showAdvanceGasFeeOptions = false, onEditClick, content, footer, noBorder, }) { const { supportsEIP1559V2 } = this.props; const { t } = this.context; return (
{showHeader && (
{supportsEIP1559V2 && title === t('transactionFee') ? null : ( <>
{symbol}
{title}
)} {showEdit && (!showAdvanceGasFeeOptions || !supportsEIP1559V2) && ( )} {showEdit && showAdvanceGasFeeOptions && supportsEIP1559V2 && ( )}
)}
{content}
{footer}
); } // TODO: Add "Learn Why" with link to the feeAssociatedRequest text renderTransactionDetailsContent() { const { t } = this.context; const { currentCurrency, nativeCurrency, ethTransactionTotal, fiatTransactionTotal, hexTransactionTotal, txData, isMultiLayerFeeNetwork, supportsEIP1559V2, } = this.props; if (!isMultiLayerFeeNetwork && supportsEIP1559V2) { return ; } return (
{isMultiLayerFeeNetwork ? (
{t('transactionDetailLayer2GasHeading')} {`${ethTransactionTotal} ${nativeCurrency}`}
) : ( <>
{t('feeAssociatedRequest')}
{formatCurrency(fiatTransactionTotal, currentCurrency)}
{`${ethTransactionTotal} ${nativeCurrency}`}
)}
); } renderERC721OrERC1155PermissionContent() { const { t } = this.context; const { origin, toAddress, isContract, isSetApproveForAll } = this.props; const titleTokenDescription = this.getTitleTokenDescription(); const displayedAddress = isContract ? `${t('contract')} (${addressSummary(toAddress)})` : addressSummary(toAddress); return (
{t('accessAndSpendNoticeNFT', [origin])}
{t('approvedAsset')}:
{isSetApproveForAll ? t('allOfYour', [titleTokenDescription]) : titleTokenDescription}
{t('grantedToWithColon')}
{displayedAddress}
); } renderERC20PermissionContent() { const { t } = this.context; const { customTokenAmount, tokenAmount, tokenSymbol, origin, toAddress, isContract, } = this.props; const displayedAddress = isContract ? `${t('contract')} (${addressSummary(toAddress)})` : addressSummary(toAddress); return (
{t('accessAndSpendNotice', [origin])}
{t('approvedAmountWithColon')}
{`${Number(customTokenAmount || tokenAmount)} ${tokenSymbol}`}
{t('grantedToWithColon')}
{`${displayedAddress}`}
); } renderDataContent() { const { t } = this.context; const { data, isSetApproveForAll, isApprovalOrRejection } = this.props; return (
{isSetApproveForAll ? t('functionSetApprovalForAll') : t('functionApprove')}
{isSetApproveForAll && isApprovalOrRejection !== undefined ? (
{`${t('parameters')}: ${isApprovalOrRejection}`}
) : null}
{data}
); } renderFullDetails() { const { t } = this.context; const { assetStandard, showEditApprovalPermissionModal, customTokenAmount, tokenAmount, decimals, origin, setCustomAmount, tokenSymbol, tokenBalance, } = this.props; if (assetStandard === ERC20) { return (
{this.renderApproveContentCard({ symbol: , title: t('permissionRequest'), content: this.renderERC20PermissionContent(), showEdit: true, onEditClick: () => showEditApprovalPermissionModal({ customTokenAmount, decimals, origin, setCustomAmount, tokenAmount, tokenSymbol, tokenBalance, }), })}
{this.renderApproveContentCard({ symbol: , title: 'Data', content: this.renderDataContent(), noBorder: true, })}
); } else if (assetStandard === ERC721 || assetStandard === ERC1155) { return (
{this.renderApproveContentCard({ symbol: , title: t('permissionRequest'), content: this.renderERC721OrERC1155PermissionContent(), showEdit: false, })}
{this.renderApproveContentCard({ symbol: , title: t('data'), content: this.renderDataContent(), noBorder: true, })}
); } return null; } renderCustomNonceContent() { const { t } = this.context; const { useNonceField, customNonceValue, updateCustomNonce, getNextNonce, nextNonce, showCustomizeNonceModal, } = this.props; return ( <> {useNonceField && (
{t('nonce')} {customNonceValue || nextNonce}
)} ); } getTokenName() { const { tokenId, assetName, assetStandard, tokenSymbol, isSetApproveForAll, } = this.props; const { t } = this.context; let titleTokenDescription = t('token'); if ( assetStandard === ERC20 || (tokenSymbol && !tokenId && !isSetApproveForAll) ) { titleTokenDescription = tokenSymbol; } else if ( assetStandard === ERC721 || assetStandard === ERC1155 || // if we don't have an asset standard but we do have either both an assetname and a tokenID or both a tokenSymbol and tokenId we assume its an NFT (assetName && tokenId) || (tokenSymbol && tokenId) ) { if (assetName || tokenSymbol) { titleTokenDescription = `${assetName ?? tokenSymbol}`; } else { titleTokenDescription = t('nft'); } } return titleTokenDescription; } getTitleTokenDescription() { const { tokenId, tokenAddress, rpcPrefs, chainId, userAddress } = this.props; const useBlockExplorer = rpcPrefs?.blockExplorerUrl || [...TEST_CHAINS, CHAIN_IDS.MAINNET].includes(chainId); const titleTokenDescription = this.getTokenName(); const tokenIdWrapped = tokenId ? ` (#${tokenId})` : ''; if (useBlockExplorer) { const blockExplorerLink = getTokenTrackerLink( tokenAddress, chainId, null, userAddress, { blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null, }, ); const blockExplorerElement = ( <> {titleTokenDescription} {tokenIdWrapped && {tokenIdWrapped}} ); return blockExplorerElement; } return ( <> { copyToClipboard(tokenAddress); }} title={tokenAddress} > {titleTokenDescription} {tokenIdWrapped && {tokenIdWrapped}} ); } renderTitle() { const { t } = this.context; const { assetName, tokenId, tokenSymbol, assetStandard, isSetApproveForAll, isApprovalOrRejection, } = this.props; const titleTokenDescription = this.getTitleTokenDescription(); let title; if (isSetApproveForAll) { title = t('approveAllTokensTitle', [titleTokenDescription]); if (isApprovalOrRejection === false) { title = t('revokeAllTokensTitle', [titleTokenDescription]); } } else if ( assetStandard === ERC721 || assetStandard === ERC1155 || // if we don't have an asset standard but we do have either both an assetname and a tokenID or both a tokenSymbol and tokenId we assume its an NFT (assetName && tokenId) || (tokenSymbol && tokenId) ) { title = t('approveTokenTitle', [titleTokenDescription]); } return title || t('allowSpendToken', [titleTokenDescription]); } renderDescription() { const { t } = this.context; const { assetStandard, assetName, tokenId, tokenSymbol, isContract, isSetApproveForAll, isApprovalOrRejection, } = this.props; const grantee = isContract ? t('contract').toLowerCase() : t('account').toLowerCase(); let description = t('trustSiteApprovePermission', [grantee]); if (isSetApproveForAll && isApprovalOrRejection === false) { description = t('revokeApproveForAllDescription', [ grantee, this.getTitleTokenDescription(), ]); } else if ( isSetApproveForAll || assetStandard === ERC721 || assetStandard === ERC1155 || // if we don't have an asset standard but we do have either both an assetname and a tokenID or both a tokenSymbol and tokenId we assume its an NFT (assetName && tokenId) || (tokenSymbol && tokenId) ) { description = t('approveTokenDescription'); } return description; } render() { const { t } = this.context; const { decimals, siteImage, tokenAmount, customTokenAmount, origin, tokenSymbol, showCustomizeGasModal, showEditApprovalPermissionModal, setCustomAmount, tokenBalance, useNonceField, warning, txData, fromAddressIsLedger, toAddress, chainId, rpcPrefs, isContract, assetStandard, userAddress, tokenId, tokenAddress, assetName, isSetApproveForAll, } = this.props; const { showFullTxDetails, setshowContractDetails } = this.state; return (
{warning && (
)} {origin}
{this.renderTitle()}
{this.renderDescription()}
{assetStandard === ERC20 || (tokenSymbol && !tokenId && !isSetApproveForAll) ? ( {ellipsify(toAddress)} ) : ( {setshowContractDetails && ( this.setState({ setshowContractDetails: false })} tokenName={tokenSymbol} tokenAddress={tokenAddress} toAddress={toAddress} chainId={chainId} rpcPrefs={rpcPrefs} tokenId={tokenId} assetName={assetName} assetStandard={assetStandard} /> )} )} {assetStandard === ERC20 ? (
showEditApprovalPermissionModal({ customTokenAmount, decimals, origin, setCustomAmount, tokenAmount, tokenSymbol, tokenBalance, }) } > {t('editPermission')}
) : null}
{this.renderApproveContentCard({ symbol: , title: t('transactionFee'), showEdit: true, showAdvanceGasFeeOptions: true, onEditClick: showCustomizeGasModal, content: this.renderTransactionDetailsContent(), noBorder: useNonceField || !showFullTxDetails, footer: !useNonceField && (
this.setState({ showFullTxDetails: !this.state.showFullTxDetails, }) } >
{this.state.showFullTxDetails ? t('hideFullTransactionDetails') : t('viewFullTransactionDetails')}
), })} {useNonceField && this.renderApproveContentCard({ showHeader: false, content: this.renderCustomNonceContent(), useNonceField, noBorder: !showFullTxDetails, footer: (
this.setState({ showFullTxDetails: !this.state.showFullTxDetails, }) } >
{this.state.showFullTxDetails ? t('hideFullTransactionDetails') : t('viewFullTransactionDetails')}
), })}
{fromAddressIsLedger ? (
) : null} {showFullTxDetails ? this.renderFullDetails() : null}
); } }