try to fix metamask handling

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

@@ -35,7 +35,7 @@ export const MasaInterface = ({
   const {
     isModalOpen,
     setModalOpen,
-    isConnected,
+    hasWalletAddress,
     identity,
     isLoggedIn,
     provider,
@@ -46,18 +46,21 @@ export const MasaInterface = ({
     forcedPage,
     currentNetwork,
     forceNetwork,
+    verbose,
   } = useMasa();
 
   const page = useMemo(() => {
     if (forcedPage) return forcedPage;
-    if (!isConnected) return 'connector';
+    if (!hasWalletAddress) return 'connector';
+
+    if (verbose) {
+      console.info({ forceNetwork });
+    }
 
     if (forceNetwork && currentNetwork?.networkName !== forceNetwork) {
       return 'switchNetwork';
     }
 
-    console.log({ forceNetwork });
-
     if (!isLoggedIn && provider) return 'authenticate';
 
     if (
@@ -73,11 +76,12 @@ export const MasaInterface = ({
     if (identity && !creditScores?.length && scope?.includes('credit-score'))
       return 'createCreditScore';
 
-    if (isConnected && isLoggedIn) return 'connectedState';
+    if (hasWalletAddress && isLoggedIn) return 'connectedState';
 
     return 'connector';
   }, [
-    isConnected,
+    hasWalletAddress,
+    verbose,
     identity,
     isLoggedIn,
     scope,

src/provider/masa-context-provider.tsx

@@ -26,13 +26,10 @@ export interface ArweaveConfig {
 export type EnvironmentNameEx = EnvironmentName & ('local' | 'stage');
 
 export interface MasaContextProviderProps extends MasaShape {
-  children: React.ReactNode;
-  company?: string;
   noWallet?: boolean;
   signer?: Wallet | Signer;
   environmentName?: EnvironmentNameEx;
   arweaveConfig?: ArweaveConfig;
-  verbose?: boolean;
 }
 
 export const MasaContextProvider = ({
@@ -49,7 +46,7 @@ export const MasaContextProvider = ({
   arweaveConfig,
   // verbose on /off
   verbose = false,
-  // force network
+  // force specific network
   forceNetwork,
 }: MasaContextProviderProps): JSX.Element => {
   // masa
@@ -59,7 +56,7 @@ export const MasaContextProvider = ({
   const [provider, setProvider] = useState<Wallet | Signer | undefined>(signer);
 
   // wallet
-  const { walletAddress, isWalletLoading, isConnected } = useWallet(
+  const { walletAddress, isWalletLoading, hasWalletAddress } = useWallet(
     masaInstance,
     provider
   );
@@ -104,9 +101,9 @@ export const MasaContextProvider = ({
 
   // scope
   const { scope, setScope, areScopesFullfiled } = useScopes(
-    masaInstance,
     soulnames,
-    isLoggedIn
+    isLoggedIn,
+    masaInstance?.config.verbose
   );
 
   // modal
@@ -118,7 +115,7 @@ export const MasaContextProvider = ({
     forcedPage,
     setForcedPage,
     openMintSoulnameModal,
-  } = useModal(isLoggedIn, isConnected, areScopesFullfiled);
+  } = useModal(isLoggedIn, hasWalletAddress, areScopesFullfiled);
 
   // global loading flag
   const isLoading = useMemo(() => {
@@ -143,15 +140,29 @@ export const MasaContextProvider = ({
 
   const connect = useCallback(
     (options?: { scope?: string[]; callback?: () => void }) => {
-      console.log({ forcedPage });
+      if (verbose) {
+        console.info({ forcedPage });
+      }
+
       setModalOpen(true);
       setForcedPage?.(null);
-      if (options?.scope) setScope(options.scope);
+
+      if (options?.scope) {
+        setScope(options.scope);
+      }
+
       if (typeof options?.callback === 'function') {
         setModalCallback(() => options?.callback);
       }
     },
-    [setModalOpen, setModalCallback, setScope, setForcedPage, forcedPage]
+    [
+      setModalOpen,
+      setModalCallback,
+      setScope,
+      setForcedPage,
+      forcedPage,
+      verbose,
+    ]
   );
 
   useEffect(() => {
@@ -183,6 +194,8 @@ export const MasaContextProvider = ({
   const context: MasaShape = {
     // masa instance
     masa: masaInstance,
+    verbose: masaInstance?.config.verbose,
+
     // global loading
     isLoading,
 
@@ -209,7 +222,7 @@ export const MasaContextProvider = ({
     // wallet
     walletAddress,
     isWalletLoading,
-    isConnected,
+    hasWalletAddress,
 
     // identity
     identity,

src/provider/masa-shape.ts

@@ -9,14 +9,17 @@ import {
   SoulNameDetails,
   VerifyGreenResult,
 } from '@masa-finance/masa-sdk';
-import { BigNumber, ethers } from 'ethers';
+import { BigNumber, Signer, Wallet } from 'ethers';
 import { Network } from '../helpers';
 
 export interface MasaShape {
   children?: React.ReactNode;
 
   // masa
   masa?: Masa;
+  // verbose flag
+  verbose?: boolean;
+
   // global loading
   isLoading?: boolean;
 
@@ -29,8 +32,8 @@ export interface MasaShape {
   company?: string;
 
   // provider
-  provider?: ethers.Wallet | ethers.Signer;
-  setProvider?: (provider?: ethers.Wallet | ethers.Signer) => void;
+  provider?: Wallet | Signer;
+  setProvider?: (provider?: Wallet | Signer) => void;
 
   // modal
   isModalOpen?: boolean;
@@ -43,7 +46,7 @@ export interface MasaShape {
   // wallet
   walletAddress?: string;
   isWalletLoading?: boolean;
-  isConnected?: boolean;
+  hasWalletAddress?: boolean;
 
   // identity
   identity?: {

src/provider/modules/credit-scores/credit-scores.ts

@@ -54,7 +54,7 @@ export const useCreditScores = (
       }[]
     ) => {
       if (masa?.config.verbose) {
-        console.log({ creditScores, network: masa?.config.network });
+        console.info({ creditScores, network: masa?.config.network });
       }
     },
   });

src/provider/modules/green/green.ts

@@ -61,7 +61,7 @@ export const useGreen = (
       }[]
     ) => {
       if (masa?.config.verbose) {
-        console.log({ greens, network: masa?.config.network });
+        console.info({ greens, network: masa?.config.network });
       }
     },
   });

src/provider/modules/identity/identity.ts

@@ -44,7 +44,7 @@ export const useIdentity = (
       retry: false,
       onSuccess: (identity?: { identityId?: BigNumber; address?: string }) => {
         if (masa?.config.verbose) {
-          console.log({ identity, network: masa?.config.network });
+          console.info({ identity, network: masa?.config.network });
         }
       },
     }

src/provider/modules/scopes/scopes.ts

@@ -1,15 +1,15 @@
-import { Masa, SoulNameDetails } from '@masa-finance/masa-sdk';
+import { SoulNameDetails } from '@masa-finance/masa-sdk';
 import { useMemo, useState } from 'react';
 
 export const useScopes = (
-  masa?: Masa,
   soulnames?: SoulNameDetails[],
-  isLoggedIn?: boolean
+  isLoggedIn?: boolean,
+  verbose?: boolean
 ) => {
   const [scope, setScope] = useState<string[]>([]);
   const areScopesFullfiled = useMemo(() => {
-    if (masa?.config.verbose) {
-      console.log({ scope, soulnames, isLoggedIn });
+    if (verbose) {
+      console.info({ scope, soulnames, isLoggedIn });
     }
 
     if (scope?.includes('soulname') && (soulnames?.length ?? 0) === 0) {
@@ -21,7 +21,7 @@ export const useScopes = (
     }
 
     return true;
-  }, [soulnames, scope, isLoggedIn, masa]);
+  }, [soulnames, scope, isLoggedIn, verbose]);
 
   return { scope, setScope, areScopesFullfiled };
 };

src/provider/modules/soulnames/soulnames.ts

@@ -37,7 +37,7 @@ export const useSoulnames = (
       retry: false,
       onSuccess: (soulNames?: SoulNameDetails[]) => {
         if (masa?.config.verbose) {
-          console.log({ soulNames, network: masa?.config.network });
+          console.info({ soulNames, network: masa?.config.network });
         }
       },
     }

src/provider/modules/wallet/wallet.ts

@@ -9,7 +9,7 @@ export const useWallet = (
 ): {
   walletAddress: string | undefined;
   isWalletLoading: boolean;
-  isConnected: boolean;
+  hasWalletAddress: boolean;
   status: string;
   error: unknown;
 } => {
@@ -32,14 +32,14 @@ export const useWallet = (
     }
   );
 
-  const isConnected = useMemo(() => {
+  const hasWalletAddress = useMemo(() => {
     return !!walletAddress;
   }, [walletAddress]);
 
   return {
     walletAddress: !provider ? undefined : walletAddress,
     isWalletLoading: isLoading || isFetching,
-    isConnected,
+    hasWalletAddress,
     status,
     error,
   };

src/provider/use-metamask.ts

@@ -10,8 +10,7 @@ export const useMetamask = ({
   disabled?: boolean;
 }): { connectMetamask: () => void } => {
   const [connectedAccounts, setConnectedAccounts] = useState<string[]>([]);
-  const { setProvider, handleLogout, isConnected, walletAddress, masa } =
-    useMasa();
+  const { setProvider, handleLogout, walletAddress, verbose } = useMasa();
   const { localStorageSet, localStorageGet } = useLocalStorage();
 
   const metamaskStorageKey = 'masa-react-metamask-connected';
@@ -31,16 +30,16 @@ export const useMetamask = ({
     let metamaskConnected: boolean =
       localStorageGet<boolean>(metamaskStorageKey) || false;
 
-    if (!disabled && window?.ethereum && !metamaskConnected) {
+    if (!disabled && window?.ethereum && !walletAddress) {
       let accounts: Maybe<string[]>;
 
       try {
         accounts = await window?.ethereum?.request({
           method: 'eth_requestAccounts',
         });
 
-        if (masa?.config.verbose) {
-          console.log({ accounts });
+        if (verbose) {
+          console.info({ accounts });
         }
       } catch (error) {
         if (error instanceof Error) {
@@ -50,8 +49,9 @@ export const useMetamask = ({
 
       if (accounts && Array.isArray(accounts)) {
         const signer = getWeb3Provider()?.getSigner();
-        if (accounts.length > 0 && signer) {
-          setProvider?.(signer);
+
+        if (signer && accounts.length > 0 && setProvider) {
+          setProvider(signer);
           metamaskConnected = true;
           localStorageSet<boolean>(metamaskStorageKey, true);
         } else {
@@ -62,28 +62,35 @@ export const useMetamask = ({
       }
     }
 
-    if (masa?.config.verbose) {
-      console.log({ metamaskConnected });
+    if (verbose) {
+      console.info({ metamaskConnected });
     }
 
     return metamaskConnected;
-  }, [disabled, setProvider, masa, localStorageGet, localStorageSet]);
+  }, [
+    disabled,
+    verbose,
+    setProvider,
+    localStorageGet,
+    localStorageSet,
+    walletAddress,
+  ]);
 
   /**
    * Disconnect
    */
   const disconnectMetamask = useCallback(async (): Promise<void> => {
-    if (isConnected) {
-      localStorageSet<boolean>(metamaskStorageKey, false);
+    if (walletAddress) {
       await handleLogout?.();
+      localStorageSet<boolean>(metamaskStorageKey, false);
     }
-  }, [isConnected, handleLogout, localStorageSet]);
+  }, [walletAddress, handleLogout, localStorageSet]);
 
   /**
    * try to connect metamask but not if already connected
    */
   useEffect(() => {
-    const connectWalletOnPageLoad = async (): Promise<void> => {
+    const connectMetamaskOnPageLoad = async (): Promise<void> => {
       const metamaskConnected: boolean | undefined =
         localStorageGet<boolean>(metamaskStorageKey);
 
@@ -100,8 +107,8 @@ export const useMetamask = ({
       }
     };
 
-    void connectWalletOnPageLoad();
-  }, [walletAddress, connectMetamask, masa, localStorageGet]);
+    void connectMetamaskOnPageLoad();
+  }, [connectMetamask, localStorageGet]);
 
   /**
    * disconnect metamask on wallet change