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

package/dist/cjs/anyspend/react/components/AnySpend.js

@@ -38,7 +38,6 @@ const GasIndicator_1 = require("./common/GasIndicator");
 const OrderDetails_1 = require("./common/OrderDetails");
 const OrderHistory_1 = require("./common/OrderHistory");
 const KycGate_1 = require("./checkout/KycGate");
-const useKycStatus_1 = require("../hooks/useKycStatus");
 const LoginStep_1 = require("../../../global-account/react/components/SignInWithB3/steps/LoginStep");
 const PanelOnramp_1 = require("./common/PanelOnramp");
 const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
@@ -82,10 +81,6 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     // in the same frame that onStatusResolved sets it (setState is async).
     // When kycEnabled is false (default), pre-approve so the KYC gate is skipped.
     const kycApprovedRef = (0, react_4.useRef)(!kycEnabled);
-    // Pre-warm wallet auth headers inside user-gesture context (button click)
-    // so the signing prompt fires before we navigate away — browsers block
-    // wallet popups triggered from async/non-gesture contexts (React Query queryFn).
-    const { getHeaders: getKycHeaders } = (0, useKycStatus_1.useWalletAuthHeaders)();
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
@@ -852,11 +847,9 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     return;
                 }
                 if (!kycApprovedRef.current) {
-                    // Pre-sign the KYC auth message NOW (user-gesture context) so the
-                    // result is cached before useKycStatus fires its queryFn inside the
-                    // FIAT_KYC panel. Wallets/browsers block signing prompts from async
-                    // (non-gesture) contexts, which is exactly what React Query uses.
-                    await getKycHeaders().catch(() => { });
+                    // Navigate to KYC gate. KycGate shows an explicit "Continue to Verify"
+                    // CTA and pre-signs from that user-gesture context before enabling
+                    // the useKycStatus query — so no surprise signature popup here.
                     navigateToPanel(PanelView.FIAT_KYC, "forward");
                     return;
                 }

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

@@ -320,5 +320,5 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
                             ? "Creating order..."
                             : isSendingDeposit
                                 ? "Confirm in wallet..."
-                                : "Confirming transaction..."] })) : (buttonText) })), isMobile && hasWalletConnector ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setQrExpanded(prev => !prev), className: "flex w-full items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1 text-xs font-medium text-gray-400 dark:text-gray-500", children: [qrExpanded ? ("or send directly") : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.QrCode, { className: "h-3 w-3" }), " or send with QR code"] })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: (0, cn_1.cn)("h-3 w-3 transition-transform", qrExpanded && "rotate-180") })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500", children: "or send directly" }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { initial: false, children: qrExpanded && ((0, jsx_runtime_1.jsx)(react_3.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-sm text-gray-500 dark:text-gray-400", children: "Creating deposit address..." })] })) : globalAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: qrValue, size: 132, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Send", " ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol] }), " ", "on", " ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [chainLogoUrl && ((0, jsx_runtime_1.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:"] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "min-w-0 break-all font-mono text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: globalAddress }), (0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3.5 w-3.5 text-green-500" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-3.5 w-3.5" }) })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs leading-snug text-orange-500/80 dark:text-orange-400/80", children: ["Only send ", selectedSrcToken?.symbol, " on", " ", chainLogoUrl && ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setQrExpanded(prev => !prev), className: "flex w-full items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1 text-xs font-medium text-gray-400 dark:text-gray-500", children: [qrExpanded ? ("or send directly") : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.QrCode, { className: "h-3 w-3" }), " or send with QR code"] })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: (0, cn_1.cn)("h-3 w-3 transition-transform", qrExpanded && "rotate-180") })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500", children: "or send directly" }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { initial: false, children: qrExpanded && ((0, jsx_runtime_1.jsx)(react_3.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-sm text-gray-500 dark:text-gray-400", children: "Creating deposit address..." })] })) : globalAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: qrValue, size: 132, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Send", " ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol] }), " ", "on", " ", (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)("img", { src: chainLogoUrl, alt: "", className: "h-3.5 w-3.5 rounded-full" }), chainName] }), " ", "to:"] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "min-w-0 break-all font-mono text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: globalAddress }), (0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3.5 w-3.5 text-green-500" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-3.5 w-3.5" }) })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs leading-snug text-orange-500/80 dark:text-orange-400/80", children: ["Only send ", selectedSrcToken?.symbol, " on ", (0, jsx_runtime_1.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/cjs/anyspend/react/components/checkout/FiatCheckoutPanel.js

@@ -9,17 +9,26 @@ const cn_1 = require("../../../../shared/utils/cn");
 const number_1 = require("../../../../shared/utils/number");
 const payment_utils_1 = require("../../../../shared/utils/payment.utils");
 const react_2 = require("../../../../global-account/react");
+const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
 const react_4 = require("react");
+const wagmi_1 = require("wagmi");
 const KycGate_1 = require("./KycGate");
 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 = (0, react_4.useRef)(onError);
     onErrorRef.current = onError;
+    const { address } = (0, wagmi_1.useAccount)();
+    const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
+    const setB3ModalContentType = (0, react_2.useModalStore)(state => state.setB3ModalContentType);
     const { data: tokenData } = (0, react_2.useTokenData)(destinationTokenChainId, destinationTokenAddress);
-    const { theme, stripePublishableKey } = (0, react_2.useB3Config)();
+    const { theme, stripePublishableKey, partnerId } = (0, react_2.useB3Config)();
+    const handleConnectWallet = (0, react_4.useCallback)(() => {
+        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: b3Chain_1.thirdwebB3Chain, partnerId });
+        setB3ModalOpen(true);
+    }, [setB3ModalContentType, setB3ModalOpen, partnerId]);
     // Clean decimal string for API calls (no commas, no subscripts)
     const formattedAmount = (0, react_4.useMemo)(() => {
         const decimals = tokenData?.decimals || 18;
@@ -76,13 +85,28 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
             }
         },
         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
+    (0, react_4.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
     (0, react_4.useEffect)(() => {
-        if (!isLoadingGeo &&
+        if (address &&
+            !isLoadingGeo &&
             (!isStablecoin ? !isLoadingAnyspendQuote : true) &&
             usdAmount &&
             parseFloat(usdAmount) > 0 &&
@@ -123,6 +147,7 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
             });
         }
     }, [
+        address,
         isLoadingGeo,
         isStablecoin,
         isLoadingAnyspendQuote,
@@ -156,6 +181,10 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
     if (!kycApproved) {
         return (0, jsx_runtime_1.jsx)(KycGate_1.KycGate, { themeColor: themeColor, classes: classes, enabled: true, onStatusResolved: handleKycResolved });
     }
+    // No wallet connected — prompt to connect before attempting card payment
+    if (!address) {
+        return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-connect flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-8 w-8 text-gray-400" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Connect wallet to pay with card" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "A wallet connection is required to complete card payment." })] }), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleConnectWallet, children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4" }), "Connect Wallet"] }) })] }));
+    }
     // Order creation error - show with retry
     if (orderError) {
         return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-error flex flex-col items-center gap-3 py-4", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-500", children: orderError }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {

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

@@ -42,19 +42,29 @@ const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
 const react_3 = require("react");
+const wagmi_1 = require("wagmi");
 const useKycStatus_1 = require("../../hooks/useKycStatus");
 function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
-    const { isAuthenticated, isAuthenticating } = (0, react_1.useAuth)();
-    const { kycStatus, isLoadingKycStatus, refetchKycStatus } = (0, useKycStatus_1.useKycStatus)(enabled);
+    const { address } = (0, wagmi_1.useAccount)();
+    const { partnerId } = (0, react_1.useB3Config)();
+    // Gate the status fetch behind explicit user consent so the wallet
+    // signature prompt doesn't fire automatically on tab open.
+    const [userInitiated, setUserInitiated] = (0, react_3.useState)(false);
+    const { getHeaders: preCacheKycHeaders } = (0, useKycStatus_1.useWalletAuthHeaders)();
+    const { kycStatus, isLoadingKycStatus, refetchKycStatus } = (0, useKycStatus_1.useKycStatus)(enabled && userInitiated);
     const { createInquiry, isCreatingInquiry } = (0, useKycStatus_1.useCreateKycInquiry)();
     const { verifyKyc, isVerifying } = (0, useKycStatus_1.useVerifyKyc)();
     const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
-    const { partnerId } = (0, react_1.useB3Config)();
     const [personaOpen, setPersonaOpen] = (0, react_3.useState)(false);
     const [personaError, setPersonaError] = (0, react_3.useState)(null);
     const [personaCancelled, setPersonaCancelled] = (0, react_3.useState)(false);
     const prevStatusRef = (0, react_3.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.
+    (0, react_3.useEffect)(() => {
+        setUserInitiated(false);
+    }, [address]);
     // Notify parent when status resolves
     (0, react_3.useEffect)(() => {
         if (!kycStatus)
@@ -133,7 +143,7 @@ function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
             setPersonaError(error instanceof Error ? error.message : "Failed to start verification");
         }
     }, [createInquiry, kycStatus, openPersonaFlow]);
-    const handleSignIn = (0, react_3.useCallback)(() => {
+    const handleConnectWallet = (0, react_3.useCallback)(() => {
         setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: b3Chain_1.thirdwebB3Chain, partnerId });
         setB3ModalOpen(true);
     }, [setB3ModalContentType, setB3ModalOpen, partnerId]);
@@ -148,13 +158,25 @@ function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
             environment: kycStatus.config?.environment,
         });
     }, [kycStatus, openPersonaFlow]);
-    // Auth loading state
-    if (isAuthenticating) {
-        return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-kyc-loading flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-kyc-auth flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-8 w-8 text-gray-400" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Connect wallet to pay with card" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "A wallet connection is required to complete identity verification." })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleConnectWallet, children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4" }), "Connect Wallet"] }) })] }));
     }
-    // Not authenticated — prompt to login
-    if (!isAuthenticated) {
-        return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-kyc-auth flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-8 w-8 text-gray-400" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Login required to pay with card" }), (0, jsx_runtime_1.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." })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleSignIn, children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-4 w-4" }), "Sign In"] }) })] }));
+    // Wallet connected but user hasn't kicked off the KYC check yet
+    if (!userInitiated) {
+        return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-kyc-prompt flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-8 w-8 text-blue-500" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Identity verification required" }), (0, jsx_runtime_1.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." })] }), (0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-4 w-4" }), "Continue to Verify"] }) })] }));
     }
     // Loading KYC status state
     if (isLoadingKycStatus) {

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

@@ -10,6 +10,7 @@ const react_query_1 = require("@tanstack/react-query");
 const react_2 = require("react");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
+const wagmi_1 = require("wagmi");
 const useKycStatus_1 = require("./useKycStatus");
 const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId");
 /**
@@ -19,7 +20,7 @@ const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId
 function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = (0, react_1.useB3Config)();
-    const { getHeaders: getWalletAuthHeaders } = (0, useKycStatus_1.useWalletAuthHeaders)();
+    const { address } = (0, wagmi_1.useAccount)();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data
@@ -43,9 +44,12 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                 const srcAmountOnRampInWei = (0, viem_1.parseUnits)(srcFiatAmount, constants_1.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 = (0, useKycStatus_1.getCachedWalletHeaders)(address);
                 }
                 return await anyspend_1.anyspendService.createOrder({
                     recipientAddress: (0, utils_1.normalizeAddress)(recipientAddress),

package/dist/cjs/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/cjs/anyspend/react/hooks/useKycStatus.js

@@ -1,6 +1,7 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCachedWalletHeaders = getCachedWalletHeaders;
 exports.useWalletAuthHeaders = useWalletAuthHeaders;
 exports.useKycStatus = useKycStatus;
 exports.useCreateKycInquiry = useCreateKycInquiry;
@@ -14,6 +15,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.
+ */
+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/cjs/global-account/react/components/SignInWithB3/SignIn.js

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

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

@@ -17,16 +17,23 @@ const MAX_REFETCH_ATTEMPTS = 20;
  */
 function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
     const { automaticallySetFirstEoa } = (0, react_1.useB3Config)();
-    const { user, logout } = (0, react_1.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 } = (0, react_1.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] = (0, react_2.useState)(source === "requestPermissions");
     const hasLoggedOutRef = (0, react_2.useRef)(false);
     (0, react_2.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] = (0, react_2.useState)(source === "requestPermissions" ? null : "login");
@@ -231,8 +238,9 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
         content = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.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 = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: (0, jsx_runtime_1.jsx)(react_1.Loading, { variant: "white", size: "lg" }) }) }));
         }
         else {

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

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

package/dist/cjs/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/cjs/global-account/react/components/SignInWithB3/steps/LoginStep.js

@@ -7,6 +7,7 @@ const react_1 = require("../../../../../global-account/react");
 const constants_1 = require("../../../../../shared/constants");
 const thirdweb_1 = require("../../../../../shared/utils/thirdweb");
 const react_2 = require("thirdweb/react");
+const react_3 = require("react");
 const wallets_1 = require("thirdweb/wallets");
 function LoginStepContainer({ children, partnerId }) {
     const { data: partner } = (0, react_1.useQueryB3)("global-accounts-partners", "find", {
@@ -18,30 +19,17 @@ function LoginStepContainer({ children, partnerId }) {
     const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
     return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex flex-col items-center justify-center pt-6", children: [partnerLogo && ((0, jsx_runtime_1.jsx)("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
 }
-function LoginStep({ onSuccess, chain }) {
-    const { partnerId, theme } = (0, react_1.useB3Config)();
-    const wallet = (0, wallets_1.ecosystemWallet)(constants_1.ecosystemWalletId, {
-        partnerId: partnerId,
-    });
-    const { onConnect } = (0, react_1.useAuthentication)(partnerId);
-    return ((0, jsx_runtime_1.jsx)(LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)(react_2.ConnectEmbed, { showThirdwebBranding: false, client: thirdweb_1.client, chain: chain, wallets: [wallet], theme: theme === "light"
-                ? (0, react_2.lightTheme)({
-                    colors: {
-                        modalBg: "hsl(var(--b3-react-background))",
-                    },
-                })
-                : (0, react_2.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 = (0, react_3.useMemo)(() => (0, wallets_1.ecosystemWallet)(constants_1.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 } = (0, react_1.useAuthentication)(partnerId, { skipAutoConnect: true });
+    return ((0, jsx_runtime_1.jsx)(LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)(react_2.ConnectEmbed, { showThirdwebBranding: false, autoConnect: false, client: thirdweb_1.client, chain: chain, wallets: [wallet], theme: theme === "light"
+                ? (0, react_2.lightTheme)({ colors: { modalBg: "hsl(var(--b3-react-background))" } })
+                : (0, react_2.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)
@@ -49,3 +37,12 @@ function LoginStep({ onSuccess, chain }) {
                 await onSuccess(account);
             } }) }));
 }
+function LoginStep({ onSuccess, chain }) {
+    const { partnerId, theme } = (0, react_1.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 (0, jsx_runtime_1.jsx)(LoginStepContent, { onSuccess: onSuccess, chain: chain, partnerId: partnerId, theme: theme });
+}

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

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

package/dist/cjs/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/cjs/global-account/react/hooks/useAuthentication.js

@@ -21,11 +21,26 @@ const createWagmiConfig_1 = require("../utils/createWagmiConfig");
 const useTWAuth_1 = require("./useTWAuth");
 const useUserQuery_1 = require("./useUserQuery");
 const debug = (0, debug_1.debugB3React)("useAuthentication");
-function useAuthentication(partnerId) {
+function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
     const { onConnectCallback, onLogoutCallback } = (0, react_2.useContext)(LocalSDKProvider_1.LocalSDKContext);
     const { disconnect } = (0, react_3.useDisconnect)();
     const wallets = (0, react_3.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 = (0, react_2.useRef)(wallets);
+    (0, react_2.useEffect)(() => {
+        walletsRef.current = wallets;
+    }, [wallets]);
     const activeWallet = (0, react_3.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 = (0, react_2.useRef)(activeWallet);
+    (0, react_2.useEffect)(() => {
+        activeWalletRef.current = activeWallet;
+    }, [activeWallet]);
     const isAuthenticated = (0, react_1.useAuthStore)(state => state.isAuthenticated);
     const setIsAuthenticated = (0, react_1.useAuthStore)(state => state.setIsAuthenticated);
     const setIsConnected = (0, react_1.useAuthStore)(state => state.setIsConnected);
@@ -133,13 +148,26 @@ function useAuthentication(partnerId) {
     }, [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
     const logout = (0, react_2.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") {
@@ -150,12 +178,19 @@ 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 = (0, react_2.useCallback)(async (_walleAutoConnectedWith, allConnectedWallets) => {
         debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
         try {
@@ -203,23 +238,32 @@ function useAuthentication(partnerId) {
     ]);
     const { isLoading: useAutoConnectLoading } = (0, react_3.useAutoConnect)({
         client: thirdweb_1.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.
      */
     (0, react_2.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/cjs/global-account/react/hooks/useGetAllTWSigners.js

@@ -68,7 +68,8 @@ 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,

package/dist/esm/anyspend/react/components/AnySpend.js

@@ -31,7 +31,6 @@ import { GasIndicator } from "./common/GasIndicator.js";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
 import { KycGate } from "./checkout/KycGate.js";
-import { useWalletAuthHeaders } from "../hooks/useKycStatus.js";
 import { LoginStep } from "../../../global-account/react/components/SignInWithB3/steps/LoginStep.js";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
@@ -75,10 +74,6 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     // in the same frame that onStatusResolved sets it (setState is async).
     // When kycEnabled is false (default), pre-approve so the KYC gate is skipped.
     const kycApprovedRef = useRef(!kycEnabled);
-    // Pre-warm wallet auth headers inside user-gesture context (button click)
-    // so the signing prompt fires before we navigate away — browsers block
-    // wallet popups triggered from async/non-gesture contexts (React Query queryFn).
-    const { getHeaders: getKycHeaders } = useWalletAuthHeaders();
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
@@ -845,11 +840,9 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     return;
                 }
                 if (!kycApprovedRef.current) {
-                    // Pre-sign the KYC auth message NOW (user-gesture context) so the
-                    // result is cached before useKycStatus fires its queryFn inside the
-                    // FIAT_KYC panel. Wallets/browsers block signing prompts from async
-                    // (non-gesture) contexts, which is exactly what React Query uses.
-                    await getKycHeaders().catch(() => { });
+                    // Navigate to KYC gate. KycGate shows an explicit "Continue to Verify"
+                    // CTA and pre-signs from that user-gesture context before enabling
+                    // the useKycStatus query — so no surprise signature popup here.
                     navigateToPanel(PanelView.FIAT_KYC, "forward");
                     return;
                 }