Wire up priority fee range in new gas modal (#13044)

Use the `priorityFeeRange` property which is now available in the gas
fee estimate data.

ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/index.js

@@ -0,0 +1 @@
+export { default } from './latest-priority-fee-field';

ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { uniq } from 'lodash';
+import { toBigNumber } from '../../../../../../shared/modules/conversion.utils';
+import { useGasFeeContext } from '../../../../../contexts/gasFee';
+import I18nValue from '../../../../ui/i18n-value';
+import { PriorityFeeTooltip } from '../tooltips';
+
+function roundToDecimalPlacesRemovingExtraZeroes(
+  numberish,
+  numberOfDecimalPlaces,
+) {
+  return toBigNumber.dec(
+    toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
+  );
+}
+
+export default function LatestPriorityFeeField() {
+  const { gasFeeEstimates } = useGasFeeContext();
+
+  const renderPriorityFeeRange = () => {
+    const { latestPriorityFeeRange } = gasFeeEstimates;
+    if (latestPriorityFeeRange) {
+      const formattedRange = uniq(
+        latestPriorityFeeRange.map((priorityFee) =>
+          roundToDecimalPlacesRemovingExtraZeroes(priorityFee, 1),
+        ),
+      ).join(' - ');
+      return `${formattedRange} GWEI`;
+    }
+    return null;
+  };
+
+  return (
+    <div className="network-statistics__info__field latest-priority-fee-field">
+      <span className="network-statistics__info__field-data">
+        <PriorityFeeTooltip>{renderPriorityFeeRange()}</PriorityFeeTooltip>
+      </span>
+      <span className="network-statistics__info__field-label">
+        <I18nValue messageKey="priorityFee" />
+      </span>
+    </div>
+  );
+}

ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { renderWithProvider } from '../../../../../../test/jest';
+import { GasFeeContext } from '../../../../../contexts/gasFee';
+import configureStore from '../../../../../store/store';
+
+import LatestPriorityFeeField from './latest-priority-fee-field';
+
+const renderComponent = (gasFeeEstimates) => {
+  const store = configureStore({});
+  return renderWithProvider(
+    <GasFeeContext.Provider value={{ gasFeeEstimates }}>
+      <LatestPriorityFeeField />
+    </GasFeeContext.Provider>,
+    store,
+  );
+};
+
+describe('LatestPriorityFeeField', () => {
+  it('should render a version of latest priority fee range pulled from context, rounded to 1 decimal place', () => {
+    const { getByText } = renderComponent({
+      latestPriorityFeeRange: ['1.000001668', '2.5634234'],
+    });
+    expect(getByText('1 - 2.6 GWEI')).toBeInTheDocument();
+  });
+
+  it('should render nothing if gasFeeEstimates are empty', () => {
+    const { queryByText } = renderComponent({});
+    expect(queryByText('GWEI')).not.toBeInTheDocument();
+  });
+});

ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js

@@ -9,7 +9,8 @@ import { useGasFeeContext } from '../../../../contexts/gasFee';
 import I18nValue from '../../../ui/i18n-value';
 import Typography from '../../../ui/typography/typography';
 
-import { BaseFeeTooltip, PriorityFeeTooltip } from './tooltips';
+import { BaseFeeTooltip } from './tooltips';
+import LatestPriorityFeeField from './latest-priority-fee-field';
 import StatusSlider from './status-slider';
 
 const NetworkStatistics = () => {
@@ -38,14 +39,7 @@ const NetworkStatistics = () => {
           </span>
         </div>
         <div className="network-statistics__info__separator" />
-        <div className="network-statistics__info__field network-statistics__info__field--priority-fee">
+        <LatestPriorityFeeField />
-          <span className="network-statistics__info__field-data">
-            <PriorityFeeTooltip>0.5 - 22 GWEI</PriorityFeeTooltip>
-          </span>
-          <span className="network-statistics__info__field-label">
-            <I18nValue messageKey="priorityFee" />
-          </span>
-        </div>
         <div className="network-statistics__info__separator" />
         <div className="network-statistics__info__field">
           <StatusSlider />

ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js

@@ -1,66 +1,33 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
 
 import { renderWithProvider } from '../../../../../test/jest';
-import { ETH } from '../../../../helpers/constants/common';
+import { GasFeeContext } from '../../../../contexts/gasFee';
-import { GasFeeContextProvider } from '../../../../contexts/gasFee';
 import configureStore from '../../../../store/store';
 
 import NetworkStatistics from './network-statistics';
 
-jest.mock('../../../../store/actions', () => ({
+const renderComponent = (gasFeeEstimates) => {
-  disconnectGasFeeEstimatePoller: jest.fn(),
+  const store = configureStore({});
-  getGasFeeEstimatesAndStartPolling: jest
-    .fn()
-    .mockImplementation(() => Promise.resolve()),
-  addPollingTokenToAppState: jest.fn(),
-  getGasFeeTimeEstimate: jest
-    .fn()
-    .mockImplementation(() => Promise.resolve('unknown')),
-}));
-
-const MOCK_FEE_ESTIMATE = {
-  estimatedBaseFee: '50.0112',
-};
-
-const renderComponent = (props) => {
-  const store = configureStore({
-    metamask: {
-      nativeCurrency: ETH,
-      provider: {},
-      cachedBalances: {},
-      accounts: {
-        '0xAddress': {
-          address: '0xAddress',
-          balance: '0x176e5b6f173ebe66',
-        },
-      },
-      selectedAddress: '0xAddress',
-      featureFlags: { advancedInlineGas: true },
-      gasFeeEstimates: MOCK_FEE_ESTIMATE,
-      ...props,
-    },
-  });
-
   return renderWithProvider(
-    <GasFeeContextProvider>
+    <GasFeeContext.Provider value={{ gasFeeEstimates }}>
       <NetworkStatistics />
-    </GasFeeContextProvider>,
+    </GasFeeContext.Provider>,
     store,
   );
 };
 
 describe('NetworkStatistics', () => {
-  it('should renders labels', () => {
+  it('should render the latest base fee', () => {
-    renderComponent();
+    const { getByText } = renderComponent({
-    expect(screen.queryByText('Base fee')).toBeInTheDocument();
+      estimatedBaseFee: '50.0112',
-    expect(screen.queryByText('Priority fee')).toBeInTheDocument();
+    });
+    expect(getByText('50.0112 GWEI')).toBeInTheDocument();
   });
 
-  it('should renders current base fee value', () => {
+  it('should render the latest priority fee range', () => {
-    renderComponent();
+    const { getByText } = renderComponent({
-    expect(
+      latestPriorityFeeRange: ['1.000001668', '2.5634234'],
-      screen.queryByText(`${MOCK_FEE_ESTIMATE.estimatedBaseFee} GWEI`),
+    });
-    ).toBeInTheDocument();
+    expect(getByText('1 - 2.6 GWEI')).toBeInTheDocument();
   });
 });