diff --git a/test/data/mock-estimates.json b/test/data/mock-estimates.json index 8f7587f92..01bf6adff 100644 --- a/test/data/mock-estimates.json +++ b/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": {} } diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js index 5a90c1739..09accff56 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js +++ b/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 /> ); diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/basefee-input.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/basefee-input.test.js index 7540fdf65..f34d8e2c5 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/basefee-input.test.js +++ b/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: { diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js index fbf1da2b5..ab1f20056 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js +++ b/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 /> - + ); }; diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js index 7657b7ebc..19413c231 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js +++ b/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: { diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/utils.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/utils.js new file mode 100644 index 000000000..4dfa8852a --- /dev/null +++ b/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; +};