fix metamask login / logout issues

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

@@ -36,6 +36,7 @@ export const MasaInterface = ({
     isConnected,
     identity,
     isLoggedIn,
+    provider,
     closeModal,
     scope,
     creditScores,
@@ -45,15 +46,15 @@ export const MasaInterface = ({
     if (!isConnected) return 'connector';
 
     // if (network && !chain?.name.includes(network)) return 'switchNetwork';
-    if (!isLoggedIn) return 'authenticate';
+    if (!isLoggedIn && provider) return 'authenticate';
     if (!identity?.identityId && scope?.includes('identity'))
       return 'createIdentity';
     if (identity && !creditScores?.length && scope?.includes('credit-score'))
       return 'createCreditScore';
     if (isConnected && isLoggedIn) return 'connectedState';
 
     return 'connector';
-  }, [isConnected, identity, isLoggedIn, scope, creditScores]);
+  }, [isConnected, identity, isLoggedIn, scope, provider, creditScores]);
 
   return (
     <>

src/helpers/masa.ts

@@ -4,10 +4,23 @@ import {
   environments,
   Masa,
 } from '@masa-finance/masa-sdk';
-import { ethers } from 'ethers';
-import { ArweaveConfig, getWeb3Provider } from '../provider';
+import { ethers, providers } from 'ethers';
+import { ArweaveConfig } from '../provider';
 import { getNetworkNameByChainId } from './networks';
 
+export const getWeb3Provider = (): providers.Web3Provider | undefined => {
+  if (
+    typeof window !== 'undefined' &&
+    typeof window?.ethereum !== 'undefined'
+  ) {
+    return new providers.Web3Provider(
+      window?.ethereum as unknown as providers.ExternalProvider
+    );
+  }
+
+  return;
+};
+
 export const createNewMasa = async ({
   signer,
   environmentName,

src/provider/masa-context-provider.tsx

@@ -7,7 +7,6 @@ import {
   useIdentity,
   useModal,
   useNetwork,
-  useProvider,
   useSession,
   useSoulnames,
   useWallet,
@@ -52,8 +51,7 @@ export const MasaContextProvider = ({
   const [scope, setScope] = useState<string[]>([]);
 
   // provider
-  const { provider, setProvider, isProviderMissing, setIsProviderMissing } =
-    useProvider(signer);
+  const [provider, setProvider] = useState<Wallet | Signer | undefined>(signer);
 
   // wallet
   const { walletAddress, isWalletLoading, isConnected } = useWallet(
@@ -180,8 +178,6 @@ export const MasaContextProvider = ({
     // provider handling
     provider,
     setProvider,
-    isProviderMissing,
-    setIsProviderMissing,
 
     // modal
     isModalOpen,

src/provider/masa-shape.ts

@@ -29,8 +29,6 @@ export interface MasaShape {
   // provider
   provider?: ethers.Wallet | ethers.Signer;
   setProvider?: (provider?: ethers.Wallet | ethers.Signer) => void;
-  isProviderMissing?: boolean;
-  setIsProviderMissing?: (value: boolean) => void;
 
   // modal
   isModalOpen?: boolean;

src/provider/modules/index.ts

@@ -6,4 +6,3 @@ export * from './session';
 export * from './soulnames';
 export * from './wallet';
 export * from './modal';
-export * from './provider';

src/provider/modules/session/session.ts

@@ -57,7 +57,7 @@ export const useSession = (
 
   const handleLogout = useCallback(
     async (logoutCallback?: () => void): Promise<void> => {
-      await masa?.session.logout();
+      await masa?.session.sessionLogout();
       await clearSession();
 
       logoutCallback?.();

src/provider/use-metamask.ts

@@ -1,71 +1,45 @@
-import { providers } from 'ethers';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useMasa } from './use-masa';
-
-export const getWeb3Provider = (): providers.Web3Provider | undefined => {
-  if (
-    typeof window !== 'undefined' &&
-    typeof window?.ethereum !== 'undefined'
-  ) {
-    return new providers.Web3Provider(
-      window?.ethereum as unknown as providers.ExternalProvider
-    );
-  }
-
-  return;
-};
+import { getWeb3Provider } from '../helpers';
 
 export const useMetamask = ({
   disabled,
 }: {
   disabled?: boolean;
 }): { connect: () => void } => {
   const [connectedAccounts, setConnectedAccounts] = useState<string[]>([]);
-  const {
-    setProvider,
-    setIsProviderMissing,
-    handleLogout,
-    isConnected,
-    walletAddress,
-  } = useMasa();
+  const { setProvider, handleLogout, isConnected, walletAddress } = useMasa();
 
   // use metamask can only be used inside the scope of masa-react
   // otherwise everything from useMasa is undefined
   if (Object.keys(useMasa()).length < 1) {
     throw new Error('useMetamask must be used inside the masa provider scope');
   }
 
-  const provider = useMemo((): providers.Web3Provider | undefined => {
-    return getWeb3Provider();
-  }, []);
-
-  useEffect(() => {
-    setIsProviderMissing?.(!provider);
-  }, [provider, setIsProviderMissing]);
-
-  const loadSignerFromProvider = useCallback(
-    async (provider: providers.Web3Provider) => {
-      await provider.send('eth_requestAccounts', []);
-
-      const signer = provider.getSigner();
-      if (signer) {
-        setProvider?.(signer);
-      }
-    },
-    [setProvider]
-  );
-
+  /**
+   * Connect to metamask
+   */
   const connect = useCallback(async () => {
     console.log({ disabled });
 
-    if (!disabled && provider && window?.ethereum) {
-      await loadSignerFromProvider(provider);
+    if (!disabled && window?.ethereum) {
+      await window?.ethereum?.request({ method: 'eth_requestAccounts' });
+      setProvider?.(getWeb3Provider()?.getSigner());
     }
-  }, [provider, disabled, loadSignerFromProvider]);
+  }, [disabled, setProvider]);
+
+  /**
+   * Disconnect
+   */
+  const disconnect = useCallback(async (): Promise<void> => {
+    if (isConnected) {
+      await handleLogout?.();
+    }
+  }, [isConnected, handleLogout]);
 
   useEffect(() => {
     const connectWalletOnPageLoad = async (): Promise<void> => {
-      if (isConnected) return;
+      if (walletAddress) return;
 
       try {
         await connect();
@@ -76,46 +50,46 @@ export const useMetamask = ({
       }
     };
     void connectWalletOnPageLoad();
-  }, [isConnected, connect]);
-
-  const disconnect = useCallback(async (): Promise<void> => {
-    if (isConnected) {
-      await handleLogout?.();
-    }
-  }, [isConnected, handleLogout]);
+  }, [walletAddress, connect]);
 
   useEffect(() => {
     const detectWalletChange = async (): Promise<void> => {
       if (
         walletAddress &&
         connectedAccounts.length > 0 &&
-        !connectedAccounts.includes(walletAddress)
+        !connectedAccounts
+          .map((account: string) => account.toLowerCase())
+          .includes(walletAddress.toLowerCase())
       ) {
         await disconnect();
       }
     };
 
     void detectWalletChange();
-  }, [connectedAccounts, disconnect, walletAddress]);
+  }, [connectedAccounts, disconnect, walletAddress, setProvider]);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
       window?.ethereum?.on(
         'accountsChanged',
         async (accounts: unknown): Promise<void> => {
           const accountsArray = accounts as string[];
+
+          if (accountsArray.length === 0) {
+            await disconnect();
+            setProvider?.();
+          }
+
           setConnectedAccounts(accountsArray);
         }
       );
 
-      window?.ethereum?.on('networkChanged', async () => {
+      window?.ethereum?.on('chainChanged', async () => {
         const newProvider = getWeb3Provider();
-        if (newProvider) {
-          await loadSignerFromProvider(newProvider);
-        }
+        setProvider?.(newProvider?.getSigner());
       });
     }
-  }, [loadSignerFromProvider, setConnectedAccounts]);
+  }, [setProvider, setConnectedAccounts, disconnect]);
 
   return { connect };
 };