signer-test-sdk-react 0.0.22 → 0.0.23

package/dist/src/AbstraxnProvider.js

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