signer-test-sdk-react 0.0.12 → 0.0.14

package/dist/src/AbstraxnProvider.d.ts

@@ -2,16 +2,13 @@
  * Abstraxn Wallet Provider - React Context Provider
  * Wrap your app with this provider to use Abstraxn Wallet SDK
  */
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import type { AbstraxnProviderConfig, AbstraxnContextValue } from './types';
-export declare const AbstraxnContext: import("react").Context<AbstraxnContextValue | null>;
+export declare const AbstraxnContext: React.Context<AbstraxnContextValue | null>;
 interface AbstraxnProviderProps {
     config: AbstraxnProviderConfig;
     children: ReactNode;
 }
-/**
- * Main AbstraxnProvider component with optional WagmiProvider wrapper
- */
 export declare function AbstraxnProvider({ config, children }: AbstraxnProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Hook to access Abstraxn Wallet context

package/dist/src/AbstraxnProvider.js

@@ -1,9 +1,9 @@
-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';
@@ -13,15 +13,7 @@ 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);
@@ -147,6 +139,58 @@ 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
@@ -165,16 +209,42 @@ function AbstraxnProviderInner({ config, children, base, wagmi }) {
             // 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 => {
+            // 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 2: If no specific config, include default chains that might be shown
+            // 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
@@ -787,6 +857,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';
@@ -794,11 +868,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 = '';
@@ -1376,8 +1478,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(() => {
@@ -1433,11 +1540,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);
@@ -2465,37 +2577,150 @@ 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(() => {
+    // 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;
-        // Priority 1: Check new chains config format
-        if (chainConfig?.supportedEvmChains && chainConfig.supportedEvmChains.length > 0) {
-            chainConfig.supportedEvmChains.forEach(chainName => {
+        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 2: Check legacy supportedChains format
-        else if (config.supportedChains && config.supportedChains.length > 0) {
+        // Priority 3: Check legacy supportedChains format
+        else if (!hasViemChains && config.supportedChains && config.supportedChains.length > 0) {
             chains.push(...config.supportedChains);
         }
-        // Priority 3: Default chains
-        else {
+        // Priority 4: Default chains
+        else if (!hasViemChains) {
             chains.push(toCoreChain(EVM_CHAINS.ethereum));
         }
-        return chains.length > 0 ? chains : [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)
@@ -2514,6 +2739,16 @@ export function AbstraxnProvider({ config, children }) {
     }, [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
@@ -2522,9 +2757,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 });