@b3dotfun/sdk 0.1.68-alpha.7 → 0.1.68-alpha.9

package/dist/esm/anyspend/react/components/checkout/CryptoPayPanel.js

@@ -317,5 +317,5 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
                             ? "Creating order..."
                             : isSendingDeposit
                                 ? "Confirm in wallet..."
-                                : "Confirming transaction..."] })) : (buttonText) })), isMobile && hasWalletConnector ? (_jsxs("button", { type: "button", onClick: () => setQrExpanded(prev => !prev), className: "flex w-full items-center gap-3 py-1", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), _jsxs("span", { className: "flex items-center gap-1 text-xs font-medium text-gray-400 dark:text-gray-500", children: [qrExpanded ? ("or send directly") : (_jsxs(_Fragment, { children: [_jsx(QrCode, { className: "h-3 w-3" }), " or send with QR code"] })), _jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", qrExpanded && "rotate-180") })] }), _jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })) : (_jsxs("div", { className: "flex items-center gap-3 py-1", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), _jsx("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500", children: "or send directly" }), _jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })), _jsx(AnimatePresence, { initial: false, children: qrExpanded && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeInOut" }, className: "overflow-hidden", children: isCreatingQrOrder && !globalAddress ? (_jsxs("div", { className: "flex items-center justify-center py-8", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx("span", { className: "ml-2 text-sm text-gray-500 dark:text-gray-400", children: "Creating deposit address..." })] })) : globalAddress ? (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "shrink-0 rounded-xl bg-white p-2.5 shadow-sm ring-1 ring-gray-100 dark:bg-white dark:ring-gray-200", children: _jsx(QRCodeSVG, { value: qrValue, size: 132, level: "M", marginSize: 0 }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2.5", children: [_jsxs("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Send", " ", _jsxs("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol] }), " ", "on", " ", _jsxs("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [chainLogoUrl && (_jsx("img", { src: chainLogoUrl, alt: "", className: "mb-px mr-0.5 inline h-3.5 w-3.5 rounded-full align-text-bottom" })), chainName] }), " ", "to:"] }), _jsxs("button", { onClick: handleCopyAddress, className: "group flex items-start gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-left transition-colors hover:border-gray-300 hover:bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/60 dark:hover:border-neutral-600 dark:hover:bg-neutral-800", children: [_jsx("span", { className: "min-w-0 break-all font-mono text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: globalAddress }), _jsx("span", { className: "mt-0.5 shrink-0 text-gray-400 transition-colors group-hover:text-gray-600 dark:group-hover:text-gray-300", children: copied ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : _jsx(Copy, { className: "h-3.5 w-3.5" }) })] }), _jsxs("p", { className: "text-xs leading-snug text-orange-500/80 dark:text-orange-400/80", children: ["Only send ", selectedSrcToken?.symbol, " on", " ", chainLogoUrl && (_jsx("img", { src: chainLogoUrl, alt: "", className: "mr-0.5 inline h-3 w-3 rounded-full align-text-bottom" })), chainName, ". Sending other tokens or using a different network may result in loss of funds."] })] })] })) : null }, "qr-section")) })] }));
+                                : "Confirming transaction..."] })) : (buttonText) })), isMobile && hasWalletConnector ? (_jsxs("button", { type: "button", onClick: () => setQrExpanded(prev => !prev), className: "flex w-full items-center gap-3 py-1", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), _jsxs("span", { className: "flex items-center gap-1 text-xs font-medium text-gray-400 dark:text-gray-500", children: [qrExpanded ? ("or send directly") : (_jsxs(_Fragment, { children: [_jsx(QrCode, { className: "h-3 w-3" }), " or send with QR code"] })), _jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", qrExpanded && "rotate-180") })] }), _jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })) : (_jsxs("div", { className: "flex items-center gap-3 py-1", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), _jsx("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500", children: "or send directly" }), _jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })), _jsx(AnimatePresence, { initial: false, children: qrExpanded && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeInOut" }, className: "overflow-hidden", children: isCreatingQrOrder && !globalAddress ? (_jsxs("div", { className: "flex items-center justify-center py-8", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx("span", { className: "ml-2 text-sm text-gray-500 dark:text-gray-400", children: "Creating deposit address..." })] })) : globalAddress ? (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "shrink-0 rounded-xl bg-white p-2.5 shadow-sm ring-1 ring-gray-100 dark:bg-white dark:ring-gray-200", children: _jsx(QRCodeSVG, { value: qrValue, size: 132, level: "M", marginSize: 0 }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2.5", children: [_jsxs("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Send", " ", _jsxs("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol] }), " ", "on", " ", _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-gray-100 px-1.5 py-0.5 align-middle font-semibold text-gray-900 dark:bg-white/10 dark:text-gray-100", children: [chainLogoUrl && _jsx("img", { src: chainLogoUrl, alt: "", className: "h-3.5 w-3.5 rounded-full" }), chainName] }), " ", "to:"] }), _jsxs("button", { onClick: handleCopyAddress, className: "group flex items-start gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-left transition-colors hover:border-gray-300 hover:bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/60 dark:hover:border-neutral-600 dark:hover:bg-neutral-800", children: [_jsx("span", { className: "min-w-0 break-all font-mono text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: globalAddress }), _jsx("span", { className: "mt-0.5 shrink-0 text-gray-400 transition-colors group-hover:text-gray-600 dark:group-hover:text-gray-300", children: copied ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : _jsx(Copy, { className: "h-3.5 w-3.5" }) })] }), _jsxs("p", { className: "text-xs leading-snug text-orange-500/80 dark:text-orange-400/80", children: ["Only send ", selectedSrcToken?.symbol, " on ", _jsx("span", { className: "font-semibold", children: chainName }), ". Sending other tokens or using a different network may result in loss of funds."] })] })] })) : null }, "qr-section")) })] }));
 }

package/dist/esm/anyspend/react/components/checkout/FiatCheckoutPanel.js

@@ -5,18 +5,27 @@ import { USDC_BASE } from "../../../../anyspend/constants/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { formatUnits } from "../../../../shared/utils/number.js";
 import { getStripePromise } from "../../../../shared/utils/payment.utils.js";
-import { ShinyButton, TextShimmer, useB3Config, useTokenData } from "../../../../global-account/react/index.js";
+import { ShinyButton, TextShimmer, useB3Config, useModalStore, useTokenData } from "../../../../global-account/react/index.js";
+import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { Loader2, Lock } from "lucide-react";
+import { Loader2, Lock, Wallet } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useAccount } from "wagmi";
 import { KycGate } from "./KycGate.js";
 export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, kycEnabled = false, }) {
     // Stable refs for callback props to avoid re-triggering effects
     const onErrorRef = useRef(onError);
     onErrorRef.current = onError;
+    const { address } = useAccount();
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
     const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
-    const { theme, stripePublishableKey } = useB3Config();
+    const { theme, stripePublishableKey, partnerId } = useB3Config();
+    const handleConnectWallet = useCallback(() => {
+        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
+        setB3ModalOpen(true);
+    }, [setB3ModalContentType, setB3ModalOpen, partnerId]);
     // Clean decimal string for API calls (no commas, no subscripts)
     const formattedAmount = useMemo(() => {
         const decimals = tokenData?.decimals || 18;
@@ -73,13 +82,28 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
             }
         },
         onError: (error) => {
-            setOrderError(error.message || "Failed to create payment order.");
+            // Backend requires KYC even when kycEnabled=false — reset to show KycGate
+            if (error.message?.includes("KYC verification required")) {
+                setKycApproved(false);
+                orderCreatedRef.current = false;
+            }
+            else {
+                setOrderError(error.message || "Failed to create payment order.");
+            }
             onErrorRef.current?.(error);
         },
     });
+    // Reset order error when wallet connects so the user gets a clean state
+    useEffect(() => {
+        if (address && orderError) {
+            setOrderError(null);
+            orderCreatedRef.current = false;
+        }
+    }, [address]); // eslint-disable-line react-hooks/exhaustive-deps
     // Auto-create onramp order when Stripe Web2 is supported, KYC approved, and all data is ready
     useEffect(() => {
-        if (!isLoadingGeo &&
+        if (address &&
+            !isLoadingGeo &&
             (!isStablecoin ? !isLoadingAnyspendQuote : true) &&
             usdAmount &&
             parseFloat(usdAmount) > 0 &&
@@ -120,6 +144,7 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
             });
         }
     }, [
+        address,
         isLoadingGeo,
         isStablecoin,
         isLoadingAnyspendQuote,
@@ -153,6 +178,10 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
     if (!kycApproved) {
         return _jsx(KycGate, { themeColor: themeColor, classes: classes, enabled: true, onStatusResolved: handleKycResolved });
     }
+    // No wallet connected — prompt to connect before attempting card payment
+    if (!address) {
+        return (_jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-fiat-connect flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [_jsx(Wallet, { className: "h-8 w-8 text-gray-400" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Connect wallet to pay with card" }), _jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "A wallet connection is required to complete card payment." })] }), _jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleConnectWallet, children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Wallet, { className: "h-4 w-4" }), "Connect Wallet"] }) })] }));
+    }
     // Order creation error - show with retry
     if (orderError) {
         return (_jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-fiat-error flex flex-col items-center gap-3 py-4", classes?.fiatPanel), children: [_jsx("p", { className: "text-sm text-red-500", children: orderError }), _jsx("button", { onClick: () => {

package/dist/esm/anyspend/react/components/checkout/KycGate.js

@@ -1,24 +1,34 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../shared/utils/cn.js";
-import { ShinyButton, TextShimmer, useAuth, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
+import { ShinyButton, TextShimmer, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
 import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
-import { Loader2, ShieldCheck, AlertTriangle, Clock } from "lucide-react";
+import { Loader2, ShieldCheck, AlertTriangle, Clock, Wallet } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useCreateKycInquiry, useKycStatus, useVerifyKyc } from "../../hooks/useKycStatus.js";
+import { useAccount } from "wagmi";
+import { useCreateKycInquiry, useKycStatus, useVerifyKyc, useWalletAuthHeaders } from "../../hooks/useKycStatus.js";
 export function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
-    const { isAuthenticated, isAuthenticating } = useAuth();
-    const { kycStatus, isLoadingKycStatus, refetchKycStatus } = useKycStatus(enabled);
+    const { address } = useAccount();
+    const { partnerId } = useB3Config();
+    // Gate the status fetch behind explicit user consent so the wallet
+    // signature prompt doesn't fire automatically on tab open.
+    const [userInitiated, setUserInitiated] = useState(false);
+    const { getHeaders: preCacheKycHeaders } = useWalletAuthHeaders();
+    const { kycStatus, isLoadingKycStatus, refetchKycStatus } = useKycStatus(enabled && userInitiated);
     const { createInquiry, isCreatingInquiry } = useCreateKycInquiry();
     const { verifyKyc, isVerifying } = useVerifyKyc();
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-    const { partnerId } = useB3Config();
     const [personaOpen, setPersonaOpen] = useState(false);
     const [personaError, setPersonaError] = useState(null);
     const [personaCancelled, setPersonaCancelled] = useState(false);
     const prevStatusRef = useRef(null);
+    // Reset consent gate when wallet changes so the signature prompt isn't
+    // skipped for a different (or reconnected) wallet with no cached headers.
+    useEffect(() => {
+        setUserInitiated(false);
+    }, [address]);
     // Notify parent when status resolves
     useEffect(() => {
         if (!kycStatus)
@@ -97,7 +107,7 @@ export function KycGate({ themeColor, classes, enabled = false, onStatusResolved
             setPersonaError(error instanceof Error ? error.message : "Failed to start verification");
         }
     }, [createInquiry, kycStatus, openPersonaFlow]);
-    const handleSignIn = useCallback(() => {
+    const handleConnectWallet = useCallback(() => {
         setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
         setB3ModalOpen(true);
     }, [setB3ModalContentType, setB3ModalOpen, partnerId]);
@@ -112,13 +122,25 @@ export function KycGate({ themeColor, classes, enabled = false, onStatusResolved
             environment: kycStatus.config?.environment,
         });
     }, [kycStatus, openPersonaFlow]);
-    // Auth loading state
-    if (isAuthenticating) {
-        return (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: cn("anyspend-kyc-loading flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Checking authentication..." })] }));
+    // No wallet connected — prompt to connect wallet (same pattern as crypto tab)
+    if (!address) {
+        return (_jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-kyc-auth flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [_jsx(ShieldCheck, { className: "h-8 w-8 text-gray-400" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Connect wallet to pay with card" }), _jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "A wallet connection is required to complete identity verification." })] }), _jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleConnectWallet, children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Wallet, { className: "h-4 w-4" }), "Connect Wallet"] }) })] }));
     }
-    // Not authenticated — prompt to login
-    if (!isAuthenticated) {
-        return (_jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-kyc-auth flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [_jsx(ShieldCheck, { className: "h-8 w-8 text-gray-400" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Login required to pay with card" }), _jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "Sign in to your B3 account to complete identity verification." })] }), _jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleSignIn, children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(ShieldCheck, { className: "h-4 w-4" }), "Sign In"] }) })] }));
+    // Wallet connected but user hasn't kicked off the KYC check yet
+    if (!userInitiated) {
+        return (_jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-kyc-prompt flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [_jsx(ShieldCheck, { className: "h-8 w-8 text-blue-500" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Identity verification required" }), _jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "Card payments require a one-time identity check. This takes about 2 minutes." })] }), _jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: async () => {
+                        // Pre-sign in user-gesture context so React Query's queryFn
+                        // can reuse the cached headers without a second popup.
+                        // Only enable the query on success — if the user rejects the
+                        // signature, leave userInitiated=false and stay on this screen.
+                        try {
+                            await preCacheKycHeaders();
+                            setUserInitiated(true);
+                        }
+                        catch {
+                            // User rejected signature — stay on consent screen
+                        }
+                    }, children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(ShieldCheck, { className: "h-4 w-4" }), "Continue to Verify"] }) })] }));
     }
     // Loading KYC status state
     if (isLoadingKycStatus) {

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js

@@ -7,7 +7,8 @@ import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
-import { useWalletAuthHeaders } from "./useKycStatus.js";
+import { useAccount } from "wagmi";
+import { getCachedWalletHeaders } from "./useKycStatus.js";
 import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.js";
 /**
  * Hook for creating onramp orders in the Anyspend protocol
@@ -16,7 +17,7 @@ import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.j
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = useB3Config();
-    const { getHeaders: getWalletAuthHeaders } = useWalletAuthHeaders();
+    const { address } = useAccount();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = useValidatedClientReferenceId();
     // Get fingerprint data
@@ -40,9 +41,12 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                 const srcAmountOnRampInWei = parseUnits(srcFiatAmount, USDC_BASE.decimals);
                 // For card payments, include wallet auth headers so the backend can verify
                 // KYC by the signing wallet address (may differ from the B3 JWT address).
+                // Only use already-cached headers — never trigger a fresh wallet signature
+                // here, as that would prompt the user without their explicit consent.
+                // KycGate pre-caches the headers in the "Continue to Verify" user-gesture.
                 let kycWalletHeaders;
-                if (onramp.vendor === "stripe-web2") {
-                    kycWalletHeaders = await getWalletAuthHeaders().catch(() => undefined);
+                if (onramp.vendor === "stripe-web2" && address) {
+                    kycWalletHeaders = getCachedWalletHeaders(address);
                 }
                 return await anyspendService.createOrder({
                     recipientAddress: normalizeAddress(recipientAddress),

package/dist/esm/anyspend/react/hooks/useKycStatus.d.ts

@@ -17,6 +17,11 @@ interface KycInquiryResponse {
 interface KycVerifyResponse {
     status: string;
 }
+/**
+ * Returns cached wallet auth headers without triggering a wallet signature prompt.
+ * Returns undefined if no valid cache exists for the given address.
+ */
+export declare function getCachedWalletHeaders(address: string): Record<string, string> | undefined;
 /**
  * Returns a function that builds the wallet-signature auth headers.
  * Caches signatures for 4 minutes (server allows 5-minute window).

package/dist/esm/anyspend/react/hooks/useKycStatus.js

@@ -8,6 +8,16 @@ function buildWalletAuthMessage(walletAddress, timestamp) {
 }
 /** Module-level signature cache to avoid repeated wallet prompts within the 5-minute window. */
 const headerCache = new Map();
+/**
+ * Returns cached wallet auth headers without triggering a wallet signature prompt.
+ * Returns undefined if no valid cache exists for the given address.
+ */
+export function getCachedWalletHeaders(address) {
+    const cached = headerCache.get(address.toLowerCase());
+    if (cached && Date.now() < cached.expiresAt)
+        return cached.headers;
+    return undefined;
+}
 /**
  * Returns a function that builds the wallet-signature auth headers.
  * Caches signatures for 4 minutes (server allows 5-minute window).

package/dist/esm/global-account/react/components/SignInWithB3/SignIn.js

@@ -13,7 +13,7 @@ export function SignIn(props) {
     const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = useAccountWallet();
     const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
     const isMobile = useIsMobile();
-    const { logout } = useAuthentication(partnerId);
+    const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     const onDisconnect = async () => {
         await logout();
     };

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -14,16 +14,23 @@ const MAX_REFETCH_ATTEMPTS = 20;
  */
 export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
     const { automaticallySetFirstEoa } = useB3Config();
-    const { user, logout } = useAuthentication(partnerId);
-    // FIXME Logout before login to ensure a clean state
+    // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
+    // AuthenticationProvider is the sole owner of useAutoConnect to avoid competing auth cycles.
+    const { user, logout } = useAuthentication(partnerId, { skipAutoConnect: true });
+    // Tracks whether the pre-login logout has finished.
+    // We must not render ConnectEmbed until logout (wallet disconnect) completes,
+    // otherwise the wallet state disrupts ConnectEmbed causing a blank modal.
+    const [readyToShowLogin, setReadyToShowLogin] = useState(source === "requestPermissions");
     const hasLoggedOutRef = useRef(false);
     useEffect(() => {
         if (hasLoggedOutRef.current)
             return;
         if (source !== "requestPermissions") {
             debug("Logging out before login");
-            logout();
             hasLoggedOutRef.current = true;
+            logout().finally(() => {
+                setReadyToShowLogin(true);
+            });
         }
     }, [source, logout]);
     const [step, setStep] = useState(source === "requestPermissions" ? null : "login");
@@ -228,8 +235,9 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
         content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
     }
     else if (step === "login") {
-        // Show loading spinner
-        if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+        // Show loading spinner while: authenticating, waiting for pre-login logout to finish,
+        // or fetching signers.
+        if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
             content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
         }
         else {

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Privy.js

@@ -8,7 +8,7 @@ export function SignInWithB3Privy({ onSuccess, onError, chain }) {
     const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(chain, onSuccess);
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-    const { logout } = useAuthentication(partnerId);
+    const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     debug("@@SignInWithB3Privy", {
         isLoading,
         fullToken,

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.d.ts

@@ -19,5 +19,5 @@ interface LoginStepContainerProps {
     partnerId?: string;
 }
 export declare function LoginStepContainer({ children, partnerId }: LoginStepContainerProps): import("react/jsx-runtime").JSX.Element;
-export declare function LoginStep({ onSuccess, chain }: LoginStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginStep({ onSuccess, chain }: LoginStepProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.js

@@ -3,6 +3,7 @@ import { useAuthentication, useB3Config, useQueryB3 } from "../../../../../globa
 import { ecosystemWalletId } from "../../../../../shared/constants/index.js";
 import { client } from "../../../../../shared/utils/thirdweb.js";
 import { ConnectEmbed, darkTheme, lightTheme } from "thirdweb/react";
+import { useMemo } from "react";
 import { ecosystemWallet } from "thirdweb/wallets";
 export function LoginStepContainer({ children, partnerId }) {
     const { data: partner } = useQueryB3("global-accounts-partners", "find", {
@@ -14,30 +15,17 @@ export function LoginStepContainer({ children, partnerId }) {
     const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
     return (_jsxs("div", { className: "bg-b3-react-background flex flex-col items-center justify-center pt-6", children: [partnerLogo && (_jsx("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
 }
-export function LoginStep({ onSuccess, chain }) {
-    const { partnerId, theme } = useB3Config();
-    const wallet = ecosystemWallet(ecosystemWalletId, {
-        partnerId: partnerId,
-    });
-    const { onConnect } = useAuthentication(partnerId);
-    return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx(ConnectEmbed, { showThirdwebBranding: false, client: client, chain: chain, wallets: [wallet], theme: theme === "light"
-                ? lightTheme({
-                    colors: {
-                        modalBg: "hsl(var(--b3-react-background))",
-                    },
-                })
-                : darkTheme({
-                    colors: {
-                        modalBg: "hsl(var(--b3-react-background))",
-                    },
-                }), style: {
-                width: "100%",
-                height: "100%",
-                border: 0,
-            }, header: {
-                title: "Sign in with B3",
-                titleIcon: "https://cdn.b3.fun/b3_logo.svg",
-            }, className: "b3-login-step", onConnect: async (wallet, allConnectedWallets) => {
+/** Inner component that only mounts when partnerId is a non-empty string.
+ *  Keeps all hooks unconditional without calling useAuthentication(""). */
+function LoginStepContent({ onSuccess, chain, partnerId, theme, }) {
+    const wallet = useMemo(() => ecosystemWallet(ecosystemWalletId, { partnerId }), [partnerId]);
+    // skipAutoConnect: AuthenticationProvider already owns the auto-connect instance.
+    // Creating another here would cause a second authentication cycle (another 401 attempt)
+    // that makes the modal flash between spinner and blank before finally showing the login form.
+    const { onConnect } = useAuthentication(partnerId, { skipAutoConnect: true });
+    return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx(ConnectEmbed, { showThirdwebBranding: false, autoConnect: false, client: client, chain: chain, wallets: [wallet], theme: theme === "light"
+                ? lightTheme({ colors: { modalBg: "hsl(var(--b3-react-background))" } })
+                : darkTheme({ colors: { modalBg: "hsl(var(--b3-react-background))" } }), style: { width: "100%", height: "100%", border: 0 }, header: { title: "Sign in with B3", titleIcon: "https://cdn.b3.fun/b3_logo.svg" }, className: "b3-login-step", onConnect: async (wallet, allConnectedWallets) => {
                 await onConnect(wallet, allConnectedWallets);
                 const account = wallet.getAccount();
                 if (!account)
@@ -45,3 +33,12 @@ export function LoginStep({ onSuccess, chain }) {
                 await onSuccess(account);
             } }) }));
 }
+export function LoginStep({ onSuccess, chain }) {
+    const { partnerId, theme } = useB3Config();
+    // partnerId may be undefined during the brief B3Provider hydration window.
+    // Return null rather than rendering ConnectEmbed with an invalid ecosystem
+    // wallet config (which causes a blank screen).
+    if (!partnerId)
+        return null;
+    return _jsx(LoginStepContent, { onSuccess: onSuccess, chain: chain, partnerId: partnerId, theme: theme });
+}

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js

@@ -13,7 +13,7 @@ export function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInit
     const { connect } = useConnect(partnerId, chain);
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-    const { logout } = useAuthentication(partnerId);
+    const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     const { connect: connectTW } = useConnectTW();
     // Split strategies into auth and wallet types
     const authStrategies = strategies.filter(s => !isWalletType(s));

package/dist/esm/global-account/react/hooks/useAuthentication.d.ts

@@ -1,6 +1,8 @@
 import { Wallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
-export declare function useAuthentication(partnerId: string): {
+export declare function useAuthentication(partnerId: string, { skipAutoConnect }?: {
+    skipAutoConnect?: boolean;
+}): {
     logout: (callback?: () => void) => Promise<void>;
     isAuthenticated: boolean;
     isReady: boolean;

package/dist/esm/global-account/react/hooks/useAuthentication.js

@@ -15,11 +15,26 @@ import { createWagmiConfig } from "../utils/createWagmiConfig.js";
 import { useTWAuth } from "./useTWAuth.js";
 import { useUserQuery } from "./useUserQuery.js";
 const debug = debugB3React("useAuthentication");
-export function useAuthentication(partnerId) {
+export function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
     const { onConnectCallback, onLogoutCallback } = useContext(LocalSDKContext);
     const { disconnect } = useDisconnect();
     const wallets = useConnectedWallets();
+    // Keep refs so logout() always disconnects current wallets, not stale closure values.
+    // autoConnectCore captures onConnect (and thus logout) from the first render before wallets
+    // are populated — without these refs, logout() would capture wallets=[] and disconnect nothing.
+    const walletsRef = useRef(wallets);
+    useEffect(() => {
+        walletsRef.current = wallets;
+    }, [wallets]);
     const activeWallet = useActiveWallet();
+    // Track the active wallet by ref so logout() can disconnect the exact reference
+    // stored in thirdweb's activeWalletStore. walletsRef.current (from useConnectedWallets)
+    // may hold a different object reference than what thirdweb considers "active",
+    // causing the identity check in onWalletDisconnect to fail silently.
+    const activeWalletRef = useRef(activeWallet);
+    useEffect(() => {
+        activeWalletRef.current = activeWallet;
+    }, [activeWallet]);
     const isAuthenticated = useAuthStore(state => state.isAuthenticated);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
     const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -127,13 +142,26 @@ export function useAuthentication(partnerId) {
     }, [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
     const logout = useCallback(async (callback) => {
         // Only disconnect ecosystem/smart wallets, preserve EOA wallets (e.g. MetaMask)
-        // so they remain available after re-login
-        wallets.forEach(wallet => {
+        // so they remain available after re-login.
+        // Use walletsRef.current (not the stale closure value) so we always get current wallets —
+        // autoConnectCore captures logout from the first render when wallets is still [].
+        walletsRef.current.forEach(wallet => {
             debug("@@logout:wallet", wallet.id);
             if (wallet.id.startsWith("ecosystem.") || wallet.id === "smart") {
                 disconnect(wallet);
             }
         });
+        // Also disconnect the active wallet using the exact reference from thirdweb's
+        // activeWalletStore. The wallets in walletsRef (from useConnectedWallets) may be
+        // different object references than what thirdweb holds as "active". Thirdweb's
+        // onWalletDisconnect uses strict identity (===) to decide whether to clear
+        // activeAccountStore — if the reference doesn't match, activeAccount stays set
+        // and ConnectEmbed renders show=false (blank).
+        if (activeWalletRef.current &&
+            (activeWalletRef.current.id.startsWith("ecosystem.") || activeWalletRef.current.id === "smart")) {
+            debug("@@logout:disconnecting active wallet", activeWalletRef.current.id);
+            disconnect(activeWalletRef.current);
+        }
         // Clear user-specific storage but preserve wallet connection state
         // so EOA wallets (e.g. MetaMask) can auto-reconnect on next login
         if (typeof localStorage !== "undefined") {
@@ -144,12 +172,19 @@ export function useAuthentication(partnerId) {
         debug("@@logout:loggedOut");
         setIsAuthenticated(false);
         setIsConnected(false);
+        // Reset isAuthenticating so any in-flight page-load auto-connect that set it true
+        // does not keep the login modal spinner stuck after logout() is called.
+        setIsAuthenticating(false);
         setUser();
         callback?.();
         if (onLogoutCallback) {
             await onLogoutCallback();
         }
-    }, [disconnect, wallets, setIsAuthenticated, setUser, setIsConnected, onLogoutCallback]);
+    }, 
+    // wallets intentionally omitted — we use walletsRef.current so this callback stays stable
+    // and always operates on current wallets even when captured in stale closures.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disconnect, setIsAuthenticated, setIsAuthenticating, setUser, setIsConnected, onLogoutCallback]);
     const onConnect = useCallback(async (_walleAutoConnectedWith, allConnectedWallets) => {
         debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
         try {
@@ -197,23 +232,32 @@ export function useAuthentication(partnerId) {
     ]);
     const { isLoading: useAutoConnectLoading } = useAutoConnect({
         client,
-        wallets: [wallet],
+        // When skipAutoConnect is true (e.g. LoginStepContent, SignInWithB3Flow), pass an empty
+        // wallets array so useAutoConnect completes immediately without firing onConnect.
+        // Only AuthenticationProvider (the primary instance) should own auto-connect.
+        wallets: skipAutoConnect ? [] : [wallet],
         onConnect,
         onTimeout: () => {
+            if (skipAutoConnect)
+                return;
             logout().catch(error => {
                 debug("@@useAuthentication:logout on timeout failed", { error });
             });
         },
     });
     /**
-     * useAutoConnectLoading starts as false
+     * useAutoConnectLoading starts as false.
+     * Only the primary (non-skip) instance manages isAuthenticating via this effect
+     * to avoid race conditions when multiple useAuthentication instances are mounted.
      */
     useEffect(() => {
+        if (skipAutoConnect)
+            return;
         if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
             setIsAuthenticating(false);
         }
         useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
-    }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating]);
+    }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating, skipAutoConnect]);
     const isReady = isAuthenticated && !isAuthenticating;
     return {
         logout,

package/dist/esm/global-account/react/hooks/useGetAllTWSigners.js

@@ -62,7 +62,8 @@ export function useGetAllTWSigners({ chain, accountAddress, queryOptions }) {
             });
             return result;
         },
-        enabled: Boolean(chain && accountAddress),
+        // Respect queryOptions.enabled if explicitly set (e.g. signersEnabled=false from SignInWithB3Flow)
+        enabled: queryOptions?.enabled !== false && Boolean(chain && accountAddress),
         refetchOnMount: true,
         refetchOnWindowFocus: true,
         refetchOnReconnect: true,