signer-test-sdk-react 0.0.1

package/dist/src/AbstraxnProvider.js

@@ -0,0 +1,2213 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Abstraxn Wallet Provider - React Context Provider
+ * Wrap your app with this provider to use Abstraxn Wallet SDK
+ */
+import { createContext, useContext, useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { AbstraxnWallet, AuthenticationError } from 'signer-test-sdk-core';
+import { OnboardingUIWeb } from './components/OnboardingUI';
+import { WagmiProvider, useAccount, useConnect, useDisconnect, useSignMessage, useSendTransaction, useSwitchChain, useBalance, useChainId } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createWagmiConfig } from './wagmiConfig';
+import { parseEther } from 'viem';
+import { ExternalWalletButtons } from './ExternalWalletButtons';
+export const AbstraxnContext = createContext(null);
+// Create a default QueryClient for wagmi
+const defaultQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+            retry: false,
+        },
+    },
+});
+// Base provider logic (shared between with and without wagmi)
+function useAbstraxnProviderBase(_config) {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [isConnected, setIsConnected] = useState(false);
+    const [address, setAddress] = useState(null);
+    const [user, setUser] = useState(null);
+    const [whoami, setWhoami] = useState(null);
+    const [chainId, setChainId] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const onboardingRef = useRef(null);
+    const otpIdRef = useRef(null);
+    const walletRef = useRef(null);
+    const googleCallbackHandledRef = useRef(false);
+    const twitterCallbackHandledRef = useRef(false);
+    const discordCallbackHandledRef = useRef(false);
+    return {
+        isInitialized, setIsInitialized,
+        isConnected, setIsConnected,
+        address, setAddress,
+        user, setUser,
+        whoami, setWhoami,
+        chainId, setChainId,
+        error, setError,
+        loading, setLoading,
+        onboardingRef, otpIdRef, walletRef, googleCallbackHandledRef, twitterCallbackHandledRef, discordCallbackHandledRef,
+    };
+}
+// Internal component WITH wagmi hooks (used when external wallets are enabled)
+function AbstraxnProviderWithWagmi({ config, children }) {
+    const base = useAbstraxnProviderBase(config);
+    const externalWalletsEnabled = config.externalWallets?.enabled ?? false;
+    // Keep a ref so callbacks remain stable when config toggles
+    const externalWalletsEnabledRef = useRef(externalWalletsEnabled);
+    useEffect(() => {
+        externalWalletsEnabledRef.current = externalWalletsEnabled;
+    }, [externalWalletsEnabled]);
+    // Always call wagmi hooks (we're inside WagmiProvider)
+    const wagmiAccount = useAccount();
+    const wagmiConnect = useConnect();
+    const wagmiDisconnect = useDisconnect();
+    const wagmiSignMessage = useSignMessage();
+    const wagmiSendTransaction = useSendTransaction();
+    const wagmiSwitchChain = useSwitchChain();
+    const wagmiChainIdHook = useChainId();
+    // useBalance will automatically refetch when address or chainId changes
+    const wagmiBalance = useBalance({
+        address: wagmiAccount.address,
+        chainId: wagmiChainIdHook,
+        query: {
+            enabled: !!wagmiAccount.address && wagmiAccount.isConnected,
+            refetchInterval: false,
+        },
+    });
+    return _jsx(AbstraxnProviderInner, { config: config, children: children, base: base, wagmi: { wagmiAccount, wagmiConnect, wagmiDisconnect, wagmiSignMessage, wagmiSendTransaction, wagmiSwitchChain, wagmiBalance, wagmiChainIdHook } });
+}
+// Internal component WITHOUT wagmi hooks (used when external wallets are disabled)
+function AbstraxnProviderWithoutWagmi({ config, children }) {
+    const base = useAbstraxnProviderBase(config);
+    return _jsx(AbstraxnProviderInner, { config: config, children: children, base: base, wagmi: null });
+}
+function AbstraxnProviderInner({ config, children, base, wagmi }) {
+    const { isInitialized, setIsInitialized, isConnected, setIsConnected, address, setAddress, user, setUser, whoami, setWhoami, chainId, setChainId, error, setError, loading, setLoading, 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);
+    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]);
+    // Initialize wallet
+    useEffect(() => {
+        // If wallet already exists (from previous mount), reuse it to prevent flicker
+        if (walletRef.current) {
+            return;
+        }
+        const walletInstance = new AbstraxnWallet({
+            apiKey: config.apiKey,
+            authMethods: config.authMethods,
+            googleClientId: config.googleClientId,
+            defaultChainId: config.defaultChainId,
+            supportedChains: config.supportedChains,
+            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);
+            }
+            catch (err) {
+                console.error('Error getting wallet info on connect:', err);
+            }
+        });
+        walletInstance.on('disconnect', () => {
+            setIsConnected(false);
+            setAddress(null);
+            setUser(null);
+            setWhoami(null);
+            setChainId(null);
+        });
+        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,
+            showCloseButton: uiConfig.showCloseButton !== 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 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');
+                    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 { success: false };
+                }
+            },
+            onGoogleLogin: async () => {
+                if (!walletInstance)
+                    throw new Error('Wallet not initialized');
+                const authManager = walletInstance.getAuthManager();
+                await authManager.loginWithGoogle();
+            },
+            onTwitterLogin: async () => {
+                if (!walletInstance)
+                    throw new Error('Wallet not initialized');
+                const authManager = walletInstance.getAuthManager();
+                await authManager.loginWithTwitter();
+            },
+            onDiscordLogin: async () => {
+                if (!walletInstance)
+                    throw new Error('Wallet not initialized');
+                const authManager = walletInstance.getAuthManager();
+                await authManager.loginWithDiscord();
+            },
+            onPasskeyLogin: async () => {
+                if (!walletInstance)
+                    throw new Error('Wallet not initialized');
+                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 authManager = walletInstance.getAuthManager();
+                const user = await authManager.signupWithPasskey();
+                // Set user immediately so onLoginSuccess can access it
+                setUser(user);
+                // Connect wallet after successful authentication
+                await walletInstance.connect();
+            },
+            onLoginSuccess: async (data) => {
+                // Clear any previous errors on successful login
+                setError(null);
+                // Hide onboarding UI
+                if (onboardingRef.current) {
+                    const onboardingAny = onboardingRef.current;
+                    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
+                setIsConnected(true);
+                // Set user if provided in data
+                if (data.user) {
+                    setUser(data.user);
+                }
+                // 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);
+                    }
+                    catch (err) {
+                        console.error('Error loading whoami after login:', err);
+                    }
+                }
+            },
+            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 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;
+            }
+            if (provider === 'twitter') {
+                return path.includes('/twitter') || path.includes('/x');
+            }
+            return path.includes(`/${provider}`);
+        };
+        onboarding.init();
+        // 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 && onboardingAny.modalOverlay) {
+            // If success=true is in URL, ensure modal is open to show loading
+            onboardingAny.modalOverlay.classList.remove('onboarding-modal-closing');
+            onboardingAny.modalOverlay.classList.add('onboarding-modal-open');
+            onboardingAny.modalOverlay.style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+        }
+        onboardingRef.current = onboarding;
+        // Handle Google OAuth callback (only in useEffect, not exposed)
+        const handleGoogleCallback = async () => {
+            if (googleCallbackHandledRef.current)
+                return;
+            const urlParams = new URLSearchParams(window.location.search);
+            if (!hasAuthParams(urlParams) || matchesProvider('twitter', urlParams) || matchesProvider('discord', urlParams)) {
+                return;
+            }
+            // 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
+                if (onboardingRef.current) {
+                    const onboardingAny = onboardingRef.current;
+                    if (onboardingAny.hideLoadingModal) {
+                        onboardingAny.hideLoadingModal();
+                    }
+                    // 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;
+            }
+        };
+        const handleDiscordCallback = async () => {
+            if (discordCallbackHandledRef.current)
+                return;
+            const urlParams = new URLSearchParams(window.location.search);
+            if (!hasAuthParams(urlParams) || !matchesProvider('discord', urlParams)) {
+                return;
+            }
+            // 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
+                if (onboardingRef.current) {
+                    const onboardingAny = onboardingRef.current;
+                    if (onboardingAny.hideLoadingModal) {
+                        onboardingAny.hideLoadingModal();
+                    }
+                    // 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;
+            }
+        };
+        const handleTwitterCallback = async () => {
+            if (twitterCallbackHandledRef.current)
+                return;
+            const urlParams = new URLSearchParams(window.location.search);
+            if (!hasAuthParams(urlParams) || !matchesProvider('twitter', urlParams)) {
+                return;
+            }
+            // 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
+                if (onboardingRef.current) {
+                    const onboardingAny = onboardingRef.current;
+                    if (onboardingAny.hideLoadingModal) {
+                        onboardingAny.hideLoadingModal();
+                    }
+                    // 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;
+            }
+        };
+        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) {
+            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(() => {
+                    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';
+                    // 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
+                        const isOtpScreen = onboarding.otpVerificationScreen &&
+                            onboarding.otpVerificationScreen.parentElement;
+                        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);
+                }
+            }
+            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);
+                    }
+                    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);
+                    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);
+                    // 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);
+                }
+            }
+            // 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);
+                // 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 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 {
+            const user = await walletRef.current.verifyOTP(otpId, otpCode);
+            setIsConnected(true);
+            setUser(user);
+            // 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 {
+            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 () => {
+        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);
+                // 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
+        if (wagmiAccount.isConnected && !explicitConnectionRef.current && !autoDisconnectHandledRef.current) {
+            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
+            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;
+                // 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 {
+                await wagmiConnect.connect({ connector });
+            }
+            catch (connectError) {
+                explicitConnectionRef.current = false;
+                throw connectError;
+            }
+            // Wait a bit for wagmiAccount to update with address
+            // Sometimes the address is not immediately available after connection
+            await new Promise(resolve => setTimeout(resolve, 300));
+            // Force a check and set state directly - this ensures address is set even if useEffect hasn't run yet
+            // This is the PRIMARY way we set the address after connection
+            // IMPORTANT: For ALL external wallets (MetaMask, Coinbase, Phantom, WalletConnect, etc.),
+            // we MUST set isExternalWalletConnected to true
+            if (wagmiAccount?.address) {
+                const formattedAddress = wagmiAccount.address.toLowerCase();
+                const currentChainId = wagmiAccount.chainId || null;
+                // Set state directly to ensure it's updated immediately
+                // This happens AFTER explicitConnectionRef is set to true, so it should always work
+                // CRITICAL: Set isExternalWalletConnected to true FIRST for ALL external wallet connections
+                // This ensures the connection is recognized as an external wallet, not Abstraxn wallet
+                setExternalWalletAddress(formattedAddress);
+                setIsExternalWalletConnected(true); // This marks it as an external wallet connection
+                setAddress(formattedAddress);
+                setIsConnected(true);
+                if (currentChainId) {
+                    setChainId(currentChainId);
+                    setExternalWalletChainId(currentChainId);
+                }
+                // Track connection time and update refs to prevent premature reset
+                lastConnectionTimeRef.current = Date.now();
+                lastAddressRef.current = formattedAddress;
+                lastChainIdRef.current = currentChainId;
+                // Close the onboarding modal
+                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 (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);
+            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;
+    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,
+        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,
+    };
+    // 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';
+                    }
+                }
+                // Always unmount and create fresh mount when config changes
+                // This ensures buttons appear immediately without requiring a refresh
+                if (externalWalletRootRef.current) {
+                    try {
+                        externalWalletRootRef.current.unmount();
+                    }
+                    catch (e) {
+                        // Ignore unmount errors
+                    }
+                    externalWalletRootRef.current = null;
+                    externalWalletContainerRef.current = null;
+                }
+                // Create fresh mount - this ensures buttons appear when config changes
+                const reactDomClient = await import('react-dom/client');
+                const 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 }));
+}
+/**
+ * Main AbstraxnProvider component with optional WagmiProvider wrapper
+ */
+export function AbstraxnProvider({ config, children }) {
+    const externalWalletsEnabled = config.externalWallets?.enabled ?? false;
+    // Create wagmi config if external wallets are enabled
+    // Use useMemo to ensure config is created synchronously during render
+    // This prevents the "Loading wallet connectors..." state from flashing or blocking initial render
+    const { wagmiConfig, configError } = useMemo(() => {
+        if (!externalWalletsEnabled)
+            return { wagmiConfig: null, configError: null };
+        try {
+            const configResult = createWagmiConfig(config.supportedChains, config.externalWallets?.walletConnectProjectId, config.externalWallets?.connectors, config.ui?.theme || 'dark');
+            return { wagmiConfig: configResult, configError: null };
+        }
+        catch (error) {
+            console.error('Failed to create wagmi config:', error);
+            return {
+                wagmiConfig: null,
+                configError: error instanceof Error ? error : new Error('Failed to create wagmi config')
+            };
+        }
+    }, [externalWalletsEnabled, config.supportedChains, config.externalWallets?.walletConnectProjectId, config.externalWallets?.connectors]);
+    // If external wallets are enabled, wrap with QueryClientProvider and WagmiProvider
+    if (externalWalletsEnabled) {
+        if (configError) {
+            console.error('Failed to create wagmi config:', configError);
+            // Fallback to provider without wagmi if config creation fails
+            return _jsx(AbstraxnProviderWithoutWagmi, { config: config, children: children });
+        }
+        if (!wagmiConfig) {
+            // Show loading state while config is being created
+            // Don't render AbstraxnProviderInner until wagmiConfig is ready
+            return (_jsx(QueryClientProvider, { client: defaultQueryClient, children: _jsx("div", { style: { display: 'none' }, children: "Loading wallet connectors..." }) }));
+        }
+        return (_jsx(QueryClientProvider, { client: defaultQueryClient, children: _jsx(WagmiProvider, { config: wagmiConfig, children: _jsx(AbstraxnProviderWithWagmi, { config: config, children: children }) }) }));
+    }
+    // If external wallets are disabled, use the provider without wagmi
+    return _jsx(AbstraxnProviderWithoutWagmi, { config: config, children: children });
+}
+/**
+ * Hook to access Abstraxn Wallet context
+ */
+export function useAbstraxnWallet() {
+    const context = useContext(AbstraxnContext);
+    if (!context) {
+        throw new Error('useAbstraxnWallet must be used within AbstraxnProvider');
+    }
+    return context;
+}
+//# sourceMappingURL=AbstraxnProvider.js.map