EIP-1559 V2: Advanced gas fee modal - getting 12 hour ranges of base fee and priority fee (#12996)

test/data/mock-estimates.json

@@ -20,7 +20,13 @@
         "suggestedMaxPriorityFeePerGas": "10",
         "suggestedMaxFeePerGas": "100"
       },
-      "estimatedBaseFee": "50"
+      "estimatedBaseFee": "50",
+      "networkCongestion": 0.5184,
+      "latestPriorityFeeRange": ["1", "20"],
+      "historicalPriorityFeeRange": ["2", "125"],
+      "historicalBaseFeeRange": ["50", "100"],
+      "priorityFeeTrend": "up",
+      "baseFeeTrend": "down"
     },
     "estimatedGasFeeTimeBounds": {}
   }

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

@@ -10,6 +10,7 @@ import {
 import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common';
 import { bnGreaterThan, bnLessThan } from '../../../../../helpers/utils/util';
 import { decGWEIToHexWEI } from '../../../../../helpers/utils/conversions.util';
+
 import { getAdvancedGasFeeValues } from '../../../../../selectors';
 import { useGasFeeContext } from '../../../../../contexts/gasFee';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
@@ -22,6 +23,10 @@ import I18nValue from '../../../../ui/i18n-value';
 
 import { useAdvancedGasFeePopoverContext } from '../../context';
 import AdvancedGasFeeInputSubtext from '../../advanced-gas-fee-input-subtext';
+import {
+  roundToDecimalPlacesRemovingExtraZeroes,
+  renderFeeRange,
+} from '../utils';
 
 const divideCurrencyValues = (value, baseFee) => {
   if (baseFee === 0) {
@@ -79,7 +84,7 @@ const BaseFeeInput = () => {
     setMaxFeePerGas,
   } = useAdvancedGasFeePopoverContext();
 
-  const { estimatedBaseFee } = gasFeeEstimates;
+  const { estimatedBaseFee, historicalBaseFeeRange } = gasFeeEstimates;
   const [baseFeeError, setBaseFeeError] = useState();
   const {
     numberOfDecimals: numberOfDecimalsPrimary,
@@ -198,8 +203,11 @@ const BaseFeeInput = () => {
         numeric
       />
       <AdvancedGasFeeInputSubtext
-        latest={estimatedBaseFee}
-        historical="23-359 GWEI"
+        latest={`${roundToDecimalPlacesRemovingExtraZeroes(
+          estimatedBaseFee,
+          2,
+        )} GWEI`}
+        historical={renderFeeRange(historicalBaseFeeRange)}
       />
     </Box>
   );

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

@@ -113,9 +113,16 @@ describe('BaseFeeInput', () => {
         maxFeePerGas: '0x174876E800',
       },
     });
-    expect(screen.queryByText('50')).toBeInTheDocument();
+    expect(screen.queryByText('50 GWEI')).toBeInTheDocument();
+  });
+  it('should show 12hr range value in subtext', () => {
+    render({
+      txParams: {
+        maxFeePerGas: '0x174876E800',
+      },
+    });
+    expect(screen.queryByText('50 - 100 GWEI')).toBeInTheDocument();
   });
-
   it('should show error if base fee is less than suggested low value', () => {
     render({
       txParams: {

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

@@ -15,6 +15,7 @@ import { bnGreaterThan, bnLessThan } from '../../../../../helpers/utils/util';
 
 import { useAdvancedGasFeePopoverContext } from '../../context';
 import AdvancedGasFeeInputSubtext from '../../advanced-gas-fee-input-subtext';
+import { renderFeeRange } from '../utils';
 
 const validatePriorityFee = (value, gasFeeEstimates) => {
   if (value <= 0) {
@@ -51,6 +52,10 @@ const PriorityFeeInput = () => {
     gasFeeEstimates,
     maxPriorityFeePerGas,
   } = useGasFeeContext();
+  const {
+    latestPriorityFeeRange,
+    historicalPriorityFeeRange,
+  } = gasFeeEstimates;
   const [priorityFeeError, setPriorityFeeError] = useState();
 
   const [priorityFee, setPriorityFee] = useState(() => {
@@ -101,7 +106,10 @@ const PriorityFeeInput = () => {
         detailText={`≈ ${priorityFeeInFiat}`}
         numeric
       />
-      <AdvancedGasFeeInputSubtext latest="1-18 GWEI" historical="23-359 GWEI" />
+      <AdvancedGasFeeInputSubtext
+        latest={renderFeeRange(latestPriorityFeeRange)}
+        historical={renderFeeRange(historicalPriorityFeeRange)}
+      />
     </>
   );
 };

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

@@ -68,7 +68,22 @@ describe('PriorityfeeInput', () => {
     });
     expect(document.getElementsByTagName('input')[0]).toHaveValue(2);
   });
-
+  it('should show current priority fee range in subtext', () => {
+    render({
+      txParams: {
+        maxFeePerGas: '0x174876E800',
+      },
+    });
+    expect(screen.queryByText('1 - 20 GWEI')).toBeInTheDocument();
+  });
+  it('should show 12hr range value in subtext', () => {
+    render({
+      txParams: {
+        maxFeePerGas: '0x174876E800',
+      },
+    });
+    expect(screen.queryByText('2 - 125 GWEI')).toBeInTheDocument();
+  });
   it('should show error if value entered is 0', () => {
     render({
       txParams: {

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/utils.js

@@ -0,0 +1,24 @@
+import { uniq } from 'lodash';
+import { toBigNumber } from '../../../../../shared/modules/conversion.utils';
+
+export function roundToDecimalPlacesRemovingExtraZeroes(
+  numberish,
+  numberOfDecimalPlaces,
+) {
+  if (numberish) {
+    return toBigNumber.dec(
+      toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
+    );
+  }
+  return null;
+}
+
+export const renderFeeRange = (feeRange) => {
+  if (feeRange) {
+    const formattedRange = uniq(
+      feeRange.map((fee) => roundToDecimalPlacesRemovingExtraZeroes(fee, 2)),
+    ).join(' - ');
+    return `${formattedRange} GWEI`;
+  }
+  return null;
+};