diff --git a/.changeset/rare-turtles-care.md b/.changeset/rare-turtles-care.md
new file mode 100644
index 0000000..06dedaa
--- /dev/null
+++ 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
index d92ec9f..18de659 100644
--- a/README.md
+++ b/README.md
@@ -14,17 +14,7 @@ pnpm install @everipedia/iq-login wagmi@2.12.4 viem@2.x @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 (
- {children}
+
+ {children}
+
);
}
```
-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
index 7df2647..7a5f97e 100644
--- 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 (
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
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 (
-
-
-
-
- {children}
-
-
-
-
- );
-}
diff --git a/src/lib/integrations/web3-auth-connector.ts b/src/lib/integrations/web3-auth-connector.ts
index 5411dce..073f258 100644
--- 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)}`,