Pass cookieToInitialState from server to client component

EveripediaNetwork · Jan 2, 2025 · f409256 · f409256
1 parent e13a762
commit f409256
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/.changeset/twenty-plums-complain.md b/.changeset/twenty-plums-complain.md
@@ -0,0 +1,5 @@
+---
+"@everipedia/iq-login": patch
+---
+
+Made cookieToInitialState to be passed from server component
diff --git a/README.md b/README.md
@@ -12,7 +12,20 @@ pnpm install @everipedia/iq-login [email protected] [email protected] @web3auth/modal @web3auth/e
 
 ## 🛠️ Setup
 
-1. Add the package to your Tailwind CSS configuration:
+1. Add environment variables:
+```bash
+## .env.local
+NEXT_PUBLIC_CHAIN_ID=your_chain_id 
+NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID=your_web3auth_client_id
+```
+
+Currently supported chains:
+- Ethereum Mainnet (1)
+- Polygon Mainnet (137)
+- Fraxtal Mainnet (252)
+- IQ Testnet (313_377)
+
+2. Add the package to your Tailwind CSS configuration:
 
 ```ts
 // tailwind.config.ts
@@ -30,29 +43,32 @@ const config: Config = {
 export default config;
 ```
 
-2. Wrap your application with the IqLoginProvider in your layout file:
+3. Wrap your application with the IqLoginProvider in your layout file:
 
 ```tsx
 // app/layout.tsx
 
-import { IqLoginProvider } from "@everipedia/iq-login";
-import { polygon } from 'wagmi/chains';
+import { IqLoginProvider } from "@everipedia/iq-login/client";
+import { getWagmiConfig } from "@everipedia/iq-login";
 import { headers } from "next/headers";
+import { cookieToInitialState } from "wagmi";
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const cookie = headers().get("cookie") || "";
+  const initialStates = cookieToInitialState(
+    getWagmiConfig(), 
+    (await headers()).get("cookie")
+  );
+
   return (
     <html lang="en">
       <body>
         <IqLoginProvider 
-          chain={polygon} // Required: Specify the chain to use
-          web3AuthProjectId="YOUR_PROJECT_ID" // Required: Web3Auth Project ID
           projectName="YOUR_PROJECT_NAME" // Required: Project name for storage
-          cookie={cookie}
+          initialStates={initialStates}
         >
           {children}
         </IqLoginProvider>
@@ -62,7 +78,7 @@ export default function RootLayout({
 }
 ```
 
-3. Add login page to your application:
+4. Add login page to your application:
 
 ```tsx
 // app/login/page.tsx

diff --git a/src/components/iq-login-provider.tsx b/src/components/iq-login-provider.tsx
@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { structuralSharing } from "@wagmi/core/query";
 import type React from "react";
 import { createContext, useState } from "react";
-import { cookieToInitialState, WagmiProvider } from "wagmi";
+import { type State, WagmiProvider } from "wagmi";
 import {
 	getWagmiConfig,
 	web3AuthInstance,
@@ -13,15 +13,15 @@ import { Web3AuthProvider } from "./web3-auth-provider";
 
 interface IqLoginProviderProps {
 	children: React.ReactNode;
-	cookie?: string;
 	projectName: string;
+	initialState?: State;
 }
 
 export const ProjectContext = createContext<string>("");
 
 export function IqLoginProvider({
 	children,
-	cookie,
+	initialState,
 	projectName,
 }: IqLoginProviderProps) {
 	const [wagmiConfig] = useState(() => getWagmiConfig());
@@ -37,11 +37,9 @@ export function IqLoginProvider({
 			}),
 	);
 
-	const initialStates = cookieToInitialState(wagmiConfig, cookie);
-
 	return (
 		<ProjectContext.Provider value={projectName}>
-			<WagmiProvider config={wagmiConfig} initialState={initialStates}>
+			<WagmiProvider config={wagmiConfig} initialState={initialState}>
 				<QueryClientProvider client={queryClient}>
 					<Web3AuthProvider web3AuthInstance={web3AuthInstance}>
 						{children}

diff --git a/src/index.ts b/src/index.ts
@@ -7,6 +7,7 @@ export { getAuth } from "./lib/getAuth";
 // Data
 // ===============
 export { iqTestnet } from "./lib/data/iq-testnet";
+export { getWagmiConfig } from "./lib/integrations/wagmi.config";
 
 // ===============
 // Constants