fix: Estimated fee in redesigned screens (#27250)

cherry-pick: (#27247)  `maxFeePerGas`, `maxPriorityFeePerGas` and `estimatedBaseFee` are decimal values that should be converted before being used inside `multiplyHexes` and `addHexes`. `estimatedBaseFee` also needs to be converted to wei.  [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27247?quickstart=1) Fixes: 1. Go to this page... 2. 3.  <img width="320" alt="Screenshot 2024-09-18 at 13 40 13" src="https://github.com/user-attachments/assets/cf06ac39-6ab7-46c9-af84-951efbb37fd1"> <img width="320" alt="Screenshot 2024-09-18 at 13 39 49" src="https://github.com/user-attachments/assets/15c8ff6b-6277-4f7f-b290-68adb21d845a"> <img width="320" alt="Screenshot 2024-09-18 at 13 37 13" src="https://github.com/user-attachments/assets/6d4e3500-972e-4196-8041-8a16436daaf7"> - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] 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 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.  ## **Description**  [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27250?quickstart=1) ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] 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. ## **Pre-merge reviewer checklist** - [ ] 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.
MetaMask · Sep 18, 2024 · 29094e0 · 29094e0
1 parent 3373b9a
commit 29094e0
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 26 deletions.
diff --git a/app/scripts/controllers/swaps/swaps.test.ts b/app/scripts/controllers/swaps/swaps.test.ts
@@ -1171,7 +1171,6 @@ describe('SwapsController', function () {
         const swapsQuotePrefetchingRefreshTime = 0;
         const swapsStxBatchStatusRefreshTime = 0;
         const swapsStxGetTransactionsRefreshTime = 0;
-        const swapsStxStatusDeadline = 0;
         swapsController.__test__updateState({
           swapsState: {
             ...swapsController.state.swapsState,

diff --git a/shared/modules/conversion.utils.ts b/shared/modules/conversion.utils.ts
@@ -4,7 +4,7 @@ import { addHexPrefix, BN } from 'ethereumjs-util';
 import { EtherDenomination } from '../constants/common';
 import { Numeric, NumericValue } from './Numeric';
 
-export function decGWEIToHexWEI(decGWEI: number) {
+export function decGWEIToHexWEI(decGWEI: NumericValue) {
   return new Numeric(decGWEI, 10, EtherDenomination.GWEI)
     .toBase(16)
     .toDenomination(EtherDenomination.WEI)

diff --git a/test/integration/confirmations/transactions/contract-interaction.test.tsx b/test/integration/confirmations/transactions/contract-interaction.test.tsx
@@ -280,10 +280,10 @@ describe('Contract Interaction Confirmation', () => {
     expect(editGasFeesRow).toHaveTextContent('Estimated fee');
 
     const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field');
-    expect(firstGasField).toHaveTextContent('0.0084 ETH');
+    expect(firstGasField).toHaveTextContent('0.0001 ETH');
     const editGasFeeNativeCurrency =
       within(editGasFeesRow).getByTestId('native-currency');
-    expect(editGasFeeNativeCurrency).toHaveTextContent('$28.50');
+    expect(editGasFeeNativeCurrency).toHaveTextContent('$0.47');
     expect(editGasFeesRow).toContainElement(getByTestId('edit-gas-fee-icon'));
 
     const gasFeeSpeed = within(gasFeesSection).getByTestId(
@@ -375,8 +375,8 @@ describe('Contract Interaction Confirmation', () => {
     const maxFee = getByTestId('gas-fee-details-max-fee');
     expect(gasFeesSection).toContainElement(maxFee);
     expect(maxFee).toHaveTextContent('Max fee');
-    expect(maxFee).toHaveTextContent('0.2313 ETH');
-    expect(maxFee).toHaveTextContent('$787.37');
+    expect(maxFee).toHaveTextContent('0.0023 ETH');
+    expect(maxFee).toHaveTextContent('$7.72');
 
     const nonceSection = getByTestId('advanced-details-nonce-section');
     expect(nonceSection).toBeInTheDocument();

diff --git a/...onents/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap b/...onents/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
@@ -265,13 +265,13 @@ exports[`<ContractInteractionInfo /> renders component for contract interaction
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
           data-testid="first-gas-field"
         >
-          0.004 ETH
+          0.0001 ETH
         </p>
         <p
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $2.20
+          $0.04
         </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link 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"
@@ -631,13 +631,13 @@ exports[`<ContractInteractionInfo /> renders component for contract interaction
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
           data-testid="first-gas-field"
         >
-          0.004 ETH
+          0.0001 ETH
         </p>
         <p
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $2.20
+          $0.04
         </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link 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"
@@ -994,13 +994,13 @@ exports[`<ContractInteractionInfo /> renders component for contract interaction
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
           data-testid="first-gas-field"
         >
-          0.004 ETH
+          0.0001 ETH
         </p>
         <p
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $2.20
+          $0.04
         </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link 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"

diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts
@@ -45,14 +45,14 @@ describe('useFeeCalculations', () => {
 
     expect(result.current).toMatchInlineSnapshot(`
       {
-        "estimatedFeeFiat": "$2.20",
-        "estimatedFeeNative": "0.004 ETH",
+        "estimatedFeeFiat": "$0.04",
+        "estimatedFeeNative": "0.0001 ETH",
         "l1FeeFiat": "",
         "l1FeeNative": "",
         "l2FeeFiat": "",
         "l2FeeNative": "",
-        "maxFeeFiat": "$4.23",
-        "maxFeeNative": "0.0076 ETH",
+        "maxFeeFiat": "$0.07",
+        "maxFeeNative": "0.0001 ETH",
       }
     `);
   });
@@ -77,8 +77,8 @@ describe('useFeeCalculations', () => {
         "l1FeeNative": "0.0045 ETH",
         "l2FeeFiat": "$0.04",
         "l2FeeNative": "0.0001 ETH",
-        "maxFeeFiat": "$4.23",
-        "maxFeeNative": "0.0076 ETH",
+        "maxFeeFiat": "$0.07",
+        "maxFeeNative": "0.0001 ETH",
       }
     `);
   });

diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts
@@ -6,6 +6,8 @@ import { useSelector } from 'react-redux';
 import { EtherDenomination } from '../../../../../../../shared/constants/common';
 import {
   addHexes,
+  decGWEIToHexWEI,
+  decimalToHex,
   getEthConversionFromWeiHex,
   getValueFromWeiHex,
   multiplyHexes,
@@ -15,9 +17,9 @@ import { useFiatFormatter } from '../../../../../../hooks/useFiatFormatter';
 import { useGasFeeEstimates } from '../../../../../../hooks/useGasFeeEstimates';
 import { getCurrentCurrency } from '../../../../../../selectors';
 import { HEX_ZERO } from '../shared/constants';
-import { useTransactionGasFeeEstimate } from './useTransactionGasFeeEstimate';
 import { useEIP1559TxFees } from './useEIP1559TxFees';
 import { useSupportsEIP1559 } from './useSupportsEIP1559';
+import { useTransactionGasFeeEstimate } from './useTransactionGasFeeEstimate';
 
 const EMPTY_FEE = '';
 const EMPTY_FEES = {
@@ -94,7 +96,7 @@ export function useFeeCalculations(transactionMeta: TransactionMeta) {
 
   const maxFee = useMemo(() => {
     return multiplyHexes(
-      supportsEIP1559 ? (maxFeePerGas as Hex) : (gasPrice as Hex),
+      supportsEIP1559 ? (decimalToHex(maxFeePerGas) as Hex) : (gasPrice as Hex),
       gasLimit as Hex,
     );
   }, [supportsEIP1559, maxFeePerGas, gasLimit, gasPrice]);
@@ -113,8 +115,8 @@ export function useFeeCalculations(transactionMeta: TransactionMeta) {
 
     // Logic for any network without L1 and L2 fee components
     const minimumFeePerGas = addHexes(
-      estimatedBaseFee || HEX_ZERO,
-      maxPriorityFeePerGas,
+      decGWEIToHexWEI(estimatedBaseFee) || HEX_ZERO,
+      decimalToHex(maxPriorityFeePerGas),
     );
 
     const estimatedFee = multiplyHexes(

diff --git a/...ponents/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap b/...ponents/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap
@@ -38,13 +38,13 @@ exports[`<GasFeesDetails /> renders component for gas fees section 1`] = `
         class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
         data-testid="first-gas-field"
       >
-        0.004 ETH
+        0.0001 ETH
       </p>
       <p
         class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
         data-testid="native-currency"
       >
-        $2.20
+        $0.04
       </p>
       <button
         class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link 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"

diff --git a/...ponents/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap b/...ponents/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap
@@ -44,13 +44,13 @@ exports[`<GasFeesSection /> renders component for gas fees section 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
           data-testid="first-gas-field"
         >
-          0.004 ETH
+          0.0001 ETH
         </p>
         <p
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $2.20
+          $0.04
         </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link 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"