import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { EDIT_GAS_MODES } from '../../../../shared/constants/gas'; import { GasFeeContextProvider } from '../../../contexts/gasFee'; import { ERC1155, ERC20, ERC721, TRANSACTION_TYPES, } from '../../../../shared/constants/transaction'; import { NETWORK_TO_NAME_MAP } from '../../../../shared/constants/network'; import { PageContainerFooter } from '../../ui/page-container'; import Dialog from '../../ui/dialog'; import Button from '../../ui/button'; import ActionableMessage from '../../ui/actionable-message/actionable-message'; import SenderToRecipient from '../../ui/sender-to-recipient'; import NicknamePopovers from '../modals/nickname-popovers'; import AdvancedGasFeePopover from '../advanced-gas-fee-popover'; import EditGasFeePopover from '../edit-gas-fee-popover/edit-gas-fee-popover'; import EditGasPopover from '../edit-gas-popover'; import ErrorMessage from '../../ui/error-message'; import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys'; import Typography from '../../ui/typography'; import { TYPOGRAPHY } from '../../../helpers/constants/design-system'; import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header'; import DepositPopover from '../deposit-popover/deposit-popover'; import { fetchTokenBalance } from '../../../pages/swaps/swaps.util'; import SetApproveForAllWarning from '../set-approval-for-all-warning'; import EnableEIP1559V2Notice from './enableEIP1559V2-notice'; import { ConfirmPageContainerHeader, ConfirmPageContainerContent, ConfirmPageContainerNavigation, } from '.'; export default class ConfirmPageContainer extends Component { state = { showNicknamePopovers: false, setShowDepositPopover: false, collectionBalance: 0, }; static contextTypes = { t: PropTypes.func, }; static propTypes = { // Header action: PropTypes.string, hideSubtitle: PropTypes.bool, onEdit: PropTypes.func, showEdit: PropTypes.bool, subtitleComponent: PropTypes.node, title: PropTypes.string, image: PropTypes.string, titleComponent: PropTypes.node, hideSenderToRecipient: PropTypes.bool, showAccountInHeader: PropTypes.bool, accountBalance: PropTypes.string, assetStandard: PropTypes.string, // Sender to Recipient fromAddress: PropTypes.string, fromName: PropTypes.string, toAddress: PropTypes.string, toName: PropTypes.string, toMetadataName: PropTypes.string, toEns: PropTypes.string, toNickname: PropTypes.string, // Content contentComponent: PropTypes.node, errorKey: PropTypes.string, errorMessage: PropTypes.string, dataComponent: PropTypes.node, dataHexComponent: PropTypes.node, detailsComponent: PropTypes.node, ///: BEGIN:ONLY_INCLUDE_IN(flask) insightComponent: PropTypes.node, ///: END:ONLY_INCLUDE_IN tokenAddress: PropTypes.string, nonce: PropTypes.string, warning: PropTypes.string, unapprovedTxCount: PropTypes.number, origin: PropTypes.string.isRequired, ethGasPriceWarning: PropTypes.string, networkIdentifier: PropTypes.string, // Navigation totalTx: PropTypes.number, positionOfCurrentTx: PropTypes.number, nextTxId: PropTypes.string, prevTxId: PropTypes.string, showNavigation: PropTypes.bool, onNextTx: PropTypes.func, firstTx: PropTypes.string, lastTx: PropTypes.string, ofText: PropTypes.string, requestsWaitingText: PropTypes.string, // Footer onCancelAll: PropTypes.func, onCancel: PropTypes.func, onSubmit: PropTypes.func, onSetApprovalForAll: PropTypes.func, showWarningModal: PropTypes.bool, disabled: PropTypes.bool, editingGas: PropTypes.bool, handleCloseEditGas: PropTypes.func, // Gas Popover currentTransaction: PropTypes.object.isRequired, contact: PropTypes.object, isOwnedAccount: PropTypes.bool, supportsEIP1559V2: PropTypes.bool, nativeCurrency: PropTypes.string, isBuyableChain: PropTypes.bool, }; async componentDidMount() { const { tokenAddress, fromAddress, currentTransaction, assetStandard } = this.props; const isSetApproveForAll = currentTransaction.type === TRANSACTION_TYPES.TOKEN_METHOD_SET_APPROVAL_FOR_ALL; if (isSetApproveForAll && assetStandard === ERC721) { const tokenBalance = await fetchTokenBalance(tokenAddress, fromAddress); this.setState({ collectionBalance: tokenBalance?.balance?.words?.[0] || 0, }); } } render() { const { showEdit, onEdit, fromName, fromAddress, toName, toMetadataName, toEns, toNickname, toAddress, disabled, errorKey, errorMessage, contentComponent, action, title, image, titleComponent, subtitleComponent, hideSubtitle, detailsComponent, dataComponent, dataHexComponent, onCancelAll, onCancel, onSubmit, onSetApprovalForAll, showWarningModal, tokenAddress, nonce, unapprovedTxCount, warning, totalTx, positionOfCurrentTx, nextTxId, prevTxId, showNavigation, onNextTx, firstTx, lastTx, ofText, requestsWaitingText, hideSenderToRecipient, showAccountInHeader, origin, ethGasPriceWarning, editingGas, handleCloseEditGas, currentTransaction, contact = {}, isOwnedAccount, supportsEIP1559V2, nativeCurrency, isBuyableChain, networkIdentifier, ///: BEGIN:ONLY_INCLUDE_IN(flask) insightComponent, ///: END:ONLY_INCLUDE_IN accountBalance, assetStandard, } = this.props; const showAddToAddressDialog = !contact.name && toAddress && !isOwnedAccount && !hideSenderToRecipient; const shouldDisplayWarning = contentComponent && disabled && (errorKey || errorMessage); const hideTitle = (currentTransaction.type === TRANSACTION_TYPES.CONTRACT_INTERACTION || currentTransaction.type === TRANSACTION_TYPES.DEPLOY_CONTRACT) && currentTransaction.txParams?.value === '0x0'; const networkName = NETWORK_TO_NAME_MAP[currentTransaction.chainId] || networkIdentifier; const isSetApproveForAll = currentTransaction.type === TRANSACTION_TYPES.TOKEN_METHOD_SET_APPROVAL_FOR_ALL; const { setShowDepositPopover } = this.state; const { t } = this.context; return (
onNextTx(txId)} firstTx={firstTx} lastTx={lastTx} ofText={ofText} requestsWaitingText={requestsWaitingText} /> {assetStandard === ERC20 || assetStandard === ERC721 || assetStandard === ERC1155 ? ( ) : ( onEdit()} showAccountInHeader={showAccountInHeader} accountAddress={fromAddress} > {hideSenderToRecipient ? null : ( )} )}
{showAddToAddressDialog && ( <> this.setState({ showNicknamePopovers: true })} > {t('newAccountDetectedDialogMessage')} {this.state.showNicknamePopovers ? ( this.setState({ showNicknamePopovers: false }) } address={toAddress} /> ) : null} )}
{contentComponent || ( )} {shouldDisplayWarning && errorKey === INSUFFICIENT_FUNDS_ERROR_KEY && (
{t('insufficientCurrencyBuyOrDeposit', [ nativeCurrency, networkName, , ])} ) : ( {t('insufficientCurrencyDeposit', [ nativeCurrency, networkName, ])} ) } useIcon iconFillColor="var(--color-error-default)" type="danger" />
)} {setShowDepositPopover && ( this.setState({ setShowDepositPopover: false })} /> )} {shouldDisplayWarning && errorKey !== INSUFFICIENT_FUNDS_ERROR_KEY && (
)} {showWarningModal && ( )} {contentComponent && ( {unapprovedTxCount > 1 && ( {t('rejectTxsN', [unapprovedTxCount])} )} )} {editingGas && !supportsEIP1559V2 && ( )} {supportsEIP1559V2 && ( <> )}
); } }