fix confirm transaction details to match spec (#11779)

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": {

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={
-        <div>
-          <span>{`${tokensText} + `}</span>
-          <img src="./images/eth.svg" height="18" alt="" />
-          <span>{ethTransactionTotal}</span>
-        </div>
-      }
+      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,
 };

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

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 (
+          <UserPreferencedCurrencyDisplay
+            type={PRIMARY}
+            value={addHexes(
+              txData.txParams.value,
+              getHexGasTotal({
+                gasPrice:
+                  txData.txParams.maxFeePerGas ?? txData.txParams.gasPrice,
+                gasLimit: txData.txParams.gas,
+              }),
+            )}
+            hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+          />
+        );
+      }
+
+      // Token send
+      return useNativeCurrencyAsPrimaryCurrency
+        ? primaryTotalTextOverrideMaxAmount
+        : secondaryTotalTextOverride;
+    };
+
+    const renderTotalDetailTotal = () => {
+      if (
+        primaryTotalTextOverride === undefined &&
+        secondaryTotalTextOverride === undefined
+      ) {
+        return (
+          <UserPreferencedCurrencyDisplay
+            type={PRIMARY}
+            value={hexTransactionTotal}
+            hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+          />
+        );
+      }
+      return useNativeCurrencyAsPrimaryCurrency
+        ? primaryTotalTextOverride
+        : secondaryTotalTextOverride;
+    };
+
+    const renderTotalDetailText = () => {
+      if (
+        primaryTotalTextOverride === undefined &&
+        secondaryTotalTextOverride === undefined
+      ) {
+        return (
+          <UserPreferencedCurrencyDisplay
+            type={SECONDARY}
+            value={hexTransactionTotal}
+            hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+          />
+        );
+      }
+      return useNativeCurrencyAsPrimaryCurrency
+        ? secondaryTotalTextOverride
+        : primaryTotalTextOverride;
+    };
+
     const nonceField = useNonceField ? (
       <div>
         <div className="confirm-detail-row">
@@ -372,35 +441,29 @@ export default class ConfirmTransactionBase extends Component {
               }
               detailText={
                 <UserPreferencedCurrencyDisplay
-                  type={PRIMARY}
+                  type={SECONDARY}
                   value={hexMinimumTransactionFee}
-                  hideLabel={false}
+                  hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
                 />
               }
               detailTotal={
                 <UserPreferencedCurrencyDisplay
-                  type={SECONDARY}
+                  type={PRIMARY}
                   value={hexMinimumTransactionFee}
-                  hideLabel
+                  hideLabel={!useNativeCurrencyAsPrimaryCurrency}
                 />
               }
-              subText={
-                <strong>
-                  {t('editGasSubTextFee', [
-                    <UserPreferencedCurrencyDisplay
-                      key="gas-subtext"
-                      type={SECONDARY}
-                      value={getHexGasTotal({
-                        gasPrice:
-                          txData.txParams.maxFeePerGas ??
-                          txData.txParams.gasPrice,
-                        gasLimit: txData.txParams.gas,
-                      })}
-                      hideLabel
-                    />,
-                  ])}
-                </strong>
-              }
+              subText={t('editGasSubTextFee', [
+                <b key="editGasSubTextFeeLabel">
+                  {t('editGasSubTextFeeLabel')}
+                </b>,
+                <UserPreferencedCurrencyDisplay
+                  key="editGasSubTextFeeAmount"
+                  type={PRIMARY}
+                  value={hexMaximumTransactionFee}
+                  hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+                />,
+              ])}
               subTitle={
                 <GasTiming
                   maxPriorityFeePerGas={hexWEIToDecGWEI(
@@ -412,45 +475,16 @@ export default class ConfirmTransactionBase extends Component {
             />,
             <TransactionDetailItem
               key="total-item"
-              detailTitle={primaryTotalTextOverride || t('total')}
-              detailText={
-                <UserPreferencedCurrencyDisplay
-                  type={PRIMARY}
-                  value={hexTransactionTotal}
-                  hideLabel={false}
-                />
-              }
-              detailTotal={
-                <UserPreferencedCurrencyDisplay
-                  type={SECONDARY}
-                  value={hexTransactionTotal}
-                  hideLabel
-                />
-              }
-              subTitle={
-                secondaryTotalTextOverride ||
-                t('transactionDetailGasTotalSubtitle')
-              }
-              subText={
-                <strong>
-                  {t('editGasSubTextAmount', [
-                    <UserPreferencedCurrencyDisplay
-                      key="gas-total-subtext"
-                      type={SECONDARY}
-                      value={addHexes(
-                        txData.txParams.value,
-                        getHexGasTotal({
-                          gasPrice:
-                            txData.txParams.maxFeePerGas ??
-                            txData.txParams.gasPrice,
-                          gasLimit: txData.txParams.gas,
-                        }),
-                      )}
-                      hideLabel
-                    />,
-                  ])}
-                </strong>
-              }
+              detailTitle={t('total')}
+              detailText={renderTotalDetailText()}
+              detailTotal={renderTotalDetailTotal()}
+              subTitle={t('transactionDetailGasTotalSubtitle')}
+              subText={t('editGasSubTextAmount', [
+                <b key="editGasSubTextAmountLabel">
+                  {t('editGasSubTextAmountLabel')}
+                </b>,
+                renderTotalMaxAmount(),
+              ])}
             />,
           ]}
         />

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