Merge branch 'develop' into fix/attributions

MetaMask · May 29, 2024 · db18397 · db18397
2 parents d131569 + 85f19c2
commit db18397
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/...s/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js b/...s/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js
@@ -28,6 +28,7 @@ import {
   IconName,
   Text,
 } from '../../../../../components/component-library';
+import { addHexes } from '../../../../../../shared/modules/conversion.utils';
 
 const renderHeartBeatIfNotInTest = () =>
   process.env.IN_TEST ? null : <LoadingHeartBeat />;
@@ -42,14 +43,24 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
   const unapprovedTxs = useSelector(getUnapprovedTransactions);
   const transactionData = useDraftTransactionWithTxParams();
   const txData = useSelector((state) => txDataSelector(state));
-  const { id: transactionId, dappSuggestedGasFees } = txData;
+  const { id: transactionId, dappSuggestedGasFees, layer1GasFee } = txData;
   const transaction = Object.keys(transactionData).length
     ? transactionData
     : unapprovedTxs[transactionId] || {};
   const { hexMinimumTransactionFee, hexMaximumTransactionFee } = useSelector(
     (state) => transactionFeeSelector(state, transaction),
   );
 
+  const estimatedHexMinFeeTotal = addHexes(
+    hexMinimumTransactionFee,
+    layer1GasFee ?? '0x0',
+  );
+
+  const estimatedHexMaxFeeTotal = addHexes(
+    hexMaximumTransactionFee,
+    layer1GasFee ?? '0x0',
+  );
+
   return (
     <TransactionDetailItem
       key="legacy-gas-details"
@@ -101,7 +112,7 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
             {renderHeartBeatIfNotInTest()}
             <UserPreferencedCurrencyDisplay
               type={SECONDARY}
-              value={hexMinimumTransactionFee}
+              value={estimatedHexMinFeeTotal}
               hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
             />
           </div>
@@ -112,7 +123,7 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
           {renderHeartBeatIfNotInTest()}
           <UserPreferencedCurrencyDisplay
             type={PRIMARY}
-            value={hexMinimumTransactionFee}
+            value={estimatedHexMinFeeTotal}
             hideLabel={!useNativeCurrencyAsPrimaryCurrency}
             numberOfDecimals={6}
           />
@@ -128,7 +139,7 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
             <UserPreferencedCurrencyDisplay
               key="editGasSubTextFeeAmount"
               type={PRIMARY}
-              value={hexMaximumTransactionFee}
+              value={estimatedHexMaxFeeTotal}
               hideLabel={!useNativeCurrencyAsPrimaryCurrency}
             />
           </div>

diff --git a/...ponents/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js b/...ponents/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js
@@ -111,21 +111,38 @@ describe('ConfirmLegacyGasDisplay', () => {
     });
   });
 
-  it('should display Estimated gas fee for L2 networks', async () => {
-    render({
+  it('displays the Estimated Fee', () => {
+    const { container } = render({
       ...mmState,
       confirmTransaction: {
         ...mmState.confirmTransaction,
         txData: {
           ...mmState.confirmTransaction.txData,
-          layer1GasFee: '0x1',
         },
       },
     });
 
-    await waitFor(() => {
-      expect(screen.queryByText('Estimated gas fee')).toBeInTheDocument();
-      expect(screen.queryByText('Max fee:')).toBeInTheDocument();
+    expect(
+      container.querySelector('.currency-display-component__text'),
+    ).toHaveTextContent('0.000021');
+  });
+
+  it('displays the Estimated Fee on L2 Networks', () => {
+    const { container } = render({
+      ...mmState,
+      confirmTransaction: {
+        ...mmState.confirmTransaction,
+        txData: {
+          ...mmState.confirmTransaction.txData,
+          layer1GasFee: '0x0653b2c7980981',
+        },
+      },
     });
+
+    expect(screen.queryByText('Estimated gas fee')).toBeInTheDocument();
+    expect(screen.queryByText('Max fee:')).toBeInTheDocument();
+    expect(
+      container.querySelector('.currency-display-component__text'),
+    ).toHaveTextContent('0.00180188');
   });
 });