gas fee details displayed on UI should be used gas estimates if available (#13809)

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.test.js

@@ -60,24 +60,24 @@ describe('BaseFeeInput', () => {
   it('should renders advancedGasFee.baseFee value if current estimate used is not custom', () => {
     render({
       userFeeLevel: 'high',
-      txParams: {
-        maxFeePerGas: '0x2E90EDD000',
-      },
     });
     expect(document.getElementsByTagName('input')[0]).toHaveValue(100);
   });
 
-  it('should not advancedGasFee.baseFee value for swaps', () => {
+  it('should not use advancedGasFee.baseFee value for swaps', () => {
     render(
       {
         userFeeLevel: 'high',
-        txParams: {
-          maxFeePerGas: '0x2E90EDD000',
-        },
       },
       { editGasMode: EDIT_GAS_MODES.SWAPS },
     );
-    expect(document.getElementsByTagName('input')[0]).toHaveValue(200);
+    expect(document.getElementsByTagName('input')[0]).toHaveValue(
+      parseInt(
+        mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates.high
+          .suggestedMaxFeePerGas,
+        10,
+      ),
+    );
   });
 
   it('should renders baseFee values from transaction if current estimate used is custom', () => {
@@ -89,19 +89,11 @@ describe('BaseFeeInput', () => {
     expect(document.getElementsByTagName('input')[0]).toHaveValue(200);
   });
   it('should show current value of estimatedBaseFee in subtext', () => {
-    render({
+    render();
-      txParams: {
-        maxFeePerGas: '0x174876E800',
-      },
-    });
     expect(screen.queryByText('50 GWEI')).toBeInTheDocument();
   });
   it('should show 12hr range value in subtext', () => {
-    render({
+    render();
-      txParams: {
-        maxFeePerGas: '0x174876E800',
-      },
-    });
     expect(screen.queryByText('50 - 100 GWEI')).toBeInTheDocument();
   });
   it('should show error if base fee is less than suggested low value', () => {
@@ -120,7 +112,6 @@ describe('BaseFeeInput', () => {
       target: { value: 50 },
     });
   });
-
   it('should show error if base if is more than suggested high value', () => {
     render({
       txParams: {

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js

@@ -60,26 +60,24 @@ describe('PriorityfeeInput', () => {
   it('should renders advancedGasFee.priorityfee value if current estimate used is not custom', () => {
     render({
       userFeeLevel: 'high',
-      txParams: {
-        maxFeePerGas: '0x2E90EDD000',
-      },
     });
     expect(document.getElementsByTagName('input')[0]).toHaveValue(100);
   });
-
+  it('should not use advancedGasFee.priorityfee value for swaps', () => {
-  it('should not advancedGasFee.baseFee value for swaps', () => {
     render(
       {
         userFeeLevel: 'high',
-        txParams: {
-          maxFeePerGas: '0x2E90EDD000',
-        },
       },
       { editGasMode: EDIT_GAS_MODES.SWAPS },
     );
-    expect(document.getElementsByTagName('input')[0]).toHaveValue(200);
+    expect(document.getElementsByTagName('input')[0]).toHaveValue(
+      parseInt(
+        mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates.high
+          .suggestedMaxPriorityFeePerGas,
+        10,
+      ),
+    );
   });
-
   it('should renders priorityfee value from transaction if current estimate used is custom', () => {
     render({
       txParams: {
@@ -89,19 +87,11 @@ describe('PriorityfeeInput', () => {
     expect(document.getElementsByTagName('input')[0]).toHaveValue(2);
   });
   it('should show current priority fee range in subtext', () => {
-    render({
+    render();
-      txParams: {
-        maxFeePerGas: '0x174876E800',
-      },
-    });
     expect(screen.queryByText('1 - 20 GWEI')).toBeInTheDocument();
   });
   it('should show 12hr range value in subtext', () => {
-    render({
+    render();
-      txParams: {
-        maxFeePerGas: '0x174876E800',
-      },
-    });
     expect(screen.queryByText('2 - 125 GWEI')).toBeInTheDocument();
   });
   it('should show error if value entered is 0', () => {

ui/components/app/gas-details-item/gas-details-item.js

@@ -5,7 +5,6 @@ import { useSelector } from 'react-redux';
 
 import { COLORS } from '../../../helpers/constants/design-system';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
-import { hexWEIToDecGWEI } from '../../../helpers/utils/conversions.util';
 import { getPreferences } from '../../../selectors';
 import { useGasFeeContext } from '../../../contexts/gasFee';
 
@@ -23,7 +22,8 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
     hasSimulationError,
     maximumCostInHexWei: hexMaximumTransactionFee,
     minimumCostInHexWei: hexMinimumTransactionFee,
-    transaction,
+    maxPriorityFeePerGas,
+    maxFeePerGas,
   } = useGasFeeContext();
 
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
@@ -90,10 +90,8 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
       }
       subTitle={
         <GasTiming
-          maxPriorityFeePerGas={hexWEIToDecGWEI(
+          maxPriorityFeePerGas={maxPriorityFeePerGas}
-            transaction.txParams.maxPriorityFeePerGas,
+          maxFeePerGas={maxFeePerGas}
-          )}
-          maxFeePerGas={hexWEIToDecGWEI(transaction.txParams.maxFeePerGas)}
         />
       }
     />

ui/hooks/gasFeeInput/useMaxFeePerGasInput.js

@@ -19,7 +19,10 @@ import { useCurrencyDisplay } from '../useCurrencyDisplay';
 import { useUserPreferencedCurrency } from '../useUserPreferencedCurrency';
 import { feeParamsAreCustom, getGasFeeEstimate } from './utils';
 
-const getMaxFeePerGasFromTransaction = (transaction) => {
+const getMaxFeePerGasFromTransaction = (transaction, gasFeeEstimates) => {
+  if (gasFeeEstimates?.[transaction?.userFeeLevel]) {
+    return gasFeeEstimates[transaction.userFeeLevel].suggestedMaxFeePerGas;
+  }
   const { maxFeePerGas, gasPrice } = transaction?.txParams || {};
   return Number(hexWEIToDecGWEI(maxFeePerGas || gasPrice));
 };
@@ -64,7 +67,7 @@ export function useMaxFeePerGasInput({
   const showFiat = useSelector(getShouldShowFiat);
 
   const initialMaxFeePerGas = supportsEIP1559
-    ? getMaxFeePerGasFromTransaction(transaction)
+    ? getMaxFeePerGasFromTransaction(transaction, gasFeeEstimates)
     : 0;
 
   // This hook keeps track of a few pieces of transitional state. It is

ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js

@@ -16,7 +16,14 @@ import { useCurrencyDisplay } from '../useCurrencyDisplay';
 import { useUserPreferencedCurrency } from '../useUserPreferencedCurrency';
 import { feeParamsAreCustom, getGasFeeEstimate } from './utils';
 
-const getMaxPriorityFeePerGasFromTransaction = (transaction) => {
+const getMaxPriorityFeePerGasFromTransaction = (
+  transaction,
+  gasFeeEstimates,
+) => {
+  if (gasFeeEstimates?.[transaction?.userFeeLevel]) {
+    return gasFeeEstimates[transaction.userFeeLevel]
+      .suggestedMaxPriorityFeePerGas;
+  }
   const { maxPriorityFeePerGas, maxFeePerGas, gasPrice } =
     transaction?.txParams || {};
   return Number(
@@ -64,7 +71,7 @@ export function useMaxPriorityFeePerGasInput({
   const showFiat = useSelector(getShouldShowFiat);
 
   const initialMaxPriorityFeePerGas = supportsEIP1559
-    ? getMaxPriorityFeePerGasFromTransaction(transaction)
+    ? getMaxPriorityFeePerGasFromTransaction(transaction, gasFeeEstimates)
     : 0;
 
   const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState(() => {