@b3dotfun/sdk 0.1.68 → 0.1.69-alpha.0

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

@@ -320,5 +320,5 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
                             ? "Creating order..."
                             : isSendingDeposit
                                 ? "Confirm in wallet..."
-                                : "Confirming transaction..."] })) : (buttonText) })), isMobile && hasWalletConnector ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setQrExpanded(prev => !prev), className: "flex w-full items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1 text-xs font-medium text-gray-400 dark:text-gray-500", children: [qrExpanded ? ("or send directly") : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.QrCode, { className: "h-3 w-3" }), " or send with QR code"] })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: (0, cn_1.cn)("h-3 w-3 transition-transform", qrExpanded && "rotate-180") })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500", children: "or send directly" }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { initial: false, children: qrExpanded && ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeInOut" }, className: "overflow-hidden", children: isCreatingQrOrder && !globalAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-sm text-gray-500 dark:text-gray-400", children: "Creating deposit address..." })] })) : globalAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "shrink-0 rounded-xl bg-white p-2.5 shadow-sm ring-1 ring-gray-100 dark:bg-white dark:ring-gray-200", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: qrValue, size: 132, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Send", " ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol] }), " ", "on", " ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [chainLogoUrl && ((0, jsx_runtime_1.jsx)("img", { src: chainLogoUrl, alt: "", className: "mb-px mr-0.5 inline h-3.5 w-3.5 rounded-full align-text-bottom" })), chainName] }), " ", "to:"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleCopyAddress, className: "group flex items-start gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-left transition-colors hover:border-gray-300 hover:bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/60 dark:hover:border-neutral-600 dark:hover:bg-neutral-800", children: [(0, jsx_runtime_1.jsx)("span", { className: "min-w-0 break-all font-mono text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: globalAddress }), (0, jsx_runtime_1.jsx)("span", { className: "mt-0.5 shrink-0 text-gray-400 transition-colors group-hover:text-gray-600 dark:group-hover:text-gray-300", children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3.5 w-3.5 text-green-500" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-3.5 w-3.5" }) })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs leading-snug text-orange-500/80 dark:text-orange-400/80", children: ["Only send ", selectedSrcToken?.symbol, " on", " ", chainLogoUrl && ((0, jsx_runtime_1.jsx)("img", { src: chainLogoUrl, alt: "", className: "mr-0.5 inline h-3 w-3 rounded-full align-text-bottom" })), chainName, ". Sending other tokens or using a different network may result in loss of funds."] })] })] })) : null }, "qr-section")) })] }));
+                                : "Confirming transaction..."] })) : (buttonText) })), isMobile && hasWalletConnector ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setQrExpanded(prev => !prev), className: "flex w-full items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1 text-xs font-medium text-gray-400 dark:text-gray-500", children: [qrExpanded ? ("or send directly") : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.QrCode, { className: "h-3 w-3" }), " or send with QR code"] })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: (0, cn_1.cn)("h-3 w-3 transition-transform", qrExpanded && "rotate-180") })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500", children: "or send directly" }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { initial: false, children: qrExpanded && ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeInOut" }, className: "overflow-hidden", children: isCreatingQrOrder && !globalAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-sm text-gray-500 dark:text-gray-400", children: "Creating deposit address..." })] })) : globalAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "shrink-0 rounded-xl bg-white p-2.5 shadow-sm ring-1 ring-gray-100 dark:bg-white dark:ring-gray-200", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: qrValue, size: 132, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Send", " ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol] }), " ", "on", " ", (0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-gray-100 px-1.5 py-0.5 align-middle font-semibold text-gray-900 dark:bg-white/10 dark:text-gray-100", children: [chainLogoUrl && (0, jsx_runtime_1.jsx)("img", { src: chainLogoUrl, alt: "", className: "h-3.5 w-3.5 rounded-full" }), chainName] }), " ", "to:"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleCopyAddress, className: "group flex items-start gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-left transition-colors hover:border-gray-300 hover:bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/60 dark:hover:border-neutral-600 dark:hover:bg-neutral-800", children: [(0, jsx_runtime_1.jsx)("span", { className: "min-w-0 break-all font-mono text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: globalAddress }), (0, jsx_runtime_1.jsx)("span", { className: "mt-0.5 shrink-0 text-gray-400 transition-colors group-hover:text-gray-600 dark:group-hover:text-gray-300", children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3.5 w-3.5 text-green-500" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-3.5 w-3.5" }) })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs leading-snug text-orange-500/80 dark:text-orange-400/80", children: ["Only send ", selectedSrcToken?.symbol, " on ", (0, jsx_runtime_1.jsx)("span", { className: "font-semibold", children: chainName }), ". Sending other tokens or using a different network may result in loss of funds."] })] })] })) : null }, "qr-section")) })] }));
 }

package/dist/cjs/anyspend/react/components/checkout/FiatCheckoutPanel.d.ts

@@ -15,6 +15,10 @@ interface FiatCheckoutPanelProps {
     onError?: (error: Error) => void;
     callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
+    /** When true, fees are added on top (payer pays more, receiver gets exact amount) */
+    feeOnTop?: boolean;
+    /** When true, identity verification is required before card payment. Defaults to false. */
+    kycEnabled?: boolean;
 }
-export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, kycEnabled, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,16 +9,26 @@ const cn_1 = require("../../../../shared/utils/cn");
 const number_1 = require("../../../../shared/utils/number");
 const payment_utils_1 = require("../../../../shared/utils/payment.utils");
 const react_2 = require("../../../../global-account/react");
+const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
 const react_4 = require("react");
-function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, }) {
+const wagmi_1 = require("wagmi");
+const KycGate_1 = require("./KycGate");
+function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, kycEnabled = false, }) {
     // Stable refs for callback props to avoid re-triggering effects
     const onErrorRef = (0, react_4.useRef)(onError);
     onErrorRef.current = onError;
+    const { address } = (0, wagmi_1.useAccount)();
+    const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
+    const setB3ModalContentType = (0, react_2.useModalStore)(state => state.setB3ModalContentType);
     const { data: tokenData } = (0, react_2.useTokenData)(destinationTokenChainId, destinationTokenAddress);
-    const { theme, stripePublishableKey } = (0, react_2.useB3Config)();
+    const { theme, stripePublishableKey, partnerId } = (0, react_2.useB3Config)();
+    const handleConnectWallet = (0, react_4.useCallback)(() => {
+        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: b3Chain_1.thirdwebB3Chain, partnerId });
+        setB3ModalOpen(true);
+    }, [setB3ModalContentType, setB3ModalOpen, partnerId]);
     // Clean decimal string for API calls (no commas, no subscripts)
     const formattedAmount = (0, react_4.useMemo)(() => {
         const decimals = tokenData?.decimals || 18;
@@ -51,18 +61,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 — pre-approved when kycEnabled is false (feature flag off)
+    const [kycApproved, setKycApproved] = (0, react_4.useState)(() => !kycEnabled);
+    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);
@@ -81,17 +85,33 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
             }
         },
         onError: (error) => {
-            setOrderError(error.message || "Failed to create payment order.");
+            // Backend requires KYC even when kycEnabled=false — reset to show KycGate
+            if (error.message?.includes("KYC verification required")) {
+                setKycApproved(false);
+                orderCreatedRef.current = false;
+            }
+            else {
+                setOrderError(error.message || "Failed to create payment order.");
+            }
             onErrorRef.current?.(error);
         },
     });
-    // 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
     (0, react_4.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
+    (0, react_4.useEffect)(() => {
+        if (address &&
+            !isLoadingGeo &&
             (!isStablecoin ? !isLoadingAnyspendQuote : true) &&
             usdAmount &&
             parseFloat(usdAmount) > 0 &&
             stripeWeb2Support?.isSupport &&
+            kycApproved &&
             !orderCreatedRef.current &&
             !orderId &&
             !isCreatingOrder &&
@@ -123,14 +143,17 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
                 },
                 expectedDstAmount: totalAmount,
                 callbackMetadata,
+                feeOnTop,
             });
         }
     }, [
+        address,
         isLoadingGeo,
         isStablecoin,
         isLoadingAnyspendQuote,
         usdAmount,
         stripeWeb2Support,
+        kycApproved,
         orderId,
         isCreatingOrder,
         orderError,
@@ -142,6 +165,7 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
         geoData,
         callbackMetadata,
         createOrder,
+        feeOnTop,
     ]);
     // Loading geo/stripe support check (and quote for non-stablecoins)
     if (isLoadingGeo || (!isStablecoin && isLoadingAnyspendQuote)) {
@@ -153,6 +177,14 @@ 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 });
+    }
+    // No wallet connected — prompt to connect before attempting card payment
+    if (!address) {
+        return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-connect flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-8 w-8 text-gray-400" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Connect wallet to pay with card" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "A wallet connection is required to complete card payment." })] }), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleConnectWallet, children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4" }), "Connect Wallet"] }) })] }));
+    }
     // Order creation error - show with retry
     if (orderError) {
         return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-error flex flex-col items-center gap-3 py-4", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-500", children: orderError }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {

package/dist/cjs/anyspend/react/components/checkout/KycGate.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,203 @@
+"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 wagmi_1 = require("wagmi");
+const useKycStatus_1 = require("../../hooks/useKycStatus");
+function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
+    const { address } = (0, wagmi_1.useAccount)();
+    const { partnerId } = (0, react_1.useB3Config)();
+    // Gate the status fetch behind explicit user consent so the wallet
+    // signature prompt doesn't fire automatically on tab open.
+    const [userInitiated, setUserInitiated] = (0, react_3.useState)(false);
+    const { getHeaders: preCacheKycHeaders } = (0, useKycStatus_1.useWalletAuthHeaders)();
+    const { kycStatus, isLoadingKycStatus, refetchKycStatus } = (0, useKycStatus_1.useKycStatus)(enabled && userInitiated);
+    const { createInquiry, isCreatingInquiry } = (0, useKycStatus_1.useCreateKycInquiry)();
+    const { verifyKyc, isVerifying } = (0, useKycStatus_1.useVerifyKyc)();
+    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    const [personaOpen, setPersonaOpen] = (0, react_3.useState)(false);
+    const [personaError, setPersonaError] = (0, react_3.useState)(null);
+    const [personaCancelled, setPersonaCancelled] = (0, react_3.useState)(false);
+    const prevStatusRef = (0, react_3.useRef)(null);
+    // Reset consent gate when wallet changes so the signature prompt isn't
+    // skipped for a different (or reconnected) wallet with no cached headers.
+    (0, react_3.useEffect)(() => {
+        setUserInitiated(false);
+    }, [address]);
+    // Notify parent when status resolves
+    (0, react_3.useEffect)(() => {
+        if (!kycStatus)
+            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 handleConnectWallet = (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]);
+    // No wallet connected — prompt to connect wallet (same pattern as crypto tab)
+    if (!address) {
+        return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-kyc-auth flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-8 w-8 text-gray-400" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Connect wallet to pay with card" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "A wallet connection is required to complete identity verification." })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: handleConnectWallet, children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4" }), "Connect Wallet"] }) })] }));
+    }
+    // Wallet connected but user hasn't kicked off the KYC check yet
+    if (!userInitiated) {
+        return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-kyc-prompt flex flex-col items-center gap-4 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-8 w-8 text-blue-500" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Identity verification required" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "Card payments require a one-time identity check. This takes about 2 minutes." })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "w-full", textClassName: "text-white", onClick: async () => {
+                        // Pre-sign in user-gesture context so React Query's queryFn
+                        // can reuse the cached headers without a second popup.
+                        // Only enable the query on success — if the user rejects the
+                        // signature, leave userInitiated=false and stay on this screen.
+                        try {
+                            await preCacheKycHeaders();
+                            setUserInitiated(true);
+                        }
+                        catch {
+                            // User rejected signature — stay on consent screen
+                        }
+                    }, children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldCheck, { className: "h-4 w-4" }), "Continue to Verify"] }) })] }));
+    }
+    // Loading KYC status state
+    if (isLoadingKycStatus) {
+        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/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/cjs/anyspend/react/components/checkout/VariablePricingInput.js

@@ -0,0 +1,145 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariablePricingInput = VariablePricingInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const number_1 = require("../../../../shared/utils/number");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+function VariablePricingInput({ config, tokenDecimals, tokenSymbol, themeColor, onChange, }) {
+    const currency = config.currency || tokenSymbol;
+    // Convert suggested amount from wei to display
+    const initialValue = (0, react_2.useMemo)(() => {
+        if (config.suggestedAmount) {
+            try {
+                return (0, number_1.formatUnits)(config.suggestedAmount, tokenDecimals);
+            }
+            catch {
+                return "";
+            }
+        }
+        return "";
+    }, [config.suggestedAmount, tokenDecimals]);
+    const [displayValue, setDisplayValue] = (0, react_2.useState)(initialValue);
+    const [error, setError] = (0, react_2.useState)(null);
+    // Min/max in display units
+    const minDisplay = (0, react_2.useMemo)(() => {
+        if (!config.minAmount)
+            return null;
+        try {
+            return parseFloat((0, number_1.formatUnits)(config.minAmount, tokenDecimals));
+        }
+        catch {
+            return null;
+        }
+    }, [config.minAmount, tokenDecimals]);
+    const maxDisplay = (0, react_2.useMemo)(() => {
+        if (!config.maxAmount)
+            return null;
+        try {
+            return parseFloat((0, number_1.formatUnits)(config.maxAmount, tokenDecimals));
+        }
+        catch {
+            return null;
+        }
+    }, [config.maxAmount, tokenDecimals]);
+    // Preset amounts
+    const presetAmounts = (0, react_2.useMemo)(() => {
+        const presets = [];
+        if (config.suggestedAmount) {
+            try {
+                const suggested = parseFloat((0, number_1.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 = (0, react_2.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 = (0, react_2.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 = (0, react_2.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 = (0, react_2.useCallback)((value) => {
+        setDisplayValue(value);
+        setError(null);
+        onChange(convertToWei(value));
+    }, [convertToWei, onChange]);
+    // Notify parent with initial value on mount
+    (0, react_2.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 ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-variable-pricing mb-6", children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: presetAmounts.map(preset => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handlePresetClick(preset.value), className: (0, cn_1.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))) })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: hint }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: error && ((0, jsx_runtime_1.jsx)(react_1.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/cjs/anyspend/react/components/common/CryptoPaymentMethod.js

@@ -76,7 +76,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
             setClosable(true);
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "crypto-payment-method mx-auto h-fit w-full max-w-[460px] px-5 pb-5 pt-5 sm:px-0 sm:pt-5", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
                         "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes?.header || "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), process.env.NODE_ENV === "development" && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.success("Success! Transaction completed"), className: "rounded bg-green-600 px-2 py-1 text-xs font-medium text-white hover:bg-green-700", children: "Success" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.error("Error! Transaction failed"), className: "rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700", children: "Error" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.info("Info: Processing your request..."), className: "rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700", children: "Info" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.warning("Warning: Low balance detected"), className: "rounded bg-yellow-600 px-2 py-1 text-xs font-medium text-white hover:bg-yellow-700", children: "Warning" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
                                         react_1.toast.success("Multiple test 1");
                                         setTimeout(() => react_1.toast.info("Multiple test 2"), 200);

package/dist/cjs/anyspend/react/components/common/FeeDetailPanel.js

@@ -62,7 +62,7 @@ function FeeDetailPanel({ fee, transactionAmountUsd, onBack, classes }) {
     // State for expanding tier lists
     const [showAllFeeTiers, setShowAllFeeTiers] = (0, react_2.useState)(false);
     const [showAllDiscountTiers, setShowAllDiscountTiers] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h3", { className: classes?.title || "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.tierCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: classes?.tierCardTitle || "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: isStripeFee
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-3 px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h3", { className: classes?.title || "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.tierCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: classes?.tierCardTitle || "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: isStripeFee
                                 ? FIAT_FEE_TIERS.map((tier, idx) => {
                                     const isCurrentTier = currentFiatTier?.label === tier.label;
                                     const currentTierIndex = FIAT_FEE_TIERS.findIndex(t => t.label === currentFiatTier?.label);

package/dist/cjs/anyspend/react/components/common/FiatPaymentMethod.js

@@ -83,10 +83,10 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
     }
     // Show loading state while checking geo availability
     if (isLoadingGeoOnramp) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "fiat-payment-method mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
+        return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "fiat-payment-method mx-auto w-full max-w-[460px] p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
                                     "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-secondary ml-2 text-sm", children: "Loading payment methods..." })] })] }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "fiat-payment-method mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "fiat-payment-method mx-auto w-full max-w-[460px] p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
                                 "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: classes?.optionsList || "flex flex-col gap-3", children: availablePaymentMethods.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method-no-methods bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-6 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No payment methods available in your region for the selected amount." }) })) : (availablePaymentMethods.map(method => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => {
                             setSelectedPaymentMethod(method.id);
                             onSelectPaymentMethod(method.id);