chore: bump network controller 21.0.0

app/components/UI/AccountInfoCard/index.test.tsx

@@ -9,6 +9,8 @@ import {
   MOCK_ADDRESS_1,
 } from '../../../util/test/accountsControllerTestUtils';
 import { RootState } from '../../../reducers';
+import { RpcEndpointType } from '@metamask/network-controller';
+import { mockNetworkState } from '../../../util/test/network';
 
 jest.mock('../../../core/Engine', () => ({
   resetState: jest.fn(),
@@ -48,20 +50,13 @@ const mockInitialState: DeepPartial<RootState> = {
         },
       },
       NetworkController: {
-        selectedNetworkClientId: 'sepolia',
-        networksMetadata: {},
-        networkConfigurations: {
-          sepolia: {
-            id: 'sepolia',
-            rpcUrl: 'http://localhost/v3/',
-            chainId: '0xaa36a7',
-            ticker: 'ETH',
-            nickname: 'sepolia',
-            rpcPrefs: {
-              blockExplorerUrl: 'https://etherscan.com',
-            },
-          },
-        },
+        ...mockNetworkState({
+          chainId: '0xaa36a7',
+          id: 'mainnet',
+          nickname: 'Sepolia',
+          ticker: 'SepoliaETH',
+          type: RpcEndpointType.Infura,
+        }),
       },
       TokenBalancesController: {
         contractBalances: {},

app/components/UI/NetworkInfo/index.tsx

@@ -10,7 +10,12 @@ import { useTheme } from '../../../util/theme';
 import { fontStyles } from '../../../styles/common';
 import { isTokenDetectionSupportedForNetwork } from '@metamask/assets-controllers';
 import { NETWORK_EDUCATION_MODAL_CLOSE_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids.js';
-import { selectProviderConfig } from '../../../selectors/networkController';
+import {
+  selectChainId,
+  selectProviderType,
+  selectRpcUrl,
+  selectTicker,
+} from '../../../selectors/networkController';
 import {
   selectNetworkName,
   selectNetworkImageSource,
@@ -112,8 +117,11 @@ interface NetworkInfoProps {
 
 const NetworkInfo = (props: NetworkInfoProps) => {
   const { onClose, ticker, isTokenDetectionEnabled } = props;
-  const providerConfig = useSelector(selectProviderConfig);
-  const { type, ticker: networkTicker, rpcUrl, chainId } = providerConfig;
+  const type = useSelector(selectProviderType);
+  const networkTicker = useSelector(selectTicker);
+  const chainId = useSelector(selectChainId);
+  const rpcUrl = useSelector(selectRpcUrl);
+
   const { colors } = useTheme();
   const styles = createStyles(colors);
   const isTokenDetectionSupported =

app/components/UI/NetworkModal/index.tsx

@@ -7,7 +7,7 @@ import NetworkDetails from './NetworkDetails';
 import NetworkAdded from './NetworkAdded';
 import Engine from '../../../core/Engine';
 import {
-  isprivateConnection,
+  isPrivateConnection,
   toggleUseSafeChainsListValidation,
 } from '../../../util/networks';
 import getDecimalChainId from '../../../util/networks/getDecimalChainId';
@@ -36,6 +36,13 @@ import { useMetrics } from '../../../components/hooks/useMetrics';
 import { toHex } from '@metamask/controller-utils';
 import { rpcIdentifierUtility } from '../../../components/hooks/useSafeChains';
 import Logger from '../../../util/Logger';
+import { selectNetworkConfigurations } from '../../../selectors/networkController';
+import {
+  NetworkConfiguration,
+  RpcEndpointType,
+  AddNetworkFields,
+} from '@metamask/network-controller';
+import Routes from '../../../constants/navigation/Routes';
 
 export interface SafeChain {
   chainId: string;
@@ -156,6 +163,10 @@ const NetworkModals = (props: NetworkProps) => {
     selectUseSafeChainsListValidation,
   );
 
+  const networkConfigurationByChainId = useSelector(
+    selectNetworkConfigurations,
+  );
+
   const customNetworkInformation = {
     chainId,
     blockExplorerUrl,
@@ -166,6 +177,18 @@ const NetworkModals = (props: NetworkProps) => {
     alerts,
   };
 
+  /**
+   * Go to wallet page
+   */
+  const goToWalletPage = () => {
+    navigation.navigate(Routes.WALLET.HOME, {
+      screen: Routes.WALLET.TAB_STACK_FLOW,
+      params: {
+        screen: Routes.WALLET_VIEW,
+      },
+    });
+  };
+
   const checkNetwork = useCallback(async () => {
     if (useSafeChainsListValidation) {
       const alertsNetwork = await checkSafeNetwork(
@@ -183,56 +206,155 @@ const NetworkModals = (props: NetworkProps) => {
     checkNetwork();
   }, [checkNetwork]);
 
-  const closeModal = () => {
+  const closeModal = async () => {
     const { NetworkController } = Engine.context;
     const url = new URLPARSE(rpcUrl);
-    !isprivateConnection(url.hostname) && url.set('protocol', 'https:');
-    NetworkController.upsertNetworkConfiguration(
-      {
-        rpcUrl: url.href,
+    !isPrivateConnection(url.hostname) && url.set('protocol', 'https:');
+
+    const existingNetwork = networkConfigurationByChainId[chainId];
+
+    if (existingNetwork) {
+      const updatedNetwork = await NetworkController.updateNetwork(
+        existingNetwork.chainId,
+        existingNetwork,
+        existingNetwork.chainId === chainId
+          ? {
+              replacementSelectedRpcEndpointIndex:
+                existingNetwork.defaultRpcEndpointIndex,
+            }
+          : undefined,
+      );
+
+      const { networkClientId } =
+        updatedNetwork?.rpcEndpoints?.[
+          updatedNetwork.defaultRpcEndpointIndex
+        ] ?? {};
+
+      await NetworkController.setActiveNetwork(networkClientId);
+    } else {
+      const addedNetwork = await NetworkController.addNetwork({
         chainId,
-        ticker,
-        nickname,
-        rpcPrefs: { blockExplorerUrl },
-      },
-      {
-        // Metrics-related properties required, but the metric event is a no-op
-        // TODO: Use events for controller metric events
-        referrer: 'ignored',
-        source: 'ignored',
-      },
-    );
+        blockExplorerUrls: [blockExplorerUrl],
+        defaultRpcEndpointIndex: 0,
+        defaultBlockExplorerUrlIndex: 0,
+        name: nickname,
+        nativeCurrency: ticker,
+        rpcEndpoints: [
+          {
+            url: rpcUrl,
+            name: nickname,
+            type: RpcEndpointType.Custom,
+          },
+        ],
+      });
+
+      const { networkClientId } =
+        addedNetwork?.rpcEndpoints?.[addedNetwork.defaultRpcEndpointIndex] ??
+        {};
+
+      await NetworkController.setActiveNetwork(networkClientId);
+    }
     onClose();
+    goToWalletPage();
+  };
+
+  const handleExistingNetwork = async (
+    existingNetwork: NetworkConfiguration,
+    networkId: string,
+  ) => {
+    const { NetworkController } = Engine.context;
+    const updatedNetwork = await NetworkController.updateNetwork(
+      existingNetwork.chainId,
+      existingNetwork,
+      existingNetwork.chainId === networkId
+        ? {
+            replacementSelectedRpcEndpointIndex:
+              existingNetwork.defaultRpcEndpointIndex,
+          }
+        : undefined,
+    );
+
+    const { networkClientId } =
+      updatedNetwork?.rpcEndpoints?.[updatedNetwork.defaultRpcEndpointIndex] ??
+      {};
+
+    await NetworkController.setActiveNetwork(networkClientId);
   };
 
-  const switchNetwork = () => {
+  const handleNewNetwork = async (
+    networkId: `0x${string}`,
+    networkRpcUrl: string,
+    name: string,
+    nativeCurrency: string,
+    networkBlockExplorerUrl: string,
+  ) => {
+    const { NetworkController } = Engine.context;
+    const networkConfig = {
+      chainId: networkId,
+      blockExplorerUrls: networkBlockExplorerUrl
+        ? [networkBlockExplorerUrl]
+        : [],
+      defaultRpcEndpointIndex: 0,
+      defaultBlockExplorerUrlIndex: blockExplorerUrl ? 0 : undefined,
+      name,
+      nativeCurrency,
+      rpcEndpoints: [
+        {
+          url: networkRpcUrl,
+          name,
+          type: RpcEndpointType.Custom,
+        },
+      ],
+    } as AddNetworkFields;
+
+    return NetworkController.addNetwork(networkConfig);
+  };
+
+  const handleNavigation = (
+    onSwitchNetwork: () => void,
+    networkSwitchPopToWallet: boolean,
+  ) => {
+    if (onSwitchNetwork) {
+      onSwitchNetwork();
+    } else {
+      networkSwitchPopToWallet
+        ? navigation.navigate('WalletView')
+        : navigation.goBack();
+    }
+  };
+
+  const switchNetwork = async () => {
     const { NetworkController, CurrencyRateController } = Engine.context;
     const url = new URLPARSE(rpcUrl);
+    const existingNetwork = networkConfigurationByChainId[chainId];
+
     CurrencyRateController.updateExchangeRate(ticker);
-    !isprivateConnection(url.hostname) && url.set('protocol', 'https:');
-    NetworkController.upsertNetworkConfiguration(
-      {
-        rpcUrl: url.href,
+
+    if (!isPrivateConnection(url.hostname)) {
+      url.set('protocol', 'https:');
+    }
+
+    if (existingNetwork) {
+      await handleExistingNetwork(existingNetwork, chainId);
+    } else {
+      const addedNetwork = await handleNewNetwork(
         chainId,
-        ticker,
+        rpcUrl,
         nickname,
-        rpcPrefs: { blockExplorerUrl },
-      },
-      {
-        setActive: true,
-        // Metrics-related properties required, but the metric event is a no-op
-        // TODO: Use events for controller metric events
-        referrer: 'ignored',
-        source: 'ignored',
-      },
-    );
-    closeModal();
+        ticker,
+        blockExplorerUrl,
+      );
+      const { networkClientId } =
+        addedNetwork?.rpcEndpoints?.[addedNetwork.defaultRpcEndpointIndex] ??
+        {};
+
+      NetworkController.setActiveNetwork(networkClientId);
+    }
+    onClose();
+    goToWalletPage();
+
     if (onNetworkSwitch) {
-      onNetworkSwitch();
-    } else {
-      shouldNetworkSwitchPopToWallet
-        ? navigation.navigate('WalletView')
-        : navigation.goBack();
+      handleNavigation(onNetworkSwitch, shouldNetworkSwitchPopToWallet);
     }
     dispatch(networkSwitched({ networkUrl: url.href, networkStatus: true }));
   };

app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.test.tsx

@@ -90,7 +90,7 @@ function render(Component: React.ComponentType, chainId?: `0x${string}`) {
                   chainId: '0x89',
                   id: 'networkId1',
                   nickname: 'Polygon Mainnet',
-                  ticker: 'MATIC',
+                  ticker: 'POL',
                 },
               ),
             },

app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx

@@ -154,16 +154,22 @@ function NetworkSwitcher() {
   const switchNetwork = useCallback(
     (networkConfiguration) => {
       const { CurrencyRateController, NetworkController } = Engine.context;
-      const entry = Object.entries(networkConfigurations).find(
-        ([_a, { chainId }]) => chainId === networkConfiguration.chainId,
+      const config = Object.values(networkConfigurations).find(
+        ({ chainId }) => chainId === networkConfiguration.chainId,
       );
 
-      if (entry) {
-        const [networkConfigurationId] = entry;
-        const { ticker } = networkConfiguration;
+      if (config) {
+        const {
+          nativeCurrency: ticker,
+          rpcEndpoints,
+          defaultRpcEndpointIndex,
+        } = config;
+
+        const { networkClientId } =
+          rpcEndpoints?.[defaultRpcEndpointIndex] ?? {};
 
         CurrencyRateController.updateExchangeRate(ticker);
-        NetworkController.setActiveNetwork(networkConfigurationId);
+        NetworkController.setActiveNetwork(networkClientId);
         navigateToGetStarted();
       }
     },