chore: improvements

Author: ignaciosantise

packages/core/src/__tests__/controllers/NetworkController.test.ts

@@ -19,7 +19,6 @@ const client: NetworkControllerClient = {
 const initialState = {
   _client: client,
   supportsAllNetworks: true,
-  isDefaultCaipNetwork: false,
   smartAccountEnabledNetworks: []
 };
 
@@ -65,7 +64,7 @@ describe('NetworkController', () => {
   it('should update state correctly on setDefaultCaipNetwork()', () => {
     NetworkController.setDefaultCaipNetwork(caipNetwork);
     expect(NetworkController.state.caipNetwork).toEqual(caipNetwork);
-    expect(NetworkController.state.isDefaultCaipNetwork).toEqual(true);
+    expect(NetworkController.state.defaultCaipNetwork).toEqual(caipNetwork);
   });
 
   it('should reset state correctly when default caip network is true', () => {

packages/core/src/controllers/NetworkController.ts

@@ -15,9 +15,9 @@ export interface NetworkControllerClient {
 
 export interface NetworkControllerState {
   supportsAllNetworks: boolean;
-  isDefaultCaipNetwork: boolean;
   _client?: NetworkControllerClient;
   caipNetwork?: CaipNetwork;
+  defaultCaipNetwork?: CaipNetwork;
   requestedCaipNetworks?: CaipNetwork[];
   approvedCaipNetworkIds?: CaipNetworkId[];
   smartAccountEnabledNetworks: number[];
@@ -26,7 +26,7 @@ export interface NetworkControllerState {
 // -- State --------------------------------------------- //
 const state = proxy<NetworkControllerState>({
   supportsAllNetworks: true,
-  isDefaultCaipNetwork: false,
+  defaultCaipNetwork: undefined,
   smartAccountEnabledNetworks: []
 });
 
@@ -53,7 +53,7 @@ export const NetworkController = {
 
   setDefaultCaipNetwork(caipNetwork: NetworkControllerState['caipNetwork']) {
     state.caipNetwork = caipNetwork;
-    state.isDefaultCaipNetwork = true;
+    state.defaultCaipNetwork = caipNetwork;
     PublicStateController.set({ selectedNetworkId: caipNetwork?.id });
   },
 
@@ -110,17 +110,15 @@ export const NetworkController = {
   },
 
   resetNetwork() {
-    if (!state.isDefaultCaipNetwork) {
-      state.caipNetwork = undefined;
-    }
+    state.caipNetwork = state.defaultCaipNetwork || undefined;
     state.approvedCaipNetworkIds = undefined;
     state.supportsAllNetworks = true;
     state.smartAccountEnabledNetworks = [];
   },
 
   isActiveNetworkInRequestedNetworks() {
     if (!state.caipNetwork || !state.requestedCaipNetworks?.length) {
-      return true; // No active network or no requested networks, so no validation needed
+      return false;
     }
 
     return state.requestedCaipNetworks.some(network => network.id === state.caipNetwork?.id);

packages/scaffold/src/modal/w3m-modal/index.tsx

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useWindowDimensions, StatusBar } from 'react-native';
 import Modal from 'react-native-modal';
 import { Card, ThemeProvider } from '@reown/appkit-ui-react-native';
@@ -16,7 +16,8 @@ import {
   TransactionsController,
   type CaipAddress,
   type AppKitFrameProvider,
-  ThemeController
+  ThemeController,
+  NetworkController
 } from '@reown/appkit-core-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
@@ -30,7 +31,9 @@ export function AppKit() {
   const { open, loading } = useSnapshot(ModalController.state);
   const { connectors, connectedConnector } = useSnapshot(ConnectorController.state);
   const { caipAddress, isConnected } = useSnapshot(AccountController.state);
+  const { caipNetwork } = useSnapshot(NetworkController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const [isNetworkStateStable, setIsNetworkStateStable] = useState(false);
   const { height } = useWindowDimensions();
   const { isLandscape } = useCustomDimensions();
   const portraitHeight = height - 120;
@@ -114,6 +117,39 @@ export function AppKit() {
     onNewAddress(caipAddress);
   }, [caipAddress, onNewAddress]);
 
+  useEffect(() => {
+    if (isConnected) {
+      const timer = setTimeout(() => {
+        setIsNetworkStateStable(true);
+      }, 750); // Stability period. Sometimes the network state updates at init
+
+      return () => {
+        clearTimeout(timer);
+      };
+    } else {
+      setIsNetworkStateStable(false);
+
+      return () => {};
+    }
+  }, [isConnected]);
+
+  useEffect(() => {
+    if (isConnected && caipNetwork && isNetworkStateStable) {
+      const isNetworkSupported = NetworkController.isActiveNetworkInRequestedNetworks();
+      if (!isNetworkSupported) {
+        const currentView = RouterController.state.view;
+        // Only push/open if not already on UnsupportedChain or actively choosing a network
+        if (currentView !== 'UnsupportedChain' && currentView !== 'Networks') {
+          if (ModalController.state.open) {
+            RouterController.push('UnsupportedChain');
+          } else {
+            ModalController.open({ view: 'UnsupportedChain' });
+          }
+        }
+      }
+    }
+  }, [caipNetwork, isConnected, isNetworkStateStable]);
+
   return (
     <>
       <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>

packages/scaffold/src/modal/w3m-network-button/index.tsx

@@ -10,6 +10,7 @@ import {
   ThemeController
 } from '@reown/appkit-core-react-native';
 import { NetworkButton as NetworkButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
+import { UiUtil } from '../../utils/UiUtil';
 
 export interface NetworkButtonProps {
   disabled?: boolean;
@@ -18,14 +19,11 @@ export interface NetworkButtonProps {
 
 export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   const { loading } = useSnapshot(ModalController.state);
+  const { caipNetwork } = useSnapshot(NetworkController.state);
+  const { isConnected } = useSnapshot(AccountController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
-  const isNetworkSupported =
-    !NetworkController.state.caipNetwork ||
-    !NetworkController.state.requestedCaipNetworks?.length ||
-    NetworkController.state.requestedCaipNetworks.some(
-      network => network.id === NetworkController.state.caipNetwork?.id
-    );
+  const isNetworkSupported = NetworkController.isActiveNetworkInRequestedNetworks();
 
   const onNetworkPress = () => {
     if (AccountController.state.isConnected && !isNetworkSupported) {
@@ -39,6 +37,8 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
     });
   };
 
+  const buttonText = UiUtil.getNetworkButtonText(isConnected, caipNetwork, isNetworkSupported);
+
   return (
     <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
       <NetworkButtonUI
@@ -50,12 +50,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
         loading={loading}
         testID="network-button"
       >
-        {NetworkController.state.caipNetwork?.name ??
-          (AccountController.state.isConnected
-            ? isNetworkSupported
-              ? 'Unknown Network'
-              : 'Switch Network'
-            : 'Select Network')}
+        {buttonText}
       </NetworkButtonUI>
     </ThemeProvider>
   );

packages/scaffold/src/utils/UiUtil.ts

@@ -2,7 +2,8 @@ import {
   AssetUtil,
   ConnectionController,
   StorageUtil,
-  type WcWallet
+  type WcWallet,
+  type CaipNetwork
 } from '@reown/appkit-core-react-native';
 import { LayoutAnimation } from 'react-native';
 
@@ -27,5 +28,34 @@ export const UiUtil = {
       const url = AssetUtil.getWalletImage(pressedWallet);
       ConnectionController.setConnectedWalletImageUrl(url);
     }
+  },
+
+  getNetworkButtonText(
+    isConnected: boolean,
+    caipNetwork: CaipNetwork | undefined,
+    isNetworkSupported: boolean
+  ): string {
+    let buttonText: string;
+
+    if (!isConnected) {
+      if (caipNetwork) {
+        buttonText = caipNetwork.name ?? 'Unknown Network';
+      } else {
+        buttonText = 'Select Network';
+      }
+    } else {
+      // isConnected is true
+      if (caipNetwork) {
+        if (isNetworkSupported) {
+          buttonText = caipNetwork.name ?? 'Unknown Network';
+        } else {
+          buttonText = 'Switch Network';
+        }
+      } else {
+        buttonText = 'Select Network';
+      }
+    }
+
+    return buttonText;
   }
 };

packages/scaffold/src/views/w3m-account-default-view/index.tsx

@@ -30,6 +30,7 @@ import {
   ListItem
 } from '@reown/appkit-ui-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { UiUtil as ScaffoldUiUtil } from '../../utils/UiUtil';
 
 import styles from './styles';
 import { AuthButtons } from './components/auth-buttons';
@@ -42,7 +43,8 @@ export function AccountDefaultView() {
     balance,
     balanceSymbol,
     addressExplorerUrl,
-    preferredAccountType
+    preferredAccountType,
+    isConnected
   } = useSnapshot(AccountController.state);
   const { loading } = useSnapshot(ModalController.state);
   const [disconnecting, setDisconnecting] = useState(false);
@@ -59,6 +61,7 @@ export function AccountDefaultView() {
   const showBack = history.length > 1;
   const showSwitchAccountType = isAuth && NetworkController.checkIfSmartAccountEnabled();
   const { padding } = useCustomDimensions();
+  const isNetworkSupported = NetworkController.isActiveNetworkInRequestedNetworks();
 
   async function onDisconnect() {
     setDisconnecting(true);
@@ -146,8 +149,6 @@ export function AccountDefaultView() {
   };
 
   const onNetworkPress = () => {
-    const isNetworkSupported = NetworkController.isActiveNetworkInRequestedNetworks();
-
     if (AccountController.state.isConnected && !isNetworkSupported) {
       RouterController.push('UnsupportedChain');
     } else {
@@ -254,10 +255,7 @@ export function AccountDefaultView() {
               style={styles.actionButton}
             >
               <Text numberOfLines={1} color="fg-100" testID="account-select-network-text">
-                {!NetworkController.isActiveNetworkInRequestedNetworks() &&
-                AccountController.state.isConnected
-                  ? 'Switch Network'
-                  : caipNetwork?.name}
+                {ScaffoldUiUtil.getNetworkButtonText(isConnected, caipNetwork, isNetworkSupported)}
               </Text>
             </ListItem>