fix chainId validation on network form (#16452)

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -232,6 +232,8 @@ const NetworksForm = ({
       const formChainId = chainArg.trim();
       let errorKey = '';
       let errorMessage = '';
+      let warningKey = '';
+      let warningMessage = '';
       let radix = 10;
       let hexChainId = formChainId;
 
@@ -240,8 +242,10 @@ const NetworksForm = ({
           hexChainId = `0x${decimalToHex(hexChainId)}`;
         } catch (err) {
           return {
-            key: 'invalidHexNumber',
+            error: {
-            msg: t('invalidHexNumber'),
+              key: 'invalidHexNumber',
+              msg: t('invalidHexNumber'),
+            },
           };
         }
       }
@@ -253,8 +257,8 @@ const NetworksForm = ({
       if (formChainId === '') {
         return null;
       } else if (matchingChainId) {
-        errorKey = 'chainIdExistsErrorMsg';
+        warningKey = 'chainIdExistsErrorMsg';
-        errorMessage = t('chainIdExistsErrorMsg', [
+        warningMessage = t('chainIdExistsErrorMsg', [
           matchingChainId.label ?? matchingChainId.labelKey,
         ]);
       } else if (formChainId.startsWith('0x')) {
@@ -316,8 +320,18 @@ const NetworksForm = ({
       }
       if (errorKey) {
         return {
-          key: errorKey,
+          error: {
-          msg: errorMessage,
+            key: errorKey,
+            msg: errorMessage,
+          },
+        };
+      }
+      if (warningKey) {
+        return {
+          warning: {
+            key: warningKey,
+            msg: warningMessage,
+          },
         };
       }
 
@@ -447,7 +461,8 @@ const NetworksForm = ({
       return;
     }
     async function validate() {
-      const chainIdError = await validateChainId(chainId);
+      const { error: chainIdError, warning: chainIdWarning } =
+        (await validateChainId(chainId)) || {};
       const tickerWarning = await validateTickerSymbol(chainId, ticker);
       const blockExplorerError = validateBlockExplorerURL(blockExplorerUrl);
       const rpcUrlError = validateRPCUrl(rpcUrl);
@@ -455,10 +470,11 @@ const NetworksForm = ({
         ...errors,
         blockExplorerUrl: blockExplorerError,
         rpcUrl: rpcUrlError,
+        chainId: chainIdError,
       });
       setWarnings({
         ...warnings,
-        chainId: chainIdError,
+        chainId: chainIdWarning,
         ticker: tickerWarning,
       });
     }
@@ -632,6 +648,7 @@ const NetworksForm = ({
         />
         <FormField
           warning={warnings.chainId?.msg || ''}
+          error={errors.chainId?.msg || ''}
           onChange={(value) => {
             setIsEditing(true);
             setChainId(value);

ui/pages/settings/networks-tab/networks-form/networks-form.test.js

@@ -78,7 +78,13 @@ describe('NetworkForm Component', () => {
       encodedQueryParams: true,
     })
       .post('/')
-      .reply(200, { jsonrpc: '2.0', id: '1643927040523', result: '0x38' });
+      .reply(200, { jsonrpc: '2.0', result: '0x38' });
+
+    nock('https://rpc.flashbots.net:443', {
+      encodedQueryParams: true,
+    })
+      .post('/')
+      .reply(200, { jsonrpc: '2.0', result: '0x1' });
   });
 
   afterEach(() => {
@@ -190,17 +196,30 @@ describe('NetworkForm Component', () => {
     renderComponent(propNewNetwork);
     const chainIdField = screen.getByRole('textbox', { name: 'Chain ID' });
     const rpcUrlField = screen.getByRole('textbox', { name: 'New RPC URL' });
+    const currencySymbolField = screen.getByRole('textbox', {
+      name: 'Currency symbol',
+    });
 
     fireEvent.change(chainIdField, {
       target: { value: '1' },
     });
 
+    fireEvent.change(currencySymbolField, {
+      target: { value: 'test' },
+    });
+
+    fireEvent.change(rpcUrlField, {
+      target: { value: 'https://rpc.flashbots.net' },
+    });
+
     expect(
       await screen.findByText(
         'This Chain ID is currently used by the mainnet network.',
       ),
     ).toBeInTheDocument();
 
+    expect(screen.getByText('Save')).not.toBeDisabled();
+
     fireEvent.change(rpcUrlField, {
       target: { value: 'https://bsc-dataseed.binance.org/' },
     });
@@ -209,6 +228,8 @@ describe('NetworkForm Component', () => {
       'The RPC URL you have entered returned a different chain ID (56). Please update the Chain ID to match the RPC URL of the network you are trying to add.';
     expect(await screen.findByText(expectedWarning)).toBeInTheDocument();
 
+    expect(screen.getByText('Save')).toBeDisabled();
+
     fireEvent.change(chainIdField, {
       target: { value: 'a' },
     });