import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app'; import { getEnvironmentType } from '../../../app/scripts/lib/util'; import ConfirmPageContainer, { ConfirmDetailRow, } from '../../components/app/confirm-page-container'; import { isBalanceSufficient } from '../send/send.utils'; import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE, } from '../../helpers/constants/routes'; import { INSUFFICIENT_FUNDS_ERROR_KEY, TRANSACTION_ERROR_KEY, GAS_LIMIT_TOO_LOW_ERROR_KEY, ETH_GAS_PRICE_FETCH_WARNING_KEY, GAS_PRICE_FETCH_FAILURE_ERROR_KEY, } from '../../helpers/constants/error-keys'; import UserPreferencedCurrencyDisplay from '../../components/app/user-preferenced-currency-display'; import { PRIMARY, SECONDARY } from '../../helpers/constants/common'; import { hexToDecimal } from '../../helpers/utils/conversions.util'; import AdvancedGasInputs from '../../components/app/gas-customization/advanced-gas-inputs'; import TextField from '../../components/ui/text-field'; import { TRANSACTION_TYPES, TRANSACTION_STATUSES, } from '../../../shared/constants/transaction'; import { getTransactionTypeTitle } from '../../helpers/utils/transactions.util'; import ErrorMessage from '../../components/ui/error-message'; import { toBuffer } from '../../../shared/modules/buffer-utils'; export default class ConfirmTransactionBase extends Component { static contextTypes = { t: PropTypes.func, metricsEvent: PropTypes.func, }; static propTypes = { // react-router props history: PropTypes.object, // Redux props balance: PropTypes.string, cancelTransaction: PropTypes.func, cancelAllTransactions: PropTypes.func, clearConfirmTransaction: PropTypes.func, conversionRate: PropTypes.number, fromAddress: PropTypes.string, fromName: PropTypes.string, hexTransactionAmount: PropTypes.string, hexTransactionFee: PropTypes.string, hexTransactionTotal: PropTypes.string, isTxReprice: PropTypes.bool, methodData: PropTypes.object, nonce: PropTypes.string, useNonceField: PropTypes.bool, customNonceValue: PropTypes.string, updateCustomNonce: PropTypes.func, assetImage: PropTypes.string, sendTransaction: PropTypes.func, showCustomizeGasModal: PropTypes.func, showTransactionConfirmedModal: PropTypes.func, showRejectTransactionsConfirmationModal: PropTypes.func, toAddress: PropTypes.string, tokenData: PropTypes.object, tokenProps: PropTypes.object, toName: PropTypes.string, toEns: PropTypes.string, toNickname: PropTypes.string, transactionStatus: PropTypes.string, txData: PropTypes.object, unapprovedTxCount: PropTypes.number, currentNetworkUnapprovedTxs: PropTypes.object, updateGasAndCalculate: PropTypes.func, customGas: PropTypes.object, // Component props actionKey: PropTypes.string, contentComponent: PropTypes.node, dataComponent: PropTypes.node, primaryTotalTextOverride: PropTypes.oneOfType([ PropTypes.string, PropTypes.node, ]), secondaryTotalTextOverride: PropTypes.string, hideData: PropTypes.bool, hideSubtitle: PropTypes.bool, identiconAddress: PropTypes.string, onEdit: PropTypes.func, subtitleComponent: PropTypes.node, title: PropTypes.string, advancedInlineGasShown: PropTypes.bool, insufficientBalance: PropTypes.bool, hideFiatConversion: PropTypes.bool, type: PropTypes.string, getNextNonce: PropTypes.func, nextNonce: PropTypes.number, tryReverseResolveAddress: PropTypes.func.isRequired, hideSenderToRecipient: PropTypes.bool, showAccountInHeader: PropTypes.bool, mostRecentOverviewPage: PropTypes.string.isRequired, isMainnet: PropTypes.bool, isEthGasPrice: PropTypes.bool, noGasPrice: PropTypes.bool, setDefaultHomeActiveTabName: PropTypes.func, }; state = { submitting: false, submitError: null, submitWarning: '', ethGasPriceWarning: '', }; componentDidUpdate(prevProps) { const { transactionStatus, showTransactionConfirmedModal, history, clearConfirmTransaction, nextNonce, customNonceValue, toAddress, tryReverseResolveAddress, isEthGasPrice, setDefaultHomeActiveTabName, } = this.props; const { customNonceValue: prevCustomNonceValue, nextNonce: prevNextNonce, toAddress: prevToAddress, transactionStatus: prevTxStatus, isEthGasPrice: prevIsEthGasPrice, } = prevProps; const statusUpdated = transactionStatus !== prevTxStatus; const txDroppedOrConfirmed = transactionStatus === TRANSACTION_STATUSES.DROPPED || transactionStatus === TRANSACTION_STATUSES.CONFIRMED; if ( nextNonce !== prevNextNonce || customNonceValue !== prevCustomNonceValue ) { if (nextNonce !== null && customNonceValue > nextNonce) { this.setState({ submitWarning: this.context.t('nextNonceWarning', [nextNonce]), }); } else { this.setState({ submitWarning: '' }); } } if (statusUpdated && txDroppedOrConfirmed) { showTransactionConfirmedModal({ onSubmit: () => { clearConfirmTransaction(); setDefaultHomeActiveTabName('Activity').then(() => { history.push(DEFAULT_ROUTE); }); }, }); } if (toAddress && toAddress !== prevToAddress) { tryReverseResolveAddress(toAddress); } if (isEthGasPrice !== prevIsEthGasPrice) { if (isEthGasPrice) { this.setState({ ethGasPriceWarning: this.context.t(ETH_GAS_PRICE_FETCH_WARNING_KEY), }); } else { this.setState({ ethGasPriceWarning: '', }); } } } getErrorKey() { const { balance, conversionRate, hexTransactionFee, txData: { simulationFails, txParams: { value: amount } = {} } = {}, customGas, noGasPrice, } = this.props; const insufficientBalance = balance && !isBalanceSufficient({ amount, gasTotal: hexTransactionFee || '0x0', balance, conversionRate, }); if (insufficientBalance) { return { valid: false, errorKey: INSUFFICIENT_FUNDS_ERROR_KEY, }; } if (hexToDecimal(customGas.gasLimit) < 21000) { return { valid: false, errorKey: GAS_LIMIT_TOO_LOW_ERROR_KEY, }; } if (simulationFails) { return { valid: true, errorKey: simulationFails.errorKey ? simulationFails.errorKey : TRANSACTION_ERROR_KEY, }; } if (noGasPrice) { return { valid: false, errorKey: GAS_PRICE_FETCH_FAILURE_ERROR_KEY, }; } return { valid: true, }; } handleEditGas() { const { showCustomizeGasModal, actionKey, txData: { origin }, methodData = {}, } = this.props; this.context.metricsEvent({ eventOpts: { category: 'Transactions', action: 'Confirm Screen', name: 'User clicks "Edit" on gas', }, customVariables: { recipientKnown: null, functionType: actionKey || getMethodName(methodData.name) || TRANSACTION_TYPES.CONTRACT_INTERACTION, origin, }, }); showCustomizeGasModal(); } renderDetails() { const { primaryTotalTextOverride, secondaryTotalTextOverride, hexTransactionFee, hexTransactionTotal, useNonceField, customNonceValue, updateCustomNonce, advancedInlineGasShown, customGas, insufficientBalance, updateGasAndCalculate, hideFiatConversion, nextNonce, getNextNonce, isMainnet, isEthGasPrice, noGasPrice, } = this.props; const { t } = this.context; const notMainnetOrTest = !(isMainnet || process.env.IN_TEST); const gasPriceFetchFailure = isEthGasPrice || noGasPrice; return (
{JSON.stringify(params, null, 2)}