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,
};
};