feat: various fixes, refactors, proper account logic wip

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

@@ -44,7 +44,7 @@ export const MasaInterface = ({
     hasWalletAddress,
     identity,
     isLoggedIn,
-    signer,
+
     closeModal,
     scope,
     creditScores,
@@ -59,21 +59,20 @@ export const MasaInterface = ({
 
   const page = useMemo(() => {
     if (verbose) {
-      console.log('INTERFACE', {
-        hasWalletAddress,
-        verbose,
-        identity,
-        isLoggedIn,
-        scope,
-        signer,
-        creditScores,
-        soulnames,
-        forcedPage,
-        forceNetwork,
-        currentNetwork,
-        useRainbowKit,
-        isConnected,
-      });
+      // console.log('INTERFACE', {
+      //   hasWalletAddress,
+      //   verbose,
+      //   identity,
+      //   isLoggedIn,
+      //   scope,
+      //   creditScores,
+      //   soulnames,
+      //   forcedPage,
+      //   forceNetwork,
+      //   currentNetwork,
+      //   useRainbowKit,
+      //   isConnected,
+      // });
     }
     if (forcedPage) return forcedPage;
 
@@ -130,7 +129,6 @@ export const MasaInterface = ({
     identity,
     isLoggedIn,
     scope,
-    signer,
     creditScores,
     soulnames,
     forcedPage,

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

@@ -90,14 +90,14 @@ export const InterfaceAuthenticate = (): JSX.Element => {
             <p>
               Want to use a different wallet?
               {!isLoggedIn && isConnected && (
-                <div className={'connected-wallet'}>
+                <span className={'connected-wallet'}>
                   <span
                     className={'authenticate-button'}
                     onClick={switchWallet}
                   >
                     Switch Wallet
                   </span>
-                </div>
+                </span>
               )}
             </p>
           </div>

src/components/modal/styles.scss

@@ -534,6 +534,9 @@
     }
 
     .connected-wallet {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       text-align: center;
       font-size: 18px;
       color: rgba(0, 0, 0, 0.6);

src/provider/masa-context-provider.tsx

@@ -25,6 +25,7 @@ import { useWagmi } from './modules/wagmi';
 import { useNetworkSwitch } from './use-network-switch';
 import { MasaNetworks } from './configured-rainbowkit-provider/utils';
 import { useLogout } from './hooks';
+import { useAccountState } from './use-account-state';
 
 export { SoulNameErrorCodes };
 
@@ -100,6 +101,20 @@ export const MasaContextProvider = ({
     reloadIdentity,
   } = useIdentity(masaInstance, walletAddress);
 
+  const {
+    isDisconnected,
+    isLoggedIn: loggedIn,
+    isLoggingOut,
+    hasAccountAddress,
+  } = useAccountState({
+    masa: masaInstance,
+    walletAddress,
+    signer,
+    isLoggedIn,
+    hasWalletAddress,
+  });
+
+  console.log({ isDisconnected, loggedIn, isLoggingOut });
   // soul names
   const { soulnames, isSoulnamesLoading, reloadSoulnames } = useSoulnames(
     masaInstance,
@@ -139,6 +154,14 @@ export const MasaContextProvider = ({
     setRainbowKitModalCallback,
   } = useRainbowKit();
 
+  const { logout } = useLogout({
+    onLogoutStart: handleLogout,
+    onLogoutFinish: () => console.log('finished logout'),
+    walletAddress,
+    masa: masaInstance,
+    signer,
+  });
+
   // modal
   const {
     isModalOpen,
@@ -151,7 +174,11 @@ export const MasaContextProvider = ({
     openMintMasaGreen,
     useModalSize,
     modalSize,
-  } = useModal(isLoggedIn, hasWalletAddress, areScopesFullfiled);
+  } = useModal(
+    isLoggedIn,
+    hasAccountAddress, // used to be hasWalletAddress
+    areScopesFullfiled
+  );
 
   // global loading flag
   const isLoading = useMemo(() => {
@@ -176,13 +203,6 @@ export const MasaContextProvider = ({
     wagmiLoading,
   ]);
 
-  const { logout } = useLogout({
-    onLogoutStart: () => console.log('starting logout'),
-    onLogoutFinish: () => console.log('finished logout'),
-    walletAddress,
-    masa: masaInstance,
-    signer,
-  });
   // const providerWagmi = useProvider();
 
   // useEffect(() => {

src/provider/modules/network/network.ts

@@ -9,17 +9,21 @@ import {
 import { MetaMaskInpageProvider } from '@metamask/providers';
 import { useSwitchNetwork } from 'wagmi';
 
-export const useNetwork = ({
-  provider,
-  useRainbowKitWalletConnect,
-}: {
-  provider?: Wallet | Signer;
-  useRainbowKitWalletConnect?: boolean;
-}): {
+export type UseNetworkReturnValue = {
   addNetwork: (networkDetails: Network) => void;
   switchNetwork: (networkName: NetworkName) => void;
   currentNetwork?: Network;
-} => {
+};
+
+export type UseNetworkInputValue = {
+  provider?: Wallet | Signer;
+  useRainbowKitWalletConnect?: boolean;
+};
+
+export const useNetwork = ({
+  provider,
+  useRainbowKitWalletConnect,
+}: UseNetworkInputValue): UseNetworkReturnValue => {
   const [currentNetwork, setCurrentNetwork] = useState<Network | undefined>();
   const { switchNetwork: switchNetworkWagmi } = useSwitchNetwork();
 

src/provider/modules/session/session.ts

@@ -90,17 +90,19 @@ export const useSessionDataQuery = ({
   };
 };
 
-export const useSession = (
-  masa?: Masa,
-  walletAddress?: string
-): {
+export type UseSessionReturnType = {
   isLoggedIn?: boolean;
   isSessionLoading: boolean;
   handleLogin: () => void;
   handleLogout: (logoutCallback?: () => void) => Promise<void>;
   status: string;
   error: unknown;
-} => {
+};
+
+export const useSession = (
+  masa?: Masa,
+  walletAddress?: string
+): UseSessionReturnType => {
   const { sessionData, isSessionDataFetching, isSessionDataLoading } =
     useSessionDataQuery({ masa, walletAddress });
   const {

src/provider/use-account-state.ts

@@ -0,0 +1,94 @@
+/**
+ * quick collector object for account state;
+ */
+
+import { Masa } from '@masa-finance/masa-sdk';
+import { Signer } from 'ethers';
+import { ConnectorData, useAccount } from 'wagmi';
+import { useLogout } from './hooks';
+import { useEffect, useMemo, useState } from 'react';
+
+export const useAccountState = ({
+  masa,
+  walletAddress,
+  signer,
+  identity,
+  isLoggedIn,
+  hasWalletAddress,
+}: {
+  masa?: Masa;
+  walletAddress?: string;
+  signer?: Signer;
+  isLoggedIn?: boolean;
+  identity?: {
+    identityId?: string;
+    address?: string;
+  };
+  hasWalletAddress?: boolean;
+}) => {
+  const [accountAddress, setAccountAddress] = useState<string | undefined>(
+    walletAddress
+  );
+
+  const {
+    isConnected,
+    isConnecting,
+    isDisconnected,
+    connector: activeConnector,
+    address: wagmiAddress,
+  } = useAccount();
+  const { isLoggingOut, hasLoggedOut } = useLogout({
+    masa,
+    signer,
+    walletAddress,
+  });
+
+  // * detects if we have a new account or chain
+  useEffect(() => {
+    const handleConnectorUpdate = ({ account, chain }: ConnectorData) => {
+      if (account) {
+        console.log('new account', account);
+        setAccountAddress(account);
+      } else if (chain) {
+        console.log('new chain', chain);
+      }
+    };
+
+    if (activeConnector) {
+      activeConnector.on('change', handleConnectorUpdate);
+    }
+
+    return () => {
+      activeConnector?.off('change', handleConnectorUpdate);
+    };
+  }, [activeConnector]);
+
+  const hasAccountAddress = useMemo(() => {
+    return !!accountAddress;
+  }, [accountAddress]);
+
+  useEffect(() => {
+    // * initial state, just make sure walletAddress is passed to account address
+    // * if we are initializing
+    // * TODO: remove this logic once proper walletAddress scoping is in place
+    if (walletAddress && !accountAddress && !isDisconnected) {
+      console.log('setting account address to wallet address', walletAddress);
+      setAccountAddress(walletAddress);
+    }
+  }, [walletAddress, accountAddress, wagmiAddress, isDisconnected]);
+
+  return {
+    accountAddress,
+    isConnected,
+    isConnecting,
+    isDisconnected,
+    identity,
+    isLoggedIn,
+    hasLoggedOut,
+    isLoggingOut,
+
+    hasWalletAddress,
+    hasAccountAddress,
+    walletAddress,
+  };
+};