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

package/dist/cjs/anyspend/react/components/AnySpend.d.ts

@@ -18,7 +18,9 @@ export declare enum PanelView {
     FIAT_PAYMENT_METHOD = 7,
     POINTS_DETAIL = 8,
     FEE_DETAIL = 9,
-    DIRECT_TRANSFER_SUCCESS = 10
+    DIRECT_TRANSFER_SUCCESS = 10,
+    FIAT_KYC = 11,
+    FIAT_AUTH = 12
 }
 export declare function AnySpend(props: {
     mode?: "page" | "modal";

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

@@ -37,6 +37,9 @@ const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
 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");
 const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
@@ -57,6 +60,8 @@ 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 || (exports.PanelView = PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 function AnySpend(props) {
@@ -70,6 +75,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const { partnerId } = (0, react_2.useB3Config)();
     const setB3ModalContentType = (0, react_2.useModalStore)(state => state.setB3ModalContentType);
     const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
+    const { isAuthenticated } = (0, react_2.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 = (0, react_4.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 } = (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
@@ -79,7 +94,17 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const animationDirection = (0, react_4.useRef)(null);
     // Track previous panel for proper back navigation
     const previousPanel = (0, react_4.useRef)(PanelView.MAIN);
-    const [activeTab, setActiveTab] = (0, react_4.useState)(defaultActiveTab);
+    const [activeTab, setActiveTab] = (0, react_4.useState)(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_active_tab");
+            if (stored === "crypto" || stored === "fiat")
+                return stored;
+        }
+        return defaultActiveTab;
+    });
+    (0, react_4.useEffect)(() => {
+        sessionStorage.setItem("anyspend_active_tab", activeTab);
+    }, [activeTab]);
     const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
     const [directTransferTxHash, setDirectTransferTxHash] = (0, react_4.useState)();
     const { orderAndTransactions: oat, getOrderAndTransactionsError } = (0, react_1.useAnyspendOrderAndTransactions)(orderId);
@@ -100,9 +125,19 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const [customRecipients, setCustomRecipients] = (0, react_4.useState)([]);
     // Payment method state with dual-state system (auto + explicit user selection)
     const { cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods, } = (0, useCryptoPaymentMethodState_1.useCryptoPaymentMethodState)();
-    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
+    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_fiat_method");
+            if (stored && Object.values(FiatPaymentMethod_1.FiatPaymentMethod).includes(stored))
+                return stored;
+        }
+        return FiatPaymentMethod_1.FiatPaymentMethod.NONE;
+    });
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
+    (0, react_4.useEffect)(() => {
+        sessionStorage.setItem("anyspend_fiat_method", selectedFiatPaymentMethod);
+    }, [selectedFiatPaymentMethod]);
     // Get initial chain IDs from URL or defaults
     const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || chains_1.mainnet.id;
     const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : chains_1.base.id);
@@ -119,10 +154,27 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const [selectedSrcToken, setSelectedSrcToken] = (0, react_4.useState)(effectiveSrcToken);
     const { data: srcTokenMetadata } = (0, react_2.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
     const [srcAmount, setSrcAmount] = (0, react_4.useState)(searchParams.get("fromAmount") || "0");
-    // State for onramp amount
-    const [srcAmountOnRamp, setSrcAmountOnRamp] = (0, react_4.useState)(searchParams.get("fromAmount") || "5");
-    // State for destination chain/token selection
-    const [selectedDstChainId, setSelectedDstChainId] = (0, react_4.useState)(initialDstChainId);
+    // State for onramp amount — persisted in sessionStorage so it survives Persona KYC roundtrip
+    const [srcAmountOnRamp, setSrcAmountOnRamp] = (0, react_4.useState)(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_fiat_amount");
+            if (stored)
+                return stored;
+        }
+        return searchParams.get("fromAmount") || "5";
+    });
+    (0, react_4.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] = (0, react_4.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) => (0, anyspend_1.eqci)(address, anyspend_1.HYPERLIQUID_USDC_ADDRESS) || (0, anyspend_1.eqci)(address, anyspend_1.ZERO_ADDRESS);
     const defaultDstToken = isBuyMode
@@ -142,9 +194,29 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         defaultToken: defaultDstToken,
         prefix: "to",
     });
-    const [selectedDstToken, setSelectedDstToken] = (0, react_4.useState)(isBuyMode ? defaultDstToken : dstTokenFromUrl);
+    const [selectedDstToken, setSelectedDstToken] = (0, react_4.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 } = (0, react_2.useTokenData)(selectedDstToken?.chainId, selectedDstToken?.address);
     const [dstAmount, setDstAmount] = (0, react_4.useState)(searchParams.get("toAmount") || "");
+    // Sync dst chain/token to sessionStorage so they survive Persona KYC roundtrip
+    (0, react_4.useEffect)(() => {
+        if (!isBuyMode)
+            sessionStorage.setItem("anyspend_dst_chain_id", selectedDstChainId.toString());
+    }, [selectedDstChainId, isBuyMode]);
+    (0, react_4.useEffect)(() => {
+        if (!isBuyMode)
+            sessionStorage.setItem("anyspend_dst_token", JSON.stringify(selectedDstToken));
+    }, [selectedDstToken, isBuyMode]);
     const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_4.useState)(true);
     // Add refs to track if we've applied metadata
     const appliedSrcMetadataRef = (0, react_4.useRef)(false);
@@ -497,6 +569,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     }, [anyspendQuote, isSrcInputDirty, destinationTokenAmount]);
     // Call onSuccess when order is executed
     (0, useOnOrderSuccess_1.useOnOrderSuccess)({ orderData: oat, orderId, onSuccess });
+    // Clear all persisted selection state once an order is submitted — next open starts fresh
+    (0, react_4.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 } = (0, react_1.useAnyspendCreateOrder)({
         onSuccess: data => {
             const orderId = data.data.id;
@@ -577,8 +659,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             if (selectedFiatPaymentMethod === FiatPaymentMethod_1.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
@@ -599,7 +681,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,
@@ -761,7 +843,22 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                 paymentMethodString = "";
             }
             else if (paymentMethod === FiatPaymentMethod_1.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 = react_2.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) {
                     react_2.toast.error("Pay with Card not available");
                     return;
@@ -870,6 +967,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
+    (0, react_4.useEffect)(() => {
+        if (isAuthenticated && activePanel === PanelView.FIAT_AUTH) {
+            navigateBack();
+            handleFiatOrder(selectedFiatPaymentMethod);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAuthenticated]);
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
     const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.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
@@ -1004,6 +1109,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 = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-4 px-5 pt-5", children: (0, jsx_runtime_1.jsx)(KycGate_1.KycGate, { enabled: activePanel === PanelView.FIAT_KYC, onStatusResolved: approved => {
+                if (approved) {
+                    kycApprovedRef.current = true;
+                    navigateBack();
+                    handleFiatOrder(selectedFiatPaymentMethod);
+                }
+            } }) }));
+    const authView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-full max-w-[460px]", children: (0, jsx_runtime_1.jsx)(LoginStep_1.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 ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: classes?.container ||
                 (0, cn_1.cn)("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
@@ -1037,5 +1152,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: feeDetailView }, "fee-detail-view"),
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: directTransferSuccessView }, "direct-transfer-success-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: kycView }, "fiat-kyc-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: authView }, "fiat-auth-view"),
                 ] }) }) }));
 }

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

@@ -13,6 +13,7 @@ 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 KycGate_1 = require("./KycGate");
 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 = (0, react_4.useRef)(onError);
@@ -51,18 +52,12 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
         const raw = (0, number_1.formatUnits)(anyspendQuote.data.currencyIn.amount, constants_1.USDC_BASE.decimals);
         return parseFloat(raw).toFixed(2);
     }, [isStablecoin, formattedAmount, anyspendQuote]);
-    // Debug: log computed values for Stripe flow diagnostics
-    (0, react_4.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, } = (0, react_1.useGeoOnrampOptions)(usdAmount || "0");
+    // KYC state
+    const [kycApproved, setKycApproved] = (0, react_4.useState)(false);
+    const handleKycResolved = (0, react_4.useCallback)((approved) => {
+        setKycApproved(approved);
+    }, []);
     // Order state
     const [orderId, setOrderId] = (0, react_4.useState)(null);
     const [stripePaymentIntentId, setStripePaymentIntentId] = (0, react_4.useState)(null);
@@ -85,13 +80,14 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
             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
     (0, react_4.useEffect)(() => {
         if (!isLoadingGeo &&
             (!isStablecoin ? !isLoadingAnyspendQuote : true) &&
             usdAmount &&
             parseFloat(usdAmount) > 0 &&
             stripeWeb2Support?.isSupport &&
+            kycApproved &&
             !orderCreatedRef.current &&
             !orderId &&
             !isCreatingOrder &&
@@ -132,6 +128,7 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
         isLoadingAnyspendQuote,
         usdAmount,
         stripeWeb2Support,
+        kycApproved,
         orderId,
         isCreatingOrder,
         orderError,
@@ -155,6 +152,10 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
     if (!hasStripeWeb2 && !hasStripeRedirect) {
         return ((0, jsx_runtime_1.jsx)(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-unavailable py-4 text-center", classes?.fiatPanel), children: (0, jsx_runtime_1.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 (0, jsx_runtime_1.jsx)(KycGate_1.KycGate, { themeColor: themeColor, classes: classes, enabled: true, onStatusResolved: handleKycResolved });
+    }
     // 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.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/cjs/anyspend/react/components/checkout/KycGate.js

@@ -0,0 +1,181 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KycGate = KycGate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const react_1 = require("../../../../global-account/react");
+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 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 { 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);
+    // Notify parent when status resolves
+    (0, react_3.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 = (0, react_3.useCallback)(async (config) => {
+        setPersonaOpen(true);
+        try {
+            // Dynamic import to keep bundle small
+            const { Client } = await Promise.resolve().then(() => __importStar(require("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 = (0, react_3.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 = (0, react_3.useCallback)(() => {
+        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: b3Chain_1.thirdwebB3Chain, partnerId });
+        setB3ModalOpen(true);
+    }, [setB3ModalContentType, setB3ModalOpen, partnerId]);
+    const handleResumeVerification = (0, react_3.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 ((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..." })] }));
+    }
+    // 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"] }) })] }));
+    }
+    // Loading KYC status state
+    if (isLoadingKycStatus) {
+        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 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 ((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-persona 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: "Identity verification in progress..." }), (0, jsx_runtime_1.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 ((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-review flex flex-col items-center gap-3 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-8 w-8 text-amber-500" }), (0, jsx_runtime_1.jsx)("p", { className: "text-center text-sm font-medium text-amber-700 dark:text-amber-300", children: "Your verification is under review" }), (0, jsx_runtime_1.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." }), (0, jsx_runtime_1.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 ((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-resume 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: "Continue verification" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "You have an incomplete verification. Resume to continue." })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleResumeVerification, disabled: isCreatingInquiry, children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [isCreatingInquiry ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-4 w-4" }), "Resume Verification"] }) })] }));
+    }
+    // Not verified / declined / expired - show verification prompt
+    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.jsxs)(react_2.AnimatePresence, { initial: false, children: [personaError && ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)("p", { className: "text-center text-sm text-red-600 dark:text-red-400", children: personaError }) }, "kyc-error")), personaCancelled && ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.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" && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "h-3.5 w-3.5 text-red-500" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-red-600 dark:text-red-400", children: "Previous verification was declined. You may try again." })] })), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleStartVerification, disabled: isCreatingInquiry || isVerifying, children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [isCreatingInquiry ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-4 w-4" }), isCreatingInquiry ? "Starting..." : "Verify Identity"] }) })] }));
+}

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

@@ -34,3 +34,4 @@ __exportStar(require("./useSigMint"), exports);
 __exportStar(require("./useStripeClientSecret"), exports);
 __exportStar(require("./useStripeSupport"), exports);
 __exportStar(require("./useWatchTransfer"), exports);
+__exportStar(require("./useKycStatus"), exports);

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 useKycStatus_1 = require("./useKycStatus");
 const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId");
 /**
  * Hook for creating onramp orders in the Anyspend protocol
@@ -18,6 +19,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)();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data
@@ -39,6 +41,12 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                 const srcChain = chains_1.base.id;
                 // Create order with USDC on Base as source
                 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).
+                let kycWalletHeaders;
+                if (onramp.vendor === "stripe-web2") {
+                    kycWalletHeaders = await getWalletAuthHeaders().catch(() => undefined);
+                }
                 return await anyspend_1.anyspendService.createOrder({
                     recipientAddress: (0, utils_1.normalizeAddress)(recipientAddress),
                     type: orderType,
@@ -76,6 +84,7 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                     visitorData,
                     callbackMetadata: params.callbackMetadata,
                     feeOnTop: params.feeOnTop,
+                    kycWalletHeaders,
                 });
             }
             catch (error) {

package/dist/cjs/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 {};