feat: masa state wip, add previous address logic

masa-finance · Jun 14, 2023 · ea2f88e · ea2f88e
1 parent 8404b2f
commit ea2f88e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 10 deletions.
diff --git a/src/refactor/masa-feature/use-session.ts b/src/refactor/masa-feature/use-session.ts
@@ -6,10 +6,10 @@ import { useMasaClient } from '../masa-client/use-masa-client';
 import { QcContext } from '../masa-provider';
 
 export const useSession = () => {
-  const { address, isDisconnected } = useWallet();
+  const { address, isDisconnected, previousAddress } = useWallet();
   const { masa } = useMasaClient();
   const queryClient = useQueryClient({ context: QcContext });
-
+  //   console.log({ address, previousAddress });
   const [{ loading: isCheckingSession }, checkSession] =
     useAsyncFn(async () => {
       if (!address) return null;
@@ -80,7 +80,7 @@ export const useSession = () => {
 
   const { data: hasSession, refetch: checkLogin } = useQuery({
     queryKey: ['session-check', address],
-    enabled: !!masa && !!address,
+    enabled: !!masa,
     context: QcContext,
     onSuccess: async (data: boolean) => {
       console.log('ON SUCCESS checkLogin');
@@ -223,6 +223,7 @@ export const useSession = () => {
     console.log('USE ASYNC TO SWITCH ACCS ON LOGUOt', {
       hasSession,
       address,
+      previousAddress,
       seshAddress: session?.user.address,
       session,
     });
@@ -271,10 +272,11 @@ export const useSession = () => {
       }
     }
   }, [
-    queryClient,
+    // queryClient,
     hasSession,
     address,
     session,
+    previousAddress,
     // logoutSession,
     isDisconnected,
     sessionFromGet,

diff --git a/src/refactor/masanew.stories.tsx b/src/refactor/masanew.stories.tsx
@@ -129,6 +129,7 @@ const NetworkInfo = () => {
 const WalletInfo = () => {
   const {
     address,
+    previousAddress,
     // provider,
     // signer,
     connector,
@@ -150,8 +151,9 @@ const WalletInfo = () => {
       <li className="flex-50">
         <ul>
           <h3>Wallet</h3>
-          <li>address: {address}</li>
-          <li>activeConnector: {connector?.name}</li>
+          <li>address: {String(address)}</li>
+          <li>previousAddress: {String(previousAddress)}</li>
+          <li>activeConnector: {String(connector?.name)}</li>
           <li>isConnected: {String(isConnected)}</li>
           <li>isConnecting: {String(isConnecting)}</li>
           <li>isDisconnected: {String(isDisconnected)}</li>

diff --git a/src/refactor/wallet-client/wallet-client-provider.tsx b/src/refactor/wallet-client/wallet-client-provider.tsx
@@ -43,6 +43,8 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
     isLoadingSigner,
     isLoadingBalance,
     balance,
+    previousAddress,
+    setPreviousAddress,
   } = useWallet();
   const {
     connectors,
@@ -103,6 +105,8 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
         isLoadingSigner,
         isLoadingBalance,
         balance,
+        previousAddress,
+        setPreviousAddress,
 
         // network
         connectors,
@@ -133,6 +137,8 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
       isLoadingSigner,
       isLoadingBalance,
       balance,
+      previousAddress,
+      setPreviousAddress,
 
       // network
       connectors,

diff --git a/src/refactor/wallet-client/wallet/use-account-change-listen.ts b/src/refactor/wallet-client/wallet/use-account-change-listen.ts
@@ -9,7 +9,7 @@ export const useAccountChangeListen = ({
   onChainChange?: () => void;
 }>) => {
   const provider = useProvider();
-  const { connector } = useAccount();
+  const { connector, address } = useAccount();
 
   useAsync(async () => {
     const handleConnectorUpdate = async ({ chain, account }: ConnectorData) => {
@@ -21,7 +21,6 @@ export const useAccountChangeListen = ({
           window.localStorage.removeItem('walletconnect');
         }
 
-        // await invalidateAllQueries({ masa, signer, walletAddress });
         onAccountChange?.();
       } else if (chain) {
         // NOTE: this is a hack to fix the walletconnect issue
@@ -74,5 +73,5 @@ export const useAccountChangeListen = ({
       provider.off('chainChanged', () => {});
       provider.off('disconnect', () => {});
     };
-  }, [connector, provider]);
+  }, [address, onAccountChange, onChainChange, connector, provider]);
 };
diff --git a/src/refactor/wallet-client/wallet/use-wallet.ts b/src/refactor/wallet-client/wallet/use-wallet.ts
@@ -3,7 +3,7 @@ import {
   useChainModal,
   useAccountModal,
 } from '@rainbow-me/rainbowkit';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import {
   useAccount,
@@ -19,6 +19,8 @@ const useWallet = () => {
   const { openAccountModal } = useAccountModal();
   const { isConnected, isConnecting, isDisconnected, connector, address } =
     useAccount();
+  const [previousAddress, setPreviousAddress] = useState(address);
+  const [compareAddress, setCompareAddress] = useState(address);
   const { data: signer, isLoading: isLoadingSigner } = useSigner();
   const { disconnect, disconnectAsync } = useDisconnect();
   const provider = useProvider();
@@ -30,6 +32,27 @@ const useWallet = () => {
     address,
   });
 
+  useEffect(() => {
+    if (isDisconnected) {
+      setPreviousAddress(undefined);
+      setCompareAddress(undefined);
+      setPreviousAddress(undefined);
+    }
+
+    console.log('addr changed', { address });
+
+    if (compareAddress !== address) {
+      setPreviousAddress(compareAddress);
+      setCompareAddress(address);
+    }
+  }, [
+    address,
+    setPreviousAddress,
+    isDisconnected,
+    previousAddress,
+    compareAddress,
+    setCompareAddress,
+  ]);
   const balance = useMemo(() => {
     if (!balanceResult) return '';
     return `${balanceResult?.formatted} ${balanceResult?.symbol}`;
@@ -38,6 +61,8 @@ const useWallet = () => {
   const useWalletValue = useMemo(
     () => ({
       address,
+      previousAddress,
+      compareAddress,
       provider,
       signer,
       connector,
@@ -52,9 +77,13 @@ const useWallet = () => {
       isLoadingSigner,
       isLoadingBalance,
       balance,
+      setPreviousAddress,
+      setCompareAddress,
     }),
     [
       address,
+      previousAddress,
+      compareAddress,
       provider,
       signer,
       connector,
@@ -69,6 +98,8 @@ const useWallet = () => {
       isLoadingSigner,
       isLoadingBalance,
       balance,
+      setPreviousAddress,
+      setCompareAddress,
     ]
   );