From c1d96676b5e270faba92c6340aa7d443b9a7a3a4 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 22 Jul 2021 11:33:34 -0500
Subject: [PATCH] EIP-1559 - Implement new verbiage for transaction detail
 subtext (#11569)

---
 app/_locales/en/messages.json                 |  8 +++++
 .../app/transaction-detail-item/index.scss    |  4 +++
 .../transaction-detail-item.component.js      | 23 ++++++++-------
 .../confirm-transaction-base.component.js     | 29 ++++++++++++++++++-
 4 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 3400fcbe0..73f8d3f1b 100644
--- a/app/_locales/en/messages.json
+++ b/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"
   },
diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
index e986278f7..6dc00c6ef 100644
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -31,4 +31,8 @@
   &__subtitle {
     flex-grow: 1;
   }
+
+  &__subtext {
+    text-align: end;
+  }
 }
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index 4b59ecef3..bfb446bd0 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -46,16 +46,19 @@ export default function TransactionDetailItem({
         </Typography>
       </div>
       <div className="transaction-detail-item__row">
-        {subTitle && (
-          <Typography
-            variant={TYPOGRAPHY.H7}
-            className="transaction-detail-item__subtitle"
-            color={COLORS.UI4}
-          >
-            {subTitle}
-          </Typography>
-        )}
-        <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
+        <Typography
+          variant={TYPOGRAPHY.H7}
+          className="transaction-detail-item__subtitle"
+          color={COLORS.UI4}
+        >
+          {subTitle}
+        </Typography>
+
+        <Typography
+          variant={TYPOGRAPHY.H7}
+          color={COLORS.UI4}
+          className="transaction-detail-item__subtext"
+        >
           {subText}
         </Typography>
       </div>
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 3bff20537..d77759f7f 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/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
+                  />,
+                ])}
               />,
             ]}
           />