Fix wagmi SSR and projectId not found (#4931)

* Fix wagmi SSR and projectId not found

* Fallback to process.env

* Get env var from server

apps/scoutgame/components/common/WalletLogin/WagmiProvider.tsx

@@ -2,18 +2,26 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useState } from 'react';
-import type { State } from 'wagmi';
-import { WagmiProvider as OriginalWagmiProvider } from 'wagmi';
+import { WagmiProvider as OriginalWagmiProvider, cookieToInitialState } from 'wagmi';
 
 import { getConfig } from './wagmiConfig';
 
 // Use this provider for SSR https://wagmi.sh/react/guides/ssr, if we need it
-export function WagmiProvider({ children, initialState }: { children: React.ReactNode; initialState?: State }) {
-  const [config] = useState(() => getConfig());
+export function WagmiProvider({
+  children,
+  cookie,
+  walletConnectProjectId
+}: {
+  children: React.ReactNode;
+  cookie?: string;
+  walletConnectProjectId?: string;
+}) {
+  const [config] = useState(() => getConfig({ projectId: walletConnectProjectId || '' }));
   const [queryClient] = useState(() => new QueryClient());
+  const initialState = cookieToInitialState(config, cookie);
 
   return (
-    <OriginalWagmiProvider initialState={initialState} config={config}>
+    <OriginalWagmiProvider config={config} initialState={initialState}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </OriginalWagmiProvider>
   );

apps/scoutgame/components/common/WalletLogin/WalletProvider.tsx

@@ -1,12 +1,14 @@
 import { headers } from 'next/headers';
-import { cookieToInitialState } from 'wagmi';
-
-import { getConfig } from 'components/common/WalletLogin/wagmiConfig';
 
 import { WagmiProvider } from './WagmiProvider';
 
 export function WalletProvider({ children }: { children: React.ReactNode }) {
-  const wagmiInitialState = cookieToInitialState(getConfig(), headers().get('cookie'));
-
-  return <WagmiProvider initialState={wagmiInitialState}>{children}</WagmiProvider>;
+  return (
+    <WagmiProvider
+      cookie={headers().get('cookie') ?? ''}
+      walletConnectProjectId={process.env.REACT_APP_WALLETCONNECT_PROJECTID}
+    >
+      {children}
+    </WagmiProvider>
+  );
 }

apps/scoutgame/components/common/WalletLogin/wagmiConfig.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import env from '@beam-australia/react-env';
 import { getDefaultConfig } from '@rainbow-me/rainbowkit';
 import { getAlchemyBaseUrl } from '@root/lib/blockchain/provider/alchemy/client';
@@ -16,8 +18,8 @@ import {
   baseSepolia
 } from 'wagmi/chains';
 
-export function getConfig() {
-  const walletConnectProjectId = env('WALLETCONNECT_PROJECTID');
+export function getConfig(options?: Partial<Parameters<typeof getDefaultConfig>[0]>) {
+  const projectId = options?.projectId || env('WALLETCONNECT_PROJECTID') || '';
 
   const wagmiChains = [
     mainnet,
@@ -44,7 +46,7 @@ export function getConfig() {
 
   const config = getDefaultConfig({
     appName: 'Scout Game',
-    projectId: walletConnectProjectId,
+    projectId,
     chains: wagmiChains,
     ssr: true,
     storage: createStorage({ storage: cookieStorage }),

apps/scoutgame/components/layout/AppProviders.tsx

@@ -3,6 +3,7 @@ import 'server-only';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { headers } from 'next/headers';
 import type { ReactNode } from 'react';
 
 import { WagmiProvider } from 'components/common/WalletLogin/WagmiProvider';
@@ -19,7 +20,10 @@ export function AppProviders({ children, user }: { children: ReactNode; user: Se
     <AppRouterCacheProvider options={{ key: 'css' }}>
       <ThemeProvider theme={theme}>
         <CssBaseline enableColorScheme />
-        <WagmiProvider>
+        <WagmiProvider
+          cookie={headers().get('cookie') ?? ''}
+          walletConnectProjectId={process.env.REACT_APP_WALLETCONNECT_PROJECTID}
+        >
           <SWRProvider>
             <UserProvider userSession={user}>
               <SnackbarProvider>