feat: update queries, add logout function, full flow for wagmi

masa-finance · May 9, 2023 · cec2e23 · cec2e23
1 parent b8f8452
commit cec2e23
Show file tree

Hide file tree

Showing 12 changed files with 471 additions and 124 deletions.
diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx
@@ -139,6 +139,7 @@ export const MasaInterface = ({
     isConnected,
     openConnectModal,
     closeModal,
+    useRainbowKit,
   ]);
 
   const isModal = useMemo(() => {

diff --git a/src/components/masa-interface/pages/authenticate/authenticate.tsx b/src/components/masa-interface/pages/authenticate/authenticate.tsx
@@ -9,8 +9,8 @@ export const InterfaceAuthenticate = (): JSX.Element => {
     handleLogin,
     walletAddress,
     isLoading,
-    setModalOpen,
-    openConnectModal,
+    // setModalOpen,
+    // openConnectModal,
     isLoggedIn,
     useRainbowKit,
     connect,
@@ -20,7 +20,7 @@ export const InterfaceAuthenticate = (): JSX.Element => {
   const switchWallet = useCallback(() => {
     console.log({ disconnect });
     disconnect();
-  }, [disconnect, setModalOpen, openConnectModal, isConnected, isLoggedIn]);
+  }, [disconnect]);
 
   useEffect(() => {
     if (isConnected && !isLoggedIn) {

diff --git a/src/provider/hooks.ts b/src/provider/hooks.ts
@@ -0,0 +1,116 @@
+import { useDisconnect } from 'wagmi';
+import { queryClient } from './masa-query-client';
+import { useAsyncFn } from 'react-use';
+import { DependencyList } from 'react';
+import {
+  getIdentityQueryKey,
+  getSessionDataQueryKey,
+  getSessionQueryKey,
+  getWalletQueryKey,
+} from './modules';
+import { Masa } from '@masa-finance/masa-sdk';
+import { Signer } from 'ethers';
+
+const QUERIES = [
+  'identity',
+  'wallet',
+  'session',
+  'sessionData',
+  //   'credit-scores',
+  //   'green',
+  //   'soulnames',
+];
+
+export type QueryKeyRetrievalInput = {
+  masa?: Masa;
+  signer?: Signer;
+  walletAddress?: string;
+};
+
+export const getQueryKeys = () => ({
+  identity: ({ masa, signer, walletAddress }: QueryKeyRetrievalInput) =>
+    getIdentityQueryKey({ masa, signer, walletAddress }),
+  session: ({ masa, signer, walletAddress }: QueryKeyRetrievalInput) =>
+    getSessionQueryKey({ masa, signer, walletAddress }),
+  sessionData: ({ masa, signer, walletAddress }: QueryKeyRetrievalInput) =>
+    getSessionDataQueryKey({ masa, signer, walletAddress }),
+  wallet: ({ masa, signer, walletAddress }: QueryKeyRetrievalInput) =>
+    getWalletQueryKey({ masa, signer, walletAddress }),
+});
+
+export const invalidateAllQueries = async ({
+  masa,
+  signer,
+  walletAddress,
+}: QueryKeyRetrievalInput) => {
+  console.log('invalidate all queries start');
+  const res = await Promise.all(
+    QUERIES.map((query: string) =>
+      queryClient.getQueriesData(
+        getQueryKeys()[query]({
+          masa,
+          signer,
+          walletAddress,
+        })
+      )
+    )
+  );
+
+  console.log(
+    'res inv queries',
+    res.map((r) => r[0])
+  );
+
+  const resTwo = await Promise.all(
+    QUERIES.map(async (query: string) =>
+      queryClient.invalidateQueries(
+        getQueryKeys()[query]({
+          masa,
+          signer,
+          walletAddress,
+        })
+      )
+    )
+  );
+  console.log('res after invalidation', resTwo);
+};
+
+export const useLogout = (
+  options: {
+    masa?: Masa;
+    signer?: Signer;
+    walletAddress?: string;
+    onLogoutStart?: () => void;
+    onLogoutFinish?: () => void;
+  },
+  deps?: DependencyList
+) => {
+  const { onLogoutStart, onLogoutFinish, masa, walletAddress, signer } =
+    options;
+  const { disconnectAsync } = useDisconnect();
+
+  const [{ value: hasLoggedOut, loading: isLoggingOut, error }, logout] =
+    useAsyncFn(async () => {
+      try {
+        onLogoutStart?.();
+        await masa?.session.sessionLogout();
+        console.log('before query');
+        await invalidateAllQueries({ masa, signer, walletAddress });
+        console.log('after query');
+        await disconnectAsync();
+        return true;
+      } catch (error: unknown) {
+        console.error(error);
+        return false;
+      } finally {
+        onLogoutFinish?.();
+      }
+    }, [disconnectAsync, onLogoutStart, onLogoutFinish, masa, ...(deps ?? [])]);
+
+  return {
+    hasLoggedOut,
+    isLoggingOut,
+    logout,
+    error,
+  };
+};
diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx
@@ -24,6 +24,7 @@ import { useRainbowKit } from './use-rainbowkit';
 import { useWagmi } from './modules/wagmi';
 import { useNetworkSwitch } from './use-network-switch';
 import { MasaNetworks } from './configured-rainbowkit-provider/utils';
+import { useLogout } from './hooks';
 
 export { SoulNameErrorCodes };
 
@@ -83,7 +84,7 @@ export const MasaContextProvider = ({
   });
 
   // network
-  const { switchNetwork, currentNetwork } = useNetwork(signer);
+  const { switchNetwork, currentNetwork } = useNetwork({provider: signer, useRainbowKitWalletConnect });
   const { switchNetwork: switchNetworkNew, currentNetwork: currentNetworkNew } =
     useNetworkSwitch();
 
@@ -171,6 +172,14 @@ export const MasaContextProvider = ({
     isGreensLoading,
     wagmiLoading,
   ]);
+
+  const { logout } = useLogout({
+    onLogoutStart: () => console.log('starting logout'),
+    onLogoutFinish: () => console.log('finished logout'),
+    walletAddress,
+    masa: masaInstance,
+    signer,
+  });
   // const providerWagmi = useProvider();
 
   // useEffect(() => {
@@ -280,6 +289,7 @@ export const MasaContextProvider = ({
 
     // masa-react global connect
     connect,
+    logout,
 
     // general config
     scope,

diff --git a/src/provider/masa-shape.ts b/src/provider/masa-shape.ts
@@ -26,7 +26,7 @@ export interface MasaShape {
 
   // global connect
   connect?: (options?: { scope?: string[]; callback?: () => void }) => void;
-
+  logout?: () => Promise<boolean>;
   // general config
   scope?: string[];
   areScopesFullfiled?: boolean;

diff --git a/src/provider/modules/identity/identity.ts b/src/provider/modules/identity/identity.ts
@@ -4,25 +4,24 @@ import { queryClient } from '../../masa-query-client';
 import { Masa, NetworkName, PaymentMethod } from '@masa-finance/masa-sdk';
 import { BigNumber } from 'ethers';
 
-export const useIdentity = (
-  masa?: Masa,
-  walletAddress?: string
-): {
-  identity?: {
-    identityId?: BigNumber;
-    address?: string;
-  };
-  handlePurchaseIdentity: () => Promise<boolean>;
-  handlePurchaseIdentityWithSoulname: (
-    paymentMethod: PaymentMethod,
-    soulname: string,
-    registrationPeriod: number
-  ) => Promise<boolean>;
-  status: string;
-  isIdentityLoading: boolean;
-  reloadIdentity: () => void;
-  error: unknown;
-} => {
+export const getIdentityQueryKey = ({
+  walletAddress,
+  masa,
+}: {
+  walletAddress?: string;
+  masa?: Masa;
+  signer?: any; // unused here
+}) => {
+  return ['identity', walletAddress, masa?.config.networkName];
+};
+
+export const useIdentityQuery = ({
+  masa,
+  walletAddress,
+}: {
+  masa?: Masa;
+  walletAddress?: string;
+}) => {
   const queryKey: (string | NetworkName | undefined)[] = useMemo(() => {
     return ['identity', walletAddress, masa?.config.networkName];
   }, [walletAddress, masa]);
@@ -38,7 +37,7 @@ export const useIdentity = (
     queryKey,
     () => masa?.identity.load(walletAddress),
     {
-      enabled: !!masa && !!walletAddress,
+      enabled: false, // !!masa && !!walletAddress,
       retry: false,
       onSuccess: (identity?: { identityId?: BigNumber; address?: string }) => {
         if (masa?.config.verbose) {
@@ -48,12 +47,63 @@ export const useIdentity = (
     }
   );
 
+  const invalidateIdentity = useCallback(
+    async () => await queryClient.invalidateQueries(['identity']),
+    []
+  );
+
+  const invalidateSoulnames = useCallback(
+    async () => await queryClient.invalidateQueries(['soulnames']),
+    []
+  );
+
+  return {
+    identity,
+    status,
+    isLoading,
+    isFetching,
+    reloadIdentity,
+    error,
+    invalidateIdentity,
+    invalidateSoulnames,
+  };
+};
+
+export const useIdentity = (
+  masa?: Masa,
+  walletAddress?: string
+): {
+  identity?: {
+    identityId?: BigNumber;
+    address?: string;
+  };
+  handlePurchaseIdentity: () => Promise<boolean>;
+  handlePurchaseIdentityWithSoulname: (
+    paymentMethod: PaymentMethod,
+    soulname: string,
+    registrationPeriod: number
+  ) => Promise<boolean>;
+  status: string;
+  isIdentityLoading: boolean;
+  reloadIdentity: () => void;
+  error: unknown;
+} => {
+  const {
+    identity,
+    status,
+    isLoading,
+    isFetching,
+    reloadIdentity,
+    error,
+    invalidateIdentity,
+    invalidateSoulnames,
+  } = useIdentityQuery({ masa, walletAddress });
   const handlePurchaseIdentity = useCallback(async (): Promise<boolean> => {
     const result = await masa?.identity.create();
-    await queryClient.invalidateQueries(['identity']);
+    await invalidateIdentity();
 
     return !!result?.success;
-  }, [masa]);
+  }, [masa, invalidateIdentity]);
 
   const handlePurchaseIdentityWithSoulname = useCallback(
     async (
@@ -66,12 +116,12 @@ export const useIdentity = (
         soulname,
         registrationPeriod
       );
-      await queryClient.invalidateQueries(['identity']);
-      await queryClient.invalidateQueries(['soulnames']);
+      await invalidateIdentity();
+      await invalidateSoulnames();
 
       return !!result?.success;
     },
-    [masa]
+    [masa, invalidateIdentity, invalidateSoulnames]
   );
 
   return {