refactor: Update Web3Auth instance to allow null value

README.md

@@ -21,6 +21,8 @@ NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_wallet_connect_project_id
 
 2. Add the package to your Tailwind CSS configuration:
 
+For Tailwind CSS v3:
+
 ```ts
 // tailwind.config.ts
 import type { Config } from "tailwindcss";
@@ -36,6 +38,14 @@ const config: Config = {
 export default config;
 ```
 
+For Tailwind CSS v4:
+
+Add this line to your CSS entry point (e.g., `app/globals.css`):
+
+```css
+@source "../node_modules/@everipedia/iq-login";
+```
+
 3. Wrap your application with the IqLoginProvider in your layout file:
 
 ```tsx

src/config/iq-login.config.ts

@@ -31,7 +31,7 @@ if (!WEB_3_AUTH_CLIENT_ID) {
 
 export interface IqLoginConfig {
 	wagmiConfig: Config;
-	web3AuthInstance: Web3AuthModal.Web3Auth;
+	web3AuthInstance: Web3AuthModal.Web3Auth | null;
 	chains: [Chain, ...Chain[]];
 }
 
@@ -42,10 +42,11 @@ export function createIqLoginConfig(
 		chains.map((chain) => [chain.id, http()]),
 	);
 
-	const web3AuthInstance = createWeb3AuthInstance(chains[0]);
+	const web3AuthInstance =
+		typeof window !== "undefined" ? createWeb3AuthInstance(chains[0]) : null;
 
 	const connectors =
-		typeof window !== "undefined"
+		web3AuthInstance && typeof window !== "undefined"
 			? [
 					injected(),
 					walletConnect({

src/hooks/use-web-3-auth.tsx

@@ -22,13 +22,17 @@ export function Web3AuthProvider({
 	chains,
 }: {
 	children: React.ReactNode;
-	web3AuthInstance: Web3Auth;
+	web3AuthInstance: Web3Auth | null;
 	chains: Chain[];
 }) {
 	const [user, setUser] = useState<Partial<UserInfo> | null>(null);
 	const [chainsAdded, setChainsAdded] = useState(false);
 
 	useEffect(() => {
+		if (!web3AuthInstance) {
+			return;
+		}
+
 		web3AuthInstance.on("connected", async () => {
 			setUser(await web3AuthInstance.getUserInfo());