feat: network switch listen only once

src/refactor/wallet-client/network/use-network-switch-listen.ts

@@ -0,0 +1,40 @@
+import type { Connector, Provider } from '@wagmi/core';
+import { useEffect } from 'react';
+
+export const useNetworkSwitchListen = ({
+  activeConnector,
+  stopSwitching,
+  networkError,
+}: {
+  activeConnector?: Connector | undefined;
+  stopSwitching: () => void;
+  networkError: Error | null;
+}) => {
+  useEffect(() => {
+    if (!activeConnector) {
+      return undefined;
+    }
+
+    let provider: Provider;
+
+    activeConnector
+      ?.getProvider?.()
+      .then((provider_: Provider) => {
+        provider = provider_;
+        provider.on('chainChanged', stopSwitching);
+      })
+      .catch((error: unknown) => {
+        console.log("error getting provider's chainChanged event", error);
+      });
+
+    return () => {
+      provider?.removeListener('chainChanged', stopSwitching);
+    };
+  }, [activeConnector, stopSwitching]);
+
+  useEffect(() => {
+    if (networkError && networkError.name === 'UserRejectedRequestError') {
+      stopSwitching();
+    }
+  }, [networkError, stopSwitching]);
+};

src/refactor/wallet-client/network/use-network.ts

@@ -4,21 +4,21 @@ import {
   SupportedNetworks,
   getNetworkNameByChainId,
 } from '@masa-finance/masa-sdk';
-import type { Chain, Connector, GetNetworkResult, Provider } from '@wagmi/core';
+import type { Chain, Connector, GetNetworkResult } from '@wagmi/core';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import {
   useSwitchNetwork,
   useNetwork as useNetworkWagmi,
-  useAccount,
   useConnect,
+  useAccount,
 } from 'wagmi';
 
 export const useNetwork = () => {
   const { switchNetwork: switchNetworkWagmi, error: networkError } =
     useSwitchNetwork();
-  const { connector: activeConnector } = useAccount();
   const { connectors, pendingConnector } = useConnect();
+  const { connector: activeConnector } = useAccount();
   const { chains, chain: activeChain } = useNetworkWagmi();
   const network = useNetworkWagmi();
   const [switchingToChain, setSwitchingToChain] = useState<number | null>();
@@ -81,33 +81,33 @@ export const useNetwork = () => {
     setSwitchingToChain(null);
   }, []);
 
-  useEffect(() => {
-    if (!activeConnector) {
-      return undefined;
-    }
-
-    let provider: Provider;
-
-    activeConnector
-      ?.getProvider?.()
-      .then((provider_: Provider) => {
-        provider = provider_;
-        provider.on('chainChanged', stopSwitching);
-      })
-      .catch((error: unknown) => {
-        console.log("error getting provider's chainChanged event", error);
-      });
-
-    return () => {
-      provider?.removeListener('chainChanged', stopSwitching);
-    };
-  }, [activeConnector, stopSwitching]);
-
-  useEffect(() => {
-    if (networkError && networkError.name === 'UserRejectedRequestError') {
-      stopSwitching();
-    }
-  }, [networkError, stopSwitching]);
+  // useEffect(() => {
+  //   if (!activeConnector) {
+  //     return undefined;
+  //   }
+
+  //   let provider: Provider;
+
+  //   activeConnector
+  //     ?.getProvider?.()
+  //     .then((provider_: Provider) => {
+  //       provider = provider_;
+  //       provider.on('chainChanged', stopSwitching);
+  //     })
+  //     .catch((error: unknown) => {
+  //       console.log("error getting provider's chainChanged event", error);
+  //     });
+
+  //   return () => {
+  //     provider?.removeListener('chainChanged', stopSwitching);
+  //   };
+  // }, [activeConnector, stopSwitching]);
+
+  // useEffect(() => {
+  //   if (networkError && networkError.name === 'UserRejectedRequestError') {
+  //     stopSwitching();
+  //   }
+  // }, [networkError, stopSwitching]);
 
   const canProgramaticallySwitchNetwork = useMemo(
     () => !!switchNetwork || activeConnector?.name === 'WalletConnect',
@@ -128,7 +128,8 @@ export const useNetwork = () => {
     availibleChains,
     pendingConnector,
     isActiveChainUnsupported,
-
+    stopSwitching,
+    networkError,
     // * old
     currentNetwork,
     currentNetworkByChainId,
@@ -154,5 +155,7 @@ export const useNetwork = () => {
 
     currentNetwork: Network | undefined;
     currentNetworkNew: GetNetworkResult;
+    stopSwitching: () => void;
+    networkError: Error | null;
   };
 };

src/refactor/wallet-client/wallet-client-provider.tsx

@@ -14,6 +14,7 @@ import { useAccountChangeListen } from './wallet/use-account-change-listen';
 import { useConfig } from '../base-provider';
 import { getChainIdNetworkMap } from './utils';
 import { useDebug } from '../hooks/use-debug';
+import { useNetworkSwitchListen } from './network/use-network-switch-listen';
 
 type WalletClientValue = ReturnType<typeof useWallet> &
   ReturnType<typeof useNetwork>;
@@ -50,13 +51,15 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
     connectors,
     switchNetwork,
     switchingToChain,
+    stopSwitching,
     canProgramaticallySwitchNetwork,
     activeChain,
     isSwitchingChain,
     chains,
     isActiveChainUnsupported,
     availibleChains,
     pendingConnector,
+    networkError,
   } = useNetwork();
 
   const onAccountChange = useCallback(() => console.log('account changed'), []);
@@ -67,6 +70,12 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
     onChainChange,
   });
 
+  useNetworkSwitchListen({
+    activeConnector: connector,
+    stopSwitching,
+    networkError,
+  });
+
   const chainIdsByNetwork = useMemo(() => {
     if (!chains || chains.length === 0) return {};