signer-test-sdk-react 0.0.22 → 0.0.23

package/dist/src/components/AbstraxnProvider/AbstraxnProviderInner.js

@@ -0,0 +1,3086 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AbstraxnProviderInner - Core provider logic
+ * This component contains all the wallet state management and operations
+ */
+import { useEffect, useState, useRef, useCallback, useMemo, } from "react";
+import { AbstraxnWallet, AuthenticationError, } from "signer-test-sdk-core";
+import { OnboardingUIWeb } from "../OnboardingUI";
+import { parseEther, createPublicClient, http } from "viem";
+import { ExternalWalletButtons } from "../../ExternalWalletButtons";
+import { EVM_CHAINS, SOLANA_CHAINS, getChainById, toCoreChain, } from "../../chains";
+import { AbstraxnContext } from "./context";
+export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
+    const { isInitialized, setIsInitialized, isConnected, setIsConnected, address, setAddress, user, setUser, whoami, setWhoami, chainId, setChainId, error, setError, loading, setLoading, walletBalance, setWalletBalance, onboardingRef, otpIdRef, walletRef, googleCallbackHandledRef, twitterCallbackHandledRef, discordCallbackHandledRef, } = base;
+    const externalWalletsEnabled = config.externalWallets?.enabled ?? false;
+    // Keep a ref to avoid re-creating callbacks when toggling config (prevents flicker)
+    const externalWalletsEnabledRef = useRef(externalWalletsEnabled);
+    useEffect(() => {
+        externalWalletsEnabledRef.current = externalWalletsEnabled;
+    }, [externalWalletsEnabled]);
+    const wagmiAccount = wagmi?.wagmiAccount || null;
+    const wagmiConnect = wagmi?.wagmiConnect || null;
+    const wagmiDisconnect = wagmi?.wagmiDisconnect || null;
+    const wagmiSignMessage = wagmi?.wagmiSignMessage || null;
+    const wagmiSendTransaction = wagmi?.wagmiSendTransaction || null;
+    const wagmiSwitchChain = wagmi?.wagmiSwitchChain || null;
+    const wagmiBalance = wagmi?.wagmiBalance || null;
+    const wagmiChainIdHook = wagmi?.wagmiChainIdHook || null;
+    // External wallet state
+    const [isExternalWalletConnected, setIsExternalWalletConnected] = useState(false);
+    const [externalWalletAddress, setExternalWalletAddress] = useState(null);
+    const [externalWalletChainId, setExternalWalletChainId] = useState(null);
+    // Connection type tracking: 'google' | 'email' | 'discord' | 'x' | 'passkey' | 'metamask' | 'walletconnect' | 'coinbase' | 'phantom' | 'injected' | null
+    const [connectionType, setConnectionType] = useState(null);
+    const explicitConnectionRef = useRef(false);
+    const autoDisconnectHandledRef = useRef(false);
+    // Track when we last connected to prevent premature reset
+    const lastConnectionTimeRef = useRef(0);
+    // Refs to track previous values and prevent unnecessary updates
+    const lastAddressRef = useRef(null);
+    const lastChainIdRef = useRef(null);
+    const isUpdatingRef = useRef(false);
+    const connectionTimeoutRef = useRef(null);
+    // Track if we're in the middle of a disconnect to prevent useEffect from interfering
+    const disconnectingRef = useRef(false);
+    // Show/hide external wallet UI when config changes (prevents modal flicker)
+    useEffect(() => {
+        const onboardingAny = onboardingRef.current;
+        if (!onboardingAny)
+            return;
+        requestAnimationFrame(() => {
+            if (externalWalletsEnabled) {
+                // Show external wallet container when enabled
+                if (onboardingAny.externalWalletContainer) {
+                    onboardingAny.externalWalletContainer.style.display = "";
+                }
+                // Show divider if email/Google are also visible
+                const authMethods = onboardingAny.config?.authMethods || [
+                    "otp",
+                    "google",
+                ];
+                const showEmail = authMethods.includes("otp");
+                const showGoogle = authMethods.includes("google");
+                const hasEmailOrGoogle = showEmail || showGoogle;
+                if (onboardingAny.externalWalletDivider && hasEmailOrGoogle) {
+                    onboardingAny.externalWalletDivider.style.display = "";
+                }
+            }
+            else {
+                // Hide external wallet container when disabled
+                if (onboardingAny.externalWalletContainer) {
+                    onboardingAny.externalWalletContainer.style.display = "none";
+                }
+                if (onboardingAny.externalWalletDivider) {
+                    onboardingAny.externalWalletDivider.style.display = "none";
+                }
+            }
+        });
+    }, [externalWalletsEnabled]);
+    // Restore external wallet connection on mount if wagmi has already restored it
+    // This runs after wagmi has had time to restore from localStorage
+    useEffect(() => {
+        if (!externalWalletsEnabled || !wagmiAccount) {
+            return;
+        }
+        // Check if wagmi has already restored a connection from localStorage
+        // This happens automatically with wagmi's persistence when storage is configured
+        const checkAndRestore = () => {
+            if (wagmiAccount.isConnected &&
+                wagmiAccount.address &&
+                !isExternalWalletConnected) {
+                const walletAddress = wagmiAccount.address.toLowerCase();
+                const currentChainId = wagmiChainIdHook || wagmiAccount.chainId || null;
+                // Set explicitConnectionRef FIRST to prevent auto-disconnect from interfering
+                explicitConnectionRef.current = true;
+                autoDisconnectHandledRef.current = false;
+                // Restore external wallet state
+                setIsExternalWalletConnected(true);
+                setExternalWalletAddress(walletAddress);
+                setAddress(walletAddress);
+                setIsConnected(true);
+                setExternalWalletChainId(currentChainId);
+                setChainId(currentChainId);
+                // Restore connection type from connector
+                const connector = wagmiAccount.connector;
+                if (connector) {
+                    const connectorId = connector.id.toLowerCase();
+                    const connectorName = connector.name?.toLowerCase() || "";
+                    // Map connector to connection type
+                    if (connectorId.includes("metamask") ||
+                        connectorId.includes("io.metamask") ||
+                        connectorName.includes("metamask")) {
+                        setConnectionType("metamask");
+                    }
+                    else if (connectorId.includes("walletconnect") ||
+                        connectorId.includes("wallet_connect") ||
+                        connectorName.includes("walletconnect")) {
+                        setConnectionType("walletconnect");
+                    }
+                    else {
+                        // For other wallets (coinbase, phantom, injected), store as-is
+                        // The hook will normalize them, but we keep the original for reference
+                        const fallbackType = connectorName || connectorId;
+                        setConnectionType(fallbackType);
+                    }
+                }
+                else {
+                    // Try to restore from localStorage as fallback
+                    try {
+                        const storedType = localStorage.getItem("abstraxn_connection_type");
+                        if (storedType) {
+                            setConnectionType(storedType);
+                        }
+                    }
+                    catch (e) {
+                        // Ignore localStorage errors
+                    }
+                }
+                // Update refs to track the restored connection
+                lastAddressRef.current = walletAddress;
+                lastChainIdRef.current = currentChainId;
+                lastConnectionTimeRef.current = Date.now();
+                return true; // Indicate restoration happened
+            }
+            return false;
+        };
+        // Check immediately
+        if (checkAndRestore()) {
+            return; // Already restored
+        }
+        // Also check after delays to catch wagmi's async restoration
+        // Wagmi might restore the connection asynchronously after the component mounts
+        let timeout2 = null;
+        const timeout1 = setTimeout(() => {
+            if (!checkAndRestore()) {
+                // Check one more time after a longer delay
+                timeout2 = setTimeout(() => {
+                    checkAndRestore();
+                }, 300);
+            }
+        }, 150);
+        return () => {
+            clearTimeout(timeout1);
+            if (timeout2) {
+                clearTimeout(timeout2);
+            }
+        };
+    }, [
+        externalWalletsEnabled,
+        wagmiAccount?.isConnected,
+        wagmiAccount?.address,
+        wagmiChainIdHook,
+        isExternalWalletConnected,
+    ]); // Re-run if wagmi state changes
+    // Initialize wallet
+    useEffect(() => {
+        // If wallet already exists (from previous mount), reuse it to prevent flicker
+        if (walletRef.current) {
+            return;
+        }
+        // Compute supported chains from chain config (outside useMemo since we're in useEffect)
+        // This should include ALL chains that might be shown in the UI (availableChains)
+        // We use the same logic as availableChains to ensure consistency
+        let computedSupportedChains = undefined;
+        if (config.supportedChains) {
+            // Use explicitly provided chains
+            computedSupportedChains = config.supportedChains;
+        }
+        else {
+            // Compute from chains config - use same logic as availableChains
+            const chainConfig = config.chains;
+            const chains = [];
+            // Priority 1: Check if chains is an array of viem chain objects (direct format)
+            if (Array.isArray(chainConfig) && chainConfig?.length > 0) {
+                const firstItem = chainConfig[0];
+                if (firstItem &&
+                    typeof firstItem.id === "number" &&
+                    firstItem.nativeCurrency) {
+                    // Convert viem chain objects to core chain format
+                    chainConfig.forEach((viemChain) => {
+                        let rpcUrl = "";
+                        if (viemChain.rpcUrls?.default?.http) {
+                            rpcUrl = Array.isArray(viemChain.rpcUrls.default.http)
+                                ? viemChain.rpcUrls.default.http[0]
+                                : viemChain.rpcUrls.default.http;
+                        }
+                        else if (viemChain.rpcUrls?.public?.http) {
+                            rpcUrl = Array.isArray(viemChain.rpcUrls.public.http)
+                                ? viemChain.rpcUrls.public.http[0]
+                                : viemChain.rpcUrls.public.http;
+                        }
+                        chains.push({
+                            id: viemChain.id,
+                            name: viemChain.name,
+                            rpcUrl: rpcUrl ||
+                                `https://rpc.ankr.com/${viemChain.name.toLowerCase()}`,
+                            nativeCurrency: viemChain.nativeCurrency,
+                        });
+                    });
+                }
+            }
+            // Priority 2: Check new chains config format
+            else if (chainConfig?.supportedEvmChains &&
+                chainConfig.supportedEvmChains.length > 0) {
+                chainConfig.supportedEvmChains.forEach((chainName) => {
+                    const chainData = EVM_CHAINS[chainName];
+                    if (chainData && chainData.type === "evm") {
+                        chains.push(toCoreChain(chainData));
+                    }
+                });
+            }
+            // Priority 3: If no specific config, include default chains that might be shown
+            // This ensures Base and other common chains are available even if not explicitly configured
+            if (chains.length === 0) {
+                // Include common chains that are likely to be in availableChains
+                chains.push(toCoreChain(EVM_CHAINS.ethereum));
+                chains.push(toCoreChain(EVM_CHAINS.polygon));
+                chains.push(toCoreChain(EVM_CHAINS.base));
+            }
+            computedSupportedChains =
+                chains.length > 0
+                    ? chains
+                    : [
+                        toCoreChain(EVM_CHAINS.ethereum),
+                        toCoreChain(EVM_CHAINS.polygon),
+                        toCoreChain(EVM_CHAINS.base),
+                    ];
+        }
+        const walletInstance = new AbstraxnWallet({
+            apiKey: config.apiKey,
+            authMethods: config.authMethods,
+            googleClientId: config.googleClientId,
+            defaultChainId: config.chains?.defaultChainId || config.defaultChainId,
+            supportedChains: computedSupportedChains,
+            autoConnect: config.autoConnect ?? false,
+            enableLogging: config.enableLogging ?? false,
+        });
+        walletRef.current = walletInstance;
+        // Set up event listeners
+        walletInstance.on("connect", async () => {
+            try {
+                // Verify whoami exists before setting connected
+                const whoamiInfo = await walletInstance.getWhoami();
+                if (!whoamiInfo) {
+                    // If whoami is not available, don't set connected
+                    return;
+                }
+                setIsConnected(true);
+                const userInfo = await walletInstance.getUserInfo();
+                setUser(userInfo);
+                setWhoami(whoamiInfo);
+                // Try to get address, but don't fail if not available yet
+                try {
+                    const addr = await walletInstance.getAddress();
+                    setAddress(addr);
+                }
+                catch (addrErr) {
+                    console.warn("Address not available on connect:", addrErr);
+                }
+                const cid = await walletInstance.getChainId();
+                setChainId(cid);
+                // Always restore connection type from localStorage on connect
+                // This ensures connectionType is available after OAuth redirects (Google, X, Discord)
+                // and after page refreshes
+                try {
+                    const storedType = localStorage.getItem("abstraxn_connection_type");
+                    if (storedType &&
+                        (storedType === "google" ||
+                            storedType === "email" ||
+                            storedType === "discord" ||
+                            storedType === "x" ||
+                            storedType === "passkey")) {
+                        setConnectionType(storedType);
+                    }
+                }
+                catch (e) {
+                    // Ignore localStorage errors
+                }
+            }
+            catch (err) {
+                console.error("Error getting wallet info on connect:", err);
+            }
+            // Ensure loading modal is closed when connected (whoami received)
+            if (onboardingRef.current) {
+                const onboardingAny = onboardingRef.current;
+                if (onboardingAny.hideLoadingModal) {
+                    onboardingAny.hideLoadingModal();
+                }
+                // Also ensure the overlay is hidden if it was opened
+                if (onboardingAny.modalOverlay &&
+                    onboardingAny.modalOverlay.classList.contains("onboarding-modal-open")) {
+                    onboardingAny.modalOverlay.classList.remove("onboarding-modal-open");
+                    onboardingAny.modalOverlay.classList.add("onboarding-modal-closing");
+                    setTimeout(() => {
+                        if (onboardingAny.modalOverlay) {
+                            onboardingAny.modalOverlay.style.display = "none";
+                        }
+                    }, 200);
+                    document.body.style.overflow = "";
+                }
+            }
+        });
+        walletInstance.on("disconnect", () => {
+            setIsConnected(false);
+            setAddress(null);
+            setUser(null);
+            setWhoami(null);
+            setChainId(null);
+            setConnectionType(null);
+            // Clear from localStorage
+            try {
+                localStorage.removeItem("abstraxn_connection_type");
+            }
+            catch (e) {
+                // Ignore localStorage errors
+            }
+        });
+        walletInstance.on("accountChanged", (newAddress) => {
+            setAddress(newAddress);
+        });
+        walletInstance.on("chainChanged", (newChainId) => {
+            setChainId(newChainId);
+        });
+        // Initialize OnboardingUI only if not already created (prevents flicker on config change)
+        if (onboardingRef.current) {
+            return;
+        }
+        const uiConfig = config.ui || {};
+        const onboarding = new OnboardingUIWeb({
+            logo: uiConfig.logo,
+            theme: uiConfig.theme || "light",
+            showFooter: uiConfig.showFooter !== false,
+            onboardTitle: uiConfig.onboardTitle || "Sign In",
+            modal: uiConfig.modal !== false,
+            closeOnBackdropClick: uiConfig.closeOnBackdropClick !== false,
+            className: uiConfig.className,
+            style: uiConfig.style,
+            labels: uiConfig.labels,
+            colors: uiConfig.colors,
+            customCSS: uiConfig.customCSS,
+            authMethods: uiConfig.authMethods || config.authMethods,
+            onEmailOtpInitiate: async (email) => {
+                try {
+                    if (!walletInstance)
+                        throw new Error("Wallet not initialized");
+                    const authManager = walletInstance.getAuthManager();
+                    const connectionTypeValue = "email";
+                    setConnectionType(connectionTypeValue);
+                    try {
+                        localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                    }
+                    catch (e) {
+                        // Ignore localStorage errors
+                    }
+                    const result = await authManager.loginWithOTP(email);
+                    otpIdRef.current = result.otpId;
+                }
+                catch (err) {
+                    console.error("OTP Init Error:", err);
+                    throw err;
+                }
+            },
+            onEmailOtpVerify: async (_email, otp) => {
+                try {
+                    if (!walletInstance)
+                        throw new Error("Wallet not initialized");
+                    if (!otpIdRef.current)
+                        throw new Error("OTP ID not found");
+                    // Set connection type for email OTP before verification
+                    const connectionTypeValue = "email";
+                    setConnectionType(connectionTypeValue);
+                    try {
+                        localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                    }
+                    catch (e) {
+                        // Ignore localStorage errors
+                    }
+                    const authManager = walletInstance.getAuthManager();
+                    const user = await authManager.verifyOTP(otpIdRef.current, otp);
+                    otpIdRef.current = null;
+                    // Connect wallet after successful authentication
+                    await walletInstance.connect();
+                    // Clear any previous errors on successful verification
+                    setError(null);
+                    return { success: true, user };
+                }
+                catch (err) {
+                    console.error("OTP Verify Error:", err);
+                    // Return the actual error message from the API
+                    const errorMessage = err instanceof Error ? err.message : "Failed to verify OTP";
+                    return { success: false, error: errorMessage };
+                }
+            },
+            onGoogleLogin: async () => {
+                if (!walletInstance)
+                    throw new Error("Wallet not initialized");
+                const connectionTypeValue = "google";
+                setConnectionType(connectionTypeValue);
+                // Store in localStorage for restoration
+                try {
+                    localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                    localStorage.setItem("abstraxn_oauth_pending", "google");
+                }
+                catch (e) {
+                    // Ignore localStorage errors
+                }
+                // Clear existing query params before starting new flow
+                if (typeof window !== "undefined") {
+                    const url = new URL(window.location.href);
+                    // Remove auth params that might be present from previous attempts
+                    url.searchParams.delete("code");
+                    url.searchParams.delete("state");
+                    url.searchParams.delete("error");
+                    url.searchParams.delete("success");
+                    url.searchParams.delete("accessToken");
+                    url.searchParams.delete("provider");
+                    url.searchParams.delete("authProvider");
+                    window.history.replaceState({}, document.title, url.toString());
+                }
+                const authManager = walletInstance.getAuthManager();
+                await authManager.loginWithGoogle();
+            },
+            onTwitterLogin: async () => {
+                if (!walletInstance)
+                    throw new Error("Wallet not initialized");
+                const connectionTypeValue = "x";
+                setConnectionType(connectionTypeValue);
+                try {
+                    localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                    localStorage.setItem("abstraxn_oauth_pending", "twitter");
+                }
+                catch (e) {
+                    // Ignore localStorage errors
+                }
+                // Clear existing query params before starting new flow
+                if (typeof window !== "undefined") {
+                    const url = new URL(window.location.href);
+                    // Remove auth params that might be present from previous attempts
+                    url.searchParams.delete("code");
+                    url.searchParams.delete("state");
+                    url.searchParams.delete("error");
+                    url.searchParams.delete("success");
+                    url.searchParams.delete("accessToken");
+                    url.searchParams.delete("provider");
+                    url.searchParams.delete("authProvider");
+                    window.history.replaceState({}, document.title, url.toString());
+                }
+                const authManager = walletInstance.getAuthManager();
+                await authManager.loginWithTwitter();
+            },
+            onDiscordLogin: async () => {
+                if (!walletInstance)
+                    throw new Error("Wallet not initialized");
+                const connectionTypeValue = "discord";
+                setConnectionType(connectionTypeValue);
+                try {
+                    localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                    localStorage.setItem("abstraxn_oauth_pending", "discord");
+                }
+                catch (e) {
+                    // Ignore localStorage errors
+                }
+                // Clear existing query params before starting new flow
+                if (typeof window !== "undefined") {
+                    const url = new URL(window.location.href);
+                    // Remove auth params that might be present from previous attempts
+                    url.searchParams.delete("code");
+                    url.searchParams.delete("state");
+                    url.searchParams.delete("error");
+                    url.searchParams.delete("success");
+                    url.searchParams.delete("accessToken");
+                    url.searchParams.delete("provider");
+                    url.searchParams.delete("authProvider");
+                    window.history.replaceState({}, document.title, url.toString());
+                }
+                const authManager = walletInstance.getAuthManager();
+                await authManager.loginWithDiscord();
+            },
+            onPasskeyLogin: async () => {
+                if (!walletInstance)
+                    throw new Error("Wallet not initialized");
+                const connectionTypeValue = "passkey";
+                setConnectionType(connectionTypeValue);
+                try {
+                    localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                }
+                catch (e) {
+                    // Ignore localStorage errors
+                }
+                const authManager = walletInstance.getAuthManager();
+                const user = await authManager.loginWithPasskey();
+                // Set user immediately so onLoginSuccess can access it
+                setUser(user);
+                // Connect wallet after successful authentication
+                await walletInstance.connect();
+            },
+            onPasskeySignup: async () => {
+                if (!walletInstance)
+                    throw new Error("Wallet not initialized");
+                const connectionTypeValue = "passkey";
+                setConnectionType(connectionTypeValue);
+                try {
+                    localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                }
+                catch (e) {
+                    // Ignore localStorage errors
+                }
+                const authManager = walletInstance.getAuthManager();
+                const user = await authManager.signupWithPasskey();
+                // Clear any previous errors on successful verification
+                // setError(null);
+                setUser(user);
+                // Connect wallet after successful authentication
+                await walletInstance.connect();
+            },
+            onLoginSuccess: async (_data) => {
+                // Clear any previous errors on successful login
+                setError(null);
+                // Restore connection type from localStorage for OAuth logins (Google, X, Discord)
+                // This ensures connectionType is set after OAuth redirects
+                try {
+                    const storedType = localStorage.getItem("abstraxn_connection_type");
+                    if (storedType &&
+                        (storedType === "google" ||
+                            storedType === "x" ||
+                            storedType === "discord" ||
+                            storedType === "email" ||
+                            storedType === "passkey")) {
+                        setConnectionType(storedType);
+                    }
+                }
+                catch (e) {
+                    // Ignore localStorage errors
+                }
+                // Load whoami after successful login
+                if (walletInstance) {
+                    try {
+                        const whoamiInfo = await walletInstance.getWhoami();
+                        setWhoami(whoamiInfo);
+                        const addr = await walletInstance.getAddress();
+                        setAddress(addr);
+                        const cid = await walletInstance.getChainId();
+                        setChainId(cid);
+                        // Only hide onboarding UI and set connected if whoami succeeds
+                        if (onboardingRef.current) {
+                            const onboardingAny = onboardingRef.current;
+                            if (onboardingAny.hideLoadingModal) {
+                                onboardingAny.hideLoadingModal();
+                            }
+                            if (onboardingAny.modalOverlay) {
+                                onboardingAny.modalOverlay.classList.remove("onboarding-modal-open");
+                                onboardingAny.modalOverlay.classList.add("onboarding-modal-closing");
+                                setTimeout(() => {
+                                    if (onboardingAny.modalOverlay) {
+                                        onboardingAny.modalOverlay.style.display = "none";
+                                    }
+                                }, 200);
+                            }
+                            document.body.style.overflow = "";
+                        }
+                        // Set connected state only after whoami succeeds
+                        setIsConnected(true);
+                    }
+                    catch (err) {
+                        console.error("Error loading whoami after login:", err);
+                        // Hide loading modal on whoami error
+                        if (onboardingRef.current) {
+                            const onboardingAny = onboardingRef.current;
+                            if (onboardingAny.hideLoadingModal) {
+                                onboardingAny.hideLoadingModal();
+                            }
+                            // Show error modal/screen
+                            const errorMessage = err instanceof Error
+                                ? err.message
+                                : "Failed to load user information";
+                            if (onboardingAny.showError) {
+                                onboardingAny.showError(errorMessage);
+                            }
+                        }
+                        // Set error state
+                        const error = err instanceof Error
+                            ? err
+                            : new Error("Failed to load user information after login");
+                        setError(error);
+                        // Don't set connected if whoami fails
+                        setIsConnected(false);
+                    }
+                }
+            },
+            onLoginError: (err) => {
+                setError(err);
+            },
+        }, externalWalletsEnabled); // Pass externalWalletsEnabled as second parameter
+        // Inject custom CSS if provided
+        if (uiConfig.customCSS) {
+            const styleId = "abstraxn-custom-css";
+            if (!document.getElementById(styleId)) {
+                const style = document.createElement("style");
+                style.id = styleId;
+                style.textContent = uiConfig.customCSS;
+                document.head.appendChild(style);
+            }
+        }
+        const hasAuthParams = (params) => params.get("success") === "true" ||
+            params.get("error") ||
+            params.get("code") ||
+            params.get("accessToken");
+        const getAuthProviderFromToken = (token) => {
+            try {
+                const base64Url = token.split(".")[1];
+                const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+                const jsonPayload = decodeURIComponent(window
+                    .atob(base64)
+                    .split("")
+                    .map(function (c) {
+                    return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+                })
+                    .join(""));
+                const payload = JSON.parse(jsonPayload);
+                return (payload.authProvider || payload.provider || "").toLowerCase();
+            }
+            catch (e) {
+                return null;
+            }
+        };
+        const matchesProvider = (provider, params) => {
+            const providerParam = (params.get("provider") ||
+                params.get("authProvider") ||
+                "").toLowerCase();
+            const path = window.location.pathname.toLowerCase();
+            if (providerParam) {
+                if (provider === "twitter") {
+                    return providerParam === "twitter" || providerParam === "x";
+                }
+                return providerParam === provider;
+            }
+            // Check accessToken for provider
+            const accessToken = params.get("accessToken");
+            if (accessToken) {
+                const tokenProvider = getAuthProviderFromToken(accessToken);
+                if (tokenProvider) {
+                    if (provider === "twitter") {
+                        return tokenProvider === "twitter" || tokenProvider === "x";
+                    }
+                    return tokenProvider === provider;
+                }
+            }
+            if (provider === "twitter") {
+                return path.includes("/twitter") || path.includes("/x");
+            }
+            return path.includes(`/${provider}`);
+        };
+        try {
+            onboarding.init();
+        }
+        catch (err) {
+            console.error("Failed to initialize OnboardingUI:", err);
+        }
+        // Check if we should keep it open (if handling a callback)
+        const urlParams = new URLSearchParams(window.location.search);
+        const shouldKeepOpen = hasAuthParams(urlParams);
+        const hasSuccess = urlParams.get("success") === "true";
+        // Hide immediately - use synchronous approach to prevent flicker
+        // Only hide if NOT handling a callback
+        const onboardingAny = onboarding;
+        if (!shouldKeepOpen && onboardingAny.modalOverlay) {
+            // Hide immediately without delay to prevent flicker
+            onboardingAny.modalOverlay.classList.remove("onboarding-modal-open");
+            onboardingAny.modalOverlay.style.display = "none";
+            document.body.style.overflow = "";
+        }
+        else if (hasSuccess) {
+            // If success=true is in URL, show loading modal
+            // Use setTimeout to ensure onboarding is fully initialized
+            setTimeout(() => {
+                const onboardingInstance = onboardingRef.current;
+                if (onboardingInstance && onboardingInstance.showLoadingModal) {
+                    // Directly show loading modal - it creates its own overlay with header and footer
+                    onboardingInstance.showLoadingModal();
+                }
+            }, 150);
+        }
+        onboardingRef.current = onboarding;
+        // Handle Google OAuth callback (only in useEffect, not exposed)
+        const handleGoogleCallback = async (force = false) => {
+            if (googleCallbackHandledRef.current)
+                return;
+            const urlParams = new URLSearchParams(window.location.search);
+            if (!hasAuthParams(urlParams) ||
+                matchesProvider("twitter", urlParams) ||
+                matchesProvider("discord", urlParams)) {
+                return;
+            }
+            // Check if we initiated this OAuth flow
+            let oauthPending = null;
+            try {
+                oauthPending = localStorage.getItem("abstraxn_oauth_pending");
+            }
+            catch (e) { }
+            if (!force && !oauthPending)
+                return;
+            // Clear the pending flag
+            try {
+                localStorage.removeItem("abstraxn_oauth_pending");
+            }
+            catch (e) { }
+            // Show loading modal if success=true is in URL
+            const hasSuccess = urlParams.get("success") === "true";
+            if (hasSuccess && onboardingRef.current) {
+                const onboardingAny = onboardingRef.current;
+                if (onboardingAny.showLoadingScreen) {
+                    onboardingAny.showLoadingScreen();
+                }
+                else if (onboardingAny.showLoadingModal) {
+                    onboardingAny.showLoadingModal();
+                }
+            }
+            googleCallbackHandledRef.current = true;
+            try {
+                const user = await walletInstance.handleGoogleCallback();
+                if (user) {
+                    setUser(user);
+                    window.history.replaceState({}, document.title, window.location.pathname);
+                    // Hide loading modal and close modal on success
+                    if (onboardingRef.current) {
+                        const onboardingAny = onboardingRef.current;
+                        if (onboardingAny.hideLoadingModal) {
+                            onboardingAny.hideLoadingModal();
+                        }
+                        onboardingRef.current.close();
+                    }
+                }
+            }
+            catch (err) {
+                console.error("Google callback error:", err);
+                // Hide loading modal on error (including whoami API failures)
+                if (onboardingRef.current) {
+                    const onboardingAny = onboardingRef.current;
+                    // Always try to hide loading modal first
+                    if (onboardingAny.hideLoadingModal) {
+                        onboardingAny.hideLoadingModal();
+                    }
+                    // Also hide any main modal overlay
+                    if (onboardingAny.modalOverlay) {
+                        onboardingAny.modalOverlay.style.display = "none";
+                    }
+                    // Show error modal/screen
+                    const errorMessage = err instanceof Error ? err.message : "Google authentication failed";
+                    if (onboardingAny.showError) {
+                        onboardingAny.showError(errorMessage);
+                    }
+                }
+                setError(err instanceof Error ? err : new Error("Google callback failed"));
+                googleCallbackHandledRef.current = false;
+                // Ensure body scroll is restored
+                document.body.style.overflow = "";
+            }
+        };
+        const handleDiscordCallback = async () => {
+            if (discordCallbackHandledRef.current)
+                return;
+            const urlParams = new URLSearchParams(window.location.search);
+            if (!hasAuthParams(urlParams) || !matchesProvider("discord", urlParams)) {
+                return;
+            }
+            // Check if we initiated this OAuth flow
+            let oauthPending = null;
+            try {
+                oauthPending = localStorage.getItem("abstraxn_oauth_pending");
+            }
+            catch (e) { }
+            if (!oauthPending)
+                return;
+            // Clear the pending flag
+            try {
+                localStorage.removeItem("abstraxn_oauth_pending");
+            }
+            catch (e) { }
+            // Show loading modal if success=true is in URL
+            const hasSuccess = urlParams.get("success") === "true";
+            if (hasSuccess && onboardingRef.current) {
+                const onboardingAny = onboardingRef.current;
+                if (onboardingAny.showLoadingScreen) {
+                    onboardingAny.showLoadingScreen();
+                }
+                else if (onboardingAny.showLoadingModal) {
+                    onboardingAny.showLoadingModal();
+                }
+            }
+            discordCallbackHandledRef.current = true;
+            try {
+                const user = await walletInstance.handleDiscordCallback();
+                if (user) {
+                    setUser(user);
+                    window.history.replaceState({}, document.title, window.location.pathname);
+                    // Hide loading modal and close modal on success
+                    if (onboardingRef.current) {
+                        const onboardingAny = onboardingRef.current;
+                        if (onboardingAny.hideLoadingModal) {
+                            onboardingAny.hideLoadingModal();
+                        }
+                        onboardingRef.current.close();
+                    }
+                }
+            }
+            catch (err) {
+                console.error("Discord callback error:", err);
+                // Hide loading modal on error (including whoami API failures)
+                if (onboardingRef.current) {
+                    const onboardingAny = onboardingRef.current;
+                    // Always try to hide loading modal first
+                    if (onboardingAny.hideLoadingModal) {
+                        onboardingAny.hideLoadingModal();
+                    }
+                    // Also hide any main modal overlay
+                    if (onboardingAny.modalOverlay) {
+                        onboardingAny.modalOverlay.style.display = "none";
+                    }
+                    // Show error modal/screen
+                    const errorMessage = err instanceof Error
+                        ? err.message
+                        : "Discord authentication failed";
+                    if (onboardingAny.showError) {
+                        onboardingAny.showError(errorMessage);
+                    }
+                }
+                setError(err instanceof Error ? err : new Error("Discord callback failed"));
+                discordCallbackHandledRef.current = false;
+                // Ensure body scroll is restored
+                document.body.style.overflow = "";
+            }
+        };
+        const handleTwitterCallback = async () => {
+            if (twitterCallbackHandledRef.current)
+                return;
+            const urlParams = new URLSearchParams(window.location.search);
+            if (!hasAuthParams(urlParams) || !matchesProvider("twitter", urlParams)) {
+                return;
+            }
+            // Check if we initiated this OAuth flow
+            let oauthPending = null;
+            try {
+                oauthPending = localStorage.getItem("abstraxn_oauth_pending");
+            }
+            catch (e) { }
+            if (!oauthPending)
+                return;
+            // Clear the pending flag
+            try {
+                localStorage.removeItem("abstraxn_oauth_pending");
+            }
+            catch (e) { }
+            // Show loading modal if success=true is in URL
+            const hasSuccess = urlParams.get("success") === "true";
+            if (hasSuccess && onboardingRef.current) {
+                const onboardingAny = onboardingRef.current;
+                if (onboardingAny.showLoadingScreen) {
+                    onboardingAny.showLoadingScreen();
+                }
+                else if (onboardingAny.showLoadingModal) {
+                    onboardingAny.showLoadingModal();
+                }
+            }
+            twitterCallbackHandledRef.current = true;
+            try {
+                const user = await walletInstance.handleTwitterCallback();
+                if (user) {
+                    setUser(user);
+                    window.history.replaceState({}, document.title, window.location.pathname);
+                    // Hide loading modal and close modal on success
+                    if (onboardingRef.current) {
+                        const onboardingAny = onboardingRef.current;
+                        if (onboardingAny.hideLoadingModal) {
+                            onboardingAny.hideLoadingModal();
+                        }
+                        onboardingRef.current.close();
+                    }
+                }
+            }
+            catch (err) {
+                console.error("Twitter callback error:", err);
+                // Hide loading modal on error (including whoami API failures)
+                if (onboardingRef.current) {
+                    const onboardingAny = onboardingRef.current;
+                    // Always try to hide loading modal first
+                    if (onboardingAny.hideLoadingModal) {
+                        onboardingAny.hideLoadingModal();
+                    }
+                    // Also hide any main modal overlay
+                    if (onboardingAny.modalOverlay) {
+                        onboardingAny.modalOverlay.style.display = "none";
+                    }
+                    // Show error modal/screen
+                    const errorMessage = err instanceof Error
+                        ? err.message
+                        : "Twitter authentication failed";
+                    if (onboardingAny.showError) {
+                        onboardingAny.showError(errorMessage);
+                    }
+                }
+                setError(err instanceof Error ? err : new Error("Twitter callback failed"));
+                twitterCallbackHandledRef.current = false;
+                // Ensure body scroll is restored
+                document.body.style.overflow = "";
+            }
+        };
+        handleGoogleCallback();
+        handleDiscordCallback();
+        handleTwitterCallback();
+        // Helper function to restore connection state
+        const restoreConnectionState = async (wallet) => {
+            try {
+                // Verify whoami exists before setting connected
+                const whoamiInfo = await wallet.getWhoami();
+                if (!whoamiInfo) {
+                    // If whoami is not available, don't set connected
+                    return;
+                }
+                setIsConnected(true);
+                const userInfo = await wallet.getUserInfo();
+                setUser(userInfo);
+                setWhoami(whoamiInfo);
+                // Try to get address, but don't fail if not available yet
+                try {
+                    const addr = await wallet.getAddress();
+                    setAddress(addr);
+                }
+                catch (addrErr) {
+                    console.warn("Address not available during restore:", addrErr);
+                }
+                const cid = await wallet.getChainId();
+                setChainId(cid);
+            }
+            catch (err) {
+                console.error("Error restoring connection state:", err);
+                // If restore fails, mark as disconnected
+                setIsConnected(false);
+            }
+        };
+        // Auto-initialize if enabled
+        if (config.autoInit !== false) {
+            init().then(() => {
+                // After initialization, check if wallet is already connected (from localStorage)
+                // The wallet's initialize() method already sets isConnected if authenticated
+                // But we need to restore React state if the event was missed
+                if (walletInstance && walletInstance.isConnected) {
+                    // Wallet is already connected, restore state
+                    restoreConnectionState(walletInstance);
+                }
+            });
+        }
+        return () => {
+            if (onboardingRef.current) {
+                onboardingRef.current.destroy();
+            }
+        };
+    }, []); // Only run once on mount
+    // Ref to store the root instance to prevent re-mounting (defined early)
+    const externalWalletRootRef = useRef(null);
+    const externalWalletMountedRef = useRef(false);
+    const externalWalletContainerRef = useRef(null);
+    // Show onboarding UI (defined first to avoid hoisting issues)
+    const showOnboarding = useCallback(() => {
+        setError(null); // Clear any previous errors
+        if (!onboardingRef.current) {
+            console.error("OnboardingUI not initialized - cannot show modal");
+            return;
+        }
+        if (onboardingRef.current) {
+            const onboarding = onboardingRef.current;
+            // Re-initialize if destroyed
+            if (!onboarding.modalOverlay ||
+                !document.body.contains(onboarding.modalOverlay)) {
+                onboarding.init();
+                // Wait for init to complete
+                setTimeout(() => {
+                    if (onboarding.modalOverlay) {
+                        // Use requestAnimationFrame to prevent blinking
+                        requestAnimationFrame(() => {
+                            onboarding.modalOverlay.classList.remove("onboarding-modal-closing");
+                            onboarding.modalOverlay.classList.add("onboarding-modal-open");
+                            onboarding.modalOverlay.style.display = "flex";
+                            document.body.style.overflow = "hidden";
+                            // Ensure external wallet container is visible when modal opens
+                            if (externalWalletsEnabledRef.current &&
+                                onboarding.externalWalletContainer) {
+                                // Check if we're on OTP screen - if so, don't show external wallets
+                                // Check if OTP screen exists AND is actually visible in the DOM
+                                const isOtpScreen = onboarding.otpVerificationScreen &&
+                                    onboarding.otpVerificationScreen.parentElement &&
+                                    onboarding.otpVerificationScreen.offsetParent !== null;
+                                if (!isOtpScreen) {
+                                    // Only show external wallets if not on OTP screen
+                                    onboarding.externalWalletContainer.style.display = "";
+                                    // Show divider only if both email/Google AND external wallets are visible
+                                    const authMethods = onboarding.config?.authMethods || [
+                                        "otp",
+                                        "google",
+                                    ];
+                                    const showEmail = authMethods.includes("otp");
+                                    const showGoogle = authMethods.includes("google");
+                                    const hasEmailOrGoogle = showEmail || showGoogle;
+                                    if (onboarding.externalWalletDivider && hasEmailOrGoogle) {
+                                        onboarding.externalWalletDivider.style.display = "";
+                                    }
+                                    else if (onboarding.externalWalletDivider) {
+                                        onboarding.externalWalletDivider.style.display = "none";
+                                    }
+                                }
+                                else {
+                                    // On OTP screen - hide external wallets
+                                    onboarding.externalWalletContainer.style.display = "none";
+                                    if (onboarding.externalWalletDivider) {
+                                        onboarding.externalWalletDivider.style.display = "none";
+                                    }
+                                }
+                                // Always re-render external wallets when modal opens immediately
+                                setTimeout(() => {
+                                    const container = onboarding.externalWalletContainer;
+                                    if (!container) {
+                                        return;
+                                    }
+                                    // Use the reusable mount function
+                                    mountExternalWalletsToContainer(container, onboarding);
+                                }, 50); // Reduced from 200ms to 50ms
+                            }
+                        });
+                    }
+                }, 50);
+            }
+            else {
+                // Modal already exists, just show it
+                // Use requestAnimationFrame to prevent blinking
+                requestAnimationFrame(() => {
+                    // Check if we're on OTP screen - if so, ensure social buttons stay hidden
+                    const isOtpScreen = onboarding.otpVerificationScreen &&
+                        onboarding.otpVerificationScreen.parentElement &&
+                        onboarding.otpVerificationScreen.offsetParent !== null;
+                    onboarding.modalOverlay.classList.remove("onboarding-modal-closing");
+                    onboarding.modalOverlay.classList.add("onboarding-modal-open");
+                    onboarding.modalOverlay.style.display = "flex";
+                    if (onboarding.rootElement) {
+                        onboarding.rootElement.style.display = "";
+                    }
+                    document.body.style.overflow = "hidden";
+                    // If on OTP screen, ensure all login elements (social buttons, etc.) are hidden
+                    if (isOtpScreen) {
+                        // On OTP screen - ensure all login elements are hidden
+                        if (onboarding.hideLoginElements &&
+                            typeof onboarding.hideLoginElements === "function") {
+                            onboarding.hideLoginElements();
+                        }
+                        else {
+                            // Fallback: manually hide elements
+                            if (onboarding.googleButton)
+                                onboarding.googleButton.style.display = "none";
+                            if (onboarding.twitterButton)
+                                onboarding.twitterButton.style.display = "none";
+                            if (onboarding.discordButton)
+                                onboarding.discordButton.style.display = "none";
+                            if (onboarding.socialGrid)
+                                onboarding.socialGrid.style.display = "none";
+                            if (onboarding.divider)
+                                onboarding.divider.style.display = "none";
+                            if (onboarding.passkeyLoginButton)
+                                onboarding.passkeyLoginButton.style.display = "none";
+                            if (onboarding.passkeySignupLink)
+                                onboarding.passkeySignupLink.style.display = "none";
+                            if (onboarding.passkeyDivider)
+                                onboarding.passkeyDivider.style.display = "none";
+                            if (onboarding.externalWalletContainer)
+                                onboarding.externalWalletContainer.style.display = "none";
+                            if (onboarding.externalWalletDivider)
+                                onboarding.externalWalletDivider.style.display = "none";
+                        }
+                    }
+                    // CRITICAL: Always ensure external wallets are mounted when modal reopens
+                    if (externalWalletsEnabledRef.current &&
+                        onboarding.externalWalletContainer) {
+                        // Check if we're on OTP screen - if so, don't show external wallets
+                        if (!isOtpScreen) {
+                            // Only show external wallets if not on OTP screen
+                            onboarding.externalWalletContainer.style.display = "";
+                            // Show divider only if both email/Google AND external wallets are visible
+                            const authMethods = onboarding.config?.authMethods || [
+                                "otp",
+                                "google",
+                            ];
+                            const showEmail = authMethods.includes("otp");
+                            const showGoogle = authMethods.includes("google");
+                            const hasEmailOrGoogle = showEmail || showGoogle;
+                            if (onboarding.externalWalletDivider && hasEmailOrGoogle) {
+                                onboarding.externalWalletDivider.style.display = "";
+                            }
+                            else if (onboarding.externalWalletDivider) {
+                                onboarding.externalWalletDivider.style.display = "none";
+                            }
+                        }
+                        else {
+                            // On OTP screen - hide external wallets
+                            onboarding.externalWalletContainer.style.display = "none";
+                            if (onboarding.externalWalletDivider) {
+                                onboarding.externalWalletDivider.style.display = "none";
+                            }
+                        }
+                        // Always re-render external wallets when modal opens (even if already mounted)
+                        // This ensures they're visible after modal close/reopen
+                        setTimeout(() => {
+                            const container = onboarding.externalWalletContainer;
+                            if (!container) {
+                                return;
+                            }
+                            // Use the reusable mount function (will be defined later, but accessible via closure)
+                            if (typeof mountExternalWalletsToContainer === "function") {
+                                mountExternalWalletsToContainer(container, onboarding);
+                            }
+                        }, 50); // Reduced delay for faster initial render
+                    }
+                });
+            }
+        }
+        // Note: externalWalletsEnabled is accessed via ref to keep this callback stable
+    }, []);
+    // Initialize IndexedDB
+    const init = useCallback(async () => {
+        if (!walletRef.current || isInitialized)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const authManager = walletRef.current.getAuthManager();
+            const turnkeyService = authManager.turnkeyService;
+            await turnkeyService.init();
+            setIsInitialized(true);
+            // Try to connect wallet to check if user is already authenticated (from localStorage)
+            // This will trigger the wallet's initialize() which checks localStorage
+            try {
+                await walletRef.current.connect();
+                // If connect succeeds, the 'connect' event will be emitted
+                // But also manually restore state in case event was missed
+                if (walletRef.current && walletRef.current.isConnected) {
+                    const addr = await walletRef.current.getAddress();
+                    const cid = await walletRef.current.getChainId();
+                    const userInfo = await walletRef.current.getUserInfo();
+                    const whoamiInfo = await walletRef.current.getWhoami();
+                    setAddress(addr);
+                    setChainId(cid);
+                    setUser(userInfo);
+                    setWhoami(whoamiInfo);
+                    setIsConnected(true);
+                    // Restore connection type from localStorage
+                    try {
+                        const storedType = localStorage.getItem("abstraxn_connection_type");
+                        if (storedType &&
+                            (storedType === "google" ||
+                                storedType === "email" ||
+                                storedType === "discord" ||
+                                storedType === "x" ||
+                                storedType === "passkey")) {
+                            setConnectionType(storedType);
+                        }
+                    }
+                    catch (e) {
+                        // Ignore localStorage errors
+                    }
+                }
+            }
+            catch (err) {
+                // If connect fails (user not authenticated), that's fine
+                // Just don't set connected state
+                if (walletRef.current && walletRef.current.isConnected) {
+                    // Wallet says it's connected, restore state
+                    try {
+                        // Verify whoami exists before setting connected
+                        const whoamiInfo = await walletRef.current.getWhoami();
+                        if (!whoamiInfo) {
+                            // If whoami is not available, don't set connected
+                            return;
+                        }
+                        setIsConnected(true);
+                        const userInfo = await walletRef.current.getUserInfo();
+                        setUser(userInfo);
+                        setWhoami(whoamiInfo);
+                        // Try to get address, but don't fail if not available yet
+                        try {
+                            const addr = await walletRef.current.getAddress();
+                            setAddress(addr);
+                        }
+                        catch (addrErr) {
+                            console.warn("Address not available during restore:", addrErr);
+                        }
+                        const cid = await walletRef.current.getChainId();
+                        setChainId(cid);
+                        // Restore connection type from localStorage
+                        try {
+                            const storedType = localStorage.getItem("abstraxn_connection_type");
+                            if (storedType &&
+                                (storedType === "google" ||
+                                    storedType === "email" ||
+                                    storedType === "discord" ||
+                                    storedType === "x" ||
+                                    storedType === "passkey")) {
+                                setConnectionType(storedType);
+                            }
+                        }
+                        catch (e) {
+                            // Ignore localStorage errors
+                        }
+                    }
+                    catch (restoreErr) {
+                        console.error("Error restoring connection state:", restoreErr);
+                        setIsConnected(false);
+                    }
+                }
+            }
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error("Failed to initialize");
+            setError(error);
+            console.error("Init error:", err);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [isInitialized]);
+    // Connect wallet
+    const connect = useCallback(async () => {
+        if (!walletRef.current)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            await walletRef.current.connect();
+            setIsConnected(walletRef.current.isConnected);
+            // Load whoami after connect
+            try {
+                const whoamiInfo = await walletRef.current.getWhoami();
+                setWhoami(whoamiInfo);
+                const addr = await walletRef.current.getAddress();
+                setAddress(addr);
+            }
+            catch (err) {
+                console.error("Error loading whoami after connect:", err);
+            }
+        }
+        catch (err) {
+            if (err instanceof AuthenticationError) {
+                // Show onboarding UI
+                showOnboarding();
+                setError(err);
+            }
+            else {
+                setError(err instanceof Error ? err : new Error("Failed to connect"));
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [showOnboarding]);
+    // Disconnect wallet
+    const disconnect = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        disconnectingRef.current = true; // Set flag to prevent useEffect from interfering
+        try {
+            const wasExternalWalletConnected = isExternalWalletConnected;
+            const wasAbstraxnWalletConnected = walletRef.current?.isConnected ?? false;
+            // If external wallet is connected, disconnect it first
+            if (wasExternalWalletConnected &&
+                externalWalletsEnabled &&
+                wagmiDisconnect) {
+                try {
+                    await wagmiDisconnect.disconnect();
+                    // Wait a bit to ensure wagmi state updates
+                    await new Promise((resolve) => setTimeout(resolve, 150));
+                    // Reset external wallet state immediately
+                    setIsExternalWalletConnected(false);
+                    setExternalWalletAddress(null);
+                    setExternalWalletChainId(null);
+                    setConnectionType(null);
+                    // Clear from localStorage
+                    try {
+                        localStorage.removeItem("abstraxn_connection_type");
+                    }
+                    catch (e) {
+                        // Ignore localStorage errors
+                    }
+                    explicitConnectionRef.current = false;
+                    lastConnectionTimeRef.current = 0;
+                    // Always reset main isConnected when disconnecting external wallet
+                    // Since the context value is computed as isExternalWalletConnected || isConnected,
+                    // we need to set isConnected to false so the overall isConnected becomes false
+                    setIsConnected(false);
+                    setAddress(null);
+                    setChainId(null);
+                }
+                catch (err) {
+                    throw err;
+                }
+            }
+            // Disconnect Abstraxn wallet if it's connected
+            if (wasAbstraxnWalletConnected && walletRef.current) {
+                // console.log('Disconnecting Abstraxn wallet...');
+                try {
+                    await walletRef.current.disconnect();
+                    // After disconnecting Abstraxn wallet, always reset main state
+                    // The context value will be computed correctly based on both wallet states
+                    setIsConnected(false);
+                    setAddress(null);
+                    setChainId(null);
+                    setConnectionType(null);
+                    // Clear from localStorage
+                    try {
+                        localStorage.removeItem("abstraxn_connection_type");
+                    }
+                    catch (e) {
+                        // Ignore localStorage errors
+                    }
+                    // console.log('✅ Abstraxn wallet disconnected, main state reset');
+                }
+                catch (err) {
+                    console.error("Error disconnecting Abstraxn wallet:", err);
+                    // Continue even if Abstraxn wallet disconnect fails, but still reset state
+                    setIsConnected(false);
+                    setAddress(null);
+                    setChainId(null);
+                    setConnectionType(null);
+                    // Clear from localStorage
+                    try {
+                        localStorage.removeItem("abstraxn_connection_type");
+                    }
+                    catch (e) {
+                        // Ignore localStorage errors
+                    }
+                }
+            }
+            // Final check: if neither wallet is connected, ensure main state is reset
+            // This is a safety check in case both were disconnected
+            const finalExternalConnected = isExternalWalletConnected;
+            const finalAbstraxnConnected = walletRef.current?.isConnected ?? false;
+            if (!finalExternalConnected && !finalAbstraxnConnected) {
+                setIsConnected(false);
+                setAddress(null);
+                setChainId(null);
+                setConnectionType(null);
+                // Clear from localStorage
+                try {
+                    localStorage.removeItem("abstraxn_connection_type");
+                }
+                catch (e) {
+                    // Ignore localStorage errors
+                }
+                // console.log('✅ Final check: All wallets disconnected, main state reset');
+            }
+            // Reset OTP screen and show initial login form
+            if (onboardingRef.current) {
+                const onboarding = onboardingRef.current;
+                onboarding.resetToLoginForm();
+                // If modal is visible (showing OTP screen), ensure it shows the login form
+                if (onboarding.modalOverlay &&
+                    onboarding.modalOverlay.style.display !== "none") {
+                    // Modal is visible, just reset the form (already done above)
+                    // Ensure modal is in open state
+                    onboarding.modalOverlay.classList.remove("onboarding-modal-closing");
+                    onboarding.modalOverlay.classList.add("onboarding-modal-open");
+                }
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Failed to disconnect"));
+            throw err;
+        }
+        finally {
+            // Clear disconnecting flag after a short delay to allow state to settle
+            setTimeout(() => {
+                disconnectingRef.current = false;
+            }, 200);
+            setLoading(false);
+        }
+    }, [isExternalWalletConnected, externalWalletsEnabled, wagmiDisconnect]);
+    // Hide onboarding UI
+    const hideOnboarding = useCallback(() => {
+        setError(null); // Clear any previous errors
+        if (onboardingRef.current) {
+            const onboarding = onboardingRef.current;
+            if (onboarding.modalOverlay) {
+                onboarding.modalOverlay.classList.remove("onboarding-modal-open");
+                onboarding.modalOverlay.classList.add("onboarding-modal-closing");
+                setTimeout(() => {
+                    if (onboarding.modalOverlay) {
+                        onboarding.modalOverlay.style.display = "none";
+                    }
+                }, 200);
+            }
+            document.body.style.overflow = "";
+        }
+    }, []);
+    // Get address - works for both Abstraxn wallet and external wallets
+    const getAddress = useCallback(async () => {
+        setError(null); // Clear any previous errors
+        // If external wallet is connected, return external wallet address
+        if (isExternalWalletConnected && externalWalletAddress) {
+            return externalWalletAddress;
+        }
+        // Otherwise use Abstraxn wallet
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        return await walletRef.current.getAddress();
+    }, [isExternalWalletConnected, externalWalletAddress]);
+    // Get chain ID - works for both Abstraxn wallet and external wallets
+    const getChainId = useCallback(async () => {
+        setError(null); // Clear any previous errors
+        // If external wallet is connected, return external wallet chain ID
+        if (isExternalWalletConnected && externalWalletChainId) {
+            return externalWalletChainId;
+        }
+        // Otherwise use Abstraxn wallet
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        return await walletRef.current.getChainId();
+    }, [isExternalWalletConnected, externalWalletChainId]);
+    // Switch chain - works for both Abstraxn wallet and external wallets
+    const switchChain = useCallback(async (newChainId) => {
+        setError(null);
+        // If external wallet is connected, use wagmi
+        if (isExternalWalletConnected && wagmiSwitchChain) {
+            try {
+                setLoading(true);
+                await wagmiSwitchChain.switchChainAsync({ chainId: newChainId });
+            }
+            catch (err) {
+                const error = err instanceof Error ? err : new Error("Failed to switch chain");
+                setError(error);
+                throw error;
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+        else {
+            // Otherwise use Abstraxn wallet
+            if (!walletRef.current)
+                throw new Error("Wallet not initialized");
+            try {
+                await walletRef.current.switchChain(newChainId);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err : new Error("Failed to switch chain"));
+                throw err;
+            }
+        }
+    }, [isExternalWalletConnected, wagmiSwitchChain]);
+    // Sign message - works for both Abstraxn wallet and external wallets
+    const signMessage = useCallback(async (message) => {
+        setError(null);
+        // If external wallet is connected, use wagmi
+        if (isExternalWalletConnected &&
+            externalWalletAddress &&
+            wagmiSignMessage) {
+            try {
+                setLoading(true);
+                const signature = await wagmiSignMessage.signMessageAsync({
+                    message,
+                });
+                return signature;
+            }
+            catch (err) {
+                const error = err instanceof Error ? err : new Error("Failed to sign message");
+                setError(error);
+                throw error;
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+        // Otherwise use Abstraxn wallet
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        try {
+            return await walletRef.current.signMessage(message);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Failed to sign message"));
+            throw err;
+        }
+    }, [isExternalWalletConnected, externalWalletAddress, wagmiSignMessage]);
+    // Sign transaction
+    const signTransaction = useCallback(async (tx) => {
+        setError(null); // Clear any previous errors
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        try {
+            return await walletRef.current.signTransaction(tx);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Failed to sign transaction"));
+            throw err;
+        }
+    }, []);
+    // Send transaction - works for both Abstraxn wallet and external wallets
+    const sendTransaction = useCallback(async (tx) => {
+        setError(null);
+        // If external wallet is connected, use wagmi
+        if (isExternalWalletConnected &&
+            externalWalletAddress &&
+            wagmiSendTransaction) {
+            try {
+                setLoading(true);
+                // Convert TransactionRequest to wagmi format
+                const wagmiTx = {
+                    to: tx.to,
+                };
+                if (tx.value) {
+                    wagmiTx.value =
+                        typeof tx.value === "string"
+                            ? parseEther(tx.value)
+                            : BigInt(tx.value);
+                }
+                if (tx.data) {
+                    wagmiTx.data = tx.data;
+                }
+                if (tx.gasLimit) {
+                    wagmiTx.gas = tx.gasLimit;
+                }
+                if (tx.gasPrice) {
+                    wagmiTx.gasPrice = tx.gasPrice;
+                }
+                if (tx.maxFeePerGas) {
+                    wagmiTx.maxFeePerGas = tx.maxFeePerGas;
+                }
+                if (tx.maxPriorityFeePerGas) {
+                    wagmiTx.maxPriorityFeePerGas = tx.maxPriorityFeePerGas;
+                }
+                const hash = await wagmiSendTransaction.sendTransactionAsync(wagmiTx);
+                return {
+                    hash: hash,
+                };
+            }
+            catch (err) {
+                const error = err instanceof Error
+                    ? err
+                    : new Error("Failed to send transaction");
+                setError(error);
+                throw error;
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+        // Otherwise use Abstraxn wallet
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        try {
+            return await walletRef.current.sendTransaction(tx);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Failed to send transaction"));
+            throw err;
+        }
+    }, [isExternalWalletConnected, externalWalletAddress, wagmiSendTransaction]);
+    // Sign transaction via API (returns signed transaction)
+    const signTransactionViaAPI = useCallback(async (unsignedTransaction, fromAddress) => {
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        setLoading(true);
+        setError(null);
+        try {
+            return await walletRef.current.signTransactionViaAPI(unsignedTransaction, fromAddress);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error("Failed to sign transaction");
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    // Sign and send transaction using backend API
+    const signAndSendTransaction = useCallback(async (unsignedTransaction, fromAddress, rpcUrl) => {
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        setLoading(true);
+        setError(null);
+        try {
+            return await walletRef.current.signAndSendTransaction(unsignedTransaction, fromAddress, rpcUrl);
+        }
+        catch (err) {
+            const error = err instanceof Error
+                ? err
+                : new Error("Failed to sign and send transaction");
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    // Login with email OTP (initiate OTP)
+    const loginWithOTP = useCallback(async (email) => {
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        setLoading(true);
+        setError(null);
+        try {
+            const connectionTypeValue = "email";
+            setConnectionType(connectionTypeValue);
+            try {
+                localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+            }
+            catch (e) {
+                // Ignore localStorage errors
+            }
+            const result = await walletRef.current.loginWithOTP(email);
+            return result;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error("Failed to initiate OTP");
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    // Verify OTP
+    const verifyOTP = useCallback(async (otpId, otpCode) => {
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        setLoading(true);
+        setError(null);
+        try {
+            // Set connection type for email OTP before verification
+            const connectionTypeValue = "email";
+            setConnectionType(connectionTypeValue);
+            try {
+                localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+            }
+            catch (e) {
+                // Ignore localStorage errors
+            }
+            const user = await walletRef.current.verifyOTP(otpId, otpCode);
+            setIsConnected(true);
+            setUser(user);
+            setConnectionType("email");
+            try {
+                localStorage.setItem("abstraxn_connection_type", "email");
+            }
+            catch (e) {
+                // Ignore localStorage errors
+            }
+            // Load whoami and address after verification
+            try {
+                const whoamiInfo = await walletRef.current.getWhoami();
+                setWhoami(whoamiInfo);
+                const addr = await walletRef.current.getAddress();
+                setAddress(addr);
+                const cid = await walletRef.current.getChainId();
+                setChainId(cid);
+            }
+            catch (err) {
+                console.error("Error loading whoami after OTP verification:", err);
+            }
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error("Failed to verify OTP");
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    // Login with Google
+    const loginWithGoogle = useCallback(async () => {
+        if (!walletRef.current)
+            throw new Error("Wallet not initialized");
+        setLoading(true);
+        setError(null);
+        try {
+            const connectionTypeValue = "google";
+            setConnectionType(connectionTypeValue);
+            try {
+                localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+            }
+            catch (e) {
+                // Ignore localStorage errors
+            }
+            await walletRef.current.loginWithGoogle();
+            // Note: This will redirect, so loading state will be reset on callback
+        }
+        catch (err) {
+            const error = err instanceof Error
+                ? err
+                : new Error("Failed to initiate Google login");
+            setError(error);
+            setLoading(false);
+            throw error;
+        }
+    }, []);
+    // Handle Google callback
+    const handleGoogleCallback = useCallback(async (_force = false) => {
+        if (!walletRef.current)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            // handleGoogleCallback() will initialize storage internally
+            // Don't call connect() here as it checks for authentication which isn't available yet
+            const user = await walletRef.current.handleGoogleCallback();
+            if (user) {
+                setUser(user);
+                // Restore connection type for Google OAuth
+                try {
+                    const storedType = localStorage.getItem("abstraxn_connection_type");
+                    if (storedType === "google") {
+                        setConnectionType("google");
+                    }
+                }
+                catch (e) {
+                    // Ignore localStorage errors
+                }
+                // handleGoogleCallback() already calls whoami and emits 'connect' event
+                // The 'connect' event handler will update whoami, address, and chainId
+                // So we don't need to do it here to avoid duplicate whoami calls
+            }
+        }
+        catch (err) {
+            const error = err instanceof Error
+                ? err
+                : new Error("Failed to handle Google callback");
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    // Refresh whoami - makes a fresh API call and updates state
+    // For external wallets, whoami is not applicable (no API backend)
+    const refreshWhoami = useCallback(async () => {
+        // If external wallet is connected, return null (whoami is only for Abstraxn wallet)
+        if (isExternalWalletConnected) {
+            return null;
+        }
+        if (!walletRef.current) {
+            return null;
+        }
+        // Check if Abstraxn wallet is actually connected before calling refreshWhoami
+        if (!walletRef.current.isConnected) {
+            return null;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const whoamiInfo = await walletRef.current.refreshWhoami();
+            if (whoamiInfo) {
+                setWhoami(whoamiInfo);
+                // Update address if available in whoami response
+                if (whoamiInfo.address) {
+                    setAddress(whoamiInfo.address);
+                }
+            }
+            return whoamiInfo;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error("Failed to refresh whoami");
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [isExternalWalletConnected]);
+    // Sync external wallet state from wagmi
+    useEffect(() => {
+        let checkAddressTimeout = null;
+        // Prevent infinite loops - if we're already updating, skip
+        if (isUpdatingRef.current) {
+            return;
+        }
+        if (!externalWalletsEnabled || !wagmiAccount) {
+            return;
+        }
+        // Prevent auto-connect (but allow restoration from persistence)
+        // Only auto-disconnect if:
+        // 1. wagmiAccount is connected
+        // 2. We don't have explicitConnectionRef set (meaning user didn't explicitly connect)
+        // 3. We haven't already handled auto-disconnect
+        // 4. We don't have a stored address (meaning this isn't a restoration from persistence)
+        if (wagmiAccount.isConnected &&
+            !explicitConnectionRef.current &&
+            !autoDisconnectHandledRef.current &&
+            lastAddressRef.current === null) {
+            autoDisconnectHandledRef.current = true;
+            if (wagmiDisconnect) {
+                setTimeout(() => {
+                    wagmiDisconnect.disconnect();
+                }, 0);
+            }
+            return;
+        }
+        // If wagmiAccount is not connected and we have explicitConnectionRef set to false,
+        // it means we explicitly disconnected, so don't try to reconnect
+        if (!wagmiAccount.isConnected) {
+            autoDisconnectHandledRef.current = false;
+            // If we're in the middle of disconnecting, don't interfere
+            if (disconnectingRef.current) {
+                return;
+            }
+            // If we explicitly disconnected (explicitConnectionRef is false and we were connected),
+            // ensure state is reset immediately
+            if (!explicitConnectionRef.current && isExternalWalletConnected) {
+                isUpdatingRef.current = true;
+                setIsExternalWalletConnected(false);
+                setExternalWalletAddress(null);
+                setExternalWalletChainId(null);
+                lastAddressRef.current = null;
+                lastChainIdRef.current = null;
+                // Only reset main state if Abstraxn wallet is also not connected
+                if (!walletRef.current?.isConnected) {
+                    setIsConnected(false);
+                    setAddress(null);
+                    setChainId(null);
+                }
+                lastConnectionTimeRef.current = 0;
+                isUpdatingRef.current = false;
+                return;
+            }
+            // If we're not connected but explicitConnectionRef is true, it means we're trying to reconnect
+            // Don't reset state in this case - wait for the connection to complete
+            if (!wagmiAccount.isConnected && explicitConnectionRef.current) {
+                // Connection is in progress, don't interfere
+                return;
+            }
+        }
+        // Check if external wallet is connected
+        if (wagmiAccount.isConnected && wagmiAccount.address) {
+            const walletAddress = wagmiAccount.address;
+            // Ensure address is properly formatted (should be 0x...)
+            const formattedAddress = walletAddress && typeof walletAddress === "string"
+                ? walletAddress.toLowerCase()
+                : walletAddress;
+            // Use wagmiChainIdHook first (more reliable), then fallback to wagmiAccount.chainId
+            const currentChainId = wagmiChainIdHook || wagmiAccount.chainId || null;
+            // Check if address or chainId actually changed to prevent unnecessary updates
+            const addressChanged = lastAddressRef.current !== formattedAddress;
+            const chainIdChanged = lastChainIdRef.current !== currentChainId;
+            // Also check if we need to reconnect (lastAddressRef is null but wagmiAccount is connected)
+            // This handles the case where user disconnects and then reconnects, OR page reload
+            const needsReconnect = lastAddressRef.current === null &&
+                wagmiAccount.isConnected &&
+                formattedAddress;
+            // Only update if something actually changed OR if we need to reconnect
+            if (addressChanged || chainIdChanged || needsReconnect) {
+                isUpdatingRef.current = true;
+                // If this is a restoration (needsReconnect), set explicitConnectionRef to prevent auto-disconnect
+                if (needsReconnect) {
+                    explicitConnectionRef.current = true;
+                    autoDisconnectHandledRef.current = false;
+                }
+                // Update address if it changed or if we need to reconnect
+                if (addressChanged || needsReconnect) {
+                    setIsExternalWalletConnected(true);
+                    setExternalWalletAddress(formattedAddress);
+                    setIsConnected(true);
+                    setAddress(formattedAddress);
+                    lastAddressRef.current = formattedAddress;
+                    lastConnectionTimeRef.current = Date.now();
+                }
+                // Update chainId if it changed or if we need to reconnect
+                if ((chainIdChanged && currentChainId) ||
+                    (needsReconnect && currentChainId)) {
+                    setExternalWalletChainId(currentChainId);
+                    setChainId(currentChainId);
+                    lastChainIdRef.current = currentChainId;
+                }
+                isUpdatingRef.current = false;
+                // Close the onboarding modal after successful external wallet connection (only once)
+                if (addressChanged && onboardingRef.current) {
+                    const onboardingAny = onboardingRef.current;
+                    if (onboardingAny.modalOverlay) {
+                        setTimeout(() => {
+                            if (onboardingAny.modalOverlay) {
+                                onboardingAny.modalOverlay.classList.remove("onboarding-modal-open");
+                                onboardingAny.modalOverlay.classList.add("onboarding-modal-closing");
+                                setTimeout(() => {
+                                    if (onboardingAny.modalOverlay) {
+                                        onboardingAny.modalOverlay.style.display = "none";
+                                    }
+                                }, 200);
+                                document.body.style.overflow = "";
+                            }
+                        }, 100);
+                    }
+                }
+            }
+        }
+        else if (!wagmiAccount.isConnected) {
+            // Only reset state if:
+            // 1. We have a stored address (meaning we were connected), AND
+            // 2. It's been more than 1 second since last connection (to avoid premature reset during re-renders), AND
+            // 3. This is not an auto-disconnect scenario
+            const timeSinceLastConnection = Date.now() - lastConnectionTimeRef.current;
+            const shouldReset = lastAddressRef.current !== null &&
+                timeSinceLastConnection > 1000 &&
+                !autoDisconnectHandledRef.current;
+            if (shouldReset) {
+                isUpdatingRef.current = true;
+                setIsExternalWalletConnected(false);
+                setExternalWalletAddress(null);
+                setExternalWalletChainId(null);
+                lastAddressRef.current = null;
+                lastChainIdRef.current = null;
+                // Only reset if Abstraxn wallet is also not connected
+                if (!walletRef.current?.isConnected) {
+                    setIsConnected(false);
+                    setAddress(null);
+                    setChainId(null);
+                }
+                explicitConnectionRef.current = false;
+                lastConnectionTimeRef.current = 0;
+                isUpdatingRef.current = false;
+            }
+        }
+        // Cleanup function
+        return () => {
+            if (checkAddressTimeout) {
+                clearTimeout(checkAddressTimeout);
+            }
+        };
+    }, [
+        wagmiAccount?.isConnected,
+        wagmiAccount?.address,
+        wagmiAccount?.chainId,
+        wagmiChainIdHook,
+        externalWalletsEnabled,
+        wagmiDisconnect,
+    ]);
+    // Connect external wallet
+    const connectExternalWallet = useCallback(async (connectorId) => {
+        if (!externalWalletsEnabled || !wagmiConnect || !wagmiDisconnect) {
+            const error = new Error("External wallets are not enabled or wagmi is not initialized");
+            throw error;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            if (wagmiAccount?.isConnected) {
+                try {
+                    await wagmiDisconnect.disconnect();
+                    await new Promise((resolve) => setTimeout(resolve, 100));
+                }
+                catch (disconnectErr) {
+                    // Ignore
+                }
+            }
+            // Try to find connector by exact ID first
+            let connector = wagmiConnect.connectors.find((c) => c.id === connectorId);
+            // If not found, try to find by matching patterns for specific wallets
+            if (!connector) {
+                const connectorIdLower = connectorId.toLowerCase();
+                // Check for MetaMask - prioritize io.metamask over injected
+                if (connectorIdLower.includes("metamask") ||
+                    connectorIdLower.includes("io.metamask")) {
+                    // First, try to find io.metamask specifically
+                    connector = wagmiConnect.connectors.find((c) => {
+                        const id = c.id.toLowerCase();
+                        return id === "io.metamask" || id.includes("io.metamask");
+                    });
+                    // If io.metamask not found, fall back to injected (but only if MetaMask is requested)
+                    if (!connector) {
+                        connector = wagmiConnect.connectors.find((c) => {
+                            const id = c.id.toLowerCase();
+                            const name = c.name?.toLowerCase() || "";
+                            return ((id.includes("injected") || id.includes("metamask")) &&
+                                (name.includes("metamask") ||
+                                    (typeof window !== "undefined" &&
+                                        window.ethereum?.isMetaMask)));
+                        });
+                    }
+                }
+                // Check for generic injected (only if not MetaMask)
+                else if (connectorIdLower.includes("injected")) {
+                    connector = wagmiConnect.connectors.find((c) => {
+                        const id = c.id.toLowerCase();
+                        // Exclude io.metamask and other specific connectors
+                        return (id === "injected" &&
+                            !id.includes("io.metamask") &&
+                            !id.includes("com.coinbase") &&
+                            !id.includes("app.phantom"));
+                    });
+                }
+                // Check for Coinbase Wallet
+                else if (connectorIdLower.includes("coinbase") ||
+                    connectorIdLower.includes("com.coinbase.wallet")) {
+                    connector = wagmiConnect.connectors.find((c) => {
+                        const id = c.id.toLowerCase();
+                        const name = c.name?.toLowerCase() || "";
+                        return (id.includes("coinbase") ||
+                            id.includes("com.coinbase") ||
+                            name.includes("coinbase"));
+                    });
+                }
+                // Check for Phantom
+                else if (connectorIdLower.includes("phantom") ||
+                    connectorIdLower.includes("app.phantom")) {
+                    connector = wagmiConnect.connectors.find((c) => {
+                        const id = c.id.toLowerCase();
+                        const name = c.name?.toLowerCase() || "";
+                        return (id.includes("phantom") ||
+                            id.includes("app.phantom") ||
+                            name.includes("phantom"));
+                    });
+                }
+                // Check for WalletConnect
+                else if (connectorIdLower.includes("walletconnect") ||
+                    connectorIdLower.includes("wallet_connect")) {
+                    connector = wagmiConnect.connectors.find((c) => {
+                        const id = c.id.toLowerCase();
+                        const name = c.name?.toLowerCase() || "";
+                        return (id.includes("walletconnect") ||
+                            id.includes("wallet_connect") ||
+                            name.includes("walletconnect") ||
+                            name.includes("wallet connect"));
+                    });
+                }
+                // Try to find any connector that matches (fallback)
+                else {
+                    connector = wagmiConnect.connectors.find((c) => {
+                        const id = c.id.toLowerCase();
+                        return id === connectorIdLower || id.includes(connectorIdLower);
+                    });
+                }
+            }
+            if (!connector) {
+                const availableIds = wagmiConnect.connectors
+                    .map((c) => c.id)
+                    .join(", ");
+                const error = new Error(`Connector "${connectorId}" not found. Available connectors: ${availableIds}`);
+                throw error;
+            }
+            autoDisconnectHandledRef.current = false;
+            explicitConnectionRef.current = true;
+            // CRITICAL: Reset refs before connecting to ensure reconnect is detected
+            // This ensures that when we reconnect after a disconnect, the address change is detected
+            lastAddressRef.current = null;
+            lastChainIdRef.current = null;
+            try {
+                // Use connectAsync to properly await the connection
+                const result = await wagmiConnect.connectAsync({ connector });
+                // Use the result directly to set state immediately
+                // This avoids waiting for the useAccount hook to update, which can be delayed
+                if (result.accounts && result.accounts.length > 0) {
+                    const address = result.accounts[0];
+                    const chainId = result.chainId;
+                    const formattedAddress = address.toLowerCase();
+                    // Set state directly
+                    setExternalWalletAddress(formattedAddress);
+                    setIsExternalWalletConnected(true);
+                    setAddress(formattedAddress);
+                    setIsConnected(true);
+                    if (chainId) {
+                        setChainId(chainId);
+                        setExternalWalletChainId(chainId);
+                    }
+                    // Track connection type
+                    const connectorId = connector.id.toLowerCase();
+                    const connectorName = connector.name?.toLowerCase() || "";
+                    let connectionTypeValue;
+                    // Map connector to connection type
+                    if (connectorId.includes("metamask") ||
+                        connectorId.includes("io.metamask") ||
+                        connectorName.includes("metamask")) {
+                        connectionTypeValue = "metamask";
+                    }
+                    else if (connectorId.includes("walletconnect") ||
+                        connectorId.includes("wallet_connect") ||
+                        connectorName.includes("walletconnect")) {
+                        connectionTypeValue = "walletconnect";
+                    }
+                    else if (connectorId.includes("coinbase") ||
+                        connectorId.includes("com.coinbase") ||
+                        connectorName.includes("coinbase")) {
+                        connectionTypeValue = "coinbase";
+                    }
+                    else if (connectorId.includes("phantom") ||
+                        connectorId.includes("app.phantom") ||
+                        connectorName.includes("phantom")) {
+                        connectionTypeValue = "phantom";
+                    }
+                    else if (connectorId.includes("injected")) {
+                        connectionTypeValue = "injected";
+                    }
+                    else {
+                        connectionTypeValue = connectorName || connectorId;
+                    }
+                    setConnectionType(connectionTypeValue);
+                    try {
+                        localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                    }
+                    catch (e) { }
+                    // Update refs
+                    lastConnectionTimeRef.current = Date.now();
+                    lastAddressRef.current = formattedAddress;
+                    lastChainIdRef.current = chainId;
+                    explicitConnectionRef.current = true;
+                    // Close the onboarding modal immediately
+                    if (onboardingRef.current) {
+                        const onboardingAny = onboardingRef.current;
+                        if (onboardingAny.modalOverlay) {
+                            setTimeout(() => {
+                                if (onboardingAny.modalOverlay) {
+                                    onboardingAny.modalOverlay.classList.remove("onboarding-modal-open");
+                                    onboardingAny.modalOverlay.classList.add("onboarding-modal-closing");
+                                    setTimeout(() => {
+                                        if (onboardingAny.modalOverlay) {
+                                            onboardingAny.modalOverlay.style.display = "none";
+                                        }
+                                    }, 200);
+                                    document.body.style.overflow = "";
+                                }
+                            }, 100);
+                        }
+                    }
+                }
+            }
+            catch (connectError) {
+                console.error('WalletConnect connection error:', connectError);
+                explicitConnectionRef.current = false;
+                throw connectError;
+            }
+        }
+        catch (err) {
+            explicitConnectionRef.current = false;
+            const error = err instanceof Error
+                ? err
+                : new Error(`Failed to connect external wallet: ${err instanceof Error ? err.message : String(err)}`);
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [
+        externalWalletsEnabled,
+        wagmiConnect,
+        wagmiDisconnect,
+        wagmiAccount?.isConnected,
+    ]);
+    // Disconnect external wallet
+    const disconnectExternalWallet = useCallback(async () => {
+        if (!externalWalletsEnabled || !wagmiDisconnect) {
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        disconnectingRef.current = true; // Set flag to prevent useEffect from interfering
+        try {
+            const wasAbstraxnConnected = walletRef.current?.isConnected ?? false;
+            // Await the disconnect to ensure it completes
+            await wagmiDisconnect.disconnect();
+            // Wait a bit to ensure wagmi state updates
+            await new Promise((resolve) => setTimeout(resolve, 150));
+            // Reset external wallet state immediately
+            setIsExternalWalletConnected(false);
+            setExternalWalletAddress(null);
+            setExternalWalletChainId(null);
+            setConnectionType(null);
+            // Clear from localStorage
+            try {
+                localStorage.removeItem("abstraxn_connection_type");
+            }
+            catch (e) {
+                // Ignore localStorage errors
+            }
+            explicitConnectionRef.current = false;
+            lastConnectionTimeRef.current = 0;
+            // CRITICAL: Reset refs so reconnect is detected as a new connection
+            lastAddressRef.current = null;
+            lastChainIdRef.current = null;
+            // Always reset main state when disconnecting external wallet
+            // The context value is computed as isExternalWalletConnected || isConnected,
+            // so setting both to false ensures the overall isConnected becomes false
+            setIsConnected(false);
+            setAddress(null);
+            setChainId(null);
+        }
+        catch (err) {
+            const error = err instanceof Error
+                ? err
+                : new Error("Failed to disconnect external wallet");
+            console.error("Error disconnecting external wallet:", error);
+            setError(error);
+            throw error;
+        }
+        finally {
+            // Clear disconnecting flag after a short delay to allow state to settle
+            setTimeout(() => {
+                disconnectingRef.current = false;
+            }, 200);
+            setLoading(false);
+        }
+    }, [externalWalletsEnabled, wagmiDisconnect]);
+    // Helper function to get network name from chain ID
+    const getNetworkName = useCallback((chainId) => {
+        const chainNames = {
+            1: "Ethereum Mainnet",
+            5: "Goerli",
+            11155111: "Sepolia",
+            137: "Polygon",
+            80001: "Mumbai",
+            80002: "Polygon Amoy",
+            8453: "Base",
+            84531: "Base Goerli",
+            42161: "Arbitrum One",
+            421613: "Arbitrum Goerli",
+            10: "Optimism",
+            420: "Optimism Goerli",
+            56: "BNB Smart Chain",
+            97: "BNB Smart Chain Testnet",
+        };
+        return chainNames[chainId] || `Chain ${chainId}`;
+    }, []);
+    // Switch external wallet chain (dedicated function for external wallets)
+    const switchExternalWalletChain = useCallback(async (chainId) => {
+        if (!externalWalletsEnabled || !wagmiSwitchChain) {
+            const error = new Error("External wallets are not enabled or chain switching is not available");
+            setError(error);
+            throw error;
+        }
+        setError(null);
+        setLoading(true);
+        try {
+            // Use switchChainAsync for wagmi v3
+            await wagmiSwitchChain.switchChainAsync({ chainId });
+            // Update local state - wagmi will update chainId via useChainId hook
+            // But we also update our local state for immediate feedback
+            setExternalWalletChainId(chainId);
+        }
+        catch (err) {
+            const error = err instanceof Error
+                ? err
+                : new Error(`Failed to switch chain: ${err instanceof Error ? err.message : String(err)}`);
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [externalWalletsEnabled, wagmiSwitchChain]);
+    // Get available connectors - return all connectors with their IDs and names
+    // Filter out generic 'injected' connector if 'io.metamask' is available (prefer specific connectors)
+    // The ExternalWalletButtons component will handle additional deduplication and display
+    const availableConnectors = externalWalletsEnabled && wagmiConnect && wagmiConnect.connectors
+        ? wagmiConnect.connectors
+            .filter((connector) => {
+            // If io.metamask exists, exclude generic 'injected' connector
+            const hasIoMetaMask = wagmiConnect.connectors.some((c) => c.id === "io.metamask");
+            if (hasIoMetaMask && connector.id === "injected") {
+                return false; // Exclude generic injected when io.metamask is available
+            }
+            return true;
+        })
+            .map((connector) => ({
+            id: connector.id,
+            name: connector.name,
+            icon: connector.icon, // Pass the icon from the connector
+        }))
+        : [];
+    // Determine the current address (external wallet takes precedence)
+    const currentAddress = isExternalWalletConnected && externalWalletAddress
+        ? externalWalletAddress
+        : address;
+    // Determine the current chain ID (external wallet takes precedence)
+    const currentChainId = isExternalWalletConnected && externalWalletChainId
+        ? externalWalletChainId
+        : chainId;
+    // Fetch balance for Abstraxn wallet (not external wallet)
+    useEffect(() => {
+        if (isExternalWalletConnected || !address || !currentChainId) {
+            setWalletBalance(null);
+            return;
+        }
+        const fetchBalance = async () => {
+            try {
+                const currentChain = getChainById(currentChainId);
+                if (!currentChain || currentChain.type !== "evm") {
+                    setWalletBalance(null);
+                    return;
+                }
+                const publicClient = createPublicClient({
+                    chain: {
+                        id: currentChain.id,
+                        name: currentChain.name,
+                        nativeCurrency: currentChain.nativeCurrency,
+                        rpcUrls: {
+                            default: {
+                                http: [currentChain.rpcUrl],
+                            },
+                        },
+                    },
+                    transport: http(currentChain.rpcUrl),
+                });
+                const balance = await publicClient.getBalance({
+                    address: address,
+                });
+                setWalletBalance(balance);
+            }
+            catch (error) {
+                console.error("Failed to fetch balance:", error);
+                setWalletBalance(null);
+            }
+        };
+        fetchBalance();
+        // Refetch balance every 10 seconds
+        const interval = setInterval(fetchBalance, 10000);
+        return () => clearInterval(interval);
+    }, [address, currentChainId, isExternalWalletConnected]);
+    // Compute available chains from config - supports both legacy and new format
+    const availableChains = useMemo(() => {
+        const chains = [];
+        const chainConfig = config.chains;
+        // Priority 1: Check new chains config format
+        if (chainConfig?.supportedEvmChains &&
+            chainConfig.supportedEvmChains.length > 0) {
+            // Use configured chains from new format
+            chainConfig.supportedEvmChains.forEach((chainName) => {
+                const chain = EVM_CHAINS[chainName];
+                if (chain) {
+                    chains.push(chain);
+                }
+            });
+        }
+        // Priority 2: Check legacy supportedChains format
+        else if (config.supportedChains && config.supportedChains.length > 0) {
+            // Convert legacy Chain format to ChainData
+            config.supportedChains.forEach((legacyChain) => {
+                // Try to find matching chain by ID
+                const chainData = getChainById(legacyChain.id);
+                if (chainData) {
+                    chains.push(chainData);
+                }
+                else {
+                    // If not found, create ChainData from legacy chain
+                    const newChain = {
+                        id: legacyChain.id,
+                        name: legacyChain.name.toLowerCase().replace(/\s+/g, "-"),
+                        displayName: legacyChain.name,
+                        rpcUrl: legacyChain.rpcUrl,
+                        explorerUrl: `https://etherscan.io`, // Default explorer
+                        nativeCurrency: legacyChain.nativeCurrency,
+                        type: "evm", // Assume EVM for legacy chains
+                        isTestnet: legacyChain.id !== 1 &&
+                            legacyChain.id !== 137 &&
+                            legacyChain.id !== 8453, // Common mainnets
+                    };
+                    chains.push(newChain);
+                }
+            });
+        }
+        // Priority 3: Default chains only if nothing configured at all
+        // Only show defaults if both config.chains and config.supportedChains are missing
+        else if (!chainConfig && !config.supportedChains) {
+            chains.push(EVM_CHAINS.ethereum, EVM_CHAINS.polygon, EVM_CHAINS.base);
+        }
+        // Add Solana chains if enabled (from new config format)
+        if (chainConfig?.enableSolana) {
+            chains.push(SOLANA_CHAINS.solana);
+        }
+        // Remove duplicates by chain ID
+        const uniqueChains = chains.filter((chain, index, self) => index === self.findIndex((c) => c.id === chain.id));
+        // Only return defaults if absolutely nothing was configured
+        return uniqueChains.length > 0
+            ? uniqueChains
+            : !chainConfig && !config.supportedChains
+                ? [EVM_CHAINS.ethereum, EVM_CHAINS.polygon, EVM_CHAINS.base]
+                : [];
+    }, [config.chains, config.supportedChains]);
+    // Get current chain data
+    const currentChain = useMemo(() => {
+        if (!currentChainId)
+            return null;
+        return getChainById(currentChainId) || null;
+    }, [currentChainId]);
+    // Enhanced switchChain that works for both EVM and Solana
+    const switchChainEnhanced = useCallback(async (targetChainId) => {
+        if (!walletRef.current) {
+            throw new Error("Wallet not initialized");
+        }
+        // Check if chain is in availableChains (user-configured chains)
+        const targetChainInAvailable = availableChains?.find((c) => c.id === targetChainId);
+        if (!targetChainInAvailable) {
+            throw new Error(`Chain with ID ${targetChainId} is not available. Please configure it in your SDK setup.`);
+        }
+        const targetChain = getChainById(targetChainId);
+        if (!targetChain) {
+            throw new Error(`Chain with ID ${targetChainId} is not supported`);
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            if (targetChain.type === "evm") {
+                // For EVM chains, use the existing switchChain
+                if (isExternalWalletConnected && wagmiSwitchChain) {
+                    // External wallet - use wagmi switchChain
+                    await wagmiSwitchChain.switchChainAsync({ chainId: targetChainId });
+                    setExternalWalletChainId(targetChainId);
+                }
+                else {
+                    // Abstraxn wallet - try to switch, but if chain is not in wallet's supportedChains,
+                    // we'll update the state directly (for chains that are in availableChains but not in wallet config)
+                    try {
+                        await switchChain(targetChainId);
+                    }
+                    catch (switchErr) {
+                        // If the wallet doesn't support this chain, but it's in availableChains,
+                        // we can still update the state to allow UI to work
+                        if (switchErr?.message?.includes("not supported") &&
+                            targetChainInAvailable) {
+                            // Update chainId state directly for chains in availableChains
+                            setChainId(targetChainId);
+                            // Emit chainChanged event if wallet supports it
+                            if (walletRef.current &&
+                                typeof walletRef.current.emit === "function") {
+                                walletRef.current.emit("chainChanged", targetChainId);
+                            }
+                        }
+                        else {
+                            throw switchErr;
+                        }
+                    }
+                }
+            }
+            else if (targetChain.type === "solana") {
+                // For Solana, we might need different handling
+                // For now, just update the chainId state
+                // TODO: Implement actual Solana chain switching when wallet supports it
+                setChainId(targetChainId);
+            }
+            // Update chainId state
+            if (!isExternalWalletConnected) {
+                setChainId(targetChainId);
+            }
+        }
+        catch (err) {
+            const error = err instanceof Error
+                ? err
+                : new Error(`Failed to switch to chain ${targetChainId}: ${err instanceof Error ? err.message : String(err)}`);
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [isExternalWalletConnected, wagmiSwitchChain, switchChain, availableChains]);
+    const value = {
+        wallet: walletRef.current,
+        isInitialized,
+        isConnected: isExternalWalletConnected || isConnected, // True if either wallet is connected
+        address: currentAddress, // Use external wallet address if connected, otherwise Abstraxn wallet address
+        user,
+        whoami,
+        chainId: currentChainId, // Use external wallet chain ID if connected, otherwise Abstraxn wallet chain ID
+        error,
+        loading,
+        init,
+        connect,
+        disconnect,
+        showOnboarding,
+        hideOnboarding,
+        getAddress,
+        getChainId,
+        switchChain,
+        signMessage,
+        signTransaction,
+        sendTransaction,
+        signTransactionViaAPI,
+        signAndSendTransaction,
+        loginWithOTP,
+        verifyOTP,
+        loginWithGoogle,
+        handleGoogleCallback: () => handleGoogleCallback(true),
+        refreshWhoami,
+        uiConfig: config.ui,
+        // External wallet methods
+        connectExternalWallet: externalWalletsEnabled
+            ? connectExternalWallet
+            : undefined,
+        disconnectExternalWallet: externalWalletsEnabled
+            ? disconnectExternalWallet
+            : undefined,
+        isExternalWalletConnected: externalWalletsEnabled
+            ? isExternalWalletConnected
+            : undefined,
+        externalWalletAddress: externalWalletsEnabled
+            ? externalWalletAddress
+            : undefined,
+        externalWalletChainId: externalWalletsEnabled
+            ? externalWalletChainId
+            : undefined,
+        externalWalletBalance: externalWalletsEnabled &&
+            wagmiBalance?.data &&
+            typeof wagmiBalance.data === "object" &&
+            wagmiBalance.data !== null &&
+            "value" in wagmiBalance.data
+            ? wagmiBalance.data.value
+            : undefined,
+        externalWalletNetwork: externalWalletsEnabled && wagmiChainIdHook
+            ? getNetworkName(wagmiChainIdHook)
+            : undefined,
+        availableConnectors: externalWalletsEnabled
+            ? availableConnectors
+            : undefined,
+        switchExternalWalletChain: externalWalletsEnabled
+            ? switchExternalWalletChain
+            : undefined,
+        // Chain management
+        switchChainEnhanced,
+        currentChain,
+        availableChains,
+        // Balance (for Abstraxn wallet)
+        walletBalance: !isExternalWalletConnected ? walletBalance : undefined,
+        // Connection type
+        connectionType,
+    };
+    // Ref to store latest value to avoid dependency issues (defined after value)
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    // Debug log when address changes
+    // useEffect(() => {
+    //   console.log('🔍 Context value check:', {
+    //     currentAddress,
+    //     isConnected: isExternalWalletConnected || isConnected,
+    //     isExternalWalletConnected,
+    //     externalWalletAddress,
+    //     address,
+    //     explicitConnection: explicitConnectionRef.current,
+    //   });
+    // }, [currentAddress, isExternalWalletConnected, isConnected, externalWalletAddress, address]);
+    // Reusable function to mount external wallets (moved here so it can be used by showOnboarding)
+    const mountExternalWalletsToContainer = useCallback(async (container, onboardingAny) => {
+        if (!container) {
+            return;
+        }
+        // Check if we're on OTP screen - if so, don't show external wallets
+        const isOtpScreen = onboardingAny.otpVerificationScreen &&
+            onboardingAny.otpVerificationScreen.parentElement &&
+            onboardingAny.otpVerificationScreen.offsetParent !== null;
+        if (!isOtpScreen) {
+            // Only show external wallets if not on OTP screen
+            container.style.display = "";
+            // Show divider only if both email/Google AND external wallets are visible
+            const authMethods = onboardingAny.config?.authMethods || [
+                "otp",
+                "google",
+            ];
+            const showEmail = authMethods.includes("otp");
+            const showGoogle = authMethods.includes("google");
+            const hasEmailOrGoogle = showEmail || showGoogle;
+            if (onboardingAny.externalWalletDivider && hasEmailOrGoogle) {
+                onboardingAny.externalWalletDivider.style.display = "";
+            }
+            else if (onboardingAny.externalWalletDivider) {
+                onboardingAny.externalWalletDivider.style.display = "none";
+            }
+        }
+        else {
+            // On OTP screen - hide external wallets
+            container.style.display = "none";
+            if (onboardingAny.externalWalletDivider) {
+                onboardingAny.externalWalletDivider.style.display = "none";
+            }
+            return;
+        }
+        // Check if root exists and container is still in DOM
+        const containerInDOM = container.parentElement !== null;
+        // Check if the container is the same as the one we created the root for
+        const isSameContainer = externalWalletContainerRef.current === container;
+        const rootStillValid = externalWalletRootRef.current && containerInDOM && isSameContainer;
+        const renderExternalWalletButtons = () => (_jsx(AbstraxnContext.Provider, { value: valueRef.current, children: _jsx(ExternalWalletButtons, { onConnect: async () => { }, onShowMoreWallets: () => {
+                    const onboardingAny = onboardingRef.current;
+                    if (onboardingAny?.emailForm) {
+                        onboardingAny.emailForm.style.display = "none";
+                    }
+                    if (onboardingAny?.googleButton) {
+                        onboardingAny.googleButton.style.display = "none";
+                    }
+                    // Hide all passkey elements when wallet selection screen is shown
+                    if (onboardingAny?.passkeyLoginButton) {
+                        onboardingAny.passkeyLoginButton.style.display = "none";
+                    }
+                    if (onboardingAny?.passkeySignupLink) {
+                        onboardingAny.passkeySignupLink.style.display = "none";
+                    }
+                    if (onboardingAny?.passkeyErrorElement) {
+                        onboardingAny.passkeyErrorElement.style.display = "none";
+                    }
+                    if (onboardingAny?.passkeyDivider) {
+                        onboardingAny.passkeyDivider.style.display = "none";
+                    }
+                    if (onboardingAny?.externalWalletDivider) {
+                        onboardingAny.externalWalletDivider.style.display = "none";
+                    }
+                    if (onboardingAny?.divider) {
+                        onboardingAny.divider.style.display = "none";
+                    }
+                }, onHideMoreWallets: () => {
+                    const onboardingAny = onboardingRef.current;
+                    const authMethods = onboardingAny?.config?.authMethods || [
+                        "otp",
+                        "google",
+                    ];
+                    const showEmail = authMethods.includes("otp");
+                    const showGoogle = authMethods.includes("google");
+                    const showPasskey = authMethods.includes("passkey");
+                    if (onboardingAny?.emailForm) {
+                        onboardingAny.emailForm.style.display = showEmail ? "" : "none";
+                    }
+                    if (onboardingAny?.googleButton) {
+                        onboardingAny.googleButton.style.display = showGoogle
+                            ? ""
+                            : "none";
+                    }
+                    // Show passkey controls if enabled
+                    if (onboardingAny?.passkeyLoginButton) {
+                        onboardingAny.passkeyLoginButton.style.display = showPasskey
+                            ? ""
+                            : "none";
+                    }
+                    if (onboardingAny?.passkeySignupLink) {
+                        onboardingAny.passkeySignupLink.style.display = showPasskey
+                            ? ""
+                            : "none";
+                    }
+                    if (onboardingAny?.passkeyErrorElement) {
+                        onboardingAny.passkeyErrorElement.style.display = "none";
+                    }
+                    // Show passkey divider if passkey is enabled and there are other auth methods
+                    if (onboardingAny?.passkeyDivider) {
+                        onboardingAny.passkeyDivider.style.display =
+                            showPasskey && (showEmail || showGoogle) ? "" : "none";
+                    }
+                    if (onboardingAny?.divider) {
+                        onboardingAny.divider.style.display =
+                            showEmail && showGoogle ? "" : "none";
+                    }
+                    const hasEmailOrGoogle = showEmail || showGoogle;
+                    if (onboardingAny?.externalWalletDivider && hasEmailOrGoogle) {
+                        onboardingAny.externalWalletDivider.style.display = "";
+                    }
+                    else if (onboardingAny?.externalWalletDivider) {
+                        onboardingAny.externalWalletDivider.style.display = "none";
+                    }
+                } }) }));
+        if (rootStillValid) {
+            externalWalletRootRef.current.render(renderExternalWalletButtons());
+            externalWalletMountedRef.current = true;
+        }
+        else {
+            try {
+                // If we have an old root but the container changed or is invalid, unmount it first
+                if (externalWalletRootRef.current) {
+                    try {
+                        // Attempt to unmount if possible, though react-dom/client roots don't have unmount in the same way as legacy
+                        // But we should at least clear the ref
+                        externalWalletRootRef.current.unmount();
+                    }
+                    catch (e) {
+                        // Ignore unmount errors
+                    }
+                    externalWalletRootRef.current = null;
+                }
+                const reactDomClient = await import("react-dom/client");
+                const rootInstance = reactDomClient.createRoot(container);
+                externalWalletRootRef.current = rootInstance;
+                externalWalletContainerRef.current = container; // Track the container
+                rootInstance.render(renderExternalWalletButtons());
+                externalWalletMountedRef.current = true;
+            }
+            catch (error) {
+                externalWalletMountedRef.current = false;
+            }
+        }
+    }, []);
+    // Mount ExternalWalletButtons into OnboardingUI container (only when wagmi is available)
+    useEffect(() => {
+        if (!externalWalletsEnabled) {
+            // When disabled, ensure container is hidden
+            const onboardingAny = onboardingRef.current;
+            if (onboardingAny?.externalWalletContainer) {
+                onboardingAny.externalWalletContainer.style.display = "none";
+            }
+            if (onboardingAny?.externalWalletDivider) {
+                onboardingAny.externalWalletDivider.style.display = "none";
+            }
+            return;
+        }
+        if (!onboardingRef.current) {
+            console.log("OnboardingUI not initialized yet");
+            return;
+        }
+        if (!wagmiConnect) {
+            console.log("Wagmi connect not available");
+            return;
+        }
+        if (!wagmiConnect.connectors || wagmiConnect.connectors.length === 0) {
+            console.log("Wagmi connectors not ready yet");
+            return;
+        }
+        if (availableConnectors.length === 0) {
+            // console.log('No available connectors');
+            // Don't return early - still mount the component so it can update when connectors become available
+            // return;
+        }
+        let retryCount = 0;
+        const maxRetries = 50; // Try for up to 2.5 seconds
+        const mountExternalWallets = async () => {
+            const onboardingAny = onboardingRef.current;
+            if (!onboardingAny?.externalWalletContainer) {
+                retryCount++;
+                if (retryCount < maxRetries) {
+                    // Retry after a short delay if container not ready
+                    setTimeout(mountExternalWallets, 50); // Reduced from 100ms to 50ms
+                }
+                return;
+            }
+            try {
+                const container = onboardingAny.externalWalletContainer;
+                if (!container) {
+                    console.warn("External wallet container is null");
+                    return;
+                }
+                // Check if we're on OTP screen - if so, don't show external wallets
+                // Check if OTP screen exists AND is actually visible in the DOM
+                const isOtpScreen = onboardingAny.otpVerificationScreen &&
+                    onboardingAny.otpVerificationScreen.parentElement &&
+                    onboardingAny.otpVerificationScreen.offsetParent !== null;
+                if (!isOtpScreen) {
+                    // Only show external wallets if not on OTP screen
+                    // Force container to be visible when external wallets are enabled
+                    container.style.display = "";
+                    // Show divider only if both email/Google AND external wallets are visible
+                    const authMethods = onboardingAny.config?.authMethods || [
+                        "otp",
+                        "google",
+                    ];
+                    const showEmail = authMethods.includes("otp");
+                    const showGoogle = authMethods.includes("google");
+                    const hasEmailOrGoogle = showEmail || showGoogle;
+                    if (onboardingAny.externalWalletDivider && hasEmailOrGoogle) {
+                        onboardingAny.externalWalletDivider.style.display = "";
+                    }
+                    else if (onboardingAny.externalWalletDivider) {
+                        onboardingAny.externalWalletDivider.style.display = "none";
+                    }
+                }
+                else {
+                    // On OTP screen - hide external wallets
+                    container.style.display = "none";
+                    if (onboardingAny.externalWalletDivider) {
+                        onboardingAny.externalWalletDivider.style.display = "none";
+                    }
+                }
+                // Reuse existing root if container matches to avoid unmount/remount race conditions
+                let rootInstance = externalWalletRootRef.current;
+                const reactDomClient = await import("react-dom/client");
+                if (rootInstance && externalWalletContainerRef.current === container) {
+                    // Reuse existing root - no need to unmount/remount
+                }
+                else {
+                    // Unmount previous root if it exists (and container is different)
+                    if (rootInstance) {
+                        try {
+                            // Wrap unmount in setTimeout to avoid "synchronously unmount... while rendering" error
+                            // This happens if unmount is called during a render cycle
+                            const oldRoot = rootInstance;
+                            setTimeout(() => {
+                                try {
+                                    oldRoot.unmount();
+                                }
+                                catch (e) {
+                                    // Ignore
+                                }
+                            }, 0);
+                        }
+                        catch (e) {
+                            // Ignore unmount errors
+                        }
+                        externalWalletRootRef.current = null;
+                        externalWalletContainerRef.current = null;
+                    }
+                    // Create new root
+                    rootInstance = reactDomClient.createRoot(container);
+                    externalWalletRootRef.current = rootInstance;
+                    externalWalletContainerRef.current = container; // Track the container
+                }
+                // Render the ExternalWalletButtons component
+                rootInstance.render(_jsx(AbstraxnContext.Provider, { value: valueRef.current, children: _jsx(ExternalWalletButtons, { onConnect: async (_connectorId, _address) => {
+                            // console.log('External wallet connected:', connectorId, address);
+                            // Modal will be closed automatically by the useEffect that watches wagmiAccount
+                        }, onShowMoreWallets: () => {
+                            // Hide email and Google sections when "More wallets" is clicked
+                            const onboardingAny = onboardingRef.current;
+                            if (onboardingAny?.emailForm) {
+                                onboardingAny.emailForm.style.display = "none";
+                            }
+                            if (onboardingAny?.googleButton) {
+                                onboardingAny.googleButton.style.display = "none";
+                            }
+                            // Hide all passkey elements when wallet selection screen is shown
+                            if (onboardingAny?.passkeyLoginButton) {
+                                onboardingAny.passkeyLoginButton.style.display = "none";
+                            }
+                            if (onboardingAny?.passkeySignupLink) {
+                                onboardingAny.passkeySignupLink.style.display = "none";
+                            }
+                            if (onboardingAny?.passkeyErrorElement) {
+                                onboardingAny.passkeyErrorElement.style.display = "none";
+                            }
+                            if (onboardingAny?.passkeyDivider) {
+                                onboardingAny.passkeyDivider.style.display = "none";
+                            }
+                            if (onboardingAny?.externalWalletDivider) {
+                                onboardingAny.externalWalletDivider.style.display = "none";
+                            }
+                            // Also hide the divider between email and Google if it exists
+                            if (onboardingAny?.divider) {
+                                onboardingAny.divider.style.display = "none";
+                            }
+                        }, onHideMoreWallets: () => {
+                            // Show email and Google sections when back is clicked (restore initial screen)
+                            const onboardingAny = onboardingRef.current;
+                            const authMethods = onboardingAny?.config?.authMethods || [
+                                "otp",
+                                "google",
+                            ];
+                            const showEmail = authMethods.includes("otp");
+                            const showGoogle = authMethods.includes("google");
+                            const showPasskey = authMethods.includes("passkey");
+                            // Show email form if enabled
+                            if (onboardingAny?.emailForm) {
+                                onboardingAny.emailForm.style.display = showEmail
+                                    ? ""
+                                    : "none";
+                            }
+                            // Show Google button if enabled
+                            if (onboardingAny?.googleButton) {
+                                onboardingAny.googleButton.style.display = showGoogle
+                                    ? ""
+                                    : "none";
+                            }
+                            // Show passkey controls if enabled
+                            if (onboardingAny?.passkeyLoginButton) {
+                                onboardingAny.passkeyLoginButton.style.display = showPasskey
+                                    ? ""
+                                    : "none";
+                            }
+                            if (onboardingAny?.passkeySignupLink) {
+                                onboardingAny.passkeySignupLink.style.display = showPasskey
+                                    ? ""
+                                    : "none";
+                            }
+                            if (onboardingAny?.passkeyErrorElement) {
+                                onboardingAny.passkeyErrorElement.style.display = "none";
+                            }
+                            // Show passkey divider if passkey is enabled and there are other auth methods
+                            if (onboardingAny?.passkeyDivider) {
+                                onboardingAny.passkeyDivider.style.display =
+                                    showPasskey && (showEmail || showGoogle) ? "" : "none";
+                            }
+                            // Show divider between email and Google if both are enabled
+                            if (onboardingAny?.divider) {
+                                onboardingAny.divider.style.display =
+                                    showEmail && showGoogle ? "" : "none";
+                            }
+                            // Show the "or" divider before external wallets only if email/Google are visible
+                            const hasEmailOrGoogle = showEmail || showGoogle;
+                            if (onboardingAny?.externalWalletDivider && hasEmailOrGoogle) {
+                                onboardingAny.externalWalletDivider.style.display = "";
+                            }
+                            else if (onboardingAny?.externalWalletDivider) {
+                                onboardingAny.externalWalletDivider.style.display = "none";
+                            }
+                        } }) }));
+                externalWalletMountedRef.current = true;
+            }
+            catch (error) {
+                console.error("Failed to mount ExternalWalletButtons:", error);
+                externalWalletMountedRef.current = false;
+            }
+        };
+        // When externalWalletsEnabled changes, force a fresh mount
+        // This ensures buttons appear immediately without requiring a refresh
+        const forceRemount = () => {
+            // Unmount existing root if it exists
+            if (externalWalletRootRef.current) {
+                try {
+                    externalWalletRootRef.current.unmount();
+                }
+                catch (e) {
+                    // Ignore unmount errors
+                }
+                externalWalletRootRef.current = null;
+            }
+            externalWalletContainerRef.current = null;
+            externalWalletMountedRef.current = false;
+        };
+        // Start mounting immediately - no delay needed
+        mountExternalWallets();
+        return () => {
+            // Cleanup if needed
+        };
+    }, [
+        externalWalletsEnabled,
+        wagmiConnect,
+        wagmiConnect?.connectors,
+        availableConnectors.length,
+    ]);
+    // Update the rendered component when value changes (but don't re-mount)
+    useEffect(() => {
+        if (!externalWalletsEnabled)
+            return;
+        if (!externalWalletRootRef.current || !externalWalletMountedRef.current)
+            return;
+        // Update the rendered component with latest value
+        try {
+            externalWalletRootRef.current.render(_jsx(AbstraxnContext.Provider, { value: valueRef.current, children: _jsx(ExternalWalletButtons, { onConnect: async (_connectorId, _address) => {
+                        // console.log('External wallet connected:', connectorId, address);
+                    }, onShowMoreWallets: () => {
+                        // Hide email and Google sections when "More wallets" is clicked
+                        const onboardingAny = onboardingRef.current;
+                        if (onboardingAny?.emailForm) {
+                            onboardingAny.emailForm.style.display = "none";
+                        }
+                        if (onboardingAny?.googleButton) {
+                            onboardingAny.googleButton.style.display = "none";
+                        }
+                        // Hide Discord and X (Twitter) buttons when wallet selection screen is shown
+                        if (onboardingAny?.discordButton) {
+                            onboardingAny.discordButton.style.display = "none";
+                        }
+                        if (onboardingAny?.twitterButton) {
+                            onboardingAny.twitterButton.style.display = "none";
+                        }
+                        // Hide social grid if it exists
+                        if (onboardingAny?.socialGrid) {
+                            onboardingAny.socialGrid.style.display = "none";
+                        }
+                        // Extra guard: hide any social icon buttons by class
+                        if (onboardingAny?.rootElement) {
+                            onboardingAny.rootElement
+                                .querySelectorAll(".onboarding-button-social-icon, .onboarding-button-social")
+                                .forEach((el) => {
+                                el.style.display = "none";
+                            });
+                        }
+                        // Hide all passkey elements when wallet selection screen is shown
+                        if (onboardingAny?.passkeyLoginButton) {
+                            onboardingAny.passkeyLoginButton.style.display = "none";
+                        }
+                        if (onboardingAny?.passkeySignupLink) {
+                            onboardingAny.passkeySignupLink.style.display = "none";
+                        }
+                        if (onboardingAny?.passkeyErrorElement) {
+                            onboardingAny.passkeyErrorElement.style.display = "none";
+                        }
+                        if (onboardingAny?.passkeyDivider) {
+                            onboardingAny.passkeyDivider.style.display = "none";
+                        }
+                        if (onboardingAny?.externalWalletDivider) {
+                            onboardingAny.externalWalletDivider.style.display = "none";
+                        }
+                        // Also hide the divider between email and Google if it exists
+                        if (onboardingAny?.divider) {
+                            onboardingAny.divider.style.display = "none";
+                        }
+                    }, onHideMoreWallets: () => {
+                        // Show email and Google sections when back is clicked
+                        const onboardingAny = onboardingRef.current;
+                        const authMethods = onboardingAny?.config?.authMethods || [
+                            "otp",
+                            "google",
+                        ];
+                        const showEmail = authMethods.includes("otp");
+                        const showGoogle = authMethods.includes("google");
+                        const showTwitter = authMethods.includes("twitter");
+                        const showDiscord = authMethods.includes("discord");
+                        const showPasskey = authMethods.includes("passkey");
+                        if (onboardingAny?.emailForm) {
+                            onboardingAny.emailForm.style.display = showEmail ? "" : "none";
+                        }
+                        if (onboardingAny?.googleButton) {
+                            onboardingAny.googleButton.style.display = showGoogle
+                                ? ""
+                                : "none";
+                        }
+                        // Show Discord and X (Twitter) buttons if enabled
+                        if (onboardingAny?.discordButton) {
+                            onboardingAny.discordButton.style.display = showDiscord
+                                ? ""
+                                : "none";
+                        }
+                        if (onboardingAny?.twitterButton) {
+                            onboardingAny.twitterButton.style.display = showTwitter
+                                ? ""
+                                : "none";
+                        }
+                        // Show social grid if it exists and social methods are enabled
+                        if (onboardingAny?.socialGrid) {
+                            const hasSocialMethods = showGoogle || showTwitter || showDiscord;
+                            onboardingAny.socialGrid.style.display = hasSocialMethods
+                                ? ""
+                                : "none";
+                        }
+                        // Extra guard: restore social icon buttons by class based on flags
+                        if (onboardingAny?.rootElement) {
+                            const hasSocialMethods = showGoogle || showTwitter || showDiscord;
+                            onboardingAny.rootElement
+                                .querySelectorAll(".onboarding-button-social-icon, .onboarding-button-social")
+                                .forEach((el) => {
+                                el.style.display = hasSocialMethods
+                                    ? ""
+                                    : "none";
+                            });
+                        }
+                        // Show passkey controls if enabled
+                        if (onboardingAny?.passkeyLoginButton) {
+                            onboardingAny.passkeyLoginButton.style.display = showPasskey
+                                ? ""
+                                : "none";
+                        }
+                        if (onboardingAny?.passkeySignupLink) {
+                            onboardingAny.passkeySignupLink.style.display = showPasskey
+                                ? ""
+                                : "none";
+                        }
+                        if (onboardingAny?.passkeyErrorElement) {
+                            onboardingAny.passkeyErrorElement.style.display = "none";
+                        }
+                        // Show passkey divider if passkey is enabled and there are other auth methods
+                        if (onboardingAny?.passkeyDivider) {
+                            onboardingAny.passkeyDivider.style.display =
+                                showPasskey &&
+                                    (showEmail || showGoogle || showTwitter || showDiscord)
+                                    ? ""
+                                    : "none";
+                        }
+                        // Show divider between email and social methods if both are enabled
+                        if (onboardingAny?.divider) {
+                            const hasSocialMethods = showGoogle || showTwitter || showDiscord;
+                            onboardingAny.divider.style.display =
+                                showEmail && hasSocialMethods ? "" : "none";
+                        }
+                        if (onboardingAny?.externalWalletDivider) {
+                            onboardingAny.externalWalletDivider.style.display = "";
+                        }
+                    } }) }));
+        }
+        catch (error) {
+            console.warn("Failed to update ExternalWalletButtons:", error);
+        }
+    }, [value, externalWalletsEnabled]);
+    return (_jsx(AbstraxnContext.Provider, { value: value, children: children }));
+}
+//# sourceMappingURL=AbstraxnProviderInner.js.map