signer-test-sdk-react 0.0.11 → 0.0.13

package/dist/src/AbstraxnProvider.js

@@ -1,26 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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
  */
-import { createContext, useContext, useEffect, useState, useRef, useCallback, useMemo } from 'react';
+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 } from 'viem';
+import { parseEther, createPublicClient, http } from 'viem';
 import { ExternalWalletButtons } from './ExternalWalletButtons';
+import { EVM_CHAINS, SOLANA_CHAINS, getChainById, toCoreChain } from './chains';
 export const AbstraxnContext = createContext(null);
-// Create a default QueryClient for wagmi
-const defaultQueryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            refetchOnWindowFocus: false,
-            retry: false,
-        },
-    },
-});
+// 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);
@@ -31,6 +24,7 @@ function useAbstraxnProviderBase(_config) {
     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);
@@ -46,6 +40,7 @@ function useAbstraxnProviderBase(_config) {
         chainId, setChainId,
         error, setError,
         loading, setLoading,
+        walletBalance, setWalletBalance,
         onboardingRef, otpIdRef, walletRef, googleCallbackHandledRef, twitterCallbackHandledRef, discordCallbackHandledRef,
     };
 }
@@ -83,7 +78,7 @@ function AbstraxnProviderWithoutWagmi({ config, children }) {
     return _jsx(AbstraxnProviderInner, { config: config, children: children, base: base, wagmi: null });
 }
 function AbstraxnProviderInner({ config, children, base, wagmi }) {
-    const { isInitialized, setIsInitialized, isConnected, setIsConnected, address, setAddress, user, setUser, whoami, setWhoami, chainId, setChainId, error, setError, loading, setLoading, onboardingRef, otpIdRef, walletRef, googleCallbackHandledRef, twitterCallbackHandledRef, discordCallbackHandledRef, } = base;
+    const { 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);
@@ -144,18 +139,105 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             }
         });
     }, [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);
+                // 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 new chains config format
+            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 2: 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.defaultChainId,
-            supportedChains: config.supportedChains,
+            defaultChainId: config.chains?.defaultChainId || config.defaultChainId,
+            supportedChains: computedSupportedChains,
             autoConnect: config.autoConnect ?? false,
             enableLogging: config.enableLogging ?? false,
         });
@@ -187,6 +269,24 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             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);
@@ -250,7 +350,9 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
                 }
                 catch (err) {
                     console.error('OTP Verify Error:', err);
-                    return { success: false };
+                    // 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 () => {
@@ -294,22 +396,6 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             onLoginSuccess: async (data) => {
                 // Clear any previous errors on successful login
                 setError(null);
-                // Hide onboarding UI
-                if (onboardingRef.current) {
-                    const onboardingAny = onboardingRef.current;
-                    if (onboardingAny.modalOverlay) {
-                        onboardingAny.modalOverlay.classList.remove('onboarding-modal-open');
-                        onboardingAny.modalOverlay.classList.add('onboarding-modal-closing');
-                        setTimeout(() => {
-                            if (onboardingAny.modalOverlay) {
-                                onboardingAny.modalOverlay.style.display = 'none';
-                            }
-                        }, 200);
-                    }
-                    document.body.style.overflow = '';
-                }
-                // Set connected state
-                setIsConnected(true);
                 // Set user if provided in data
                 if (data.user) {
                     setUser(data.user);
@@ -323,9 +409,45 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
                         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);
                     }
                 }
             },
@@ -347,6 +469,20 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             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();
@@ -356,6 +492,17 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
                 }
                 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');
             }
@@ -375,12 +522,16 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             onboardingAny.modalOverlay.style.display = 'none';
             document.body.style.overflow = '';
         }
-        else if (hasSuccess && onboardingAny.modalOverlay) {
-            // If success=true is in URL, ensure modal is open to show loading
-            onboardingAny.modalOverlay.classList.remove('onboarding-modal-closing');
-            onboardingAny.modalOverlay.classList.add('onboarding-modal-open');
-            onboardingAny.modalOverlay.style.display = 'flex';
-            document.body.style.overflow = 'hidden';
+        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)
@@ -420,12 +571,17 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             }
             catch (err) {
                 console.error('Google callback error:', err);
-                // Hide loading modal on error
+                // 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) {
@@ -434,6 +590,8 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
                 }
                 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 () => {
@@ -472,12 +630,17 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             }
             catch (err) {
                 console.error('Discord callback error:', err);
-                // Hide loading modal on error
+                // 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) {
@@ -486,6 +649,8 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
                 }
                 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 () => {
@@ -524,12 +689,17 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             }
             catch (err) {
                 console.error('Twitter callback error:', err);
-                // Hide loading modal on error
+                // 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) {
@@ -538,6 +708,8 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
                 }
                 setError(err instanceof Error ? err : new Error('Twitter callback failed'));
                 twitterCallbackHandledRef.current = false;
+                // Ensure body scroll is restored
+                document.body.style.overflow = '';
             }
         };
         handleGoogleCallback();
@@ -659,6 +831,10 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
                 // 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';
@@ -666,11 +842,39 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
                         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
-                        const isOtpScreen = onboarding.otpVerificationScreen &&
-                            onboarding.otpVerificationScreen.parentElement;
                         if (!isOtpScreen) {
                             // Only show external wallets if not on OTP screen
                             onboarding.externalWalletContainer.style.display = '';
@@ -1248,8 +1452,13 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
         if (!externalWalletsEnabled || !wagmiAccount) {
             return;
         }
-        // Prevent auto-connect
-        if (wagmiAccount.isConnected && !explicitConnectionRef.current && !autoDisconnectHandledRef.current) {
+        // 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(() => {
@@ -1305,11 +1514,16 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             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
+            // 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);
@@ -1653,6 +1867,177 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
     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,
@@ -1692,6 +2077,12 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
         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,
     };
     // Ref to store latest value to avoid dependency issues (defined after value)
     const valueRef = useRef(value);
@@ -2160,19 +2551,118 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
     }, [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
+ */
+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)
+    const wagmiChains = useMemo(() => {
+        // Use the same logic as availableChains but convert to Core Chain format
+        const chains = [];
+        const chainConfig = config.chains;
+        // Priority 1: Check new chains config format
+        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 2: Check legacy supportedChains format
+        else if (config.supportedChains && config.supportedChains.length > 0) {
+            chains.push(...config.supportedChains);
+        }
+        // Priority 3: Default chains
+        else {
+            chains.push(toCoreChain(EVM_CHAINS.ethereum));
+        }
+        return chains.length > 0 ? chains : [toCoreChain(EVM_CHAINS.ethereum)];
+    }, [config.chains, config.supportedChains]);
     const { wagmiConfig, configError } = useMemo(() => {
         if (!externalWalletsEnabled)
             return { wagmiConfig: null, configError: null };
         try {
-            const configResult = createWagmiConfig(config.supportedChains, config.externalWallets?.walletConnectProjectId, config.externalWallets?.connectors, config.ui?.theme || 'dark');
+            const configResult = createWagmiConfig(wagmiChains, config.externalWallets?.walletConnectProjectId, config.externalWallets?.connectors, config.ui?.theme || 'dark');
             return { wagmiConfig: configResult, configError: null };
         }
         catch (error) {
@@ -2182,9 +2672,19 @@ export function AbstraxnProvider({ config, children }) {
                 configError: error instanceof Error ? error : new Error('Failed to create wagmi config')
             };
         }
-    }, [externalWalletsEnabled, config.supportedChains, config.externalWallets?.walletConnectProjectId, config.externalWallets?.connectors]);
+    }, [externalWalletsEnabled, wagmiChains, config.externalWallets?.walletConnectProjectId, config.externalWallets?.connectors]);
     // 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
@@ -2193,9 +2693,9 @@ export function AbstraxnProvider({ config, children }) {
         if (!wagmiConfig) {
             // Show loading state while config is being created
             // Don't render AbstraxnProviderInner until wagmiConfig is ready
-            return (_jsx(QueryClientProvider, { client: defaultQueryClient, children: _jsx("div", { style: { display: 'none' }, children: "Loading wallet connectors..." }) }));
+            return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx("div", { style: { display: 'none' }, children: "Loading wallet connectors..." }) }));
         }
-        return (_jsx(QueryClientProvider, { client: defaultQueryClient, children: _jsx(WagmiProvider, { config: wagmiConfig, children: _jsx(AbstraxnProviderWithWagmi, { config: config, children: children }) }) }));
+        return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx(WagmiProvider, { config: wagmiConfig, children: _jsx(AbstraxnProviderWithWagmi, { config: config, children: children }) }) }));
     }
     // If external wallets are disabled, use the provider without wagmi
     return _jsx(AbstraxnProviderWithoutWagmi, { config: config, children: children });