From c4b096de44a16dded454136206a9486a559bf739 Mon Sep 17 00:00:00 2001
From: Pedro Figueiredo <pedro.figueiredo@consensys.net>
Date: Wed, 13 Nov 2024 14:12:18 +0000
Subject: [PATCH] fix: Default to dApp suggested fees only when user selects
 the option (#28403)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Previously, some gas fee parameters defaulted to dApp suggested fee
values. This was problematic, because these values are always defined,
even when the user changed to a custom priority.

To fix the issue, we now only show the fees contained in txParams,
trusting they match the user selected priority level in the gas fees
modal.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28403?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

See screen recording below.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/3874d3b6-ad96-4fd9-9f40-361b38a0253b



### **After**

<!-- [screenshots/recordings] -->

## **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.
---
 .../confirm/info/__snapshots__/info.test.tsx.snap  |  4 ++--
 .../approve/__snapshots__/approve.test.tsx.snap    |  6 +++---
 .../confirm/info/hooks/useEIP1559TxFees.ts         |  6 ++----
 .../confirm/info/hooks/useFeeCalculations.ts       | 13 ++++++++-----
 .../info/hooks/useTransactionGasFeeEstimate.ts     | 14 ++++----------
 .../__snapshots__/native-transfer.test.tsx.snap    |  2 +-
 .../__snapshots__/nft-token-transfer.test.tsx.snap |  2 +-
 .../set-approval-for-all-info.test.tsx.snap        |  2 +-
 .../__snapshots__/token-transfer.test.tsx.snap     |  2 +-
 9 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
index 38219749e987..f0c3a5183789 100644
--- a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`Info renders info section for approve request 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $0.04
+          $0.08
         </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"
@@ -819,7 +819,7 @@ exports[`Info renders info section for setApprovalForAll request 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $0.04
+          $0.08
         </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/approve/__snapshots__/approve.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
index e8341e9a6014..3dc079d93e32 100644
--- a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
@@ -483,7 +483,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $0.04
+          $0.08
         </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"
@@ -582,12 +582,12 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
         <p
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
         >
-          0.0011 ETH
+          0.0023 ETH
         </p>
         <p
           class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
         >
-          $0.60
+          $1.26
         </p>
       </div>
     </div>
diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useEIP1559TxFees.ts b/ui/pages/confirmations/components/confirm/info/hooks/useEIP1559TxFees.ts
index e4bfaad8d779..e9224a9c8875 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/useEIP1559TxFees.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/useEIP1559TxFees.ts
@@ -8,11 +8,9 @@ export const useEIP1559TxFees = (
   maxFeePerGas: string;
   maxPriorityFeePerGas: string;
 } => {
-  const hexMaxFeePerGas =
-    transactionMeta.dappSuggestedGasFees?.maxFeePerGas ||
-    transactionMeta?.txParams?.maxFeePerGas;
+  const hexMaxFeePerGas = transactionMeta?.txParams?.maxFeePerGas;
+
   const hexMaxPriorityFeePerGas =
-    transactionMeta.dappSuggestedGasFees?.maxPriorityFeePerGas ||
     transactionMeta?.txParams?.maxPriorityFeePerGas;
 
   return useMemo(() => {
diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts
index 70bd2c0e3af2..472ba1357ffc 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts
@@ -93,10 +93,7 @@ export function useFeeCalculations(transactionMeta: TransactionMeta) {
   );
 
   // Max fee
-  const gasLimit =
-    transactionMeta?.dappSuggestedGasFees?.gas ||
-    transactionMeta?.txParams?.gas ||
-    HEX_ZERO;
+  const gasLimit = transactionMeta?.txParams?.gas || HEX_ZERO;
   const gasPrice = transactionMeta?.txParams?.gasPrice || HEX_ZERO;
 
   const maxFee = useMemo(() => {
@@ -140,7 +137,13 @@ export function useFeeCalculations(transactionMeta: TransactionMeta) {
     );
 
     return getFeesFromHex(estimatedFee);
-  }, [gasFeeEstimate, transactionMeta, estimatedBaseFee, getFeesFromHex]);
+  }, [
+    gasFeeEstimate,
+    transactionMeta,
+    estimatedBaseFee,
+    maxPriorityFeePerGas,
+    getFeesFromHex,
+  ]);
 
   return {
     estimatedFeeFiat: estimatedFees.currentCurrencyFee,
diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useTransactionGasFeeEstimate.ts b/ui/pages/confirmations/components/confirm/info/hooks/useTransactionGasFeeEstimate.ts
index f5866a283935..2a4ddb7d162f 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/useTransactionGasFeeEstimate.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/useTransactionGasFeeEstimate.ts
@@ -22,17 +22,11 @@ export function useTransactionGasFeeEstimate(
     ?.estimatedBaseFee;
 
   // override with values from `dappSuggestedGasFees` if they exist
-  gasLimit = transactionMeta.dappSuggestedGasFees?.gas || gasLimit || HEX_ZERO;
-  gasPrice =
-    transactionMeta.dappSuggestedGasFees?.gasPrice || gasPrice || HEX_ZERO;
+  gasLimit = gasLimit || HEX_ZERO;
+  gasPrice = gasPrice || HEX_ZERO;
   const maxPriorityFeePerGas =
-    transactionMeta.dappSuggestedGasFees?.maxPriorityFeePerGas ||
-    transactionMeta.txParams?.maxPriorityFeePerGas ||
-    HEX_ZERO;
-  const maxFeePerGas =
-    transactionMeta.dappSuggestedGasFees?.maxFeePerGas ||
-    transactionMeta.txParams?.maxFeePerGas ||
-    HEX_ZERO;
+    transactionMeta.txParams?.maxPriorityFeePerGas || HEX_ZERO;
+  const maxFeePerGas = transactionMeta.txParams?.maxFeePerGas || HEX_ZERO;
 
   let gasEstimate: Hex;
   if (supportsEIP1559) {
diff --git a/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap
index 234c0b704d5c..fddacb9cd2ba 100644
--- a/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap
@@ -338,7 +338,7 @@ exports[`NativeTransferInfo renders correctly 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $0.04
+          $0.08
         </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/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap
index 8bd4a73fe440..5d482f7b3bba 100644
--- a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap
@@ -336,7 +336,7 @@ exports[`NFTTokenTransferInfo renders correctly 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $0.04
+          $0.08
         </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/set-approval-for-all-info/__snapshots__/set-approval-for-all-info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/__snapshots__/set-approval-for-all-info.test.tsx.snap
index 81782a20ec5b..b66065f7c898 100644
--- a/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/__snapshots__/set-approval-for-all-info.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/__snapshots__/set-approval-for-all-info.test.tsx.snap
@@ -206,7 +206,7 @@ exports[`<SetApprovalForAllInfo /> renders component for approve request 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $0.04
+          $0.08
         </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/token-transfer/__snapshots__/token-transfer.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/token-transfer.test.tsx.snap
index 05a1db6732f5..42399d12cad6 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/token-transfer.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/token-transfer.test.tsx.snap
@@ -333,7 +333,7 @@ exports[`TokenTransferInfo renders correctly 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
           data-testid="native-currency"
         >
-          $0.04
+          $0.08
         </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"