Merge pull request #23510 from MetaMask/Version-v11.12.2

Version v11.12.2
MetaMask · Mar 18, 2024 · 8c9ef75 · 8c9ef75
2 parents 2aa60b9 + 339f24a
commit 8c9ef75
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 186 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [11.12.2]
+### Fixed
+- Fix transaction confirmations so that they correctly show estimated fees instead of max possible fees
+    - For non-layer 2 network, and non-token send, transactions([#23203](https://github.com/MetaMask/metamask-extension/pull/23203))
+    - For layer 2 networks and for erc20 transfers ([#23511](https://github.com/MetaMask/metamask-extension/pull/23511))
+
 ## [11.12.1]
 ### Changed
 - Updated styling for missing petnames to prevent misinterpretation as malicious ([#23458](https://github.com/MetaMask/metamask-extension/pull/23458))
@@ -4496,7 +4502,8 @@ Update styles and spacing on the critical error page  ([#20350](https://github.c
 ### Uncategorized
 - Added the ability to restore accounts from seed words.
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.12.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.12.2...HEAD
+[11.12.2]: https://github.com/MetaMask/metamask-extension/compare/v11.12.1...v11.12.2
 [11.12.1]: https://github.com/MetaMask/metamask-extension/compare/v11.12.0...v11.12.1
 [11.12.0]: https://github.com/MetaMask/metamask-extension/compare/v11.11.4...v11.12.0
 [11.11.4]: https://github.com/MetaMask/metamask-extension/compare/v11.11.3...v11.11.4

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "11.12.1",
+  "version": "11.12.2",
   "private": true,
   "repository": {
     "type": "git",

diff --git a/...nfirmations/components/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap b/...nfirmations/components/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
@@ -42,12 +42,12 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             </button>
             <div
               class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
-              title="0.00147"
+              title="0.001197"
             >
               <span
                 class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
-                0.00147
+                0.001197
               </span>
             </div>
           </div>
@@ -60,12 +60,12 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
           >
             <div
               class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
-              title="0.00147 ETH"
+              title="0.001197 ETH"
             >
               <span
                 class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
-                0.00147
+                0.001197
               </span>
               <span
                 class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"

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/ui/pages/confirmations/components/gas-details-item/gas-details-item.js b/ui/pages/confirmations/components/gas-details-item/gas-details-item.js
@@ -65,15 +65,23 @@ const GasDetailsItem = ({
     estimateUsed,
     hasSimulationError,
     maximumCostInHexWei: hexMaximumTransactionFee,
+    minimumCostInHexWei: hexMinimumTransactionFee,
     maxPriorityFeePerGas,
     maxFeePerGas,
   } = useGasFeeContext();
 
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
 
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
-
   const getTransactionFeeTotal = useMemo(() => {
+    if (isMultiLayerFeeNetwork) {
+      return sumHexes(hexMinimumTransactionFee, estimatedL1Fees || 0);
+    }
+
+    return hexMinimumTransactionFee;
+  }, [isMultiLayerFeeNetwork, hexMinimumTransactionFee, estimatedL1Fees]);
+
+  const getMaxTransactionFeeTotal = useMemo(() => {
     if (isMultiLayerFeeNetwork) {
       return sumHexes(hexMaximumTransactionFee, estimatedL1Fees || 0);
     }
@@ -156,7 +164,9 @@ const GasDetailsItem = ({
               <UserPreferencedCurrencyDisplay
                 key="editGasSubTextFeeAmount"
                 type={PRIMARY}
-                value={getTransactionFeeTotal || draftHexMaximumTransactionFee}
+                value={
+                  getMaxTransactionFeeTotal || draftHexMaximumTransactionFee
+                }
                 hideLabel={!useNativeCurrencyAsPrimaryCurrency}
               />
             </div>

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>