Fix unsupported network detection and UI handling

Co-Authored-By: nacho@reown.com <nacho@reown.com>

Author: devin-ai-integration[bot]

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

@@ -74,4 +74,14 @@ describe('NetworkController', () => {
     expect(NetworkController.state.approvedCaipNetworkIds).toEqual(undefined);
     expect(NetworkController.state.requestedCaipNetworks).toEqual(requestedCaipNetworks);
   });
+
+  it('should validate if active network is in requested networks', () => {
+    NetworkController.setRequestedCaipNetworks(requestedCaipNetworks);
+    
+    NetworkController.setCaipNetwork({ id: 'eip155:1', name: 'Ethereum' });
+    expect(NetworkController.isActiveNetworkInRequestedNetworks()).toBe(true);
+    
+    NetworkController.setCaipNetwork({ id: 'eip155:99', name: 'Unknown Network' });
+    expect(NetworkController.isActiveNetworkInRequestedNetworks()).toBe(false);
+  });
 });

packages/core/src/controllers/NetworkController.ts

@@ -116,5 +116,12 @@ export const NetworkController = {
     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 state.requestedCaipNetworks.some(network => network.id === state.caipNetwork?.id);
   }
 };

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

@@ -21,9 +21,15 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   const { caipNetwork } = useSnapshot(NetworkController.state);
   const { loading } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  
+  const isNetworkSupported = NetworkController.isActiveNetworkInRequestedNetworks();
 
   const onNetworkPress = () => {
-    ModalController.open({ view: 'Networks' });
+    if (isConnected && !isNetworkSupported) {
+      ModalController.open({ view: 'UnsupportedChain' });
+    } else {
+      ModalController.open({ view: 'Networks' });
+    }
     EventsController.sendEvent({
       type: 'track',
       event: 'CLICK_NETWORKS'
@@ -41,7 +47,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
         loading={loading}
         testID="network-button"
       >
-        {caipNetwork?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
+        {caipNetwork?.name ?? (isConnected ? (isNetworkSupported ? 'Unknown Network' : 'Switch Network') : 'Select Network')}
       </NetworkButtonUI>
     </ThemeProvider>
   );

packages/scaffold/src/views/w3m-unsupported-chain-view/index.tsx

@@ -49,8 +49,8 @@ export function UnsupportedChainView() {
       ListHeaderComponentStyle={styles.header}
       ListHeaderComponent={
         <Text variant="small-400" color="fg-200" center>
-          The swap feature doesn't support your current network. Switch to an available option to
-          continue.
+          The current network is not supported by this application. 
+          Please switch to an available option to continue.
         </Text>
       }
       contentContainerStyle={styles.contentContainer}

packages/wagmi/src/client.ts

@@ -470,6 +470,15 @@ export class AppKit extends AppKitScaffold {
         imageId: PresetsUtil.EIP155NetworkImageIds[id],
         imageUrl: this.options?.chainImages?.[id]
       });
+      
+      const internalState = this.wagmiConfig.chains || [];
+      const isNetworkSupported = internalState.length === 0 || 
+                                internalState.some((chain: Chain) => 
+                                  `${ConstantsUtil.EIP155}:${chain.id}` === caipChainId);
+      if (!isNetworkSupported) {
+        console.warn(`Network ${caipChainId} is not in the requested networks list`);
+      }
+      
       if (isConnected && address && chainId) {
         const caipAddress: CaipAddress = `${ConstantsUtil.EIP155}:${id}:${address}`;
         this.setCaipAddress(caipAddress);