feat: sync session to masa-sdk address, proper state sync for session

src/refactor/masa-client-provider.tsx

@@ -1,7 +1,10 @@
 import React, { ReactNode, createContext, useContext, useMemo } from 'react';
+import { useAsync } from 'react-use';
 import { useMasaClient } from './masa-client/use-masa-client';
 import { useIdentity } from './masa-feature/use-identity';
-import { useSession } from './masa-feature/use-session';
+
+import { useWallet } from './wallet-client/wallet/use-wallet';
+import { useSession } from './masa-feature/session/use-session';
 
 export interface MasaClientProviderValue {
   masa?: ReturnType<typeof useMasaClient>['sdk'];
@@ -12,17 +15,63 @@ export interface MasaClientProviderValue {
 export const MasaClientContext = createContext({} as MasaClientProviderValue);
 
 export const MasaClientProvider = ({ children }: { children: ReactNode }) => {
-  const { sdk: masa } = useMasaClient();
-  const { session } = useSession();
+  const { masa, masaAddress } = useMasaClient();
+  const {
+    session,
+    isLoadingSession,
+    hasSession,
+    loginSession,
+    logoutSession,
+    sessionAddress,
+  } = useSession();
+  const { isDisconnected } = useWallet();
+
+  // * useEffect to handle account switches and disconnect
+  useAsync(async () => {
+    if (isLoadingSession) return;
+
+    if (
+      session &&
+      masaAddress &&
+      masaAddress === session?.user.address &&
+      hasSession
+    ) {
+      return;
+    }
+
+    if (isDisconnected) {
+      await logoutSession();
+      return;
+    }
+
+    if (
+      hasSession &&
+      sessionAddress &&
+      masaAddress &&
+      sessionAddress !== masaAddress
+    ) {
+      await logoutSession();
+    }
+  }, [
+    isLoadingSession,
+    sessionAddress,
+    masaAddress,
+    isDisconnected,
+    logoutSession,
+    hasSession,
+    session,
+  ]);
 
   const masaClientProviderValue: MasaClientProviderValue = useMemo(
     () =>
       ({
         masa,
-
         session,
+        sessionAddress,
+        loginSession,
+        logoutSession,
       } as MasaClientProviderValue),
-    [masa, session]
+    [masa, session, sessionAddress, loginSession, logoutSession]
   );
   return (
     <MasaClientContext.Provider value={masaClientProviderValue}>

src/refactor/masa-client/query-client.ts

@@ -17,7 +17,7 @@ export const createQueryClient = () => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
-        cacheTime: 1000 * 60 * 60 * 24, // 24 hours
+        cacheTime: 0, // 1000 * 60 * 60 * 24, // 24 hours
         networkMode: 'offlineFirst',
         refetchOnWindowFocus: false,
         retry: 0,
@@ -58,7 +58,8 @@ export const createQueryClient = () => {
           query.cacheTime !== 0 &&
           // Note: adding a `persist` flag to a query key will instruct the
           // persister whether or not to persist the response of the query.
-          (query.queryKey[0] as { persist?: boolean }).persist !== false,
+          (query.queryKey[1] as { persist?: boolean } & Record<string, unknown>)
+            .persist !== false,
       },
     });
 

src/refactor/masa-client/use-masa-client.ts

@@ -1,18 +1,20 @@
 import type { Signer } from 'ethers';
 import type { NetworkName } from '@masa-finance/masa-sdk';
 import { useMemo } from 'react';
+import { useAsync } from 'react-use';
 import { useConfig } from '../base-provider';
 import { useWallet } from '../wallet-client/wallet/use-wallet';
 import { useMasaSDK } from './use-masa-sdk';
 import { useNetwork } from '../wallet-client/network';
 
 export const useMasaClient = () => {
   const { masaConfig } = useConfig();
-  const { signer, isDisconnected } = useWallet();
+  const { signer, isDisconnected, address } = useWallet();
   const { activeChain } = useNetwork();
 
   const masa = useMasaSDK(
     {
+      address,
       signer: isDisconnected ? undefined : (signer as Signer | undefined),
       ...masaConfig,
       environmentName: masaConfig.environment,
@@ -23,6 +25,7 @@ export const useMasaClient = () => {
           : (activeChain?.network as NetworkName | undefined),
     },
     [
+      address,
       signer,
       masaConfig,
       masaConfig.environment,
@@ -31,13 +34,29 @@ export const useMasaClient = () => {
     ]
   );
 
-  const masaClient = useMemo(
-    () => ({
+  const { value: masaAddress } = useAsync(async () => {
+    if (masa) {
+      const masaAddr = await masa.config.signer.getAddress();
+      return masaAddr as `0x${string}`;
+    }
+
+    return undefined;
+  }, [masa]);
+
+  const masaClient = useMemo(() => {
+    if (address !== masaAddress) {
+      return {
+        masaAddress,
+        sdk: undefined,
+        masa: undefined,
+      };
+    }
+    return {
+      masaAddress,
       sdk: masa,
       masa,
-    }),
-    [masa]
-  );
+    };
+  }, [masa, masaAddress, address]);
 
   return masaClient;
 };

src/refactor/masa-client/use-masa-sdk.ts

@@ -36,10 +36,12 @@ export const useMasaSDK = (
     verbose,
     apiUrl,
     contractAddressOverrides,
-  }: UseMasaSdkArgs,
+    address,
+  }: UseMasaSdkArgs & { address: `0x${string}` | undefined },
   deps: Array<unknown>
 ): Masa | undefined => {
   const masa = useMemo(() => {
+    if (!address) return undefined;
     if (!signer) {
       if (verbose)
         console.log('DEBUG: no signer, returning undefined for masa object');