refactor: add wallet data hooks and cb

jobstash · Apr 3, 2024 · 1abe406 · 1abe406
1 parent e7385d5
commit 1abe406
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 13 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,8 +2,11 @@ import './globals.css';
 
 import type { Metadata, Viewport } from 'next';
 
-import { METADATA } from '~/shared/core/constants';
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+
+import { METADATA, QUERY_STALETIME } from '~/shared/core/constants';
 import { lato, roboto } from '~/shared/core/fonts';
+import { getQueryClient } from '~/shared/utils/get-query-client';
 import { ConnectWalletButton } from '~/shared/components/connect-wallet-button';
 import { InitPathSyncer } from '~/shared/components/init-path-syncer';
 import { Nav } from '~/shared/components/nav';
@@ -13,6 +16,9 @@ import { ReactQueryProvider } from '~/shared/providers/react-query-provider';
 import { WagmiProvider } from '~/shared/providers/wagmi-provider';
 import { WalletProvider } from '~/shared/providers/wallet-provider';
 
+import { userQueryKeys } from '~/users/core/query-keys';
+import { getWalletData } from '~/users/api/get-wallet-data';
+
 export const metadata: Metadata = {
   title: METADATA.SITE_NAME,
   description: METADATA.SITE_SLOGAN,
@@ -26,17 +32,26 @@ export const viewport: Viewport = {
   viewportFit: 'cover',
 };
 
-const RootLayout = ({ children }: { children: React.ReactNode }) => {
+const RootLayout = async ({ children }: { children: React.ReactNode }) => {
+  const queryClient = getQueryClient();
+  await queryClient.prefetchQuery({
+    queryKey: userQueryKeys.walletData(),
+    queryFn: () => getWalletData(),
+    staleTime: QUERY_STALETIME.DEFAULT,
+  });
+
   return (
     <html lang="en" className={`${lato.variable} ${roboto.variable}`}>
       <body>
         <NextUIProvider>
           <WagmiProvider>
             <ReactQueryProvider>
-              <WalletProvider>
-                <Nav connectWalletButton={<ConnectWalletButton />} />
-                {children}
-              </WalletProvider>
+              <HydrationBoundary state={dehydrate(queryClient)}>
+                <WalletProvider>
+                  <Nav connectWalletButton={<ConnectWalletButton />} />
+                  {children}
+                </WalletProvider>
+              </HydrationBoundary>
             </ReactQueryProvider>
           </WagmiProvider>
         </NextUIProvider>

diff --git a/src/shared/providers/wallet-provider.tsx b/src/shared/providers/wallet-provider.tsx
@@ -4,8 +4,39 @@ import { ConnectKitProvider, SIWEProvider } from 'connectkit';
 import { SiweMessage } from 'siwe';
 
 import { MW_URL } from '~/shared/core/envs';
+import { getQueryClient } from '~/shared/utils/get-query-client';
+
+import { userQueryKeys } from '~/users/core/query-keys';
 
 export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
+  const queryClient = getQueryClient();
+
+  const invalidateWalletData = () => {
+    queryClient.invalidateQueries({
+      queryKey: userQueryKeys.walletData(),
+    });
+  };
+
+  const onSignIn = () => {
+    invalidateWalletData();
+    // Other cb tasks
+  };
+
+  const onSignOut = () => {
+    invalidateWalletData();
+    // Other cb tasks
+  };
+
+  const onConnect = () => {
+    invalidateWalletData();
+    // Other cb tasks
+  };
+
+  const onDisconnect = () => {
+    invalidateWalletData();
+    // Other cb tasks
+  };
+
   return (
     <SIWEProvider
       getNonce={async () => {
@@ -69,17 +100,15 @@ export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
 
         return res.ok;
       }}
-      onSignIn={() => {
-        console.log('SIGN IN');
-      }}
+      onSignIn={onSignIn}
       signOutOnAccountChange
       signOutOnDisconnect
       signOutOnNetworkChange
-      onSignOut={() => {
-        console.log('SIGN OUT');
-      }}
+      onSignOut={onSignOut}
     >
-      <ConnectKitProvider>{children}</ConnectKitProvider>
+      <ConnectKitProvider onConnect={onConnect} onDisconnect={onDisconnect}>
+        {children}
+      </ConnectKitProvider>
     </SIWEProvider>
   );
 };
diff --git a/src/users/api/get-wallet-data.ts b/src/users/api/get-wallet-data.ts
@@ -0,0 +1,18 @@
+import { MW_URL } from '~/shared/core/envs';
+import { mwGET } from '~/shared/utils/mw-get';
+
+import { walletDataResponseSchema } from '~/users/core/schemas';
+
+export const getWalletData = async () => {
+  const url = `${MW_URL}/siwe/check-wallet`;
+
+  return mwGET({
+    url,
+    label: 'getWalletData',
+    responseSchema: walletDataResponseSchema,
+    options: {
+      credentials: 'include' as RequestCredentials,
+      mode: 'cors' as RequestMode,
+    },
+  });
+};
diff --git a/src/users/core/constants.ts b/src/users/core/constants.ts
@@ -0,0 +1,22 @@
+export const CHECK_WALLET_ROLES = {
+  ANON: 'ANON',
+  ADMIN: 'ADMIN',
+  DEV: 'DEV',
+  ORG: 'ORG',
+} as const;
+
+export const CHECK_WALLET_FLOWS = {
+  ANON: 'LOGIN',
+  PICK_ROLE: 'PICK-ROLE',
+  ADD_GITHUB_REPO: 'ADD-GITHUB-REPO',
+  ONBOARD_PROFILE: 'ONBOARD-PROFILE',
+  ONBOARD_REPO: 'ONBOARD-REPO',
+  ONBOARD_REVIEWS: 'ONBOARD-REVIEWS',
+  SIGNUP_COMPLETE: 'SIGNUP-COMPLETE',
+  ADMIN_SYNONYMS: 'SYNONYMS',
+  ADMIN_COMPLETE: 'ADMIN-COMPLETE',
+  ORG_PROFILE: 'ORG-PROFILE',
+  ORG_APPROVAL: 'ORG-APPROVAL-PENDING',
+  ORG_COMPLETE: 'ORG-COMPLETE',
+  ORG_REJECTED: 'ORG-REJECTED',
+} as const;
diff --git a/src/users/core/query-keys.ts b/src/users/core/query-keys.ts
@@ -0,0 +1,5 @@
+export const userQueryKeys = {
+  all: ['users'] as const,
+  walletData: () => [...userQueryKeys.all, 'wallet-data'] as const,
+};
+export type UserQueryKeys = typeof userQueryKeys;
diff --git a/src/users/core/schemas.ts b/src/users/core/schemas.ts
@@ -0,0 +1,44 @@
+import { z } from 'zod';
+
+import { genericResponseSchema } from '~/shared/core/schemas';
+
+import { CHECK_WALLET_FLOWS, CHECK_WALLET_ROLES } from './constants';
+
+export const walletRoleSchema = z.union([
+  z.literal(CHECK_WALLET_ROLES.ANON),
+  z.literal(CHECK_WALLET_ROLES.ADMIN),
+  z.literal(CHECK_WALLET_ROLES.DEV),
+  z.literal(CHECK_WALLET_ROLES.ORG),
+]);
+export type WalletRole = z.infer<typeof walletRoleSchema>;
+
+export const walletFlowSchema = z.union([
+  z.literal(CHECK_WALLET_FLOWS.ANON),
+  z.literal(CHECK_WALLET_FLOWS.PICK_ROLE),
+  z.literal(CHECK_WALLET_FLOWS.ADD_GITHUB_REPO),
+  z.literal(CHECK_WALLET_FLOWS.ONBOARD_PROFILE),
+  z.literal(CHECK_WALLET_FLOWS.ONBOARD_REPO),
+  z.literal(CHECK_WALLET_FLOWS.ONBOARD_REVIEWS),
+  z.literal(CHECK_WALLET_FLOWS.SIGNUP_COMPLETE),
+  z.literal(CHECK_WALLET_FLOWS.ADMIN_SYNONYMS),
+  z.literal(CHECK_WALLET_FLOWS.ADMIN_COMPLETE),
+  z.literal(CHECK_WALLET_FLOWS.ORG_PROFILE),
+  z.literal(CHECK_WALLET_FLOWS.ORG_APPROVAL),
+  z.literal(CHECK_WALLET_FLOWS.ORG_COMPLETE),
+  z.literal(CHECK_WALLET_FLOWS.ORG_REJECTED),
+]);
+
+export type WalletFlow = z.infer<typeof walletFlowSchema>;
+
+export const walletDataSchema = z.object({
+  role: walletRoleSchema,
+  flow: walletFlowSchema,
+});
+export type WalletData = z.infer<typeof walletDataSchema>;
+
+export const walletDataResponseSchema = z
+  .object({
+    data: walletDataSchema,
+  })
+  .merge(genericResponseSchema);
+export type WalletDataResponse = z.infer<typeof walletDataResponseSchema>;
diff --git a/src/users/hooks/use-wallet-data.ts b/src/users/hooks/use-wallet-data.ts
@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { QUERY_STALETIME } from '~/shared/core/constants';
+
+import { userQueryKeys } from '~/users/core/query-keys';
+import { getWalletData } from '~/users/api/get-wallet-data';
+
+export const useWalletData = () => {
+  return useQuery({
+    queryKey: userQueryKeys.walletData(),
+    queryFn: () => getWalletData(),
+    staleTime: QUERY_STALETIME.DEFAULT,
+  });
+};