fix: update network switching logic, dont update while wagmi loads it

src/components/masa-interface/masa-interface.tsx

@@ -309,7 +309,6 @@ export const MasaInterface = ({
     return ['createIdentity', 'successIdentityCreate'].includes(String(page));
   }, [page]);
 
-  console.log('PAGE', page);
   return (
     <>
       <ModalComponent

src/components/masa-interface/pages/switch-chain/switch-chain.tsx

@@ -2,22 +2,23 @@ import React, { useCallback, useMemo } from 'react';
 import { useMasa } from '../../../../provider';
 import { MasaLoading } from '../../../masa-loading';
 import { Network, SupportedNetworks } from '@masa-finance/masa-sdk';
-import {
-  // useNetwork,
-  // useNetwork,
-  useSwitchNetwork,
-} from 'wagmi';
+// import {
+//   // useNetwork,
+//   // useNetwork,
+//   useSwitchNetwork,
+// } from 'wagmi';
 
 export const InterfaceSwitchChain = (): JSX.Element => {
   const {
     isLoading,
     // switchNetwork,
     forceNetwork,
+    switchNetworkNew,
   } = useMasa();
   // const { chain } = useNetwork();
-  const { switchNetwork: switchNetworkWagmi } = useSwitchNetwork({
-    onError: (err) => console.error('Wagmi Network switch failed', err),
-  });
+  // const { switchNetwork: switchNetworkWagmi } = useSwitchNetwork({
+  //   onError: (err) => console.error('Wagmi Network switch failed', err),
+  // });
 
   const networkData: Network | undefined = useMemo(() => {
     if (forceNetwork) {
@@ -29,9 +30,9 @@ export const InterfaceSwitchChain = (): JSX.Element => {
 
   const handleSwitch = useCallback(() => {
     if (networkData) {
-      switchNetworkWagmi?.(networkData.chainId);
+      switchNetworkNew?.(networkData.networkName);
     }
-  }, [switchNetworkWagmi, networkData]);
+  }, [switchNetworkNew, networkData]);
 
   if (isLoading) return <MasaLoading />;
 

src/provider/configured-rainbowkit-provider/utils.ts

@@ -44,7 +44,6 @@ export type MasaNetworks = Partial<{
 export const getRainbowkitChains = (
   networkList?: Array<keyof MasaNetworks>
 ) => {
-  console.log({ networkList });
   if (!networkList || (networkList && !networkList.length)) {
     return rainbowkitChains;
   }

src/provider/masa-context-provider.tsx

@@ -259,11 +259,11 @@ export const MasaContextProvider = ({
         });
 
         openConnectModal?.();
-        console.log('OPENING MODAL');
+        console.log('OPENING RK MODAL');
       } else {
         setModalOpen(true);
       }
-      console.log('set forced page null');
+      // console.log('set forced page null');
       setForcedPage?.(null);
       if (options?.scope) {
         setScope(options.scope);

src/provider/modules/network/network.ts

@@ -31,7 +31,7 @@ export const useNetwork = ({
     async (networkDetails: Network) => {
       if (useRainbowKitWalletConnect) {
         console.log(
-          'switching network wagmi',
+          'switching network wagmi in useNetwork',
           getNetworkNameByChainId(networkDetails.chainId)
         );
         switchNetworkWagmi?.(networkDetails.chainId);

src/provider/modules/session/session.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { queryClient } from '../../masa-query-client';
 import { ISession, Masa } from '@masa-finance/masa-sdk';
-import { useDisconnect } from 'wagmi';
+// import { useDisconnect } from 'wagmi';
 import { useAsync } from 'react-use';
 
 export const getSessionQueryKey = ({
@@ -124,7 +124,7 @@ export const useSession = (
     error,
   } = useSessionQuery({ masa, walletAddress });
 
-  const { disconnectAsync } = useDisconnect();
+  // const { disconnectAsync } = useDisconnect();
   const clearSession = useCallback(async () => {
     await queryClient.invalidateQueries(['wallet']);
     await queryClient.invalidateQueries(['session']);
@@ -138,14 +138,14 @@ export const useSession = (
       }
 
       try {
-        await disconnectAsync();
+        // await disconnectAsync();
         await masa?.session.sessionLogout();
       } finally {
         await clearSession();
         logoutCallback?.();
       }
     },
-    [masa, clearSession, isLoggedIn, disconnectAsync]
+    [masa, clearSession, isLoggedIn]
   );
 
   const handleLogin = useCallback(async (): Promise<void> => {

src/provider/modules/wagmi/use-wagmi.tsx

@@ -1,11 +1,12 @@
 import {
   Chain,
-  ConnectorData,
+  // ConnectorData,
   useAccount,
   useDisconnect,
   useNetwork,
   useProvider,
   useSigner,
+  useSwitchNetwork,
 } from 'wagmi';
 import { Signer } from 'ethers';
 import { useEffect } from 'react';
@@ -19,43 +20,75 @@ export const useWagmi = ({
 }) => {
   const provider = useProvider();
   const { chain, chains } = useNetwork();
+  const {
+    isLoading: isLoadingNetwork,
+    status,
+    // pendingChainId,
+  } = useSwitchNetwork();
+
   const {
     data: signer,
     isError: isSignerError,
     isLoading: isSignerLoading,
   } = useSigner();
 
-  const { isConnecting, isDisconnected } = useAccount({
+  const { isConnecting, isDisconnected, isReconnecting } = useAccount({
     onDisconnect: () => logout(),
   });
   const { disconnect } = useDisconnect();
 
-  const { connector: activeConnector } = useAccount();
+  // const { connector: activeConnector } = useAccount();
 
-  // * detects if we have a new account or chain
-  useEffect(() => {
-    const handleConnectorUpdate = ({ account, chain }: ConnectorData) => {
-      if (account) {
-        console.log('new account', account);
-        // TODO: set variables that are needed when account is changed
-      } else if (chain) {
-        console.log('new chain', chain);
-      }
-    };
+  // // * detects if we have a new account or chain
+  // useEffect(() => {
+  //   const handleConnectorUpdate = ({ account, chain }: ConnectorData) => {
+  //     if (account) {
+  //       console.log('new account', account);
+  //       // TODO: set variables that are needed when account is changed
+  //     } else if (chain) {
+  //       console.log('new chain', chain);
+  //     }
+  //   };
 
-    if (activeConnector) {
-      activeConnector.on('change', handleConnectorUpdate);
-    }
+  //   if (activeConnector) {
+  //     activeConnector.on('change', handleConnectorUpdate);
+  //   }
 
-    return () => {
-      activeConnector?.off('change', handleConnectorUpdate);
-    };
-  }, [activeConnector]);
+  //   return () => {
+  //     activeConnector?.off('change', handleConnectorUpdate);
+  //   };
+  // }, [activeConnector]);
 
   useEffect(() => {
+    console.log('ISLOADING NETWORK', {
+      ...{
+        isLoadingNetwork,
+        status,
+        isReconnecting,
+        provider,
+        isSignerLoading,
+        chain: chain?.network,
+      },
+    });
+    if (isReconnecting) {
+      return;
+    }
+    if (isSignerLoading) {
+      return;
+    }
+
     setSigner(signer as Signer);
-    console.log('setSigner wagmi', { setSigner, signer });
-  }, [setSigner, signer]);
+    // console.log('setSigner wagmi', { setSigner, signer });
+  }, [
+    setSigner,
+    chain,
+    signer,
+    isLoadingNetwork,
+    status,
+    isReconnecting,
+    provider,
+    isSignerLoading,
+  ]);
 
   return {
     isLoading: isSignerLoading,

src/provider/use-account-state.ts

@@ -54,16 +54,17 @@ export const useAccountState = ({
 
   // * detects if we have a new account or chain
   useAsync(async () => {
-    const handleConnectorUpdate = async ({ account, chain }: ConnectorData) => {
+    const handleConnectorUpdate = async ({ account }: ConnectorData) => {
       if (account) {
         console.log('new account', account);
         setAccountAddress(account);
         await invalidateAllQueries({ masa, signer, walletAddress });
         // reloadIdentity?.();
         // reloadWallet?.();
-      } else if (chain) {
-        console.log('new chain', chain);
       }
+      //  else if (chain) {
+      //   console.log('new chain', chain);
+      // }
     };
 
     if (activeConnector) {

src/provider/use-network-switch.tsx

@@ -15,6 +15,7 @@ export const useNetworkSwitch = () => {
         if (networkToSwitchTo.chainId === currentNetwork.chain?.id) {
           return;
         }
+        console.log('switchnetwork wagmi in useNetworkswitch ( new)');
         switchNetworkWagmi?.(networkToSwitchTo.chainId);
         return;
       }

stories/masa.stories.tsx

@@ -28,6 +28,7 @@ const Component = ({ name }: { name?: string }): JSX.Element => {
     isLoggedIn,
     handleLogout,
     switchNetwork,
+    switchNetworkNew,
     openMintSoulnameModal,
     openMintMasaGreen,
     openConnectModal,
@@ -145,29 +146,29 @@ const Component = ({ name }: { name?: string }): JSX.Element => {
           width: '50%',
         }}
       >
-        <button onClick={(): void => switchNetwork?.('ethereum')}>
+        <button onClick={(): void => switchNetworkNew?.('ethereum')}>
           Switch to Ethereum
         </button>
-        <button onClick={(): void => switchNetwork?.('goerli')}>
+        <button onClick={(): void => switchNetworkNew?.('goerli')}>
           Switch to Goerli
         </button>
 
-        <button onClick={(): void => switchNetwork?.('polygon')}>
+        <button onClick={(): void => switchNetworkNew?.('polygon')}>
           Switch to Polygon
         </button>
-        <button onClick={(): void => switchNetwork?.('mumbai')}>
+        <button onClick={(): void => switchNetworkNew?.('mumbai')}>
           Switch to Mumbai
         </button>
-        <button onClick={(): void => switchNetwork?.('bsc')}>
+        <button onClick={(): void => switchNetworkNew?.('bsc')}>
           Switch to BSC
         </button>
-        <button onClick={(): void => switchNetwork?.('bsctest')}>
+        <button onClick={(): void => switchNetworkNew?.('bsctest')}>
           Switch to BSC Test
         </button>
-        <button onClick={(): void => switchNetwork?.('celo')}>
+        <button onClick={(): void => switchNetworkNew?.('celo')}>
           Switch to Celo
         </button>
-        <button onClick={(): void => switchNetwork?.('alfajores')}>
+        <button onClick={(): void => switchNetworkNew?.('alfajores')}>
           Switch to Alfajores
         </button>
       </div>