@b3dotfun/sdk 0.1.68 → 0.1.69-alpha.0

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

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

package/dist/esm/anyspend/react/components/checkout/FiatCheckoutPanel.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/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, }) {
+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 &&
@@ -120,14 +140,17 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
                 },
                 expectedDstAmount: totalAmount,
                 callbackMetadata,
+                feeOnTop,
             });
         }
     }, [
+        address,
         isLoadingGeo,
         isStablecoin,
         isLoadingAnyspendQuote,
         usdAmount,
         stripeWeb2Support,
+        kycApproved,
         orderId,
         isCreatingOrder,
         orderError,
@@ -139,6 +162,7 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
         geoData,
         callbackMetadata,
         createOrder,
+        feeOnTop,
     ]);
     // Loading geo/stripe support check (and quote for non-stablecoins)
     if (isLoadingGeo || (!isStablecoin && isLoadingAnyspendQuote)) {
@@ -150,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/common/CryptoPaymentMethod.js

@@ -72,7 +72,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
             setClosable(true);
         }
     };
-    return (_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: _jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: classes?.backButton ||
+    return (_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: _jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_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: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: classes?.header || "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), process.env.NODE_ENV === "development" && (_jsxs("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [_jsx("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { onClick: () => 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" }), _jsx("button", { onClick: () => 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" }), _jsx("button", { onClick: () => 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" }), _jsx("button", { onClick: () => 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" }), _jsx("button", { onClick: () => {
                                         toast.success("Multiple test 1");
                                         setTimeout(() => toast.info("Multiple test 2"), 200);

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

@@ -59,7 +59,7 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack, classes }) {
     // State for expanding tier lists
     const [showAllFeeTiers, setShowAllFeeTiers] = useState(false);
     const [showAllDiscountTiers, setShowAllDiscountTiers] = useState(false);
-    return (_jsx("div", { className: classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5", children: _jsxs("div", { className: "flex w-full flex-col gap-3", children: [_jsx("div", { className: "text-center", children: _jsx("h3", { className: classes?.title || "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), _jsxs("div", { className: classes?.tierCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [_jsx("h4", { className: classes?.tierCardTitle || "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), _jsx("div", { className: "space-y-1.5", children: isStripeFee
+    return (_jsx("div", { className: classes?.container || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-3 px-5", children: _jsxs("div", { className: "flex w-full flex-col gap-3", children: [_jsx("div", { className: "text-center", children: _jsx("h3", { className: classes?.title || "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), _jsxs("div", { className: classes?.tierCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [_jsx("h4", { className: classes?.tierCardTitle || "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), _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/esm/anyspend/react/components/common/FiatPaymentMethod.js

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

package/dist/esm/anyspend/react/components/common/OrderDetails.js

@@ -469,4 +469,4 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return (_jsxs("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [_jsxs("div", { className: "order-details-transaction-content flex grow items-center gap-4", children: [_jsx(motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: _jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: _jsx(CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? (_jsx(TextShimmer, { duration: 1, children: title })) : (_jsx("span", { className: "text-as-primary", children: title })) })] }), _jsx("div", { className: "flex flex-col gap-1", children: tx ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: _jsx("a", { href: getExplorerTxUrl(chainId, tx.txHash), target: "_blank", children: _jsx("div", { className: "text-as-primary/30 font-mono text-xs", children: centerTruncate(tx?.txHash, 6) }) }) })) : null })] }));
 }
-export const OrderDetailsLoadingView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: [_jsxs(Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [_jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg p-6 pb-3", children: [_jsx("div", { className: "h-[200px] w-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "h-5 w-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-background mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx(Skeleton, { className: "h-10 w-full" })] }));
+export const OrderDetailsLoadingView = (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col items-center gap-4", children: [_jsxs(Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [_jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg p-6 pb-3", children: [_jsx("div", { className: "h-[200px] w-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "h-5 w-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-background mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx(Skeleton, { className: "h-10 w-full" })] }));

package/dist/esm/anyspend/react/components/common/PointsDetailPanel.js

@@ -3,6 +3,6 @@ import { ShinyButton } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import Link from "next/link";
 export function PointsDetailPanel({ pointsAmount = 0, onBack, classes }) {
-    return (_jsx("div", { className: classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5", children: _jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("h3", { className: classes?.title || "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), _jsxs("p", { className: classes?.description || "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn", " ", _jsxs("span", { className: classes?.highlightText || "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", _jsx(Link, { href: "https://anyspend.com/points", target: "_blank", className: classes?.link || "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), _jsxs("div", { className: classes?.infoCard ||
+    return (_jsx("div", { className: classes?.container || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-4 px-5", children: _jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("h3", { className: classes?.title || "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), _jsxs("p", { className: classes?.description || "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn", " ", _jsxs("span", { className: classes?.highlightText || "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", _jsx(Link, { href: "https://anyspend.com/points", target: "_blank", className: classes?.link || "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), _jsxs("div", { className: classes?.infoCard ||
                         "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [_jsx("h4", { className: classes?.infoCardTitle || "text-as-primary mb-2 font-semibold", children: "How it works:" }), _jsxs("ul", { className: classes?.infoList || "text-as-primary/70 space-y-1 text-sm", children: [_jsx("li", { className: classes?.infoListItem, children: "\u2022 Points are earned based on transaction volume" }), _jsx("li", { className: classes?.infoListItem, children: "\u2022 Higher volume = more points" }), _jsx("li", { className: classes?.infoListItem, children: "\u2022 Points contribute to future airdrops" }), _jsx("li", { className: classes?.infoListItem, children: "\u2022 Keep swapping to maximize your rewards" })] })] }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: classes?.backButton || cn("as-main-button !bg-as-brand relative w-full"), textClassName: cn("text-white"), children: "Back to Swap" })] }) }));
 }

package/dist/esm/anyspend/react/components/common/RecipientSelection.js

@@ -29,7 +29,7 @@ export function RecipientSelection({ initialValue = "", placeholder = "Enter rec
     };
     const isAddressValid = !validateAddress || !recipientAddress || validateAddress(recipientAddress);
     const canConfirm = recipientAddress && isAddressValid;
-    return (_jsx("div", { className: classes?.container || "recipient-selection mx-auto w-[460px] max-w-full p-5", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: classes?.header || "flex justify-around", children: [_jsx("button", { onClick: onBack, className: classes?.backButton ||
+    return (_jsx("div", { className: classes?.container || "recipient-selection mx-auto w-full max-w-[460px] p-5", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: classes?.header || "flex justify-around", children: [_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: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsxs("div", { className: "flex-1 text-center", children: [_jsx("h2", { className: "text-as-primary text-lg font-semibold", children: title }), _jsx("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [_jsx("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: classes?.searchInput ||
                                         "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), _jsx("div", { className: "border-as-border-secondary border-l", children: _jsx("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && (_jsx("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), _jsx("button", { onClick: handleConfirm, disabled: !canConfirm, className: classes?.confirmButton ||
                                 "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));