fix: fix duplicated network select (#11524)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
his PR introduces a fix for handling multiple networks with different
RPC URLs in the NetworkSelector component, along with comprehensive unit
tests to ensure the component's functionality. The tests verify that
only one network can be selected at a time, even when the networks have
the same chain ID but different RPC URLs.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes: #11509 

## **Manual testing steps**

1. add tow different polygon network with two different rpc
2. switch between them

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


https://github.com/user-attachments/assets/4870882d-0029-459a-ad91-f409ed552183


<!-- [screenshots/recordings] -->

### **After**



https://github.com/user-attachments/assets/1966eda3-2e10-4b93-babf-2afe3be48aed


<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.

app/components/Views/NetworkSelector/NetworkSelector.test.tsx

@@ -207,6 +207,7 @@ describe('Network Selector', () => {
     expect(testNetworksSwitch.props.value).toBeTruthy();
     expect(testNetworksSwitch.props.disabled).toBeTruthy();
   });
+
   it('changes to non infura network when another network cell is pressed', async () => {
     const { getByText } = renderComponent(initialState);
     const gnosisCell = getByText('Gnosis Chain');
@@ -238,6 +239,7 @@ describe('Network Selector', () => {
 
     expect(mockEngine.context.NetworkController.setActiveNetwork).toBeCalled();
   });
+
   it('renders correctly with no network configurations', async () => {
     (isNetworkUiRedesignEnabled as jest.Mock).mockImplementation(() => true);
     const stateWithNoNetworkConfigurations = {
@@ -287,4 +289,70 @@ describe('Network Selector', () => {
       fireEvent.press(rpcOption);
     });
   });
+
+  // Add this test for selecting between two Polygon networks
+  it('should select only one Polygon network when two networks with different RPC URLs exist', async () => {
+    jest.clearAllMocks(); // Clears mock data, ensuring that no mock has been called
+    jest.resetAllMocks(); // Resets mock implementation and mock instances
+
+    const customState = {
+      ...initialState,
+      engine: {
+        backgroundState: {
+          ...initialState.engine.backgroundState,
+          NetworkController: {
+            networkConfigurations: {
+              polygonNetwork1: {
+                chainId: '0x89', // Polygon Mainnet
+                nickname: 'Polygon Mainnet 1',
+                rpcUrl: 'https://polygon-mainnet-1.rpc',
+                ticker: 'POL',
+              },
+              polygonNetwork2: {
+                chainId: '0x89', // Polygon Mainnet (same chainId, different RPC URL)
+                nickname: 'Polygon Mainnet 2',
+                rpcUrl: 'https://polygon-mainnet-2.rpc',
+                ticker: 'POL',
+              },
+            },
+          },
+        },
+      },
+    };
+
+    (
+      Engine.context.NetworkController.getNetworkClientById as jest.Mock
+    ).mockReturnValue({
+      configuration: {
+        chainId: '0x89', // Polygon Mainnet
+        nickname: 'Polygon Mainnet 1',
+        rpcUrl: 'https://polygon-mainnet-1.rpc',
+        ticker: 'POL',
+        type: 'custom',
+      },
+    });
+
+    const { getByText, queryByTestId } = renderComponent(customState);
+
+    // Ensure both networks are rendered
+    const polygonNetwork1 = getByText('Polygon Mainnet 1');
+    const polygonNetwork2 = getByText('Polygon Mainnet 2');
+    expect(polygonNetwork1).toBeTruthy();
+    expect(polygonNetwork2).toBeTruthy();
+
+    // Select the first network
+    fireEvent.press(polygonNetwork1);
+
+    // Wait for the selection to be applied
+    await waitFor(() => {
+      const polygonNetwork1Selected = queryByTestId(
+        'Polygon Mainnet 1-selected',
+      );
+      expect(polygonNetwork1Selected).toBeTruthy();
+    });
+
+    // Assert that the second network is NOT selected
+    const polygonNetwork2Selected = queryByTestId('Polygon Mainnet 2-selected');
+    expect(polygonNetwork2Selected).toBeNull(); // Not selected
+  });
 });

app/components/Views/NetworkSelector/NetworkSelector.tsx

@@ -466,7 +466,7 @@ const NetworkSelector = () => {
           imageSource: images['LINEA-MAINNET'],
           size: avatarSize,
         }}
-        isSelected={chainId === selectedChainId}
+        isSelected={chainId === selectedChainId && !providerConfig.rpcUrl}
         onPress={() => onNetworkChange(LINEA_MAINNET)}
       />
     );
@@ -520,7 +520,8 @@ const NetworkSelector = () => {
 
         return (
           <Cell
-            key={chainId}
+            key={`${chainId}-${rpcUrl}`}
+            testID={`network-cell-${name}`}
             variant={CellVariant.Select}
             title={name}
             avatarProps={{
@@ -529,10 +530,16 @@ const NetworkSelector = () => {
               imageSource: image,
               size: avatarSize,
             }}
-            isSelected={Boolean(chainId === selectedChainId && selectedRpcUrl)}
+            isSelected={Boolean(
+              chainId === selectedChainId && selectedRpcUrl === rpcUrl,
+            )}
             onPress={() => onSetRpcTarget(rpcUrl)}
             style={styles.networkCell}
-          />
+          >
+            {Boolean(
+              chainId === selectedChainId && selectedRpcUrl === rpcUrl,
+            ) && <View testID={`${name}-selected`} />}
+          </Cell>
         );
       },
     );

app/components/Views/NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap

@@ -705,7 +705,7 @@ exports[`Network Selector renders correctly 1`] = `
                                     "position": "relative",
                                   }
                                 }
-                                testID="cellselect"
+                                testID="network-cell-Avalanche Mainnet C-Chain"
                               >
                                 <View
                                   accessibilityRole="none"
@@ -808,7 +808,7 @@ exports[`Network Selector renders correctly 1`] = `
                                     "position": "relative",
                                   }
                                 }
-                                testID="cellselect"
+                                testID="network-cell-Polygon Mainnet"
                               >
                                 <View
                                   accessibilityRole="none"
@@ -911,7 +911,7 @@ exports[`Network Selector renders correctly 1`] = `
                                     "position": "relative",
                                   }
                                 }
-                                testID="cellselect"
+                                testID="network-cell-Optimism"
                               >
                                 <View
                                   accessibilityRole="none"
@@ -1014,7 +1014,7 @@ exports[`Network Selector renders correctly 1`] = `
                                     "position": "relative",
                                   }
                                 }
-                                testID="cellselect"
+                                testID="network-cell-Gnosis Chain"
                               >
                                 <View
                                   accessibilityRole="none"