diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index dfeedf357..27deab5fc 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -690,11 +690,19 @@ "message": "This network requires a “Gas price” field when submitting a transaction. Gas price is the amount you will pay pay per unit of gas." }, "editGasSubTextAmount": { - "message": "Max amount: $1", - "description": "$1 represents a dollar amount" + "message": "$1 $2", + "description": "$1 will be passed the editGasSubTextAmountLabel and $2 will be passed the amount in either cryptocurrency or fiat" + }, + "editGasSubTextAmountLabel": { + "message": "Max amount:", + "description": "This is meant to be used as the $1 substitution editGasSubTextAmount" }, "editGasSubTextFee": { - "message": "Max fee: $1", + "message": "$1 $2", + "description": "$1 will be passed the editGasSubTextFeeLabel and $2 will be passed the fee amount in either cryptocurrency or fiat" + }, + "editGasSubTextFeeLabel": { + "message": "Max fee:", "description": "$1 represents a dollar amount" }, "editGasTitle": { diff --git a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js index 557b6c237..90180b23e 100644 --- a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js +++ b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js @@ -20,9 +20,11 @@ export default function ConfirmTokenTransactionBase({ tokenSymbol, fiatTransactionTotal, ethTransactionTotal, + ethTransactionTotalMaxAmount, contractExchangeRate, conversionRate, currentCurrency, + nativeCurrency, onEdit, }) { const t = useContext(I18nContext); @@ -85,13 +87,8 @@ export default function ConfirmTokenTransactionBase({ /> ) } - primaryTotalTextOverride={ -
- {`${tokensText} + `} - - {ethTransactionTotal} -
- } + primaryTotalTextOverride={`${tokensText} + ${ethTransactionTotal} ${nativeCurrency}`} + primaryTotalTextOverrideMaxAmount={`${tokensText} + ${ethTransactionTotalMaxAmount} ${nativeCurrency}`} secondaryTotalTextOverride={secondaryTotalTextOverride} /> ); @@ -108,4 +105,6 @@ ConfirmTokenTransactionBase.propTypes = { conversionRate: PropTypes.number, currentCurrency: PropTypes.string, onEdit: PropTypes.func, + nativeCurrency: PropTypes.string, + ethTransactionTotalMaxAmount: PropTypes.string, }; diff --git a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js index 2d7bbde85..58c093bea 100644 --- a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js +++ b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js @@ -12,6 +12,8 @@ import { getTokenAddressParam, getTokenValueParam, } from '../../helpers/utils/token-util'; +import { hexWEIToDecETH } from '../../helpers/utils/conversions.util'; +import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util'; import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component'; const mapStateToProps = (state, ownProps) => { @@ -21,16 +23,30 @@ const mapStateToProps = (state, ownProps) => { const { id: paramsTransactionId } = params; const { confirmTransaction, - metamask: { currentCurrency, conversionRate, currentNetworkTxList }, + metamask: { + currentCurrency, + conversionRate, + currentNetworkTxList, + nativeCurrency, + }, } = state; const { txData: { id: transactionId, - txParams: { to: tokenAddress, data } = {}, + txParams: { to: tokenAddress, data, maxFeePerGas, gasPrice, gas } = {}, } = {}, } = confirmTransaction; + const ethTransactionTotalMaxAmount = Number( + hexWEIToDecETH( + getHexGasTotal({ + gasPrice: maxFeePerGas ?? gasPrice, + gasLimit: gas, + }), + ), + ).toFixed(6); + const transaction = currentNetworkTxList.find( ({ id }) => id === (Number(paramsTransactionId) || transactionId), @@ -61,6 +77,8 @@ const mapStateToProps = (state, ownProps) => { contractExchangeRate, fiatTransactionTotal, ethTransactionTotal, + ethTransactionTotalMaxAmount, + nativeCurrency, }; }; diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index f1bb14ba5..c26671323 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -108,6 +108,8 @@ export default class ConfirmTransactionBase extends Component { primaryTotalTextOverride: PropTypes.string, secondaryTotalTextOverride: PropTypes.string, gasIsLoading: PropTypes.bool, + primaryTotalTextOverrideMaxAmount: PropTypes.string, + useNativeCurrencyAsPrimaryCurrency: PropTypes.bool, }; state = { @@ -280,6 +282,9 @@ export default class ConfirmTransactionBase extends Component { nextNonce, getNextNonce, txData, + useNativeCurrencyAsPrimaryCurrency, + hexMaximumTransactionFee, + primaryTotalTextOverrideMaxAmount, } = this.props; const { t } = this.context; @@ -291,6 +296,70 @@ export default class ConfirmTransactionBase extends Component { } }; + const renderTotalMaxAmount = () => { + if ( + primaryTotalTextOverrideMaxAmount === undefined && + secondaryTotalTextOverride === undefined + ) { + // Native Send + return ( + + ); + } + + // Token send + return useNativeCurrencyAsPrimaryCurrency + ? primaryTotalTextOverrideMaxAmount + : secondaryTotalTextOverride; + }; + + const renderTotalDetailTotal = () => { + if ( + primaryTotalTextOverride === undefined && + secondaryTotalTextOverride === undefined + ) { + return ( + + ); + } + return useNativeCurrencyAsPrimaryCurrency + ? primaryTotalTextOverride + : secondaryTotalTextOverride; + }; + + const renderTotalDetailText = () => { + if ( + primaryTotalTextOverride === undefined && + secondaryTotalTextOverride === undefined + ) { + return ( + + ); + } + return useNativeCurrencyAsPrimaryCurrency + ? secondaryTotalTextOverride + : primaryTotalTextOverride; + }; + const nonceField = useNonceField ? (
@@ -372,35 +441,29 @@ export default class ConfirmTransactionBase extends Component { } detailText={ } detailTotal={ } - subText={ - - {t('editGasSubTextFee', [ - , - ])} - - } + subText={t('editGasSubTextFee', [ + + {t('editGasSubTextFeeLabel')} + , + , + ])} subTitle={ , - } - detailTotal={ - - } - subTitle={ - secondaryTotalTextOverride || - t('transactionDetailGasTotalSubtitle') - } - subText={ - - {t('editGasSubTextAmount', [ - , - ])} - - } + detailTitle={t('total')} + detailText={renderTotalDetailText()} + detailTotal={renderTotalDetailTotal()} + subTitle={t('transactionDetailGasTotalSubtitle')} + subText={t('editGasSubTextAmount', [ + + {t('editGasSubTextAmountLabel')} + , + renderTotalMaxAmount(), + ])} />, ]} /> diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js index 561ee28ec..4c8120553 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -28,6 +28,7 @@ import { getIsEthGasPriceFetched, getShouldShowFiat, checkNetworkAndAccountSupports1559, + getPreferences, } from '../../selectors'; import { getMostRecentOverviewPage } from '../../ducks/history/history'; import { transactionMatchesNetwork } from '../../../shared/modules/transaction.utils'; @@ -152,7 +153,7 @@ const mapStateToProps = (state, ownProps) => { customNonceValue = getCustomNonceValue(state); const isEthGasPrice = getIsEthGasPriceFetched(state); const noGasPrice = getNoGasPriceFetched(state); - + const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state); return { balance, fromAddress, @@ -194,6 +195,7 @@ const mapStateToProps = (state, ownProps) => { noGasPrice, supportsEIP1599, gasIsLoading: isGasEstimatesLoading || gasLoadingAnimationIsShowing, + useNativeCurrencyAsPrimaryCurrency, }; };