Merge pull request #114 from EveripediaNetwork/fix-query-client-and-w…

…agmi-config-refactoring

query client and wagmi config refactoring

.changeset/tasty-flies-divide.md

@@ -0,0 +1,5 @@
+---
+"@everipedia/iq-login": patch
+---
+
+query client and wagmi config refactoring

src/client.ts

@@ -11,7 +11,7 @@ export { SignTokenButton } from "./components/sign-token-button";
 // ===============
 // Integrations
 // ===============
-export { web3AuthInstance } from "./lib/integrations/web3-auth-connector";
+export { web3AuthInstance } from "./lib/integrations/wagmi.config";
 
 // ===============
 // Hooks

src/components/iq-login-provider.tsx

@@ -1,21 +1,13 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { structuralSharing } from "@wagmi/core/query";
 import type React from "react";
-import {
-	cookieStorage,
-	cookieToInitialState,
-	createStorage,
-	WagmiProvider,
-	createConfig,
-	http,
-} from "wagmi";
-import { Web3AuthProvider } from "./web3-auth-provider";
-import { injected, metaMask } from "wagmi/connectors";
 import { createContext } from "react";
-import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
+import { cookieToInitialState, WagmiProvider } from "wagmi";
 import {
-	chain,
+	wagmiConfig,
 	web3AuthInstance,
-} from "../lib/integrations/web3-auth-connector";
+} from "../lib/integrations/wagmi.config";
+import { Web3AuthProvider } from "./web3-auth-provider";
 
 interface IqLoginProviderProps {
 	children: React.ReactNode;
@@ -25,32 +17,17 @@ interface IqLoginProviderProps {
 
 export const ProjectContext = createContext<string>("");
 
-const queryClient = new QueryClient();
-
-const config = createConfig({
-	chains: [chain],
-	transports: {
-		[chain.id]: http(),
-	},
-
-	connectors: [Web3AuthConnector({ web3AuthInstance }), injected(), metaMask()],
-	storage: createStorage({
-		storage: cookieStorage,
-	}),
-	ssr: true,
-	multiInjectedProviderDiscovery: false,
-});
-
 export function IqLoginProvider({
 	children,
 	cookie,
 	projectName,
 }: IqLoginProviderProps) {
-	const initialStates = cookieToInitialState(config, cookie);
+	const initialStates = cookieToInitialState(wagmiConfig, cookie);
+	const queryClient = getQueryClient();
 
 	return (
 		<ProjectContext.Provider value={projectName}>
-			<WagmiProvider config={config} initialState={initialStates}>
+			<WagmiProvider config={wagmiConfig} initialState={initialStates}>
 				<QueryClientProvider client={queryClient}>
 					<Web3AuthProvider web3AuthInstance={web3AuthInstance}>
 						{children}
@@ -60,3 +37,24 @@ export function IqLoginProvider({
 		</ProjectContext.Provider>
 	);
 }
+
+function makeQueryClient() {
+	return new QueryClient({
+		defaultOptions: {
+			queries: {
+				staleTime: 60 * 1000,
+				structuralSharing,
+			},
+		},
+	});
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+function getQueryClient() {
+	if (typeof window === "undefined") {
+		return makeQueryClient();
+	}
+	if (!browserQueryClient) browserQueryClient = makeQueryClient();
+	return browserQueryClient;
+}

src/lib/integrations/web3-auth-connector.ts → src/lib/integrations/wagmi.config.ts

@@ -1,7 +1,16 @@
 import * as Web3AuthBase from "@web3auth/base";
 import * as Web3AuthEthereumProvider from "@web3auth/ethereum-provider";
 import * as Web3AuthModal from "@web3auth/modal";
+import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
 import { type Chain, fraxtal, mainnet, polygon } from "viem/chains";
+import {
+	type Config,
+	cookieStorage,
+	createConfig,
+	createStorage,
+	http,
+} from "wagmi";
+import { injected, metaMask } from "wagmi/connectors";
 import { iqTestnet } from "../data/iq-testnet";
 
 const chainId = Number(process.env.NEXT_PUBLIC_CHAIN_ID) as number;
@@ -46,13 +55,23 @@ const chainConfig = {
 	blockExplorerUrl: chain.blockExplorers?.default.url[0] as string,
 };
 
-const privateKeyProvider =
-	new Web3AuthEthereumProvider.EthereumPrivateKeyProvider({
-		config: { chainConfig },
-	});
-
 export const web3AuthInstance = new Web3AuthModal.Web3Auth({
 	clientId: web3AuthClientId,
-	privateKeyProvider,
+	privateKeyProvider: new Web3AuthEthereumProvider.EthereumPrivateKeyProvider({
+		config: { chainConfig },
+	}),
 	web3AuthNetwork: Web3AuthBase.WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
 });
+
+export const wagmiConfig: Config = createConfig({
+	chains: [chain],
+	transports: {
+		[chain.id]: http(),
+	},
+	connectors: [Web3AuthConnector({ web3AuthInstance }), injected(), metaMask()],
+	storage: createStorage({
+		storage: cookieStorage,
+	}),
+	ssr: true,
+	multiInjectedProviderDiscovery: false,
+});