fix: duplicate fee display for l2 networks (#24264)

MetaMask · May 1, 2024 · 9c83db2 · 9c83db2
1 parent 9f8cf68
commit 9c83db2
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 55 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
@@ -23,8 +23,6 @@ import {
   TextColor,
 } from '../../../../../helpers/constants/design-system';
 import { useDraftTransactionWithTxParams } from '../../../hooks/useDraftTransactionWithTxParams';
-import { getNativeCurrency } from '../../../../../ducks/metamask/metamask';
-import MultilayerFeeMessage from '../../multilayer-fee-message/multi-layer-fee-message';
 import {
   Icon,
   IconName,
@@ -41,7 +39,6 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
   const isMainnet = useSelector(getIsMainnet);
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
-  const nativeCurrency = useSelector(getNativeCurrency);
   const unapprovedTxs = useSelector(getUnapprovedTransactions);
   const transactionData = useDraftTransactionWithTxParams();
   const txData = useSelector((state) => txDataSelector(state));
@@ -52,43 +49,6 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
   const { hexMinimumTransactionFee, hexMaximumTransactionFee } = useSelector(
     (state) => transactionFeeSelector(state, transaction),
   );
-  const { layer1GasFee } = txData;
-  const hasLayer1GasFee = layer1GasFee !== undefined;
-
-  if (hasLayer1GasFee) {
-    return [
-      <TransactionDetailItem
-        key="legacy-total-item"
-        data-testid={dataTestId}
-        detailTitle={t('transactionDetailLayer2GasHeading')}
-        detailTotal={
-          <UserPreferencedCurrencyDisplay
-            type={PRIMARY}
-            value={hexMinimumTransactionFee}
-            hideLabel={!useNativeCurrencyAsPrimaryCurrency}
-            numberOfDecimals={18}
-          />
-        }
-        detailText={
-          useCurrencyRateCheck && (
-            <UserPreferencedCurrencyDisplay
-              type={SECONDARY}
-              value={hexMinimumTransactionFee}
-              hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
-            />
-          )
-        }
-        noBold
-        flexWidthValues
-      />,
-      <MultilayerFeeMessage
-        key="confirm-layer-1"
-        transaction={txData}
-        layer2fee={hexMinimumTransactionFee}
-        nativeCurrency={nativeCurrency}
-      />,
-    ];
-  }
 
   return (
     <TransactionDetailItem

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,7 +111,7 @@ describe('ConfirmLegacyGasDisplay', () => {
     });
   });
 
-  it('should contain L1 L2 fee details', async () => {
+  it('should display Estimated gas fee for L2 networks', async () => {
     render({
       ...mmState,
       confirmTransaction: {
@@ -124,8 +124,8 @@ describe('ConfirmLegacyGasDisplay', () => {
     });
 
     await waitFor(() => {
-      expect(screen.queryByText('Layer 1 fees')).toBeInTheDocument();
-      expect(screen.queryByText('Layer 2 gas fee')).toBeInTheDocument();
+      expect(screen.queryByText('Estimated gas fee')).toBeInTheDocument();
+      expect(screen.queryByText('Max fee:')).toBeInTheDocument();
     });
   });
 });
diff --git a/ui/pages/confirmations/components/fee-details-component/fee-details-component.js b/ui/pages/confirmations/components/fee-details-component/fee-details-component.js
@@ -140,14 +140,16 @@ export default function FeeDetailsComponent({
               boldHeadings={false}
             />
           )}
-          <TransactionDetailItem
-            detailTitle={t('total')}
-            detailText={
-              useCurrencyRateCheck &&
-              renderTotalDetailText(getTransactionFeeTotal)
-            }
-            detailTotal={renderTotalDetailValue(getTransactionFeeTotal)}
-          />
+          {!hasLayer1GasFee && (
+            <TransactionDetailItem
+              detailTitle={t('total')}
+              detailText={
+                useCurrencyRateCheck &&
+                renderTotalDetailText(getTransactionFeeTotal)
+              }
+              detailTotal={renderTotalDetailValue(getTransactionFeeTotal)}
+            />
+          )}
         </Box>
       )}
     </>

diff --git a/ui/pages/confirmations/components/fee-details-component/fee-details-component.test.js b/ui/pages/confirmations/components/fee-details-component/fee-details-component.test.js
@@ -60,7 +60,7 @@ describe('FeeDetailsComponent', () => {
     await act(async () => {
       screen.getByRole('button').click();
     });
-    expect(screen.getAllByTitle('0 ETH')).toHaveLength(3);
+    expect(screen.getAllByTitle('0 ETH')).toHaveLength(2);
     expect(screen.getAllByTitle('0 ETH')[0]).toBeInTheDocument();
   });
 
@@ -89,4 +89,33 @@ describe('FeeDetailsComponent', () => {
     });
     expect(screen.queryByText('Fee details')).toBeInTheDocument();
   });
+
+  it('should not display total in details section for layer 2 network', async () => {
+    await render({
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        networkDetails: {
+          EIPS: {
+            1559: false,
+          },
+        },
+        networksMetadata: {
+          goerli: {
+            EIPS: {
+              1559: false,
+            },
+            status: 'available',
+          },
+        },
+        providerConfig: {
+          chainId: CHAIN_IDS.OPTIMISM,
+        },
+      },
+    });
+    await act(async () => {
+      screen.getByRole('button').click();
+    });
+    expect(screen.queryByText('Totals')).not.toBeInTheDocument();
+  });
 });
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
@@ -332,7 +332,7 @@ describe('Confirm Transaction Base', () => {
     expect(securityProviderBanner).toBeInTheDocument();
   });
 
-  it('should contain L1 L2 fee details for optimism', async () => {
+  it('should estimated fee details for optimism', async () => {
     const state = {
       metamask: {
         ...baseStore.metamask,
@@ -353,8 +353,7 @@ describe('Confirm Transaction Base', () => {
 
     const { queryByText } = await render({ state });
 
-    expect(queryByText('Layer 1 fees')).toBeInTheDocument();
-    expect(queryByText('Layer 2 gas fee')).toBeInTheDocument();
+    expect(queryByText('Estimated fee')).not.toBeInTheDocument();
   });
 
   it('should render NoteToTrader when isNoteToTraderSupported is true', async () => {