diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.test.js index cf8268354..539c43c36 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.test.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.test.js @@ -60,24 +60,24 @@ describe('BaseFeeInput', () => { it('should renders advancedGasFee.baseFee value if current estimate used is not custom', () => { render({ userFeeLevel: 'high', - txParams: { - maxFeePerGas: '0x2E90EDD000', - }, }); expect(document.getElementsByTagName('input')[0]).toHaveValue(100); }); - it('should not advancedGasFee.baseFee value for swaps', () => { + it('should not use advancedGasFee.baseFee value for swaps', () => { render( { userFeeLevel: 'high', - txParams: { - maxFeePerGas: '0x2E90EDD000', - }, }, { editGasMode: EDIT_GAS_MODES.SWAPS }, ); - expect(document.getElementsByTagName('input')[0]).toHaveValue(200); + expect(document.getElementsByTagName('input')[0]).toHaveValue( + parseInt( + mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates.high + .suggestedMaxFeePerGas, + 10, + ), + ); }); it('should renders baseFee values from transaction if current estimate used is custom', () => { @@ -89,19 +89,11 @@ describe('BaseFeeInput', () => { expect(document.getElementsByTagName('input')[0]).toHaveValue(200); }); it('should show current value of estimatedBaseFee in subtext', () => { - render({ - txParams: { - maxFeePerGas: '0x174876E800', - }, - }); + render(); expect(screen.queryByText('50 GWEI')).toBeInTheDocument(); }); it('should show 12hr range value in subtext', () => { - render({ - txParams: { - maxFeePerGas: '0x174876E800', - }, - }); + render(); expect(screen.queryByText('50 - 100 GWEI')).toBeInTheDocument(); }); it('should show error if base fee is less than suggested low value', () => { @@ -120,7 +112,6 @@ describe('BaseFeeInput', () => { target: { value: 50 }, }); }); - it('should show error if base if is more than suggested high value', () => { render({ txParams: { 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 91b875ea8..686f5d65c 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 @@ -60,26 +60,24 @@ describe('PriorityfeeInput', () => { it('should renders advancedGasFee.priorityfee value if current estimate used is not custom', () => { render({ userFeeLevel: 'high', - txParams: { - maxFeePerGas: '0x2E90EDD000', - }, }); expect(document.getElementsByTagName('input')[0]).toHaveValue(100); }); - - it('should not advancedGasFee.baseFee value for swaps', () => { + it('should not use advancedGasFee.priorityfee value for swaps', () => { render( { userFeeLevel: 'high', - txParams: { - maxFeePerGas: '0x2E90EDD000', - }, }, { editGasMode: EDIT_GAS_MODES.SWAPS }, ); - expect(document.getElementsByTagName('input')[0]).toHaveValue(200); + expect(document.getElementsByTagName('input')[0]).toHaveValue( + parseInt( + mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates.high + .suggestedMaxPriorityFeePerGas, + 10, + ), + ); }); - it('should renders priorityfee value from transaction if current estimate used is custom', () => { render({ txParams: { @@ -89,19 +87,11 @@ describe('PriorityfeeInput', () => { expect(document.getElementsByTagName('input')[0]).toHaveValue(2); }); it('should show current priority fee range in subtext', () => { - render({ - txParams: { - maxFeePerGas: '0x174876E800', - }, - }); + render(); expect(screen.queryByText('1 - 20 GWEI')).toBeInTheDocument(); }); it('should show 12hr range value in subtext', () => { - render({ - txParams: { - maxFeePerGas: '0x174876E800', - }, - }); + render(); expect(screen.queryByText('2 - 125 GWEI')).toBeInTheDocument(); }); it('should show error if value entered is 0', () => { diff --git a/ui/components/app/gas-details-item/gas-details-item.js b/ui/components/app/gas-details-item/gas-details-item.js index c47b3a1dd..8c3977f19 100644 --- a/ui/components/app/gas-details-item/gas-details-item.js +++ b/ui/components/app/gas-details-item/gas-details-item.js @@ -5,7 +5,6 @@ import { useSelector } from 'react-redux'; import { COLORS } from '../../../helpers/constants/design-system'; import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'; -import { hexWEIToDecGWEI } from '../../../helpers/utils/conversions.util'; import { getPreferences } from '../../../selectors'; import { useGasFeeContext } from '../../../contexts/gasFee'; @@ -23,7 +22,8 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => { hasSimulationError, maximumCostInHexWei: hexMaximumTransactionFee, minimumCostInHexWei: hexMinimumTransactionFee, - transaction, + maxPriorityFeePerGas, + maxFeePerGas, } = useGasFeeContext(); const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences); @@ -90,10 +90,8 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => { } subTitle={ } /> diff --git a/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js b/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js index 77aa8c679..9898d0331 100644 --- a/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js +++ b/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js @@ -19,7 +19,10 @@ import { useCurrencyDisplay } from '../useCurrencyDisplay'; import { useUserPreferencedCurrency } from '../useUserPreferencedCurrency'; import { feeParamsAreCustom, getGasFeeEstimate } from './utils'; -const getMaxFeePerGasFromTransaction = (transaction) => { +const getMaxFeePerGasFromTransaction = (transaction, gasFeeEstimates) => { + if (gasFeeEstimates?.[transaction?.userFeeLevel]) { + return gasFeeEstimates[transaction.userFeeLevel].suggestedMaxFeePerGas; + } const { maxFeePerGas, gasPrice } = transaction?.txParams || {}; return Number(hexWEIToDecGWEI(maxFeePerGas || gasPrice)); }; @@ -64,7 +67,7 @@ export function useMaxFeePerGasInput({ const showFiat = useSelector(getShouldShowFiat); const initialMaxFeePerGas = supportsEIP1559 - ? getMaxFeePerGasFromTransaction(transaction) + ? getMaxFeePerGasFromTransaction(transaction, gasFeeEstimates) : 0; // This hook keeps track of a few pieces of transitional state. It is diff --git a/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js b/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js index 87e5b7b50..a3ae7ff4a 100644 --- a/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js +++ b/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js @@ -16,7 +16,14 @@ import { useCurrencyDisplay } from '../useCurrencyDisplay'; import { useUserPreferencedCurrency } from '../useUserPreferencedCurrency'; import { feeParamsAreCustom, getGasFeeEstimate } from './utils'; -const getMaxPriorityFeePerGasFromTransaction = (transaction) => { +const getMaxPriorityFeePerGasFromTransaction = ( + transaction, + gasFeeEstimates, +) => { + if (gasFeeEstimates?.[transaction?.userFeeLevel]) { + return gasFeeEstimates[transaction.userFeeLevel] + .suggestedMaxPriorityFeePerGas; + } const { maxPriorityFeePerGas, maxFeePerGas, gasPrice } = transaction?.txParams || {}; return Number( @@ -64,7 +71,7 @@ export function useMaxPriorityFeePerGasInput({ const showFiat = useSelector(getShouldShowFiat); const initialMaxPriorityFeePerGas = supportsEIP1559 - ? getMaxPriorityFeePerGasFromTransaction(transaction) + ? getMaxPriorityFeePerGasFromTransaction(transaction, gasFeeEstimates) : 0; const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState(() => {