@b3dotfun/sdk 0.1.68-alpha.3 → 0.1.68-alpha.5

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { eqci, getChainName, getDefaultToken, getExplorerTxUrl, getHyperliquidUSDCToken, HYPERLIQUID_CHAIN_ID, HYPERLIQUID_USDC_ADDRESS, USDC_BASE, ZERO_ADDRESS, } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGasPrice, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
-import { Button, ShinyButton, StyleRoot, TabsPrimitive, toast, TransitionPanel, useAccountWallet, useB3Config, useModalStore, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
+import { Button, ShinyButton, StyleRoot, TabsPrimitive, toast, TransitionPanel, useAccountWallet, useAuth, useAuthStore, useB3Config, useModalStore, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import BottomNavigation from "../../../global-account/react/components/ManageAccount/BottomNavigation.js";
 import { useAccountWalletImage } from "../../../global-account/react/hooks/useAccountWallet.js";
 import { getThirdwebChain } from "../../../shared/constants/chains/supported.js";
@@ -30,6 +30,9 @@ import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaym
 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";
 import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
@@ -50,6 +53,8 @@ export var PanelView;
     PanelView[PanelView["POINTS_DETAIL"] = 8] = "POINTS_DETAIL";
     PanelView[PanelView["FEE_DETAIL"] = 9] = "FEE_DETAIL";
     PanelView[PanelView["DIRECT_TRANSFER_SUCCESS"] = 10] = "DIRECT_TRANSFER_SUCCESS";
+    PanelView[PanelView["FIAT_KYC"] = 11] = "FIAT_KYC";
+    PanelView[PanelView["FIAT_AUTH"] = 12] = "FIAT_AUTH";
 })(PanelView || (PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 export function AnySpend(props) {
@@ -63,6 +68,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const { partnerId } = useB3Config();
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const { isAuthenticated } = useAuth();
+    // KYC approval is tracked per-session so we only prompt the wallet
+    // signature when the user actually clicks Buy, not on panel mount.
+    // useRef so handleFiatOrder can read the updated value synchronously
+    // in the same frame that onStatusResolved sets it (setState is async).
+    const kycApprovedRef = useRef(false);
+    // 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
@@ -72,7 +87,17 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const animationDirection = useRef(null);
     // Track previous panel for proper back navigation
     const previousPanel = useRef(PanelView.MAIN);
-    const [activeTab, setActiveTab] = useState(defaultActiveTab);
+    const [activeTab, setActiveTab] = useState(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_active_tab");
+            if (stored === "crypto" || stored === "fiat")
+                return stored;
+        }
+        return defaultActiveTab;
+    });
+    useEffect(() => {
+        sessionStorage.setItem("anyspend_active_tab", activeTab);
+    }, [activeTab]);
     const [orderId, setOrderId] = useState(loadOrder);
     const [directTransferTxHash, setDirectTransferTxHash] = useState();
     const { orderAndTransactions: oat, getOrderAndTransactionsError } = useAnyspendOrderAndTransactions(orderId);
@@ -93,9 +118,19 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const [customRecipients, setCustomRecipients] = useState([]);
     // Payment method state with dual-state system (auto + explicit user selection)
     const { cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods, } = useCryptoPaymentMethodState();
-    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
+    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_fiat_method");
+            if (stored && Object.values(FiatPaymentMethod).includes(stored))
+                return stored;
+        }
+        return FiatPaymentMethod.NONE;
+    });
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+        sessionStorage.setItem("anyspend_fiat_method", selectedFiatPaymentMethod);
+    }, [selectedFiatPaymentMethod]);
     // Get initial chain IDs from URL or defaults
     const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || mainnet.id;
     const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : base.id);
@@ -112,10 +147,27 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const [selectedSrcToken, setSelectedSrcToken] = useState(effectiveSrcToken);
     const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
     const [srcAmount, setSrcAmount] = useState(searchParams.get("fromAmount") || "0");
-    // State for onramp amount
-    const [srcAmountOnRamp, setSrcAmountOnRamp] = useState(searchParams.get("fromAmount") || "5");
-    // State for destination chain/token selection
-    const [selectedDstChainId, setSelectedDstChainId] = useState(initialDstChainId);
+    // State for onramp amount — persisted in sessionStorage so it survives Persona KYC roundtrip
+    const [srcAmountOnRamp, setSrcAmountOnRamp] = useState(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_fiat_amount");
+            if (stored)
+                return stored;
+        }
+        return searchParams.get("fromAmount") || "5";
+    });
+    useEffect(() => {
+        sessionStorage.setItem("anyspend_fiat_amount", srcAmountOnRamp);
+    }, [srcAmountOnRamp]);
+    // State for destination chain/token selection (sync effects come after state declarations below) — persisted in sessionStorage for Persona KYC roundtrip
+    const [selectedDstChainId, setSelectedDstChainId] = useState(() => {
+        if (!isBuyMode && typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_dst_chain_id");
+            if (stored)
+                return parseInt(stored, 10);
+        }
+        return initialDstChainId;
+    });
     // Helper to check if address is Hyperliquid USDC (supports both 34-char and 42-char formats)
     const isHyperliquidUSDCAddress = (address) => eqci(address, HYPERLIQUID_USDC_ADDRESS) || eqci(address, ZERO_ADDRESS);
     const defaultDstToken = isBuyMode
@@ -135,9 +187,29 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         defaultToken: defaultDstToken,
         prefix: "to",
     });
-    const [selectedDstToken, setSelectedDstToken] = useState(isBuyMode ? defaultDstToken : dstTokenFromUrl);
+    const [selectedDstToken, setSelectedDstToken] = useState(() => {
+        if (!isBuyMode && typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_dst_token");
+            if (stored) {
+                try {
+                    return JSON.parse(stored);
+                }
+                catch { }
+            }
+        }
+        return isBuyMode ? defaultDstToken : dstTokenFromUrl;
+    });
     const { data: dstTokenMetadata } = useTokenData(selectedDstToken?.chainId, selectedDstToken?.address);
     const [dstAmount, setDstAmount] = useState(searchParams.get("toAmount") || "");
+    // Sync dst chain/token to sessionStorage so they survive Persona KYC roundtrip
+    useEffect(() => {
+        if (!isBuyMode)
+            sessionStorage.setItem("anyspend_dst_chain_id", selectedDstChainId.toString());
+    }, [selectedDstChainId, isBuyMode]);
+    useEffect(() => {
+        if (!isBuyMode)
+            sessionStorage.setItem("anyspend_dst_token", JSON.stringify(selectedDstToken));
+    }, [selectedDstToken, isBuyMode]);
     const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
     // Add refs to track if we've applied metadata
     const appliedSrcMetadataRef = useRef(false);
@@ -490,6 +562,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     }, [anyspendQuote, isSrcInputDirty, destinationTokenAmount]);
     // Call onSuccess when order is executed
     useOnOrderSuccess({ orderData: oat, orderId, onSuccess });
+    // Clear all persisted selection state once an order is submitted — next open starts fresh
+    useEffect(() => {
+        if (orderId) {
+            sessionStorage.removeItem("anyspend_fiat_amount");
+            sessionStorage.removeItem("anyspend_active_tab");
+            sessionStorage.removeItem("anyspend_fiat_method");
+            sessionStorage.removeItem("anyspend_dst_chain_id");
+            sessionStorage.removeItem("anyspend_dst_token");
+        }
+    }, [orderId]);
     const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
         onSuccess: data => {
             const orderId = data.data.id;
@@ -570,8 +652,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
                 return { text: "Select payment method", disable: false, error: false, loading: false };
             }
-            // If payment method is selected, show "Buy"
-            return { text: "Buy", disable: false, error: false, loading: false };
+            // If payment method is selected, show "Continue"
+            return { text: "Continue", disable: false, error: false, loading: false };
         }
         if (activeTab === "crypto") {
             // For crypto: check payment method first, then recipient
@@ -592,7 +674,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                 return { text: "Continue to payment", disable: false, error: false, loading: false };
             }
         }
-        return { text: "Buy", disable: false, error: false, loading: false };
+        return { text: "Continue", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
         isSameChainSameToken,
@@ -754,7 +836,22 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                 paymentMethodString = "";
             }
             else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
-                // Stripe embedded payment form
+                // Stripe embedded payment form requires authentication + KYC
+                // Read from store directly to avoid stale closure when called from onLoginSuccess callback
+                const currentlyAuthenticated = useAuthStore.getState().isAuthenticated;
+                if (!currentlyAuthenticated) {
+                    navigateToPanel(PanelView.FIAT_AUTH, "forward");
+                    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(() => { });
+                    navigateToPanel(PanelView.FIAT_KYC, "forward");
+                    return;
+                }
                 if (!stripeWeb2Support.isSupport) {
                     toast.error("Pay with Card not available");
                     return;
@@ -863,6 +960,14 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             window.removeEventListener("popstate", handlePopState);
         };
     }, [activePanel, navigateBack]);
+    // When auth completes while on the FIAT_AUTH panel, navigate back and retry the order
+    useEffect(() => {
+        if (isAuthenticated && activePanel === PanelView.FIAT_AUTH) {
+            navigateBack();
+            handleFiatOrder(selectedFiatPaymentMethod);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAuthenticated]);
     const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
     const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full p-5", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
                     // When user explicitly changes payment method, set it as selected
@@ -997,6 +1102,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                         setDirectTransferTxHash(undefined);
                         setB3ModalOpen(false);
                     }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: resolvedReturnLabel || "Done" })) })] }));
+    const kycView = (_jsx("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-4 px-5 pt-5", children: _jsx(KycGate, { enabled: activePanel === PanelView.FIAT_KYC, onStatusResolved: approved => {
+                if (approved) {
+                    kycApprovedRef.current = true;
+                    navigateBack();
+                    handleFiatOrder(selectedFiatPaymentMethod);
+                }
+            } }) }));
+    const authView = (_jsx("div", { className: "mx-auto w-full max-w-[460px]", children: _jsx(LoginStep, { chain: baseChain, onSuccess: async () => {
+                // isAuthenticated will be true at this point — the useEffect below handles navigation
+            } }) }));
     // Add tabs to the main component when no order is loaded
     return (_jsx(StyleRoot, { children: _jsx("div", { className: classes?.container ||
                 cn("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
@@ -1030,5 +1145,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: feeDetailView }, "fee-detail-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: directTransferSuccessView }, "direct-transfer-success-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: kycView }, "fiat-kyc-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: authView }, "fiat-auth-view"),
                 ] }) }) }));
 }

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

@@ -10,6 +10,7 @@ import { AddressElement, Elements, PaymentElement, useElements, useStripe } from
 import { Loader2, Lock } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { KycGate } from "./KycGate.js";
 export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, }) {
     // Stable refs for callback props to avoid re-triggering effects
     const onErrorRef = useRef(onError);
@@ -48,18 +49,12 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
         const raw = formatUnits(anyspendQuote.data.currencyIn.amount, USDC_BASE.decimals);
         return parseFloat(raw).toFixed(2);
     }, [isStablecoin, formattedAmount, anyspendQuote]);
-    // Debug: log computed values for Stripe flow diagnostics
-    useEffect(() => {
-        console.log("@@fiat-checkout:debug", {
-            totalAmount,
-            formattedAmount,
-            isStablecoin,
-            isLoadingAnyspendQuote,
-            quoteAmount: anyspendQuote?.data?.currencyIn?.amount,
-            usdAmount,
-        });
-    }, [totalAmount, formattedAmount, isStablecoin, isLoadingAnyspendQuote, anyspendQuote, usdAmount]);
     const { geoData, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeo, } = useGeoOnrampOptions(usdAmount || "0");
+    // KYC state
+    const [kycApproved, setKycApproved] = useState(false);
+    const handleKycResolved = useCallback((approved) => {
+        setKycApproved(approved);
+    }, []);
     // Order state
     const [orderId, setOrderId] = useState(null);
     const [stripePaymentIntentId, setStripePaymentIntentId] = useState(null);
@@ -82,13 +77,14 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
             onErrorRef.current?.(error);
         },
     });
-    // Auto-create onramp order when Stripe Web2 is supported and all data is ready
+    // Auto-create onramp order when Stripe Web2 is supported, KYC approved, and all data is ready
     useEffect(() => {
         if (!isLoadingGeo &&
             (!isStablecoin ? !isLoadingAnyspendQuote : true) &&
             usdAmount &&
             parseFloat(usdAmount) > 0 &&
             stripeWeb2Support?.isSupport &&
+            kycApproved &&
             !orderCreatedRef.current &&
             !orderId &&
             !isCreatingOrder &&
@@ -129,6 +125,7 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
         isLoadingAnyspendQuote,
         usdAmount,
         stripeWeb2Support,
+        kycApproved,
         orderId,
         isCreatingOrder,
         orderError,
@@ -152,6 +149,10 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
     if (!hasStripeWeb2 && !hasStripeRedirect) {
         return (_jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-fiat-unavailable py-4 text-center", classes?.fiatPanel), children: _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Card payments are not available in your region for this amount." }) }));
     }
+    // KYC gate — shown before order creation when verification is needed
+    if (!kycApproved) {
+        return _jsx(KycGate, { themeColor: themeColor, classes: classes, enabled: true, onStatusResolved: handleKycResolved });
+    }
     // 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.d.ts

@@ -0,0 +1,11 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface KycGateProps {
+    themeColor?: string;
+    classes?: AnySpendCheckoutClasses;
+    /** Only fetch KYC status (and prompt wallet signature) when true. */
+    enabled?: boolean;
+    /** Called when KYC status is resolved (approved or not required) */
+    onStatusResolved: (approved: boolean) => void;
+}
+export declare function KycGate({ themeColor, classes, enabled, onStatusResolved }: KycGateProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,145 @@
+"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 { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
+import { Loader2, ShieldCheck, AlertTriangle, Clock } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useCreateKycInquiry, useKycStatus, useVerifyKyc } from "../../hooks/useKycStatus.js";
+export function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
+    const { isAuthenticated, isAuthenticating } = useAuth();
+    const { kycStatus, isLoadingKycStatus, refetchKycStatus } = useKycStatus(enabled);
+    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);
+    // Notify parent when status resolves
+    useEffect(() => {
+        if (!kycStatus)
+            return;
+        const currentStatus = kycStatus.status;
+        if (currentStatus === prevStatusRef.current)
+            return;
+        prevStatusRef.current = currentStatus;
+        if (!kycStatus.kycRequired || currentStatus === "approved") {
+            onStatusResolved(true);
+        }
+    }, [kycStatus, onStatusResolved]);
+    const openPersonaFlow = useCallback(async (config) => {
+        setPersonaOpen(true);
+        try {
+            // Dynamic import to keep bundle small
+            const { Client } = await import("persona");
+            const client = new Client({
+                inquiryId: config.inquiryId,
+                sessionToken: config.sessionToken,
+                environment: config.environment === "production" ? "production" : "sandbox",
+                onComplete: async ({ inquiryId }) => {
+                    // Reopen the modal first so the user lands back in the checkout flow
+                    setB3ModalOpen(true);
+                    setPersonaOpen(false);
+                    if (inquiryId) {
+                        try {
+                            const result = await verifyKyc(inquiryId);
+                            if (result.status === "approved") {
+                                onStatusResolved(true);
+                            }
+                        }
+                        catch (err) {
+                            setPersonaError(err instanceof Error ? err.message : "Verification check failed — please retry.");
+                        }
+                    }
+                    refetchKycStatus();
+                },
+                onCancel: () => {
+                    // Reopen the modal so the user can retry or cancel the purchase
+                    setB3ModalOpen(true);
+                    setPersonaOpen(false);
+                    setPersonaCancelled(true);
+                },
+                onError: error => {
+                    // Reopen the modal so the user sees the error and can retry
+                    setB3ModalOpen(true);
+                    setPersonaOpen(false);
+                    setPersonaError(error?.message || "Verification encountered an error");
+                },
+            });
+            // Close the modal before opening Persona so its overlay is fully
+            // interactive — no Radix Dialog backdrop or z-index conflicts.
+            // The modal's contentType is preserved in Zustand and restored on reopen.
+            setB3ModalOpen(false);
+            client.open();
+        }
+        catch (error) {
+            setPersonaOpen(false);
+            setB3ModalOpen(true);
+            setPersonaError("Failed to load verification module");
+        }
+    }, [verifyKyc, onStatusResolved, refetchKycStatus, setB3ModalOpen]);
+    const handleStartVerification = useCallback(async () => {
+        setPersonaError(null);
+        setPersonaCancelled(false);
+        try {
+            const { inquiryId, sessionToken } = await createInquiry();
+            openPersonaFlow({
+                inquiryId,
+                sessionToken,
+                environment: kycStatus?.config?.environment,
+            });
+        }
+        catch (error) {
+            setPersonaError(error instanceof Error ? error.message : "Failed to start verification");
+        }
+    }, [createInquiry, kycStatus, openPersonaFlow]);
+    const handleSignIn = useCallback(() => {
+        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
+        setB3ModalOpen(true);
+    }, [setB3ModalContentType, setB3ModalOpen, partnerId]);
+    const handleResumeVerification = useCallback(() => {
+        if (!kycStatus?.inquiry)
+            return;
+        setPersonaError(null);
+        setPersonaCancelled(false);
+        openPersonaFlow({
+            inquiryId: kycStatus.inquiry.inquiryId,
+            sessionToken: kycStatus.inquiry.sessionToken,
+            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..." })] }));
+    }
+    // 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"] }) })] }));
+    }
+    // Loading KYC status state
+    if (isLoadingKycStatus) {
+        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 verification status..." })] }));
+    }
+    // Not required or already approved — render nothing
+    if (!kycStatus?.kycRequired || kycStatus.status === "approved") {
+        return null;
+    }
+    // Persona flow is open - show loading
+    if (personaOpen) {
+        return (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: cn("anyspend-kyc-persona 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: "Identity verification in progress..." }), _jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: "Complete the verification in the popup window" })] }));
+    }
+    // Needs review or completed (submitted, awaiting Persona decision)
+    if (kycStatus.status === "needs_review" || kycStatus.status === "completed") {
+        return (_jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-kyc-review flex flex-col items-center gap-3 py-2", classes?.fiatPanel), children: [_jsx(Clock, { className: "h-8 w-8 text-amber-500" }), _jsx("p", { className: "text-center text-sm font-medium text-amber-700 dark:text-amber-300", children: "Your verification is under review" }), _jsx("p", { className: "text-center text-xs text-amber-600 dark:text-amber-400", children: "This usually takes a few minutes. Please check back shortly." }), _jsx("button", { onClick: () => refetchKycStatus(), className: "mt-1 text-sm font-medium text-amber-700 underline hover:text-amber-800 dark:text-amber-300", children: "Check status" })] }));
+    }
+    // Pending (started before) - offer resume
+    if (kycStatus.status === "pending" && kycStatus.inquiry) {
+        return (_jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-kyc-resume 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: "Continue verification" }), _jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "You have an incomplete verification. Resume to continue." })] }), _jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleResumeVerification, disabled: isCreatingInquiry, children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [isCreatingInquiry ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : _jsx(ShieldCheck, { className: "h-4 w-4" }), "Resume Verification"] }) })] }));
+    }
+    // Not verified / declined / expired - show verification prompt
+    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." })] }), _jsxs(AnimatePresence, { initial: false, children: [personaError && (_jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, className: "w-full rounded-lg border border-red-200 bg-red-50 px-3 py-2 dark:border-red-800 dark:bg-red-900/20", children: _jsx("p", { className: "text-center text-sm text-red-600 dark:text-red-400", children: personaError }) }, "kyc-error")), personaCancelled && (_jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, className: "w-full rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 dark:border-amber-800 dark:bg-amber-900/20", children: _jsx("p", { className: "text-center text-sm text-amber-600 dark:text-amber-400", children: "Verification cancelled. Click below to try again." }) }, "kyc-cancelled"))] }), kycStatus.status === "declined" && (_jsxs("div", { className: "flex items-center gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 py-2 dark:border-red-800 dark:bg-red-900/20", children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5 text-red-500" }), _jsx("p", { className: "text-xs text-red-600 dark:text-red-400", children: "Previous verification was declined. You may try again." })] })), _jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleStartVerification, disabled: isCreatingInquiry || isVerifying, children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [isCreatingInquiry ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : _jsx(ShieldCheck, { className: "h-4 w-4" }), isCreatingInquiry ? "Starting..." : "Verify Identity"] }) })] }));
+}

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

@@ -18,3 +18,4 @@ export * from "./useSigMint";
 export * from "./useStripeClientSecret";
 export * from "./useStripeSupport";
 export * from "./useWatchTransfer";
+export * from "./useKycStatus";

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

@@ -18,3 +18,4 @@ export * from "./useSigMint.js";
 export * from "./useStripeClientSecret.js";
 export * from "./useStripeSupport.js";
 export * from "./useWatchTransfer.js";
+export * from "./useKycStatus.js";

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

@@ -7,6 +7,7 @@ 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 { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.js";
 /**
  * Hook for creating onramp orders in the Anyspend protocol
@@ -15,6 +16,7 @@ import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.j
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = useB3Config();
+    const { getHeaders: getWalletAuthHeaders } = useWalletAuthHeaders();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = useValidatedClientReferenceId();
     // Get fingerprint data
@@ -36,6 +38,12 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                 const srcChain = base.id;
                 // Create order with USDC on Base as source
                 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).
+                let kycWalletHeaders;
+                if (onramp.vendor === "stripe-web2") {
+                    kycWalletHeaders = await getWalletAuthHeaders().catch(() => undefined);
+                }
                 return await anyspendService.createOrder({
                     recipientAddress: normalizeAddress(recipientAddress),
                     type: orderType,
@@ -73,6 +81,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                     visitorData,
                     callbackMetadata: params.callbackMetadata,
                     feeOnTop: params.feeOnTop,
+                    kycWalletHeaders,
                 });
             }
             catch (error) {

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

@@ -0,0 +1,42 @@
+export interface KycStatusResponse {
+    kycRequired: boolean;
+    status: "not_verified" | "pending" | "completed" | "approved" | "declined" | "needs_review" | "expired";
+    inquiry?: {
+        inquiryId: string;
+        sessionToken: string;
+    };
+    config?: {
+        templateId: string;
+        environment: string;
+    };
+}
+interface KycInquiryResponse {
+    inquiryId: string;
+    sessionToken: string;
+}
+interface KycVerifyResponse {
+    status: string;
+}
+/**
+ * Returns a function that builds the wallet-signature auth headers.
+ * Caches signatures for 4 minutes (server allows 5-minute window).
+ */
+export declare function useWalletAuthHeaders(): {
+    address: `0x${string}` | undefined;
+    getHeaders: () => Promise<Record<string, string>>;
+};
+export declare function useKycStatus(enabled?: boolean): {
+    kycStatus: KycStatusResponse | null;
+    isLoadingKycStatus: boolean;
+    kycStatusError: Error | null;
+    refetchKycStatus: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<KycStatusResponse, Error>>;
+};
+export declare function useCreateKycInquiry(): {
+    createInquiry: import("@tanstack/react-query").UseMutateAsyncFunction<KycInquiryResponse, Error, void, unknown>;
+    isCreatingInquiry: boolean;
+};
+export declare function useVerifyKyc(): {
+    verifyKyc: import("@tanstack/react-query").UseMutateAsyncFunction<KycVerifyResponse, Error, string, unknown>;
+    isVerifying: boolean;
+};
+export {};