diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/index.js b/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/index.js
new file mode 100644
index 000000000..f1bc7464f
--- /dev/null
+++ b/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';
diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.js b/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.js
new file mode 100644
index 000000000..f15289223
--- /dev/null
+++ b/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 (
+
+
+ {renderPriorityFeeRange()}
+
+
+
+
+
+ );
+}
diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.test.js b/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.test.js
new file mode 100644
index 000000000..cbdefce49
--- /dev/null
+++ b/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(
+
+
+ ,
+ 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();
+ });
+});
diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
index d6508f3e9..7f104acd5 100644
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
+++ b/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 = () => {
-
-
- 0.5 - 22 GWEI
-
-
-
-
-
+
diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js
index 6ad2d5574..61efaace6 100644
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js
+++ b/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 { GasFeeContextProvider } from '../../../../contexts/gasFee';
+import { GasFeeContext } from '../../../../contexts/gasFee';
import configureStore from '../../../../store/store';
import NetworkStatistics from './network-statistics';
-jest.mock('../../../../store/actions', () => ({
- disconnectGasFeeEstimatePoller: jest.fn(),
- 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,
- },
- });
-
+const renderComponent = (gasFeeEstimates) => {
+ const store = configureStore({});
return renderWithProvider(
-
+
- ,
+ ,
store,
);
};
describe('NetworkStatistics', () => {
- it('should renders labels', () => {
- renderComponent();
- expect(screen.queryByText('Base fee')).toBeInTheDocument();
- expect(screen.queryByText('Priority fee')).toBeInTheDocument();
+ it('should render the latest base fee', () => {
+ const { getByText } = renderComponent({
+ estimatedBaseFee: '50.0112',
+ });
+ expect(getByText('50.0112 GWEI')).toBeInTheDocument();
});
- it('should renders current base fee value', () => {
- renderComponent();
- expect(
- screen.queryByText(`${MOCK_FEE_ESTIMATE.estimatedBaseFee} GWEI`),
- ).toBeInTheDocument();
+ it('should render the latest priority fee range', () => {
+ const { getByText } = renderComponent({
+ latestPriorityFeeRange: ['1.000001668', '2.5634234'],
+ });
+ expect(getByText('1 - 2.6 GWEI')).toBeInTheDocument();
});
});