EIP-1559 - Implement new verbiage for transaction detail subtext (#11569)

app/_locales/en/messages.json

@@ -689,6 +689,14 @@
   "editGasPriceTooltip": {
     "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"
+  },
+  "editGasSubTextFee": {
+    "message": "Max fee: $1",
+    "description": "$1 represents a dollar amount"
+  },
   "editGasTitle": {
     "message": "Edit priority"
   },

ui/components/app/transaction-detail-item/index.scss

@@ -31,4 +31,8 @@
   &__subtitle {
     flex-grow: 1;
   }
+
+  &__subtext {
+    text-align: end;
+  }
 }

ui/components/app/transaction-detail-item/transaction-detail-item.component.js

@@ -46,7 +46,6 @@ export default function TransactionDetailItem({
         </Typography>
       </div>
       <div className="transaction-detail-item__row">
-        {subTitle && (
         <Typography
           variant={TYPOGRAPHY.H7}
           className="transaction-detail-item__subtitle"
@@ -54,8 +53,12 @@ export default function TransactionDetailItem({
         >
           {subTitle}
         </Typography>
-        )}
-        <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
+
+        <Typography
+          variant={TYPOGRAPHY.H7}
+          color={COLORS.UI4}
+          className="transaction-detail-item__subtext"
+        >
           {subText}
         </Typography>
       </div>

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -6,6 +6,8 @@ import ConfirmPageContainer, {
   ConfirmDetailRow,
 } from '../../components/app/confirm-page-container';
 import { isBalanceSufficient } from '../send/send.utils';
+import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util';
+import { addHexes, hexToDecimal } from '../../helpers/utils/conversions.util';
 import {
   CONFIRM_TRANSACTION_ROUTE,
   DEFAULT_ROUTE,
@@ -19,7 +21,7 @@ import {
 } 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 AdvancedGasControls from '../../components/app/advanced-gas-controls';
@@ -416,6 +418,17 @@ export default class ConfirmTransactionBase extends Component {
                     hideLabel
                   />
                 }
+                subText={t('editGasSubTextFee', [
+                  <UserPreferencedCurrencyDisplay
+                    key="gas-subtext"
+                    type={SECONDARY}
+                    value={getHexGasTotal({
+                      gasPrice: txData.txParams.maxFeePerGas,
+                      gasLimit: txData.txParams.gas,
+                    })}
+                    hideLabel
+                  />,
+                ])}
               />,
               <TransactionDetailItem
                 key="total-item"
@@ -435,6 +448,20 @@ export default class ConfirmTransactionBase extends Component {
                   />
                 }
                 subTitle={t('transactionDetailGasTotalSubtitle')}
+                subText={t('editGasSubTextAmount', [
+                  <UserPreferencedCurrencyDisplay
+                    key="gas-total-subtext"
+                    type={SECONDARY}
+                    value={addHexes(
+                      txData.txParams.value,
+                      getHexGasTotal({
+                        gasPrice: txData.txParams.maxFeePerGas,
+                        gasLimit: txData.txParams.gas,
+                      }),
+                    )}
+                    hideLabel
+                  />,
+                ])}
               />,
             ]}
           />