fix provider handling

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

@@ -1,13 +1,9 @@
 import React, { useEffect, useMemo } from 'react';
-import {
-  useMasa,
-  // useMetamask
-} from '../../provider';
+import { useMasa } from '../../provider';
 import { ModalComponent } from '../modal';
 import {
   InterfaceAuthenticate,
   InterfaceConnected,
-  // InterfaceConnector,
   InterfaceCreateCreditScore,
   InterfaceCreateIdentity,
 } from './pages';
@@ -47,7 +43,7 @@ export const MasaInterface = (): JSX.Element => {
     hasWalletAddress,
     identity,
     isLoggedIn,
-    provider,
+    signer,
     closeModal,
     scope,
     creditScores,
@@ -77,7 +73,7 @@ export const MasaInterface = (): JSX.Element => {
       return 'switchNetwork';
     }
 
-    if (!isLoggedIn && provider) return 'authenticate';
+    if (!isLoggedIn && signer) return 'authenticate';
 
     if (
       isLoggedIn &&
@@ -107,7 +103,7 @@ export const MasaInterface = (): JSX.Element => {
     identity,
     isLoggedIn,
     scope,
-    provider,
+    signer,
     creditScores,
     soulnames,
     forcedPage,
@@ -123,12 +119,12 @@ export const MasaInterface = (): JSX.Element => {
   useEffect(() => {
     // * when user closes connection during login process,
     // * we want to reopen rainbowkit modal not our old connection modal
-    if (isModalOpen && !provider && page === 'connector') {
+    if (isModalOpen && !signer && page === 'connector') {
       closeModal?.();
       console.log('opening connect modal');
       openConnectModal?.();
     }
-  }, [isModalOpen, closeModal, provider, page, openConnectModal]);
+  }, [isModalOpen, closeModal, signer, page, openConnectModal]);
 
   return (
     <>

src/helpers/masa.ts

@@ -1,5 +1,4 @@
 import {
-  createRandomWallet,
   Environment,
   environments,
   Masa,
@@ -22,27 +21,18 @@ export const getWeb3Provider = (): providers.Web3Provider | undefined => {
 };
 
 export const createNewMasa = ({
-  signer,
+  wallet,
   environmentName,
   networkName = 'unknown',
   arweaveConfig,
   verbose,
 }: {
-  signer: ethers.Signer | null;
+  wallet: ethers.Signer | ethers.Wallet;
   environmentName: string;
   networkName?: NetworkName;
   arweaveConfig?: ArweaveConfig;
   verbose: boolean;
 }): Masa | undefined => {
-  const newSigner: ethers.Signer | null = signer
-    ? signer
-    : createRandomWallet(getWeb3Provider());
-
-  if (!newSigner) {
-    console.error('Unable to create signer!');
-    return;
-  }
-
   const environment = environments.find(
     (environment: Environment) => environment.name === environmentName
   );
@@ -52,7 +42,7 @@ export const createNewMasa = ({
   }
 
   return new Masa({
-    wallet: newSigner,
+    wallet,
     apiUrl: environment.apiUrl,
     networkName,
     environment: environment.environment,

src/provider/masa-context-provider.tsx

@@ -64,21 +64,17 @@ export const MasaContextProvider = ({
   const [masaInstance, setMasaInstance] = useState<Masa | undefined>();
 
   // provider
-  const {
-    provider: wagmiProvider,
-    isLoading: wagmiLoading,
-    signer: wagmiSigner,
-  } = useWagmi();
-  const [provider, setProvider] = useState<Wallet | Signer | undefined>(
-    wagmiSigner as Signer | undefined
+  const { isLoading: wagmiLoading, signer: wagmiSigner } = useWagmi();
+  const [signer, setSigner] = useState<Signer | undefined>(
+    wagmiSigner as Signer
   );
 
-  useEffect(() => setProvider(wagmiSigner as Signer), [wagmiSigner]);
+  useEffect(() => setSigner(wagmiSigner as Signer), [wagmiSigner]);
 
   // wallet
   const { walletAddress, isWalletLoading, hasWalletAddress } = useWallet(
     masaInstance,
-    wagmiSigner as Signer | undefined
+    wagmiSigner as Signer
   );
   // session
   const { isLoggedIn, handleLogin, handleLogout, isSessionLoading } =
@@ -252,12 +248,11 @@ export const MasaContextProvider = ({
 
   useEffect(() => {
     const loadMasa = (): void => {
-      // if (!provider) return;
+      if (!wagmiSigner) return;
 
       const masa: Masa | undefined = createNewMasa({
         // signer: provider,
-        signer: wagmiSigner as Signer | null,
-        // provider: wagmiProvider as providers.Provider,
+        wallet: wagmiSigner as Signer,
         environmentName,
         networkName: currentNetwork?.networkName,
         arweaveConfig,
@@ -268,14 +263,7 @@ export const MasaContextProvider = ({
     };
 
     void loadMasa();
-  }, [
-    arweaveConfig,
-    environmentName,
-    verbose,
-    currentNetwork,
-    wagmiProvider,
-    wagmiSigner,
-  ]);
+  }, [arweaveConfig, environmentName, verbose, currentNetwork, wagmiSigner]);
 
   const context: MasaShape = {
     // masa instance
@@ -294,8 +282,8 @@ export const MasaContextProvider = ({
     company,
 
     // provider handling
-    provider,
-    setProvider,
+    signer,
+    setSigner,
 
     // modal
     isModalOpen,

src/provider/masa-shape.ts

@@ -10,9 +10,10 @@ import {
   SoulNameDetails,
   VerifyGreenResult,
 } from '@masa-finance/masa-sdk';
-import { BigNumber, Signer, Wallet } from 'ethers';
+import { BigNumber, Signer } from 'ethers';
 import { GetNetworkResult } from '@wagmi/core';
-import { WrapperModalProps, ModalName } from '../components/new-modal';
+import { ModalName, WrapperModalProps } from '../components';
+
 export interface MasaShape {
   children?: React.ReactNode;
   // masa
@@ -32,8 +33,8 @@ export interface MasaShape {
   company?: string;
 
   // provider
-  provider?: Wallet | Signer;
-  setProvider?: (provider?: Wallet | Signer) => void;
+  signer?: Signer;
+  setSigner?: (signer?: Signer) => void;
 
   // modal
   isModalOpen?: boolean;

src/provider/modules/wagmi/index.ts

@@ -0,0 +1 @@
+export * from './use-wagmi';

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

@@ -1,6 +1,4 @@
-import { Chain, useSigner } from 'wagmi';
-import { useNetwork, useProvider } from 'wagmi';
-import { useAccount } from 'wagmi';
+import { Chain, useAccount, useNetwork, useProvider, useSigner } from 'wagmi';
 
 export const useWagmi = () => {
   const provider = useProvider();

src/provider/use-metamask.ts

@@ -11,7 +11,7 @@ export const useMetamask = ({
   disabled?: boolean;
 }): { connectMetamask: () => void } => {
   const [connectedAccounts, setConnectedAccounts] = useState<string[]>([]);
-  const { setProvider, handleLogout, walletAddress, verbose, isLoggedIn } =
+  const { setSigner, handleLogout, walletAddress, verbose, isLoggedIn } =
     useMasa();
   const { localStorageSet, localStorageGet } = useLocalStorage();
 
@@ -52,8 +52,8 @@ export const useMetamask = ({
       if (accounts && Array.isArray(accounts)) {
         const signer = getWeb3Provider()?.getSigner();
 
-        if (signer && accounts.length > 0 && setProvider) {
-          setProvider(signer);
+        if (signer && accounts.length > 0 && setSigner) {
+          setSigner(signer);
           metamaskConnected = true;
           localStorageSet<boolean>(metamaskStorageKey, true);
         } else {
@@ -72,7 +72,7 @@ export const useMetamask = ({
   }, [
     disabled,
     verbose,
-    setProvider,
+    setSigner,
     localStorageGet,
     localStorageSet,
     walletAddress,
@@ -130,7 +130,7 @@ export const useMetamask = ({
     };
 
     void disconnectMetamaskOnWalletChange();
-  }, [connectedAccounts, disconnectMetamask, walletAddress, setProvider]);
+  }, [connectedAccounts, disconnectMetamask, walletAddress, setSigner]);
 
   /**
    * wire up metamask event listeners
@@ -149,7 +149,7 @@ export const useMetamask = ({
             // no accounts, disconnect metamask
             await disconnectMetamask();
             // drop provider
-            setProvider?.();
+            setSigner?.();
           }
 
           // update accounts
@@ -163,11 +163,11 @@ export const useMetamask = ({
       (window.ethereum as unknown as MetaMaskInpageProvider)?.on(
         'chainChanged',
         () => {
-          setProvider?.(getWeb3Provider()?.getSigner());
+          setSigner?.(getWeb3Provider()?.getSigner());
         }
       );
     }
-  }, [setProvider, setConnectedAccounts, disconnectMetamask]);
+  }, [setSigner, setConnectedAccounts, disconnectMetamask]);
 
   return { connectMetamask };
 };