@b3dotfun/sdk 0.1.66 → 0.1.68

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

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "../../../../anyspend/react/index.js";
+import { anyspendService } from "../../../../anyspend/services/anyspend.js";
+import { formatTokenAmount } from "../../../../shared/utils/number.js";
+import { ShinyButton, TextShimmer, useTokenData } from "../../../../global-account/react/index.js";
+import { Loader2 } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+/** Map chain IDs to Coinbase blockchain identifiers */
+const CHAIN_ID_TO_COINBASE_BLOCKCHAIN = {
+    1: "ethereum",
+    8453: "base",
+    42161: "arbitrum",
+    10: "optimism",
+    137: "polygon",
+    43114: "avalanche",
+    56: "bsc",
+};
+export function CoinbaseCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, }) {
+    // Stable refs for callback props to avoid re-triggering effects
+    const onSuccessRef = useRef(onSuccess);
+    onSuccessRef.current = onSuccess;
+    const onOrderCreatedRef = useRef(onOrderCreated);
+    onOrderCreatedRef.current = onOrderCreated;
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+    const formattedAmount = useMemo(() => {
+        const decimals = tokenData?.decimals || 18;
+        return formatTokenAmount(BigInt(totalAmount), decimals);
+    }, [totalAmount, tokenData]);
+    const { geoData, coinbaseAvailablePaymentMethods, isLoading } = useGeoOnrampOptions(formattedAmount);
+    // Order + redirect state
+    const [orderId, setOrderId] = useState(null);
+    const [isRedirecting, setIsRedirecting] = useState(false);
+    const [error, setError] = useState(null);
+    const orderCreatedRef = useRef(false);
+    const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
+        onSuccess: data => {
+            const id = data.data?.id;
+            if (id) {
+                setOrderId(id);
+            }
+            else {
+                setError("Failed to create Coinbase order. Please try again.");
+            }
+        },
+        onError: (err) => {
+            setError(err.message || "Failed to create payment order.");
+            onErrorRef.current?.(err);
+        },
+    });
+    // Once we have orderId, generate Coinbase onramp URL and redirect
+    useEffect(() => {
+        if (!orderId || isRedirecting)
+            return;
+        const blockchain = CHAIN_ID_TO_COINBASE_BLOCKCHAIN[destinationTokenChainId];
+        if (!blockchain) {
+            setError(`Coinbase Pay is not supported for this chain.`);
+            return;
+        }
+        const paymentMethodId = coinbaseAvailablePaymentMethods[0]?.id || "CARD";
+        setIsRedirecting(true);
+        anyspendService
+            .getCoinbaseOnrampUrl({
+            presetFiatAmount: formattedAmount,
+            fiatCurrency: "USD",
+            defaultAsset: tokenData?.symbol || "USDC",
+            defaultPaymentMethod: paymentMethodId,
+            destinationAddress: recipientAddress,
+            blockchains: [blockchain],
+            country: geoData?.country || "US",
+            orderId,
+            redirectUrl: window.location.href,
+            useSessionToken: false,
+        })
+            .then(response => {
+            if (response.data?.url) {
+                // Persist orderId directly before redirect — useEffect won't run in time
+                if (orderId) {
+                    sessionStorage.setItem("anyspend_checkout_orderId", orderId);
+                    onOrderCreatedRef.current?.(orderId);
+                }
+                onSuccessRef.current?.({ orderId });
+                window.location.href = response.data.url;
+            }
+            else {
+                setError("Failed to generate Coinbase Pay URL.");
+                setIsRedirecting(false);
+            }
+        })
+            .catch(err => {
+            setError(err.message || "Failed to generate Coinbase Pay URL.");
+            setIsRedirecting(false);
+            onErrorRef.current?.(err instanceof Error ? err : new Error(err.message));
+        });
+    }, [
+        orderId,
+        isRedirecting,
+        destinationTokenChainId,
+        coinbaseAvailablePaymentMethods,
+        formattedAmount,
+        tokenData,
+        recipientAddress,
+        geoData,
+    ]);
+    const handleContinue = useCallback(() => {
+        if (isCreatingOrder || orderCreatedRef.current)
+            return;
+        setError(null);
+        orderCreatedRef.current = true;
+        const dstToken = {
+            address: destinationTokenAddress,
+            chainId: destinationTokenChainId,
+            decimals: tokenData?.decimals || 18,
+            symbol: tokenData?.symbol || "",
+            name: tokenData?.name || "",
+            metadata: { logoURI: tokenData?.logoURI || "" },
+        };
+        const paymentMethodId = coinbaseAvailablePaymentMethods[0]?.id || "CARD";
+        createOrder({
+            recipientAddress,
+            orderType: "swap",
+            dstChain: destinationTokenChainId,
+            dstToken,
+            srcFiatAmount: formattedAmount,
+            onramp: {
+                vendor: "coinbase",
+                paymentMethod: paymentMethodId,
+                country: geoData?.country || "US",
+                redirectUrl: window.location.href,
+            },
+            expectedDstAmount: totalAmount,
+            callbackMetadata,
+        });
+    }, [
+        isCreatingOrder,
+        destinationTokenAddress,
+        destinationTokenChainId,
+        tokenData,
+        coinbaseAvailablePaymentMethods,
+        recipientAddress,
+        formattedAmount,
+        geoData,
+        totalAmount,
+        callbackMetadata,
+        createOrder,
+    ]);
+    if (isLoading) {
+        return (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: "anyspend-coinbase-loading flex items-center justify-center py-6", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "ml-2 text-sm", children: "Checking availability..." })] }));
+    }
+    if (coinbaseAvailablePaymentMethods.length === 0) {
+        return (_jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: "anyspend-coinbase-unavailable py-4 text-center", children: _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Coinbase Pay is not available in your region for this amount." }) }));
+    }
+    const isProcessing = isCreatingOrder || isRedirecting;
+    return (_jsxs(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, ease: "easeOut" }, className: "anyspend-coinbase-panel flex flex-col gap-3", children: [_jsx("p", { className: "anyspend-coinbase-description text-sm text-gray-600 dark:text-gray-400", children: "Pay with your Coinbase account using debit card, bank account, or crypto balance." }), _jsx(AnimatePresence, { initial: false, children: error && (_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: "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-sm text-red-600 dark:text-red-400", children: error }) }, "coinbase-error")) }), _jsx(ShinyButton, { accentColor: themeColor || "#0052FF", onClick: () => {
+                    if (error) {
+                        // Reset state for retry
+                        setError(null);
+                        setOrderId(null);
+                        setIsRedirecting(false);
+                        orderCreatedRef.current = false;
+                    }
+                    handleContinue();
+                }, disabled: isProcessing, className: "anyspend-coinbase-btn w-full", textClassName: "text-white", children: isProcessing ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), isRedirecting ? "Redirecting to Coinbase..." : "Creating order..."] })) : error ? ("Try again") : ("Continue with Coinbase") })] }));
+}

package/dist/esm/anyspend/react/components/checkout/CryptoPayPanel.d.ts

@@ -0,0 +1,23 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CryptoPayPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    buttonText?: string;
+    themeColor?: string;
+    /** @deprecated Use onOrderCreated instead. Kept for backward compatibility. */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called when an order is created and payment committed — triggers lifecycle tracking in parent */
+    onOrderCreated?: (orderId: string) => void;
+    onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
+    classes?: AnySpendCheckoutClasses;
+    /** Optional sender address for pre-fetching balances. Falls back to connected wallet. */
+    senderAddress?: string;
+}
+export declare function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, senderAddress, }: CryptoPayPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,321 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAnyspendQuote } from "../../../../anyspend/react/hooks/useAnyspendQuote.js";
+import { useAnyspendCreateOrder } from "../../../../anyspend/react/hooks/useAnyspendCreateOrder.js";
+import { useAnyspendOrderAndTransactions } from "../../../../anyspend/react/hooks/useAnyspendOrderAndTransactions.js";
+import { useCreateDepositFirstOrder } from "../../../../anyspend/react/hooks/useCreateDepositFirstOrder.js";
+import { useOnOrderSuccess } from "../../../../anyspend/react/hooks/useOnOrderSuccess.js";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, getAvailableChainIds } from "../../../../anyspend/index.js";
+import { getPaymentUrl } from "../../../../anyspend/utils/chain.js";
+import { isNativeToken } from "../../../../anyspend/utils/token.js";
+import { useAccountWallet, useB3Config, useIsMobile, useModalStore, useSimTokenBalance, useTokenData, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { ShinyButton, TextShimmer } from "../../../../global-account/react/index.js";
+import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
+import { formatTokenAmount } from "../../../../shared/utils/number.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { Check, ChevronDown, ChevronsUpDown, Copy, Loader2, QrCode } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { encodeFunctionData, erc20Abi } from "viem";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { TokenSelector } from "@relayprotocol/relay-kit-ui";
+import { ChainTokenIcon } from "../common/ChainTokenIcon.js";
+export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText = "Pay", themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, senderAddress, }) {
+    // Stable refs for callback props to avoid re-triggering effects
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    const onOrderCreatedRef = useRef(onOrderCreated);
+    onOrderCreatedRef.current = onOrderCreated;
+    /* ------------------------------------------------------------------ */
+    /* Shared state: token selection, quote, balance                      */
+    /* ------------------------------------------------------------------ */
+    const [selectedSrcChainId, setSelectedSrcChainId] = useState(destinationTokenChainId);
+    const [selectedSrcToken, setSelectedSrcToken] = useState(null);
+    const [copied, setCopied] = useState(false);
+    const { address: walletAddress } = useAccountWallet();
+    const effectiveAddress = senderAddress || walletAddress;
+    const { partnerId } = useB3Config();
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    const { data: dstTokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+    // Default to destination token data once available
+    useEffect(() => {
+        if (!selectedSrcToken && dstTokenData) {
+            setSelectedSrcToken({
+                address: destinationTokenAddress,
+                chainId: destinationTokenChainId,
+                decimals: dstTokenData.decimals || 18,
+                symbol: dstTokenData.symbol || "",
+                name: dstTokenData.name || "",
+                metadata: { logoURI: dstTokenData.logoURI || "" },
+            });
+        }
+    }, [selectedSrcToken, dstTokenData, destinationTokenAddress, destinationTokenChainId]);
+    const isSameToken = selectedSrcToken &&
+        selectedSrcToken.address.toLowerCase() === destinationTokenAddress.toLowerCase() &&
+        selectedSrcToken.chainId === destinationTokenChainId;
+    const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote({
+        type: "swap",
+        srcChain: selectedSrcChainId,
+        dstChain: destinationTokenChainId,
+        srcTokenAddress: selectedSrcToken?.address || "",
+        dstTokenAddress: destinationTokenAddress,
+        tradeType: "EXACT_OUTPUT",
+        amount: totalAmount,
+    });
+    const tokenAddress = selectedSrcToken
+        ? isNativeToken(selectedSrcToken.address)
+            ? "native"
+            : selectedSrcToken.address
+        : undefined;
+    const { data: balanceData } = useSimTokenBalance(effectiveAddress, tokenAddress, selectedSrcChainId);
+    const balance = useMemo(() => {
+        const b = balanceData?.balances?.[0];
+        if (!b?.amount)
+            return { raw: BigInt(0), formatted: "0", decimals: 18 };
+        return { raw: BigInt(b.amount), formatted: formatTokenAmount(BigInt(b.amount), b.decimals), decimals: b.decimals };
+    }, [balanceData]);
+    const srcAmount = useMemo(() => {
+        if (isSameToken)
+            return totalAmount;
+        return anyspendQuote?.data?.currencyIn?.amount || "0";
+    }, [isSameToken, totalAmount, anyspendQuote]);
+    const srcAmountFormatted = useMemo(() => {
+        if (!selectedSrcToken)
+            return "0";
+        return formatTokenAmount(BigInt(srcAmount || "0"), selectedSrcToken.decimals || 18);
+    }, [srcAmount, selectedSrcToken]);
+    const hasEnoughBalance = balance.raw >= BigInt(srcAmount || "0");
+    /* ------------------------------------------------------------------ */
+    /* Destination token object (shared by both flows)                    */
+    /* ------------------------------------------------------------------ */
+    const dstToken = useMemo(() => ({
+        address: destinationTokenAddress,
+        chainId: destinationTokenChainId,
+        decimals: dstTokenData?.decimals || 18,
+        symbol: dstTokenData?.symbol || "",
+        name: dstTokenData?.name || "",
+        metadata: { logoURI: dstTokenData?.logoURI || "" },
+    }), [destinationTokenAddress, destinationTokenChainId, dstTokenData]);
+    /* ------------------------------------------------------------------ */
+    /* QR / deposit-first order (always created for QR display)           */
+    /* ------------------------------------------------------------------ */
+    const [qrOrderId, setQrOrderId] = useState();
+    const [globalAddress, setGlobalAddress] = useState();
+    const qrOrderCreatedRef = useRef(false);
+    const { createOrder: createDepositOrder, isCreatingOrder: isCreatingQrOrder } = useCreateDepositFirstOrder({
+        onSuccess: data => {
+            setQrOrderId(data.data?.id);
+            setGlobalAddress(data.data?.globalAddress);
+        },
+        onError: (error) => {
+            qrOrderCreatedRef.current = false;
+            onErrorRef.current?.(error);
+        },
+    });
+    // Create deposit-first order on mount and when token changes
+    useEffect(() => {
+        if (qrOrderCreatedRef.current)
+            return;
+        if (!selectedSrcToken)
+            return;
+        qrOrderCreatedRef.current = true;
+        createDepositOrder({
+            recipientAddress,
+            srcChain: selectedSrcChainId,
+            dstChain: destinationTokenChainId,
+            srcToken: selectedSrcToken,
+            dstToken,
+            callbackMetadata,
+            creatorAddress: effectiveAddress,
+        });
+    }, [
+        selectedSrcToken,
+        selectedSrcChainId,
+        recipientAddress,
+        destinationTokenChainId,
+        dstToken,
+        callbackMetadata,
+        createDepositOrder,
+        effectiveAddress,
+    ]);
+    const { orderAndTransactions: qrOat } = useAnyspendOrderAndTransactions(qrOrderId);
+    useOnOrderSuccess({
+        orderData: qrOat,
+        orderId: qrOrderId,
+        onSuccess: (txHash) => onSuccess?.({ orderId: qrOrderId, txHash }),
+    });
+    // Notify parent when a deposit is detected on the QR/deposit-first order
+    const qrDepositNotifiedRef = useRef(false);
+    useEffect(() => {
+        if (qrOrderId &&
+            !qrDepositNotifiedRef.current &&
+            qrOat?.data?.depositTxs?.length &&
+            qrOat.data.depositTxs.length > 0) {
+            qrDepositNotifiedRef.current = true;
+            onOrderCreatedRef.current?.(qrOrderId);
+        }
+    }, [qrOrderId, qrOat?.data?.depositTxs?.length]);
+    // QR code value
+    const qrAmount = srcAmount && srcAmount !== "0" ? BigInt(srcAmount) : undefined;
+    const qrValue = globalAddress && selectedSrcToken
+        ? getPaymentUrl(globalAddress, qrAmount, isNativeToken(selectedSrcToken.address) ? "ETH" : selectedSrcToken.address, selectedSrcChainId, selectedSrcToken.decimals)
+        : "";
+    /* ------------------------------------------------------------------ */
+    /* Wallet / swap order (created on button click)                      */
+    /* ------------------------------------------------------------------ */
+    const [walletOrderId, setWalletOrderId] = useState();
+    const [isSendingDeposit, setIsSendingDeposit] = useState(false);
+    const [depositRejected, setDepositRejected] = useState(false);
+    const depositSentRef = useRef(false);
+    const { switchChainAndExecute } = useUnifiedChainSwitchAndExecute();
+    const { createOrder: createSwapOrder, isCreatingOrder: isCreatingSwapOrder } = useAnyspendCreateOrder({
+        onSuccess: data => {
+            const id = data.data?.id;
+            if (id)
+                setWalletOrderId(id);
+        },
+        onError: (error) => {
+            setIsSendingDeposit(false);
+            onErrorRef.current?.(error);
+        },
+    });
+    const { orderAndTransactions: walletOat } = useAnyspendOrderAndTransactions(walletOrderId);
+    // Auto-send deposit tx once swap order is ready
+    useEffect(() => {
+        if (!walletOat?.data?.order || depositSentRef.current || depositRejected)
+            return;
+        const order = walletOat.data.order;
+        if (order.status !== "scanning_deposit_transaction")
+            return;
+        if (walletOat.data.depositTxs?.length)
+            return;
+        depositSentRef.current = true;
+        const sendDeposit = async () => {
+            try {
+                setIsSendingDeposit(true);
+                const amount = BigInt(order.srcAmount);
+                if (isNativeToken(order.srcTokenAddress)) {
+                    await switchChainAndExecute(order.srcChain, {
+                        to: order.globalAddress,
+                        value: amount,
+                    });
+                }
+                else {
+                    const data = encodeFunctionData({
+                        abi: erc20Abi,
+                        functionName: "transfer",
+                        args: [order.globalAddress, amount],
+                    });
+                    await switchChainAndExecute(order.srcChain, {
+                        to: order.srcTokenAddress,
+                        data,
+                        value: BigInt(0),
+                    });
+                }
+                // Deposit sent — notify parent to transition to order lifecycle tracking
+                if (walletOrderId) {
+                    onOrderCreatedRef.current?.(walletOrderId);
+                }
+            }
+            catch (error) {
+                depositSentRef.current = false;
+                const isUserRejection = error?.code === 4001 || error?.message?.includes("rejected") || error?.message?.includes("denied");
+                if (isUserRejection) {
+                    setDepositRejected(true);
+                }
+                onErrorRef.current?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
+            }
+            finally {
+                setIsSendingDeposit(false);
+            }
+        };
+        sendDeposit();
+    }, [walletOat, switchChainAndExecute, walletOrderId, depositRejected]);
+    useOnOrderSuccess({
+        orderData: walletOat,
+        orderId: walletOrderId,
+        onSuccess: (txHash) => onSuccess?.({ orderId: walletOrderId, txHash }),
+    });
+    const isWaitingForExecution = !!walletOrderId && walletOat?.data?.order.status !== "executed";
+    const handleWalletPay = useCallback(() => {
+        if (!selectedSrcToken || !walletAddress)
+            return;
+        depositSentRef.current = false;
+        createSwapOrder({
+            recipientAddress,
+            orderType: "swap",
+            srcChain: selectedSrcChainId,
+            dstChain: destinationTokenChainId,
+            srcToken: selectedSrcToken,
+            dstToken,
+            srcAmount,
+            expectedDstAmount: totalAmount,
+            callbackMetadata,
+            creatorAddress: effectiveAddress,
+        });
+    }, [
+        selectedSrcToken,
+        walletAddress,
+        effectiveAddress,
+        recipientAddress,
+        selectedSrcChainId,
+        destinationTokenChainId,
+        dstToken,
+        srcAmount,
+        totalAmount,
+        callbackMetadata,
+        createSwapOrder,
+    ]);
+    /* ------------------------------------------------------------------ */
+    /* Handlers                                                           */
+    /* ------------------------------------------------------------------ */
+    const handleSelectToken = (token) => {
+        setSelectedSrcToken(token);
+        setSelectedSrcChainId(token.chainId);
+        // Reset both order flows
+        setQrOrderId(undefined);
+        setGlobalAddress(undefined);
+        qrOrderCreatedRef.current = false;
+        qrDepositNotifiedRef.current = false;
+        setWalletOrderId(undefined);
+        depositSentRef.current = false;
+    };
+    const handleCopyAddress = async () => {
+        if (globalAddress) {
+            await navigator.clipboard.writeText(globalAddress);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    };
+    const handleConnectWallet = () => {
+        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
+        setB3ModalOpen(true);
+    };
+    const isLoading = isLoadingAnyspendQuote;
+    const isPending = isCreatingSwapOrder || isSendingDeposit || isWaitingForExecution;
+    const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+    const chainName = ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain";
+    const chainLogoUrl = ALL_CHAINS[selectedSrcChainId]?.logoUrl;
+    // Collapse QR on mobile when a wallet connector is available
+    const isMobile = useIsMobile();
+    const hasWalletConnector = typeof window !== "undefined" && !!window.ethereum;
+    const [qrExpanded, setQrExpanded] = useState(!isMobile || !hasWalletConnector);
+    /* ------------------------------------------------------------------ */
+    /* Render                                                             */
+    /* ------------------------------------------------------------------ */
+    return (_jsxs("div", { className: cn("anyspend-crypto-pay-panel flex flex-col gap-4", classes?.cryptoPanel), children: [_jsxs("div", { className: "anyspend-token-selector", children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Pay with" }), _jsx(TokenSelector, { address: effectiveAddress, chainIdsFilter: getAvailableChainIds("from"), context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: getAvailableChainIds("from"), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: token => {
+                            handleSelectToken({
+                                address: token.address,
+                                chainId: token.chainId,
+                                decimals: token.decimals,
+                                metadata: { logoURI: token.logoURI },
+                                name: token.name,
+                                symbol: token.symbol,
+                            });
+                        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs("button", { className: cn("flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600", classes?.tokenSelector), children: [selectedSrcToken ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : (_jsx("span", { className: "text-sm text-gray-400", children: "Select token" })), _jsx(ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800/50", classes?.quoteDisplay), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), _jsx(AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: _jsx(TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : (_jsxs(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), _jsx(AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (_jsxs(motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !walletAddress ? (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: cn("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: cn("w-full", classes?.payButton), textClassName: cn(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
+                            ? "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")) })] }));
+}

package/dist/esm/anyspend/react/components/checkout/DiscountCodeInput.d.ts

@@ -0,0 +1,12 @@
+import type { DiscountResult } from "../../../types/forms";
+interface DiscountCodeInputProps {
+    onApply: (code: string) => Promise<DiscountResult>;
+    appliedDiscount: DiscountResult | null;
+    onRemove: () => void;
+    loading?: boolean;
+    tokenSymbol?: string;
+    tokenDecimals?: number;
+    className?: string;
+}
+export declare function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading, tokenSymbol, tokenDecimals, className, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { formatTokenAmount, safeBigInt } from "../../../../shared/utils/number.js";
+import { X, Loader2, Check } from "lucide-react";
+import { useState, useCallback } from "react";
+function formatAmount(amount, decimals, symbol) {
+    const bi = safeBigInt(amount);
+    if (bi === BigInt(0))
+        return "Free";
+    return `${formatTokenAmount(bi, decimals)} ${symbol}`;
+}
+export function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, className, }) {
+    const [code, setCode] = useState("");
+    const [error, setError] = useState(null);
+    const [isValidating, setIsValidating] = useState(false);
+    const handleApply = useCallback(async () => {
+        if (!code.trim())
+            return;
+        setError(null);
+        setIsValidating(true);
+        try {
+            const result = await onApply(code.trim());
+            if (!result.valid) {
+                setError(result.error || "Invalid discount code");
+            }
+            else {
+                setCode("");
+            }
+        }
+        catch {
+            setError("Failed to validate discount code");
+        }
+        finally {
+            setIsValidating(false);
+        }
+    }, [code, onApply]);
+    const handleRemove = () => {
+        onRemove();
+        setError(null);
+    };
+    // Show applied discount state
+    if (appliedDiscount?.valid) {
+        return (_jsxs("div", { className: cn("anyspend-discount anyspend-discount-applied space-y-2", className), children: [_jsx("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), _jsxs("div", { className: "anyspend-discount-badge flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-3 py-2 dark:border-green-800 dark:bg-green-900/20", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), _jsx("span", { className: "anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300", children: appliedDiscount.discount_type === "percentage"
+                                        ? `${appliedDiscount.discount_value}% off`
+                                        : appliedDiscount.discount_amount
+                                            ? `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
+                                            : "Discount applied" })] }), _jsx("button", { type: "button", onClick: handleRemove, className: "anyspend-discount-remove rounded p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }));
+    }
+    return (_jsxs("div", { className: cn("anyspend-discount space-y-2", className), children: [_jsx("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount Code" }), _jsxs("div", { className: "anyspend-discount-input-row flex gap-2", children: [_jsx("input", { type: "text", value: code, onChange: e => {
+                            setCode(e.target.value.toUpperCase());
+                            setError(null);
+                        }, onKeyDown: e => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                handleApply();
+                            }
+                        }, placeholder: "Enter code", disabled: loading || isValidating, className: cn("anyspend-discount-input flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition-colors placeholder:text-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-gray-500", error && "border-red-400") }), _jsx("button", { type: "button", onClick: handleApply, disabled: !code.trim() || loading || isValidating, className: "anyspend-discount-apply rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200", children: isValidating ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Apply" })] }), error && _jsx("p", { className: "anyspend-discount-error text-xs text-red-500", children: error })] }));
+}

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

@@ -0,0 +1,20 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface FiatCheckoutPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    themeColor?: string;
+    /** @deprecated Use onOrderCreated instead. Kept for backward compatibility. */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called when payment is confirmed — triggers lifecycle tracking in parent */
+    onOrderCreated?: (orderId: string) => void;
+    onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};