From 9428a15618e3bf0324be48c0b606428758a0f094 Mon Sep 17 00:00:00 2001 From: Archit Date: Fri, 16 May 2025 15:24:31 +0530 Subject: [PATCH 1/2] wagmi ssr sync --- demo/nextjs-ssr-app/app/layout.tsx | 6 +++--- demo/nextjs-ssr-app/components/Main.tsx | 2 +- demo/nextjs-ssr-app/components/provider.tsx | 5 +++-- packages/modal/src/react/wagmi/constants.ts | 5 ++++- packages/modal/src/react/wagmi/index.ts | 1 + packages/modal/src/react/wagmi/provider.ts | 21 +++++++++++++++++++-- packages/modal/src/react/wagmi/utils.ts | 11 +++++++++++ 7 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 packages/modal/src/react/wagmi/utils.ts diff --git a/demo/nextjs-ssr-app/app/layout.tsx b/demo/nextjs-ssr-app/app/layout.tsx index c4e238f59..1ea921a01 100644 --- a/demo/nextjs-ssr-app/app/layout.tsx +++ b/demo/nextjs-ssr-app/app/layout.tsx @@ -5,7 +5,7 @@ import { Inter } from "next/font/google"; import Provider from "@/components/provider"; import { cookieToWeb3AuthState } from "@web3auth/modal"; import { headers } from "next/headers"; -import { cookieToInitialState } from "wagmi"; +import { cookieToWagmiState } from "@web3auth/modal/react/wagmi"; const inter = Inter({ subsets: ["latin"] }); @@ -16,11 +16,11 @@ export const metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { const web3authInitialState = cookieToWeb3AuthState((headers()).get('cookie')) - console.log("web3authInitialState", web3authInitialState) + const wagmiInitialState = cookieToWagmiState((headers()).get('cookie')) return ( - {children} + {children} ); diff --git a/demo/nextjs-ssr-app/components/Main.tsx b/demo/nextjs-ssr-app/components/Main.tsx index 67ccf4c43..8b815ab1c 100644 --- a/demo/nextjs-ssr-app/components/Main.tsx +++ b/demo/nextjs-ssr-app/components/Main.tsx @@ -31,7 +31,7 @@ const Main = () => { const { token, loading: isUserTokenLoading, error: userTokenError, authenticateUser } = useIdentityToken(); console.log("isConnected", isConnected); - + console.log("isWagmiConnected", isWagmiConnected); const loggedInView = ( <>
diff --git a/demo/nextjs-ssr-app/components/provider.tsx b/demo/nextjs-ssr-app/components/provider.tsx index bf39aad99..cc6a9c37e 100644 --- a/demo/nextjs-ssr-app/components/provider.tsx +++ b/demo/nextjs-ssr-app/components/provider.tsx @@ -5,6 +5,7 @@ import { IWeb3AuthState } from "@web3auth/modal"; import { type Web3AuthContextConfig } from "@web3auth/modal/react"; import { Web3AuthProvider } from "@web3auth/modal/react"; import { WagmiProvider } from "@web3auth/modal/react/wagmi"; +import { State } from "wagmi"; const queryClient = new QueryClient(); const clientId = "BKZDJP0ouZP0PtfQYssMiezINbUwnIthw6ClTtTICvh0MCRgAxi5GJbHKH9cjM6xyWxe73c6c94ASCTxbGNLUt8"; @@ -18,11 +19,11 @@ const web3authConfig: Web3AuthContextConfig = { ssr: true }, }; -export default function Provider({ children, web3authInitialState }: { children: React.ReactNode, web3authInitialState: IWeb3AuthState | undefined }) { +export default function Provider({ children, web3authInitialState, wagmiInitialState }: { children: React.ReactNode, web3authInitialState: IWeb3AuthState | undefined, wagmiInitialState: State | undefined }) { return ( - + {children} diff --git a/packages/modal/src/react/wagmi/constants.ts b/packages/modal/src/react/wagmi/constants.ts index be9ac818d..5c7519303 100644 --- a/packages/modal/src/react/wagmi/constants.ts +++ b/packages/modal/src/react/wagmi/constants.ts @@ -1,4 +1,4 @@ -import { createConfig, http } from "wagmi"; +import { cookieStorage, createConfig, createStorage, http } from "wagmi"; import { mainnet } from "wagmi/chains"; export const defaultWagmiConfig = createConfig({ @@ -8,4 +8,7 @@ export const defaultWagmiConfig = createConfig({ transports: { [mainnet.id]: http(mainnet.rpcUrls.default.http[0]), }, + storage: createStorage({ + storage: cookieStorage, + }), }); diff --git a/packages/modal/src/react/wagmi/index.ts b/packages/modal/src/react/wagmi/index.ts index e25520636..4e2f2dd7d 100644 --- a/packages/modal/src/react/wagmi/index.ts +++ b/packages/modal/src/react/wagmi/index.ts @@ -1,2 +1,3 @@ export * from "./interface"; export * from "./provider"; +export { cookieToWagmiState } from "./utils"; diff --git a/packages/modal/src/react/wagmi/provider.ts b/packages/modal/src/react/wagmi/provider.ts index 79dd1702a..13fff77e3 100644 --- a/packages/modal/src/react/wagmi/provider.ts +++ b/packages/modal/src/react/wagmi/provider.ts @@ -1,3 +1,5 @@ +"use client"; + import { CHAIN_NAMESPACES, log, WalletInitializationError } from "@web3auth/no-modal"; import { createElement, Fragment, PropsWithChildren, useEffect, useMemo } from "react"; import { type Chain, defineChain, http, webSocket } from "viem"; @@ -5,9 +7,11 @@ import { Config, Connection, Connector, + cookieStorage, createConfig as createWagmiConfig, type CreateConfigParameters, CreateConnectorFn, + createStorage, useAccountEffect, useConfig as useWagmiConfig, useReconnect, @@ -90,6 +94,8 @@ function Web3AuthWagmiProvider({ children }: PropsWithChildren) { const wagmiConfig = useWagmiConfig(); const { reconnect } = useReconnect(); + console.log("wagmi config", wagmiConfig.chains?.length, wagmiConfig.state); + useAccountEffect({ onDisconnect: async () => { log.info("Disconnected from wagmi"); @@ -123,7 +129,7 @@ export function WagmiProvider({ children, ...props }: PropsWithChildren { + const wagmiConfig = useMemo(() => { if (!isInitialized) return defaultWagmiConfig; const finalConfig: CreateConfigParameters = { @@ -178,6 +184,12 @@ export function WagmiProvider({ children, ...props }: PropsWithChildren { + if (!cookie) return undefined; + if (wagmiStorageKeyPrefix) { + defaultWagmiConfig.storage.key = wagmiStorageKeyPrefix; + } + return cookieToInitialState(defaultWagmiConfig, cookie); +}; From 5179efbbfb9c084af6a4353752c973ca4d0f31a2 Mon Sep 17 00:00:00 2001 From: Archit Date: Fri, 27 Jun 2025 14:22:54 +0530 Subject: [PATCH 2/2] init wagmi connector --- demo/nextjs-ssr-app/app/layout.tsx | 2 + demo/nextjs-ssr-app/components/Main.tsx | 29 +++- demo/nextjs-ssr-app/next.config.js | 1 + .../modal/src/react/hooks/useWeb3AuthUser.ts | 8 +- packages/modal/src/react/wagmi/connector.ts | 127 +++++++++++++++++ packages/modal/src/react/wagmi/constants.ts | 9 +- packages/modal/src/react/wagmi/provider.ts | 131 ++++++++---------- packages/modal/src/react/wagmi/utils.ts | 9 +- 8 files changed, 227 insertions(+), 89 deletions(-) create mode 100644 packages/modal/src/react/wagmi/connector.ts diff --git a/demo/nextjs-ssr-app/app/layout.tsx b/demo/nextjs-ssr-app/app/layout.tsx index 1ea921a01..189321d3c 100644 --- a/demo/nextjs-ssr-app/app/layout.tsx +++ b/demo/nextjs-ssr-app/app/layout.tsx @@ -17,6 +17,8 @@ export const metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { const web3authInitialState = cookieToWeb3AuthState((headers()).get('cookie')) const wagmiInitialState = cookieToWagmiState((headers()).get('cookie')) + console.log("web3authInitialState", web3authInitialState); + console.log("wagmiInitialState", wagmiInitialState); return ( diff --git a/demo/nextjs-ssr-app/components/Main.tsx b/demo/nextjs-ssr-app/components/Main.tsx index 8b815ab1c..68f45e9ca 100644 --- a/demo/nextjs-ssr-app/components/Main.tsx +++ b/demo/nextjs-ssr-app/components/Main.tsx @@ -12,7 +12,7 @@ import { useWeb3AuthDisconnect, useWeb3AuthUser, } from "@web3auth/modal/react"; -import { useAccount, useBalance, useSignMessage, useSignTypedData } from "wagmi"; +import { useAccount, useBalance, useChainId, useSignMessage, useSignTypedData, useSwitchChain } from "wagmi"; const Main = () => { const { provider, isConnected } = useWeb3Auth(); @@ -29,16 +29,19 @@ const Main = () => { const { showWalletConnectScanner, loading: isWalletConnectScannerLoading, error: walletConnectScannerError } = useWalletConnectScanner(); const { showWalletUI, loading: isWalletUILoading, error: walletUIError } = useWalletUI(); const { token, loading: isUserTokenLoading, error: userTokenError, authenticateUser } = useIdentityToken(); - + const { switchChainAsync, chains } = useSwitchChain(); + const chainId = useChainId(); + console.log("isConnected", isConnected); console.log("isWagmiConnected", isWagmiConnected); const loggedInView = ( <>
- {/*

Account Address: {address}

*/} - {/*

Account Balance: {balance?.value}

*/} +

Account Address: {address}

+

Account Balance: {balance?.formatted}

MFA Enabled: {isMFAEnabled ? "Yes" : "No"}

+

ConnectedChain ID: {chainId}

{/* User Info */} @@ -177,6 +180,22 @@ const Main = () => { {signedTypedDataData &&