@b3dotfun/sdk 0.1.68-alpha.1 → 0.1.68-alpha.11

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

@@ -5,17 +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";
-export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, }) {
+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;
@@ -48,18 +58,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 — pre-approved when kycEnabled is false (feature flag off)
+    const [kycApproved, setKycApproved] = useState(() => !kycEnabled);
+    const handleKycResolved = useCallback((approved) => {
+        setKycApproved(approved);
+    }, []);
     // Order state
     const [orderId, setOrderId] = useState(null);
     const [stripePaymentIntentId, setStripePaymentIntentId] = useState(null);
@@ -78,17 +82,33 @@ 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);
         },
     });
-    // Auto-create onramp order when Stripe Web2 is supported and all data is ready
+    // Reset order error when wallet connects so the user gets a clean state
     useEffect(() => {
-        if (!isLoadingGeo &&
+        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 (address &&
+            !isLoadingGeo &&
             (!isStablecoin ? !isLoadingAnyspendQuote : true) &&
             usdAmount &&
             parseFloat(usdAmount) > 0 &&
             stripeWeb2Support?.isSupport &&
+            kycApproved &&
             !orderCreatedRef.current &&
             !orderId &&
             !isCreatingOrder &&
@@ -124,11 +144,13 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
             });
         }
     }, [
+        address,
         isLoadingGeo,
         isStablecoin,
         isLoadingAnyspendQuote,
         usdAmount,
         stripeWeb2Support,
+        kycApproved,
         orderId,
         isCreatingOrder,
         orderError,
@@ -152,6 +174,14 @@ 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 });
+    }
+    // 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.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,167 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.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, Wallet } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useAccount } from "wagmi";
+import { useCreateKycInquiry, useKycStatus, useVerifyKyc, useWalletAuthHeaders } from "../../hooks/useKycStatus.js";
+export function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
+    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 [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)
+            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 handleConnectWallet = 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]);
+    // 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"] }) })] }));
+    }
+    // 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) {
+        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/components/checkout/VariablePricingInput.d.ts

@@ -0,0 +1,17 @@
+export interface VariablePricingConfig {
+    enabled: boolean;
+    minAmount?: string;
+    maxAmount?: string;
+    suggestedAmount?: string;
+    label?: string;
+    currency?: string;
+}
+interface VariablePricingInputProps {
+    config: VariablePricingConfig;
+    tokenDecimals: number;
+    tokenSymbol: string;
+    themeColor?: string;
+    onChange: (amountWei: string) => void;
+}
+export declare function VariablePricingInput({ config, tokenDecimals, tokenSymbol, themeColor, onChange, }: VariablePricingInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { formatUnits } from "../../../../shared/utils/number.js";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+export function VariablePricingInput({ config, tokenDecimals, tokenSymbol, themeColor, onChange, }) {
+    const currency = config.currency || tokenSymbol;
+    // Convert suggested amount from wei to display
+    const initialValue = useMemo(() => {
+        if (config.suggestedAmount) {
+            try {
+                return formatUnits(config.suggestedAmount, tokenDecimals);
+            }
+            catch {
+                return "";
+            }
+        }
+        return "";
+    }, [config.suggestedAmount, tokenDecimals]);
+    const [displayValue, setDisplayValue] = useState(initialValue);
+    const [error, setError] = useState(null);
+    // Min/max in display units
+    const minDisplay = useMemo(() => {
+        if (!config.minAmount)
+            return null;
+        try {
+            return parseFloat(formatUnits(config.minAmount, tokenDecimals));
+        }
+        catch {
+            return null;
+        }
+    }, [config.minAmount, tokenDecimals]);
+    const maxDisplay = useMemo(() => {
+        if (!config.maxAmount)
+            return null;
+        try {
+            return parseFloat(formatUnits(config.maxAmount, tokenDecimals));
+        }
+        catch {
+            return null;
+        }
+    }, [config.maxAmount, tokenDecimals]);
+    // Preset amounts
+    const presetAmounts = useMemo(() => {
+        const presets = [];
+        if (config.suggestedAmount) {
+            try {
+                const suggested = parseFloat(formatUnits(config.suggestedAmount, tokenDecimals));
+                const candidates = [suggested / 2, suggested, suggested * 2];
+                for (const val of candidates) {
+                    if (val <= 0)
+                        continue;
+                    if (minDisplay !== null && val < minDisplay)
+                        continue;
+                    if (maxDisplay !== null && val > maxDisplay)
+                        continue;
+                    const display = val % 1 === 0 ? val.toString() : val.toFixed(2);
+                    presets.push({ label: `${display}`, value: display });
+                }
+            }
+            catch {
+                // skip presets
+            }
+        }
+        return presets;
+    }, [config.suggestedAmount, tokenDecimals, minDisplay, maxDisplay]);
+    const validate = useCallback((value) => {
+        const parsed = parseFloat(value);
+        if (!value || isNaN(parsed))
+            return "Please enter a valid number";
+        if (parsed <= 0)
+            return "Please enter an amount";
+        if (minDisplay !== null && parsed < minDisplay) {
+            const display = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+            return `Minimum amount is ${display} ${currency}`;
+        }
+        if (maxDisplay !== null && parsed > maxDisplay) {
+            const display = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+            return `Maximum amount is ${display} ${currency}`;
+        }
+        return null;
+    }, [minDisplay, maxDisplay, currency]);
+    const convertToWei = useCallback((value) => {
+        try {
+            const [whole, frac = ""] = value.split(".");
+            const paddedFrac = frac.padEnd(tokenDecimals, "0").slice(0, tokenDecimals);
+            const factor = BigInt(10) ** BigInt(tokenDecimals);
+            return (BigInt(whole || "0") * factor + BigInt(paddedFrac)).toString();
+        }
+        catch {
+            return "0";
+        }
+    }, [tokenDecimals]);
+    const handleChange = useCallback((value) => {
+        setDisplayValue(value);
+        const validationError = validate(value);
+        setError(validationError);
+        if (!validationError && value && parseFloat(value) > 0) {
+            onChange(convertToWei(value));
+        }
+        else {
+            onChange("0");
+        }
+    }, [validate, convertToWei, onChange]);
+    const handlePresetClick = useCallback((value) => {
+        setDisplayValue(value);
+        setError(null);
+        onChange(convertToWei(value));
+    }, [convertToWei, onChange]);
+    // Notify parent with initial value on mount
+    useEffect(() => {
+        if (initialValue && !validate(initialValue)) {
+            onChange(convertToWei(initialValue));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const formatHint = () => {
+        if (minDisplay !== null && maxDisplay !== null) {
+            const minStr = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+            const maxStr = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+            return `${minStr} – ${maxStr} ${currency}`;
+        }
+        if (minDisplay !== null) {
+            const minStr = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+            return `Min: ${minStr} ${currency}`;
+        }
+        if (maxDisplay !== null) {
+            const maxStr = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+            return `Max: ${maxStr} ${currency}`;
+        }
+        return null;
+    };
+    const hint = formatHint();
+    return (_jsxs("div", { className: "anyspend-variable-pricing mb-6", children: [_jsx("label", { htmlFor: "variable-pricing-amount", className: "mb-3 block text-lg font-semibold text-gray-900 dark:text-gray-100", children: config.label || "Enter amount" }), presetAmounts.length > 0 && (_jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: presetAmounts.map(preset => (_jsxs("button", { type: "button", onClick: () => handlePresetClick(preset.value), className: cn("rounded-full border px-4 py-2 text-sm font-medium transition-colors", displayValue === preset.value
+                        ? "border-transparent text-white"
+                        : "border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-neutral-600 dark:text-gray-300 dark:hover:bg-neutral-800"), style: displayValue === preset.value ? { backgroundColor: themeColor || "hsl(var(--as-brand))" } : undefined, children: [preset.label, " ", currency] }, preset.value))) })), _jsxs("div", { className: "relative", children: [_jsx("input", { id: "variable-pricing-amount", type: "text", inputMode: "decimal", value: displayValue, onChange: e => {
+                            // Normalize comma decimal separators for locale compatibility
+                            const normalized = e.target.value.replace(",", ".");
+                            handleChange(normalized);
+                        }, className: "w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-3.5 pr-16 text-lg font-semibold text-gray-900 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-neutral-600 dark:focus:border-blue-400", placeholder: "0.00" }), _jsx("span", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-sm font-medium text-gray-400 dark:text-gray-500", children: currency })] }), hint && _jsx("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: hint }), _jsx(AnimatePresence, { initial: false, children: error && (_jsx(motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.15, ease: "easeOut" }, className: "mt-1.5 text-sm text-red-500", children: error }, "variable-price-error")) })] }));
+}

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

@@ -1,5 +1,5 @@
 export { AnySpendCheckout } from "./checkout/AnySpendCheckout";
-export type { AnySpendCheckoutProps, CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses, CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData, } from "./checkout/AnySpendCheckout";
+export type { AnySpendCheckoutProps, CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses, CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData, VariablePricingConfig, } from "./checkout/AnySpendCheckout";
 export { AnySpendCheckoutTrigger } from "./checkout/AnySpendCheckoutTrigger";
 export type { AnySpendCheckoutTriggerProps } from "./checkout/AnySpendCheckoutTrigger";
 export type { PaymentMethod } from "./checkout/CheckoutPaymentPanel";

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,8 @@ import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
+import { useAccount } from "wagmi";
+import { getCachedWalletHeaders } from "./useKycStatus.js";
 import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.js";
 /**
  * Hook for creating onramp orders in the Anyspend protocol
@@ -15,6 +17,7 @@ import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.j
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = useB3Config();
+    const { address } = useAccount();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = useValidatedClientReferenceId();
     // Get fingerprint data
@@ -36,6 +39,15 @@ 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).
+                // 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" && address) {
+                    kycWalletHeaders = getCachedWalletHeaders(address);
+                }
                 return await anyspendService.createOrder({
                     recipientAddress: normalizeAddress(recipientAddress),
                     type: orderType,
@@ -73,6 +85,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,47 @@
+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 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).
+ */
+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 {};