diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form.js b/ui/pages/settings/networks-tab/networks-form/networks-form.js index b3e79e5d6..503e205aa 100644 --- a/ui/pages/settings/networks-tab/networks-form/networks-form.js +++ b/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', - msg: t('invalidHexNumber'), + error: { + key: 'invalidHexNumber', + msg: t('invalidHexNumber'), + }, }; } } @@ -253,8 +257,8 @@ const NetworksForm = ({ if (formChainId === '') { return null; } else if (matchingChainId) { - errorKey = 'chainIdExistsErrorMsg'; - errorMessage = t('chainIdExistsErrorMsg', [ + warningKey = 'chainIdExistsErrorMsg'; + warningMessage = t('chainIdExistsErrorMsg', [ matchingChainId.label ?? matchingChainId.labelKey, ]); } else if (formChainId.startsWith('0x')) { @@ -316,8 +320,18 @@ const NetworksForm = ({ } if (errorKey) { return { - key: errorKey, - msg: errorMessage, + error: { + 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 = ({ /> { setIsEditing(true); setChainId(value); diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form.test.js b/ui/pages/settings/networks-tab/networks-form/networks-form.test.js index 43c92a83c..29b034ab0 100644 --- a/ui/pages/settings/networks-tab/networks-form/networks-form.test.js +++ b/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' }, });