fix: try to fix infinite switch loop

src/components/NetworkSwitcher/NetworkSwitcher.tsx

@@ -27,21 +27,22 @@ export function NetworkSwitcher({
   color?: string;
   hideText?: boolean;
 }) {
-  const { network, switchAndReset: changeAndReset } = useSubsquidNetwork();
+  const { network, switchAndReset } = useSubsquidNetwork();
   const { switchNetworkAsync } = useSwitchNetwork();
 
   const handleAppSwitchAsync = async (network: NetworkName) => {
     try {
       await switchNetworkAsync?.(getChainId(network));
-    } catch (e: any) {
-      if (e.message?.toLowerCase().includes('user rejected the request')) {
-        return;
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        if (e.message.toLowerCase().includes('user rejected the request')) return;
+        if (e.message.toLowerCase().includes('already pending for origin')) return;
       }
 
       throw e;
     }
 
-    changeAndReset(network);
+    switchAndReset(network);
   };
 
   return (

src/index.tsx

@@ -119,13 +119,13 @@ export function useAppReload({
       navigate(to);
     }
 
-    // root = createRoot(container);
+    root = createRoot(container);
     root.render(<App />);
 
     await hideLoader();
   };
 }
 
-const root = createRoot(container);
+let root = createRoot(container);
 root.render(<App />);
 // hideLoader(0);

src/layouts/NetworkLayout/NetworkLayout.tsx

@@ -1,6 +1,6 @@
 import '@rainbow-me/rainbowkit/styles.css';
 
-import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 
 import {
   AppBar as AppBarMaterial,
@@ -14,14 +14,11 @@ import {
 import { alpha } from '@mui/system/colorManipulator';
 import classnames from 'classnames';
 import { Outlet } from 'react-router-dom';
-import { useDisconnect, useNetwork, useWalletClient } from 'wagmi';
 
 import { Logo } from '@components/Logo';
 import { NetworkSwitcher } from '@components/NetworkSwitcher';
 import { TopBanner, useBannerHeight } from '@components/TopBanner';
 import { MenuIcon } from '@icons/MenuIcon';
-import { useAccount } from '@network/useAccount';
-import { getChainId, getNetworkName, useSubsquidNetwork } from '@network/useSubsquidNetwork';
 
 import { ColorVariant } from '../../theme';
 
@@ -256,25 +253,6 @@ export const NetworkLayout = ({
 }: PropsWithChildren<{
   stretchContent?: boolean;
 }>) => {
-  const { isConnected } = useAccount();
-  const { isLoading } = useWalletClient();
-  const { chain } = useNetwork();
-  const { disconnect } = useDisconnect();
-  const { network, switchAndReset } = useSubsquidNetwork();
-
-  useEffect(() => {
-    if (!isConnected || isLoading) return;
-
-    if (chain?.id === getChainId(network)) return;
-
-    if (!chain?.unsupported) {
-      switchAndReset(getNetworkName(chain?.id));
-      return;
-    }
-
-    disconnect();
-  }, [chain, disconnect, isConnected, network, isLoading, switchAndReset]);
-
   const theme = useTheme();
   const narrowLg = useMediaQuery(theme.breakpoints.down('lg'));
   const narrowXs = useMediaQuery(theme.breakpoints.down('xs'));

src/network/useSubsquidNetwork.ts

@@ -1,5 +1,8 @@
+import { useCallback, useEffect } from 'react';
+
 import { useQueryClient } from '@tanstack/react-query';
 import useLocalStorageState from 'use-local-storage-state';
+import { useWalletClient, useAccount, useNetwork, useDisconnect } from 'wagmi';
 import { arbitrum, arbitrumSepolia } from 'wagmi/chains';
 
 import { localStorageStringSerializer } from '@hooks/useLocalStorageState.ts';
@@ -16,17 +19,39 @@ function validate(app: NetworkName): NetworkName {
 }
 
 export function useSubsquidNetwork() {
+  const { isLoading } = useWalletClient();
+  const { isConnected } = useAccount();
+  const { chain } = useNetwork();
+  const { disconnect } = useDisconnect();
   const [app, changeApp] = useLocalStorageState<NetworkName>('network', {
     serializer: localStorageStringSerializer,
     defaultValue: defaultApp,
   });
 
   const queryClient = useQueryClient();
 
-  const switchAndReset = (network: NetworkName) => {
-    changeApp(network);
-    queryClient.clear();
-  };
+  const switchAndReset = useCallback(
+    (network: NetworkName) => {
+      changeApp(network);
+      queryClient.clear();
+      console.log('switched to ' + network);
+    },
+    [changeApp, queryClient],
+  );
+
+  // TODO: reset client when network switched in other window
+  useEffect(() => {
+    if (!isConnected || isLoading) return;
+
+    if (chain?.id === getChainId(app)) return;
+
+    if (chain && !chain.unsupported) {
+      switchAndReset(getNetworkName(chain?.id));
+      return;
+    }
+
+    disconnect();
+  }, [app, chain, disconnect, isConnected, isLoading, switchAndReset]);
 
   return { network: validate(app), switchAndReset };
 }
@@ -35,6 +60,6 @@ export function getChainId(network: NetworkName) {
   return network === NetworkName.Mainnet ? arbitrum.id : arbitrumSepolia.id;
 }
 
-export function getNetworkName(chainId?: number) {
+export function getNetworkName(chainId: number) {
   return chainId === arbitrum.id ? NetworkName.Mainnet : NetworkName.Testnet;
 }