diff --git a/app/images/low-arrow.svg b/app/images/down-arrow.svg similarity index 100% rename from app/images/low-arrow.svg rename to app/images/down-arrow.svg diff --git a/app/images/high-arrow.svg b/app/images/up-arrow.svg similarity index 100% rename from app/images/high-arrow.svg rename to app/images/up-arrow.svg diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js index de7291b07..987fe7415 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js @@ -5,7 +5,7 @@ import Box from '../../../ui/box'; import I18nValue from '../../../ui/i18n-value'; import LoadingHeartBeat from '../../../ui/loading-heartbeat'; -const AdvancedGasFeeInputSubtext = ({ latest, historical }) => { +const AdvancedGasFeeInputSubtext = ({ latest, historical, feeTrend }) => { return ( @@ -16,7 +16,7 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical }) => { {latest} - + feeTrend-arrow @@ -34,6 +34,7 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical }) => { AdvancedGasFeeInputSubtext.propTypes = { latest: PropTypes.string, historical: PropTypes.string, + feeTrend: PropTypes.string.isRequired, }; export default AdvancedGasFeeInputSubtext; diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js index c2a9c51a3..ab3692de3 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js @@ -38,6 +38,7 @@ const render = () => { , store, ); @@ -45,14 +46,10 @@ const render = () => { describe('AdvancedGasFeeInputSubtext', () => { it('should renders latest and historical values passed', () => { - render( - , - ); + render(); expect(screen.queryByText('Latest Value')).toBeInTheDocument(); expect(screen.queryByText('Historical value')).toBeInTheDocument(); + expect(screen.queryByAltText('feeTrend-arrow')).toBeInTheDocument(); }); }); 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 09accff56..5d2ebd8e6 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 @@ -84,7 +84,12 @@ const BaseFeeInput = () => { setMaxFeePerGas, } = useAdvancedGasFeePopoverContext(); - const { estimatedBaseFee, historicalBaseFeeRange } = gasFeeEstimates; + const { + estimatedBaseFee, + historicalBaseFeeRange, + baseFeeTrend, + } = gasFeeEstimates; + const [feeTrend, setFeeTrend] = useState(baseFeeTrend); const [baseFeeError, setBaseFeeError] = useState(); const { numberOfDecimals: numberOfDecimalsPrimary, @@ -169,14 +174,20 @@ const BaseFeeInput = () => { error === 'editGasMaxBaseFeeGWEIImbalance' || error === 'editGasMaxBaseFeeMultiplierImbalance', ); + if (baseFeeTrend !== 'level' && baseFeeTrend !== feeTrend) { + setFeeTrend(baseFeeTrend); + } }, [ + feeTrend, editingInGwei, + baseFeeTrend, gasFeeEstimates, maxBaseFeeGWEI, maxPriorityFeePerGas, setBaseFeeError, setErrorValue, setMaxFeePerGas, + setFeeTrend, ]); return ( @@ -208,6 +219,7 @@ const BaseFeeInput = () => { 2, )} GWEI`} historical={renderFeeRange(historicalBaseFeeRange)} + feeTrend={feeTrend} /> ); 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 ab1f20056..671ed8dab 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 @@ -55,7 +55,9 @@ const PriorityFeeInput = () => { const { latestPriorityFeeRange, historicalPriorityFeeRange, + priorityFeeTrend, } = gasFeeEstimates; + const [feeTrend, setFeeTrend] = useState(priorityFeeTrend); const [priorityFeeError, setPriorityFeeError] = useState(); const [priorityFee, setPriorityFee] = useState(() => { @@ -86,12 +88,18 @@ const PriorityFeeInput = () => { error === 'editGasMaxPriorityFeeBelowMinimumV2', ); setPriorityFeeError(error); + if (priorityFeeTrend !== 'level' && priorityFeeTrend !== feeTrend) { + setFeeTrend(priorityFeeTrend); + } }, [ + feeTrend, + priorityFeeTrend, gasFeeEstimates, priorityFee, setErrorValue, setMaxPriorityFeePerGas, setPriorityFeeError, + setFeeTrend, ]); return ( @@ -109,6 +117,7 @@ const PriorityFeeInput = () => { );