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(); }); });