feat: network verifecation messages

MetaMask · Jun 12, 2024 · 7b15964 · 7b15964
1 parent fbd6e17
commit 7b15964
Show file tree

Hide file tree

Showing 10 changed files with 420 additions and 31 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/test/e2e/tests/network/custom-rpc-history.spec.js b/test/e2e/tests/network/custom-rpc-history.spec.js
@@ -143,7 +143,7 @@ describe('Custom RPC history', function () {
         await chainIdInput.clear();
         await chainIdInput.sendKeys(duplicateChainId);
         await driver.findElement({
-          text: 'This Chain ID is currently used by the mainnet network.',
+          text: 'You already have a network with the same Chain ID and RPC URL. Enter a new chain ID or RPC URL.',
           tag: 'h6',
         });
 

diff --git a/ui/helpers/utils/network-helper.test.ts b/ui/helpers/utils/network-helper.test.ts
@@ -1,4 +1,8 @@
-import { getMatchedChain, getMatchedSymbols } from './network-helper';
+import {
+  getMatchedChain,
+  getMatchedNames,
+  getMatchedSymbols,
+} from './network-helper';
 
 describe('netwotkHelper', () => {
   describe('getMatchedChain', () => {
@@ -76,4 +80,53 @@ describe('netwotkHelper', () => {
       expect(result).toEqual([]);
     });
   });
+
+  describe('getMatchedName', () => {
+    it('should return an array of symbols that match the given decimalChainId', () => {
+      const chains = [
+        {
+          chainId: '1',
+          name: 'test',
+          nativeCurrency: { symbol: 'ETH', name: 'Ethereum' },
+        },
+        {
+          chainId: '3',
+          name: 'test',
+          nativeCurrency: { symbol: 'tETH', name: 'tEthereum' },
+        },
+        {
+          chainId: '1',
+          name: 'test',
+          nativeCurrency: { symbol: 'WETH', name: 'WEthereum' },
+        },
+      ];
+      const decimalChainId = '1';
+      const expected = ['Ethereum', 'WEthereum'];
+
+      const result = getMatchedNames(decimalChainId, chains);
+
+      expect(result).toEqual(expect.arrayContaining(expected));
+      expect(result.length).toBe(expected.length);
+    });
+
+    it('should return an empty array if no symbols match the given decimalChainId', () => {
+      const chains = [
+        {
+          chainId: '1',
+          name: 'test',
+          nativeCurrency: { symbol: 'ETH', name: 'Ethereum' },
+        },
+        {
+          chainId: '3',
+          name: 'test',
+          nativeCurrency: { symbol: 'tETH', name: 'tEthereum' },
+        },
+      ];
+      const decimalChainId = '2'; // No matching chainId
+
+      const result = getMatchedNames(decimalChainId, chains);
+
+      expect(result).toEqual([]);
+    });
+  });
 });
diff --git a/ui/helpers/utils/network-helper.ts b/ui/helpers/utils/network-helper.ts
@@ -26,3 +26,19 @@ export const getMatchedSymbols = (
     return accumulator;
   }, []);
 };
+
+export const getMatchedNames = (
+  decimalChainId: string,
+  safeChainsList: {
+    chainId: string;
+    name: string;
+    nativeCurrency: { symbol: string; name: string };
+  }[],
+): string[] => {
+  return safeChainsList.reduce<string[]>((accumulator, currentNetwork) => {
+    if (currentNetwork.chainId.toString() === decimalChainId) {
+      accumulator.push(currentNetwork.nativeCurrency?.name);
+    }
+    return accumulator;
+  }, []);
+};
diff --git a/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap b/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
@@ -67,6 +67,12 @@ exports[`Add Network Modal should render 1`] = `
           
         </label>
       </div>
+      <span
+        class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
+        data-testid="network-form-name-suggestion"
+      >
+        Suggested name:
+      </span>
       <div
         class="form-field"
       >
@@ -240,5 +246,3 @@ exports[`Add Network Modal should render 1`] = `
   </div>
 </div>
 `;
-
-exports[`Add Network Modal should render 2`] = `<div />`;
diff --git a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
@@ -11,6 +11,10 @@ jest.mock('../../../store/actions', () => ({
   hideModal: () => mockHideModal,
 }));
 
+jest.mock('../../../helpers/utils/feature-flags', () => ({
+  getLocalNetworkMenuRedesignFeatureFlag: jest.fn(() => false),
+}));
+
 describe('Add Network Modal', () => {
   // Set the environment variable before tests run
   beforeEach(() => {
@@ -23,7 +27,13 @@ describe('Add Network Modal', () => {
   });
   it('should render', async () => {
     const mockStore = configureMockStore([])({
-      metamask: { useSafeChainsListValidation: true },
+      metamask: {
+        useSafeChainsListValidation: true,
+        orderedNetworkList: {
+          chainId: '0x1',
+          rpcUrl: 'http://test.com',
+        },
+      },
     });
 
     const { container } = renderWithProvider(
@@ -38,7 +48,13 @@ describe('Add Network Modal', () => {
 
   it('should handle callback', async () => {
     const mockStore = configureMockStore([thunk])({
-      metamask: { useSafeChainsListValidation: true },
+      metamask: {
+        useSafeChainsListValidation: true,
+        orderedNetworkList: {
+          chainId: '0x1',
+          rpcUrl: 'http://test.com',
+        },
+      },
     });
 
     const { queryByText } = renderWithProvider(
@@ -56,7 +72,13 @@ describe('Add Network Modal', () => {
 
   it('should not render the new network flow modal', async () => {
     const mockStore = configureMockStore([thunk])({
-      metamask: { useSafeChainsListValidation: true },
+      metamask: {
+        useSafeChainsListValidation: true,
+        orderedNetworkList: {
+          chainId: '0x1',
+          rpcUrl: 'http://test.com',
+        },
+      },
     });
 
     const { queryByText } = renderWithProvider(