fix: Gas display fixes on confirmation screen (#23524)

This PR corrects the display of the "Total" value under the "Fee Details" dropdown. It also ensures the "Fee details" dropdown is only shown on layer 2 networks. This is the correct spec, as confirmed with @bschorchit Fixes: #23515 1. On eth mainnet, create a transaction 2. There should be no "Fee details" dropdown, and other fee information should be correct. 1. On Optimism, create a transaction 2. Their should be a fee details, and opening it should show a Total that matches the estimated total shown below/outside the "fee details" section  Layer 1 ![Screenshot from 2024-03-15 14-08-03](https://github.com/MetaMask/metamask-extension/assets/7499938/ed348930-14db-4818-b207-9f3fa2c09ff6) Layer 2 ![Screenshot from 2024-03-15 14-07-10](https://github.com/MetaMask/metamask-extension/assets/7499938/bb879810-87bc-42cc-9bf5-4860aa6e5b75) Layer 1 ![Screenshot from 2024-03-15 14-09-44](https://github.com/MetaMask/metamask-extension/assets/7499938/cce1d206-088c-4b60-889c-ed467e53b535) Layer 2 ![Screenshot from 2024-03-15 13-59-02](https://github.com/MetaMask/metamask-extension/assets/7499938/e8d41718-e10a-4f3e-873c-e55a64bed8b9) - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained what problem this PR is solving and how it is solved. - [ ] I've linked related issues - [ ] I've included manual testing steps - [ ] I've included screenshots/recordings if applicable - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --------- Co-authored-by: Dan J Miller <[email protected]>
MetaMask · Mar 15, 2024 · 339f24a · 339f24a
1 parent 7d36bbf
commit 339f24a
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 168 deletions.
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
@@ -43,10 +43,7 @@ export default function FeeDetailsComponent({
 
   const t = useI18nContext();
 
-  const {
-    maximumCostInHexWei: hexMaximumTransactionFee,
-    minimumCostInHexWei: hexMinimumTransactionFee,
-  } = useGasFeeContext();
+  const { minimumCostInHexWei: hexMinimumTransactionFee } = useGasFeeContext();
   useEffect(() => {
     if (isMultiLayerFeeNetwork) {
       fetchEstimatedL1Fee(txData?.chainId, txData)
@@ -61,11 +58,11 @@ export default function FeeDetailsComponent({
 
   const getTransactionFeeTotal = useMemo(() => {
     if (isMultiLayerFeeNetwork) {
-      return addHexes(hexMaximumTransactionFee, estimatedL1Fees || 0);
+      return addHexes(hexMinimumTransactionFee, estimatedL1Fees || 0);
     }
 
-    return hexMaximumTransactionFee;
-  }, [isMultiLayerFeeNetwork, hexMaximumTransactionFee, estimatedL1Fees]);
+    return hexMinimumTransactionFee;
+  }, [isMultiLayerFeeNetwork, hexMinimumTransactionFee, estimatedL1Fees]);
 
   const renderTotalDetailText = useCallback(
     (value) => {
@@ -109,7 +106,7 @@ export default function FeeDetailsComponent({
         justifyContent={JustifyContent.center}
         flexDirection={FlexDirection.Column}
       >
-        {!hideGasDetails && (
+        {!hideGasDetails && isMultiLayerFeeNetwork && (
           <Box
             padding={4}
             display={Display.Flex}

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
@@ -1,7 +1,7 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, act } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
-
+import { CHAIN_IDS } from '../../../../../shared/constants/network';
 import mockState from '../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
 import FeeDetailsComponent from './fee-details-component';
@@ -19,20 +19,39 @@ const render = (state = {}) => {
 };
 
 describe('FeeDetailsComponent', () => {
-  it('renders "Fee details"', () => {
-    render();
+  it('renders "Fee details"', async () => {
+    await render({
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        providerConfig: {
+          chainId: CHAIN_IDS.OPTIMISM,
+        },
+      },
+    });
     expect(screen.queryByText('Fee details')).toBeInTheDocument();
   });
 
-  it('should expand when button is clicked', () => {
-    render();
+  it('should expand when button is clicked', async () => {
+    await render({
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        providerConfig: {
+          chainId: CHAIN_IDS.OPTIMISM,
+        },
+      },
+    });
     expect(screen.queryByTitle('0 ETH')).not.toBeInTheDocument();
-    screen.getByRole('button').click();
-    expect(screen.queryByTitle('0 ETH')).toBeInTheDocument();
+    await act(async () => {
+      screen.getByRole('button').click();
+    });
+    expect(screen.getAllByTitle('0 ETH')).toHaveLength(2);
+    expect(screen.getAllByTitle('0 ETH')[0]).toBeInTheDocument();
   });
 
-  it('should be displayed for even legacy network', () => {
-    render({
+  it('should be displayed for layer 2 network', async () => {
+    await render({
       ...mockState,
       metamask: {
         ...mockState.metamask,
@@ -41,6 +60,17 @@ describe('FeeDetailsComponent', () => {
             1559: false,
           },
         },
+        networksMetadata: {
+          goerli: {
+            EIPS: {
+              1559: false,
+            },
+            status: 'available',
+          },
+        },
+        providerConfig: {
+          chainId: CHAIN_IDS.OPTIMISM,
+        },
       },
     });
     expect(screen.queryByText('Fee details')).toBeInTheDocument();

diff --git a/...rove/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap b/...rove/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap
@@ -115,31 +115,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
         >
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
-          >
-            <div
-              class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <button
-                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                data-testid="expand-fee-details-button"
-                style="text-decoration: none;"
-              >
-                <span
-                  class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
-                >
-                  <p
-                    class="mm-box mm-text mm-text--body-sm mm-box--color-primary-default"
-                  >
-                    Fee details
-                  </p>
-                </span>
-                <span
-                  class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
-                  style="mask-image: url('./images/icons/arrow-down.svg');"
-                />
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -320,31 +296,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
         >
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
-          >
-            <div
-              class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <button
-                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                data-testid="expand-fee-details-button"
-                style="text-decoration: none;"
-              >
-                <span
-                  class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
-                >
-                  <p
-                    class="mm-box mm-text mm-text--body-sm mm-box--color-primary-default"
-                  >
-                    Fee details
-                  </p>
-                </span>
-                <span
-                  class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
-                  style="mask-image: url('./images/icons/arrow-down.svg');"
-                />
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -525,31 +477,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
         >
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
-          >
-            <div
-              class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <button
-                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                data-testid="expand-fee-details-button"
-                style="text-decoration: none;"
-              >
-                <span
-                  class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
-                >
-                  <p
-                    class="mm-box mm-text mm-text--body-sm mm-box--color-primary-default"
-                  >
-                    Fee details
-                  </p>
-                </span>
-                <span
-                  class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
-                  style="mask-image: url('./images/icons/arrow-down.svg');"
-                />
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -730,31 +658,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
         >
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
-          >
-            <div
-              class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <button
-                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                data-testid="expand-fee-details-button"
-                style="text-decoration: none;"
-              >
-                <span
-                  class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
-                >
-                  <p
-                    class="mm-box mm-text mm-text--body-sm mm-box--color-primary-default"
-                  >
-                    Fee details
-                  </p>
-                </span>
-                <span
-                  class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
-                  style="mask-image: url('./images/icons/arrow-down.svg');"
-                />
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div

diff --git a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -495,31 +495,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
               </div>
               <div
                 class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
-              >
-                <div
-                  class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-                >
-                  <button
-                    class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    data-testid="expand-fee-details-button"
-                    style="text-decoration: none;"
-                  >
-                    <span
-                      class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
-                    >
-                      <p
-                        class="mm-box mm-text mm-text--body-sm mm-box--color-primary-default"
-                      >
-                        Fee details
-                      </p>
-                    </span>
-                    <span
-                      class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
-                      style="mask-image: url('./images/icons/arrow-down.svg');"
-                    />
-                  </button>
-                </div>
-              </div>
+              />
             </div>
           </div>
         </div>

diff --git a/...onfirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/...onfirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -405,31 +405,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                   </div>
                   <div
                     class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
-                  >
-                    <div
-                      class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-                    >
-                      <button
-                        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                        data-testid="expand-fee-details-button"
-                        style="text-decoration: none;"
-                      >
-                        <span
-                          class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
-                        >
-                          <p
-                            class="mm-box mm-text mm-text--body-sm mm-box--color-primary-default"
-                          >
-                            Fee details
-                          </p>
-                        </span>
-                        <span
-                          class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
-                          style="mask-image: url('./images/icons/arrow-down.svg');"
-                        />
-                      </button>
-                    </div>
-                  </div>
+                  />
                 </div>
               </div>
             </div>