Merge pull request #75 from EveripediaNetwork/custom-chain-input

EveripediaNetwork · Nov 27, 2024 · 06d3425 · 06d3425
2 parents 570b53b + 0b4ff9f
commit 06d3425
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 80 deletions.
diff --git a/.changeset/rare-turtles-care.md b/.changeset/rare-turtles-care.md
@@ -0,0 +1,5 @@
+---
+"@everipedia/iq-login": major
+---
+
+Enable passing down chain, wallet connect and web3auth ids from provider. Now IQ Login won't recognize the envs set and these must be passed down as props.
diff --git a/README.md b/README.md
@@ -14,17 +14,7 @@ pnpm install @everipedia/iq-login [email protected] [email protected] @rainbow-me/rainbowkit@2
 
 ## 🛠️ Setup
 
-1. Setup Environment Variables
-
-```bash
-# .env
-
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=YOUR_PROJECT_ID
-NEXT_PUBLIC_IS_PRODUCTION=true/false
-NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID=YOUR_CLIENT_ID
-```
-
-2. Add the package to your Tailwind CSS configuration:
+1. Add the package to your Tailwind CSS configuration:
 ```tsx
 // tailwind.config.ts
 
@@ -41,12 +31,13 @@ const config: Config = {
 export default config;
 
 
-3. Wrap your application with the RainbowKitClientProvider in your layout file:
+2. Wrap your application with the RainbowKitClientProvider in your layout file:
 
 ```tsx
 // app/layout.tsx
 
 import { RainbowKitClientProvider } from "@everipedia/iq-login";
+import { polygon } from 'wagmi/chains';
 
 export default function RootLayout({
   children,
@@ -56,14 +47,19 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <RainbowKitClientProvider>{children}</RainbowKitClientProvider>
+        <IqLoginProvider 
+          chain={polygon} // Required: Specify the chain to use
+          web3AuthProjectId="YOUR_PROJECT_ID" // Required: Web3Auth Project ID
+        >
+          {children}
+        </IqLoginProvider>
       </body>
     </html>
   );
 }
 ```
 
-4. Add login page to your application. Note: You need to import rainbowkit styles in your application.
+3. Add login page to your application. Note: You need to import rainbowkit styles in your application.
 ```tsx
 // app/login/page.tsx
 

diff --git a/src/components/iq-login-provider.tsx b/src/components/iq-login-provider.tsx
@@ -1,52 +1,71 @@
 import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { structuralSharing } from "@wagmi/core/query";
 import type React from "react";
 import { cookieToInitialState, WagmiProvider } from "wagmi";
-import { polygon } from "wagmi/chains";
-import { iqTestnet } from "../lib/data/iq-testnet";
+import type { Chain } from "wagmi/chains";
 import { iqWikiTheme } from "../lib/data/rainbow-kit-theme";
 import {
-	rainbowWeb3AuthConnector,
 	createWeb3AuthInstance,
+	rainbowWeb3AuthConnector,
 } from "../lib/integrations/web3-auth-connector";
-import { structuralSharing } from "@wagmi/core/query";
 import { Web3AuthProvider } from "./web3-auth-provider";
 import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
 
-if (!process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID) {
-	throw new Error("NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID is not set");
-}
-if (!process.env.NEXT_PUBLIC_IS_PRODUCTION) {
-	console.log("NEXT_PUBLIC_IS_PRODUCTION is not set");
+interface IqLoginProviderProps {
+	children: React.ReactNode;
+	cookie?: string;
+	chain: Chain;
+	walletConnectProjectId: string;
+	web3AuthProjectId: string;
 }
 
-const chain =
-	process.env.NEXT_PUBLIC_IS_PRODUCTION === "true" ? polygon : iqTestnet;
-const web3AuthInstance = createWeb3AuthInstance(chain);
+export function IqLoginProvider({
+	children,
+	cookie,
+	chain,
+	walletConnectProjectId,
+	web3AuthProjectId,
+}: IqLoginProviderProps) {
+	const queryClient = getQueryClient();
+	const web3AuthInstance = createWeb3AuthInstance(chain, web3AuthProjectId);
 
-export const defaultConfig = getDefaultConfig({
-	appName: "IQ.wiki",
-	projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
-	chains: [chain],
-	wallets: [
-		{
-			groupName: "Recommended",
-			wallets: [
-				() => rainbowWeb3AuthConnector({ web3AuthInstance }),
-				metaMaskWallet,
-			],
-		},
-	],
-	multiInjectedProviderDiscovery: false,
-	ssr: true,
-});
+	const config = getDefaultConfig({
+		appName: "IQ.wiki",
+		projectId: walletConnectProjectId,
+		chains: [chain],
+		wallets: [
+			{
+				groupName: "Recommended",
+				wallets: [
+					() => rainbowWeb3AuthConnector({ web3AuthInstance }),
+					metaMaskWallet,
+				],
+			},
+		],
+		multiInjectedProviderDiscovery: false,
+		ssr: true,
+	});
+
+	const initialStates = cookieToInitialState(config, cookie);
+
+	return (
+		<QueryClientProvider client={queryClient}>
+			<WagmiProvider config={config} initialState={initialStates}>
+				<RainbowKitProvider theme={iqWikiTheme}>
+					<Web3AuthProvider web3AuthInstance={web3AuthInstance}>
+						{children}
+					</Web3AuthProvider>
+				</RainbowKitProvider>
+			</WagmiProvider>
+		</QueryClientProvider>
+	);
+}
 
 function makeQueryClient() {
 	return new QueryClient({
 		defaultOptions: {
 			queries: {
-				// With SSR, we usually want to set some default staleTime
-				// above 0 to avoid refetching immediately on the client
 				staleTime: 60 * 1000,
 				structuralSharing,
 			},
@@ -58,36 +77,8 @@ let browserQueryClient: QueryClient | undefined = undefined;
 
 function getQueryClient() {
 	if (typeof window === "undefined") {
-		// Server: always make a new query client
 		return makeQueryClient();
 	}
-	// Browser: make a new query client if we don't already have one
-	// This is very important so we don't re-make a new client if React
-	// suspends during the initial render. This may not be needed if we
-	// have a suspense boundary BELOW the creation of the query client
 	if (!browserQueryClient) browserQueryClient = makeQueryClient();
 	return browserQueryClient;
 }
-
-export function IqLoginProvider({
-	children,
-	cookie,
-}: {
-	children: React.ReactNode;
-	cookie?: string;
-}) {
-	const queryClient = getQueryClient();
-	const initialStates = cookieToInitialState(defaultConfig, cookie);
-
-	return (
-		<QueryClientProvider client={queryClient}>
-			<WagmiProvider config={defaultConfig} initialState={initialStates}>
-				<RainbowKitProvider theme={iqWikiTheme}>
-					<Web3AuthProvider web3AuthInstance={web3AuthInstance}>
-						{children}
-					</Web3AuthProvider>
-				</RainbowKitProvider>
-			</WagmiProvider>
-		</QueryClientProvider>
-	);
-}
diff --git a/src/lib/integrations/web3-auth-connector.ts b/src/lib/integrations/web3-auth-connector.ts
@@ -6,12 +6,6 @@ import * as Web3AuthWagmiConnector from "@web3auth/web3auth-wagmi-connector";
 import type { Chain } from "viem";
 import { createConnector } from "wagmi";
 
-if (!process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID) {
-	throw new Error("NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID is not set");
-}
-
-const clientId = process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID;
-
 /**
  * Creates a RainbowKit wallet adapter for the Web3Auth integration.
  *
@@ -25,7 +19,7 @@ export const rainbowWeb3AuthConnector = ({
 	web3AuthInstance: Web3AuthModal.Web3Auth;
 }): Wallet => {
 	const modalConfig = {
-		[Web3AuthBase.WALLET_ADAPTERS.AUTH]: {
+		[Web3AuthBase.WALLET_ADAPTERS.OPENLOGIN]: {
 			label: "openlogin",
 			showOnModal: true,
 		},
@@ -57,7 +51,7 @@ export const rainbowWeb3AuthConnector = ({
  * @param chain - The chain configuration to use for the Web3Auth instance.
  * @returns - A new Web3Auth instance with the specified configuration.
  */
-export function createWeb3AuthInstance(chain: Chain) {
+export function createWeb3AuthInstance(chain: Chain, clientId: string) {
 	const chainConfig = {
 		chainNamespace: Web3AuthBase.CHAIN_NAMESPACES.EIP155,
 		chainId: `0x${chain.id.toString(16)}`,