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

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/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;
                 }

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).