From 9fb2094c47c053d38ad8053b5eeaffbfacbbc8b5 Mon Sep 17 00:00:00 2001
From: salimtb <salim.toubal@outlook.com>
Date: Mon, 30 Sep 2024 18:09:09 +0200
Subject: [PATCH] fix: fix rpc selector

---
 .../Views/NetworkSelector/NetworkSelector.tsx | 111 +++++++++++-------
 app/components/Views/Settings/index.test.tsx  |   5 -
 2 files changed, 70 insertions(+), 46 deletions(-)

diff --git a/app/components/Views/NetworkSelector/NetworkSelector.tsx b/app/components/Views/NetworkSelector/NetworkSelector.tsx
index 08d8cf40e721..ce916fdc79d4 100644
--- a/app/components/Views/NetworkSelector/NetworkSelector.tsx
+++ b/app/components/Views/NetworkSelector/NetworkSelector.tsx
@@ -30,7 +30,6 @@ import {
   selectNetworkConfigurations,
   selectProviderConfig,
   ProviderConfig,
-  selectNetworkClientId,
 } from '../../../selectors/networkController';
 import { selectShowTestNetworks } from '../../../selectors/preferencesController';
 import Networks, {
@@ -130,7 +129,6 @@ const NetworkSelector = () => {
 
   const providerConfig: ProviderConfig = useSelector(selectProviderConfig);
   const networkConfigurations = useSelector(selectNetworkConfigurations);
-  const selectedNetworkClientId = useSelector(selectNetworkClientId);
 
   const route =
     useRoute<RouteProp<Record<string, NetworkSelectorRouteParams>, string>>();
@@ -162,11 +160,39 @@ const NetworkSelector = () => {
     isReadOnly: false,
   });
 
-  const onRpcSelect = (clientId: string) => {
-    const { NetworkController } = Engine.context;
+  const onRpcSelect = useCallback(
+    async (clientId: string, chainId: `0x${string}`) => {
+      const { NetworkController } = Engine.context;
 
-    NetworkController.setActiveNetwork(clientId);
-  };
+      const existingNetwork = networkConfigurations[chainId];
+      if (!existingNetwork) {
+        console.error(`No existing network found for chainId: ${chainId}`);
+        return;
+      }
+
+      const indexOfRpc = existingNetwork.rpcEndpoints.findIndex(
+        ({ networkClientId }) => clientId === networkClientId,
+      );
+
+      // Handle case where indexOfRpc is -1
+      if (indexOfRpc === -1) {
+        console.error(
+          `RPC endpoint with clientId: ${clientId} not found for chainId: ${chainId}`,
+        );
+        return;
+      }
+
+      // Proceed to update the network with the correct index
+      await NetworkController.updateNetwork(existingNetwork.chainId, {
+        ...existingNetwork,
+        defaultRpcEndpointIndex: indexOfRpc,
+      });
+
+      // Set the active network
+      NetworkController.setActiveNetwork(clientId);
+    },
+    [networkConfigurations], // Dependencies
+  );
 
   const [showMultiRpcSelectModal, setShowMultiRpcSelectModal] = useState<{
     isVisible: boolean;
@@ -723,20 +749,19 @@ const NetworkSelector = () => {
   };
 
   const renderBottomSheetRpc = useCallback(() => {
-    let imageSource;
+    if (!showMultiRpcSelectModal.isVisible) return null;
 
-    if (showMultiRpcSelectModal.chainId === CHAIN_IDS.MAINNET) {
-      imageSource = images.ETHEREUM;
-    } else if (showMultiRpcSelectModal.chainId === CHAIN_IDS.LINEA_MAINNET) {
-      imageSource = images['LINEA-MAINNET'];
-    } else {
-      //@ts-expect-error - The utils/network file is still JS and this function expects a networkType, and should be optional
-      imageSource = getNetworkImageSource({
-        chainId: showMultiRpcSelectModal?.chainId?.toString(),
-      });
-    }
+    const chainId = showMultiRpcSelectModal.chainId;
+    const imageSource =
+      chainId === CHAIN_IDS.MAINNET
+        ? images.ETHEREUM
+        : chainId === CHAIN_IDS.LINEA_MAINNET
+        ? images['LINEA-MAINNET']
+        : //@ts-expect-error - The utils/network file is still JS and this function expects a networkType, and should be optional
+          getNetworkImageSource({ chainId: chainId?.toString() });
 
-    if (!showMultiRpcSelectModal.isVisible) return null;
+    const rpcEndpoints =
+      networkConfigurations[chainId as `0x${string}`]?.rpcEndpoints || [];
 
     return (
       <BottomSheet
@@ -747,7 +772,7 @@ const NetworkSelector = () => {
         <BottomSheetHeader style={styles.baseHeader}>
           <View style={styles.baseTitle}>
             <Text variant={TextVariant.HeadingMD}>
-              {strings('app_settings.select_rpc_url')}{' '}
+              {strings('app_settings.select_rpc_url')}
             </Text>
           </View>
 
@@ -768,27 +793,32 @@ const NetworkSelector = () => {
             </Text>
           </Cell>
         </BottomSheetHeader>
+
         <View style={styles.rpcMenu}>
-          {networkConfigurations[providerConfig.chainId].rpcEndpoints?.map(
-            ({ url, networkClientId }, index) => (
-              <ListItemSelect
-                key={index}
-                isSelected={networkClientId === selectedNetworkClientId}
-                isDisabled={false}
-                gap={8}
-                onPress={() => {
-                  onRpcSelect(networkClientId);
-                  closeRpcModal();
-                }}
-              >
-                <View style={styles.rpcText}>
-                  <Text style={styles.textCentred}>
-                    {hideKeyFromUrl(hideProtocolFromUrl(url))}
-                  </Text>
-                </View>
-              </ListItemSelect>
-            ),
-          )}
+          {rpcEndpoints.map(({ url, networkClientId }, index) => (
+            <ListItemSelect
+              key={index}
+              isSelected={
+                networkClientId ===
+                rpcEndpoints[
+                  networkConfigurations[chainId as `0x${string}`]
+                    .defaultRpcEndpointIndex
+                ].networkClientId
+              }
+              isDisabled={false}
+              gap={8}
+              onPress={() => {
+                onRpcSelect(networkClientId, chainId as `0x${string}`);
+                closeRpcModal();
+              }}
+            >
+              <View style={styles.rpcText}>
+                <Text style={styles.textCentred}>
+                  {hideKeyFromUrl(hideProtocolFromUrl(url))}
+                </Text>
+              </View>
+            </ListItemSelect>
+          ))}
         </View>
       </BottomSheet>
     );
@@ -798,8 +828,7 @@ const NetworkSelector = () => {
     closeRpcModal,
     styles,
     networkConfigurations,
-    providerConfig.chainId,
-    selectedNetworkClientId,
+    onRpcSelect,
   ]);
 
   const renderBottomSheetContent = () => (
diff --git a/app/components/Views/Settings/index.test.tsx b/app/components/Views/Settings/index.test.tsx
index 6c9313298529..e959f03dfe35 100644
--- a/app/components/Views/Settings/index.test.tsx
+++ b/app/components/Views/Settings/index.test.tsx
@@ -66,11 +66,6 @@ describe('Settings', () => {
     const contactsSettings = getByTestId(SettingsViewSelectorsIDs.CONTACTS);
     expect(contactsSettings).toBeDefined();
   });
-  it('should render network settings button', () => {
-    const { getByTestId } = renderWithProvider(<Settings />);
-    const networksSettings = getByTestId(SettingsViewSelectorsIDs.NETWORKS);
-    expect(networksSettings).toBeDefined();
-  });
   it('should render feature request button', () => {
     const { getByTestId } = renderWithProvider(<Settings />);
     const onRampSettings = getByTestId(SettingsViewSelectorsIDs.ON_RAMP);