fix: fix token list on network rpc selection (#13097) (#13123)

## **Description** Cherry picks #13097 ## **Related issues** Fixes: #13091 ## **Manual testing steps** 1. Click on Network filter 2. Add new RPC for a network 3. Switch back and forth between networks by clicking on the rpc link 4. You should see correct tokenList ## **Screenshots/Recordings**  ### **Before**  Checkout video in the linked issue 🙏 ### **After**  https://github.com/user-attachments/assets/aff21d16-db9d-4c1e-9150-bf9176f89846 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.  ## **Description**  ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Jan 23, 2025 · 2ba60b1 · 2ba60b1
1 parent c70f4cd
commit 2ba60b1
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 3 deletions.
diff --git a/app/components/Views/NetworkSelector/RpcSelectionModal/RpcSelectionModal.test.tsx b/app/components/Views/NetworkSelector/RpcSelectionModal/RpcSelectionModal.test.tsx
@@ -6,7 +6,16 @@ import renderWithProvider from '../../../../util/test/renderWithProvider';
 // Internal dependencies.
 import RpcSelectionModal from './RpcSelectionModal';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
-import { NetworkConfiguration } from '@metamask/network-controller';
+import {
+  NetworkConfiguration,
+  RpcEndpointType,
+} from '@metamask/network-controller';
+import Engine from '../../../../core/Engine/Engine';
+import { useSelector } from 'react-redux';
+import { selectNetworkConfigurations } from '../../../../selectors/networkController';
+import { NETWORK_CHAIN_ID } from '../../../../util/networks/customNetworks';
+import { Hex } from '@metamask/utils';
+const { PreferencesController } = Engine.context;
 
 const MOCK_STORE_STATE = {
   engine: {
@@ -55,7 +64,7 @@ const MOCK_STORE_STATE = {
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
-  useSelector: (fn: (state: unknown) => unknown) => fn(MOCK_STORE_STATE),
+  useSelector: jest.fn(),
 }));
 
 jest.mock('react-native-safe-area-context', () => {
@@ -84,6 +93,49 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+jest.mock('../../../../core/Engine/Engine', () => ({
+  context: {
+    PreferencesController: {
+      setTokenNetworkFilter: jest.fn(),
+    },
+  },
+}));
+
+const mockNetworks: Record<Hex, NetworkConfiguration> = {
+  [NETWORK_CHAIN_ID.MAINNET]: {
+    blockExplorerUrls: ['https://etherscan.io'],
+    chainId: NETWORK_CHAIN_ID.MAINNET,
+    defaultBlockExplorerUrlIndex: 0,
+    defaultRpcEndpointIndex: 0,
+    name: 'Ethereum Mainnet',
+    nativeCurrency: 'ETH',
+    rpcEndpoints: [
+      {
+        url: 'https://mainnet.infura.io/v3',
+        networkClientId: NETWORK_CHAIN_ID.MAINNET,
+        type: RpcEndpointType.Custom,
+        name: 'Ethereum',
+      },
+    ],
+  },
+  [NETWORK_CHAIN_ID.POLYGON]: {
+    blockExplorerUrls: ['https://polygonscan.com'],
+    chainId: NETWORK_CHAIN_ID.POLYGON,
+    defaultBlockExplorerUrlIndex: 0,
+    defaultRpcEndpointIndex: 0,
+    name: 'Polygon Mainnet',
+    nativeCurrency: 'MATIC',
+    rpcEndpoints: [
+      {
+        url: 'https://polygon-rpc.com',
+        name: 'Polygon',
+        networkClientId: NETWORK_CHAIN_ID.POLYGON,
+        type: RpcEndpointType.Custom,
+      },
+    ],
+  },
+};
+
 describe('RpcSelectionModal', () => {
   const mockRpcMenuSheetRef = {
     current: {
@@ -117,6 +169,18 @@ describe('RpcSelectionModal', () => {
     },
   };
 
+  beforeEach(() => {
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === selectNetworkConfigurations) {
+        return mockNetworks; // to show all networks
+      }
+      return null;
+    });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should render correctly when visible', () => {
     const { toJSON } = renderWithProvider(
       <RpcSelectionModal {...defaultProps} />,
@@ -186,4 +250,15 @@ describe('RpcSelectionModal', () => {
 
     expect(queryByText('mainnet.infura.io')).toBeNull(); // Should not render any RPC URLs
   });
+
+  it('should call preferences controller setTokenNetworkFilter', () => {
+    const { getByText } = renderWithProvider(
+      <RpcSelectionModal {...defaultProps} />,
+    );
+    const rpcUrlElement = getByText('mainnet.infura.io/v3');
+    fireEvent.press(rpcUrlElement);
+    expect(PreferencesController.setTokenNetworkFilter).toHaveBeenCalledTimes(
+      1,
+    );
+  });
 });
diff --git a/app/components/Views/NetworkSelector/RpcSelectionModal/RpcSelectionModal.tsx b/app/components/Views/NetworkSelector/RpcSelectionModal/RpcSelectionModal.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import BottomSheet, {
   BottomSheetRef,
@@ -21,6 +21,10 @@ import images from 'images/image-icons';
 import hideProtocolFromUrl from '../../../../util/hideProtocolFromUrl';
 import hideKeyFromUrl from '../../../../util/hideKeyFromUrl';
 import { NetworkConfiguration } from '@metamask/network-controller';
+import { useSelector } from 'react-redux';
+import { selectIsAllNetworks } from '../../../../selectors/networkController';
+import { PopularList } from '../../../../util/networks/customNetworks';
+import Engine from '../../../../core/Engine/Engine';
 
 interface RpcSelectionModalProps {
   showMultiRpcSelectModal: {
@@ -50,6 +54,24 @@ const RpcSelectionModal: FC<RpcSelectionModalProps> = ({
   networkConfigurations,
   styles,
 }) => {
+  const isAllNetwork = useSelector(selectIsAllNetworks);
+
+  const setTokenNetworkFilter = useCallback(
+    (chainId: string) => {
+      const isPopularNetwork =
+        chainId === CHAIN_IDS.MAINNET ||
+        chainId === CHAIN_IDS.LINEA_MAINNET ||
+        PopularList.some((network) => network.chainId === chainId);
+
+      const { PreferencesController } = Engine.context;
+      if (!isAllNetwork && isPopularNetwork) {
+        PreferencesController.setTokenNetworkFilter({
+          [chainId]: true,
+        });
+      }
+    },
+    [isAllNetwork],
+  );
   const imageSource = useMemo(() => {
     switch (showMultiRpcSelectModal.chainId) {
       case CHAIN_IDS.MAINNET:
@@ -119,6 +141,7 @@ const RpcSelectionModal: FC<RpcSelectionModalProps> = ({
               gap={8}
               onPress={() => {
                 onRpcSelect(networkClientId, chainId as `0x${string}`);
+                setTokenNetworkFilter(chainId as `0x${string}`);
                 closeRpcModal();
               }}
             >