diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index ec648c165..772aa513d 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1648,7 +1648,7 @@ "message": "Low" }, "lowGasSettingToolTipMessage": { - "message": "Use $1 to wait for a cheaper price. Time estimates are much less accurate as prices are somewhat unpredicible.", + "message": "Use $1 to wait for a cheaper price. Time estimates are much less accurate as prices are somewhat unpredictable.", "description": "$1 is key 'low' separated here so that it can be passed in with bold fontweight" }, "lowLowercase": { diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js index c5e42146b..94359ce9a 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js @@ -23,6 +23,7 @@ const AdvancedGasFeeGasLimit = () => { const t = useI18nContext(); const { setGasLimit: setGasLimitInContext, + setErrorValue, } = useAdvancedGasFeePopoverContext(); const { gasLimit: gasLimitInTransaction, @@ -40,7 +41,8 @@ const AdvancedGasFeeGasLimit = () => { setGasLimitInContext(gasLimit); const error = validateGasLimit(gasLimit, minimumGasLimitDec); setGasLimitError(error); - }, [gasLimit, minimumGasLimitDec, setGasLimitInContext]); + setErrorValue('gasLimit', error === 'editGasLimitOutOfBoundsV2'); + }, [gasLimit, minimumGasLimitDec, setGasLimitInContext, setErrorValue]); if (isEditing) { return ( diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js index de913b08c..2605154a2 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js @@ -5,6 +5,7 @@ import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas'; import { renderWithProvider } from '../../../../../test/lib/render-helpers'; import mockEstimates from '../../../../../test/data/mock-estimates.json'; import mockState from '../../../../../test/data/mock-state.json'; +import { MAX_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants'; import { GasFeeContextProvider } from '../../../../contexts/gasFee'; import configureStore from '../../../../store/store'; @@ -74,7 +75,7 @@ describe('AdvancedGasFeeGasLimit', () => { }); expect( screen.queryByText( - 'Gas limit must be greater than 20999 and less than 7920027', + `Gas limit must be greater than 20999 and less than ${MAX_GAS_LIMIT_DEC}`, ), ).toBeInTheDocument(); fireEvent.change(document.getElementsByTagName('input')[0], { @@ -82,7 +83,7 @@ describe('AdvancedGasFeeGasLimit', () => { }); expect( screen.queryByText( - 'Gas limit must be greater than 20999 and less than 7920027', + `Gas limit must be greater than 20999 and less than ${MAX_GAS_LIMIT_DEC}`, ), ).toBeInTheDocument(); fireEvent.change(document.getElementsByTagName('input')[0], { @@ -90,7 +91,7 @@ describe('AdvancedGasFeeGasLimit', () => { }); expect( screen.queryByText( - 'Gas limit must be greater than 20999 and less than 7920027', + `Gas limit must be greater than 20999 and less than ${MAX_GAS_LIMIT_DEC}`, ), ).not.toBeInTheDocument(); }); @@ -103,7 +104,7 @@ describe('AdvancedGasFeeGasLimit', () => { }); expect( screen.queryByText( - 'Gas limit must be greater than 29999 and less than 7920027', + `Gas limit must be greater than 29999 and less than ${MAX_GAS_LIMIT_DEC}`, ), ).toBeInTheDocument(); }); diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.test.js index 2a0f18ba5..493be3dea 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.test.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.test.js @@ -5,6 +5,7 @@ import { GAS_ESTIMATE_TYPES } from '../../../../shared/constants/gas'; import { renderWithProvider } from '../../../../test/lib/render-helpers'; import mockEstimates from '../../../../test/data/mock-estimates.json'; import mockState from '../../../../test/data/mock-state.json'; +import { MAX_GAS_LIMIT_DEC } from '../../../pages/send/send.constants'; import { GasFeeContextProvider } from '../../../contexts/gasFee'; import configureStore from '../../../store/store'; @@ -47,6 +48,7 @@ const render = () => { @@ -76,4 +78,21 @@ describe('AdvancedGasFeePopover', () => { }); expect(screen.queryByRole('button', { name: 'Save' })).toBeDisabled(); }); + + it('should disable save button if gas limit beyond range is entered', () => { + render(); + fireEvent.click(screen.queryByText('Edit')); + fireEvent.change(document.getElementsByTagName('input')[3], { + target: { value: 0 }, + }); + expect(screen.queryByRole('button', { name: 'Save' })).toBeDisabled(); + fireEvent.change(document.getElementsByTagName('input')[3], { + target: { value: 30000 }, + }); + expect(screen.queryByRole('button', { name: 'Save' })).not.toBeDisabled(); + fireEvent.change(document.getElementsByTagName('input')[3], { + target: { value: MAX_GAS_LIMIT_DEC + 1 }, + }); + expect(screen.queryByRole('button', { name: 'Save' })).toBeDisabled(); + }); }); diff --git a/ui/components/app/advanced-gas-fee-popover/context/advancedGasFeePopover.js b/ui/components/app/advanced-gas-fee-popover/context/advancedGasFeePopover.js index 55a6b49f1..780d2bcbb 100644 --- a/ui/components/app/advanced-gas-fee-popover/context/advancedGasFeePopover.js +++ b/ui/components/app/advanced-gas-fee-popover/context/advancedGasFeePopover.js @@ -10,6 +10,7 @@ export const AdvancedGasFeePopoverContextProvider = ({ children }) => { const [errors, setErrors] = useState({ maxFeePerGas: false, maxPriorityFeePerGas: false, + gasLimit: false, }); const setErrorValue = useCallback( @@ -26,7 +27,8 @@ export const AdvancedGasFeePopoverContextProvider = ({ children }) => {