Fixes in EIP-1559 V2 implementation (#13574)

* Fixes in EIP-1559 V2 implementation

* Adding check for transaction.id in useTransactionEventFragment hook

* Update ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js

Co-authored-by: Alex Donesky <adonesky@gmail.com>

* fix

* fix

* fix

* fix

* fix

* fix build

Co-authored-by: Dan J Miller <danjm.com@gmail.com>
Co-authored-by: Alex Donesky <adonesky@gmail.com>

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": {

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 (

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

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 = () => {
     <GasFeeContextProvider
       transaction={{
         userFeeLevel: 'high',
+        txParams: { gas: '0x5208' },
       }}
     >
       <AdvancedGasFeePopover />
@@ -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();
+  });
 });

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 }) => {
     <AdvancedGasFeePopoverContext.Provider
       value={{
         gasLimit,
-        hasErrors: errors.maxFeePerGas || errors.maxPriorityFeePerGas,
+        hasErrors:
+          errors.maxFeePerGas || errors.maxPriorityFeePerGas || errors.gasLimit,
         maxFeePerGas,
         maxPriorityFeePerGas,
         setErrorValue,