ENG-4659 feat(portal): set up hydration boundary in portal provider (#…

…888)

- Adds in the `HydrationBoundary` in the `providers.tsx` -- this enables
the partial hydration pattern referenced in #885
- Once this wraps Portal via the providers we can partially hydrate as
long as the `queryKey` matches server + client side. This won't have any
bearing on our client-side only hooks such as in modals but enables the
hydration pattern where loaders are available
- The `HydrationBoundary` ensures that our client-side cache for each
query (where loaders are available) starts with the same data that was
fetched and rendered on the server

apps/portal/app/.client/providers.tsx

@@ -2,9 +2,20 @@ import { wagmiConfig } from '@lib/utils/wagmi'
 import type { PrivyClientConfig } from '@privy-io/react-auth'
 import { PrivyProvider } from '@privy-io/react-auth'
 import { WagmiProvider } from '@privy-io/wagmi'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Disable automatic refetching on window focus for SSR
+      refetchOnWindowFocus: false,
+    },
+  },
+})
 
 const privyConfig: PrivyClientConfig = {
   embeddedWallets: {
@@ -22,9 +33,11 @@ const privyConfig: PrivyClientConfig = {
 export default function Providers({
   privyAppId,
   children,
+  dehydratedState,
 }: {
   privyAppId: string
   children: React.ReactNode
+  dehydratedState?: unknown
 }) {
   return (
     <PrivyProvider
@@ -34,9 +47,11 @@ export default function Providers({
       config={privyConfig}
     >
       <QueryClientProvider client={queryClient}>
-        <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
-          {children}
-        </WagmiProvider>
+        <HydrationBoundary state={dehydratedState}>
+          <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
+            {children}
+          </WagmiProvider>
+        </HydrationBoundary>
       </QueryClientProvider>
     </PrivyProvider>
   )