@b3dotfun/sdk 0.1.66 → 0.1.68

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

@@ -0,0 +1,324 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoPayPanel = CryptoPayPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useAnyspendQuote_1 = require("../../../../anyspend/react/hooks/useAnyspendQuote");
+const useAnyspendCreateOrder_1 = require("../../../../anyspend/react/hooks/useAnyspendCreateOrder");
+const useAnyspendOrderAndTransactions_1 = require("../../../../anyspend/react/hooks/useAnyspendOrderAndTransactions");
+const useCreateDepositFirstOrder_1 = require("../../../../anyspend/react/hooks/useCreateDepositFirstOrder");
+const useOnOrderSuccess_1 = require("../../../../anyspend/react/hooks/useOnOrderSuccess");
+const anyspend_1 = require("../../../../anyspend");
+const chain_1 = require("../../../../anyspend/utils/chain");
+const token_1 = require("../../../../anyspend/utils/token");
+const react_1 = require("../../../../global-account/react");
+const react_2 = require("../../../../global-account/react");
+const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
+const number_1 = require("../../../../shared/utils/number");
+const cn_1 = require("../../../../shared/utils/cn");
+const lucide_react_1 = require("lucide-react");
+const qrcode_react_1 = require("qrcode.react");
+const viem_1 = require("viem");
+const react_3 = require("motion/react");
+const react_4 = require("react");
+const relay_kit_ui_1 = require("@relayprotocol/relay-kit-ui");
+const ChainTokenIcon_1 = require("../common/ChainTokenIcon");
+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 = (0, react_4.useRef)(onError);
+    onErrorRef.current = onError;
+    const onOrderCreatedRef = (0, react_4.useRef)(onOrderCreated);
+    onOrderCreatedRef.current = onOrderCreated;
+    /* ------------------------------------------------------------------ */
+    /* Shared state: token selection, quote, balance                      */
+    /* ------------------------------------------------------------------ */
+    const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_4.useState)(destinationTokenChainId);
+    const [selectedSrcToken, setSelectedSrcToken] = (0, react_4.useState)(null);
+    const [copied, setCopied] = (0, react_4.useState)(false);
+    const { address: walletAddress } = (0, react_1.useAccountWallet)();
+    const effectiveAddress = senderAddress || walletAddress;
+    const { partnerId } = (0, react_1.useB3Config)();
+    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    const { data: dstTokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    // Default to destination token data once available
+    (0, react_4.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 } = (0, useAnyspendQuote_1.useAnyspendQuote)({
+        type: "swap",
+        srcChain: selectedSrcChainId,
+        dstChain: destinationTokenChainId,
+        srcTokenAddress: selectedSrcToken?.address || "",
+        dstTokenAddress: destinationTokenAddress,
+        tradeType: "EXACT_OUTPUT",
+        amount: totalAmount,
+    });
+    const tokenAddress = selectedSrcToken
+        ? (0, token_1.isNativeToken)(selectedSrcToken.address)
+            ? "native"
+            : selectedSrcToken.address
+        : undefined;
+    const { data: balanceData } = (0, react_1.useSimTokenBalance)(effectiveAddress, tokenAddress, selectedSrcChainId);
+    const balance = (0, react_4.useMemo)(() => {
+        const b = balanceData?.balances?.[0];
+        if (!b?.amount)
+            return { raw: BigInt(0), formatted: "0", decimals: 18 };
+        return { raw: BigInt(b.amount), formatted: (0, number_1.formatTokenAmount)(BigInt(b.amount), b.decimals), decimals: b.decimals };
+    }, [balanceData]);
+    const srcAmount = (0, react_4.useMemo)(() => {
+        if (isSameToken)
+            return totalAmount;
+        return anyspendQuote?.data?.currencyIn?.amount || "0";
+    }, [isSameToken, totalAmount, anyspendQuote]);
+    const srcAmountFormatted = (0, react_4.useMemo)(() => {
+        if (!selectedSrcToken)
+            return "0";
+        return (0, number_1.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 = (0, react_4.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] = (0, react_4.useState)();
+    const [globalAddress, setGlobalAddress] = (0, react_4.useState)();
+    const qrOrderCreatedRef = (0, react_4.useRef)(false);
+    const { createOrder: createDepositOrder, isCreatingOrder: isCreatingQrOrder } = (0, useCreateDepositFirstOrder_1.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
+    (0, react_4.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 } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(qrOrderId);
+    (0, useOnOrderSuccess_1.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 = (0, react_4.useRef)(false);
+    (0, react_4.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
+        ? (0, chain_1.getPaymentUrl)(globalAddress, qrAmount, (0, token_1.isNativeToken)(selectedSrcToken.address) ? "ETH" : selectedSrcToken.address, selectedSrcChainId, selectedSrcToken.decimals)
+        : "";
+    /* ------------------------------------------------------------------ */
+    /* Wallet / swap order (created on button click)                      */
+    /* ------------------------------------------------------------------ */
+    const [walletOrderId, setWalletOrderId] = (0, react_4.useState)();
+    const [isSendingDeposit, setIsSendingDeposit] = (0, react_4.useState)(false);
+    const [depositRejected, setDepositRejected] = (0, react_4.useState)(false);
+    const depositSentRef = (0, react_4.useRef)(false);
+    const { switchChainAndExecute } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    const { createOrder: createSwapOrder, isCreatingOrder: isCreatingSwapOrder } = (0, useAnyspendCreateOrder_1.useAnyspendCreateOrder)({
+        onSuccess: data => {
+            const id = data.data?.id;
+            if (id)
+                setWalletOrderId(id);
+        },
+        onError: (error) => {
+            setIsSendingDeposit(false);
+            onErrorRef.current?.(error);
+        },
+    });
+    const { orderAndTransactions: walletOat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(walletOrderId);
+    // Auto-send deposit tx once swap order is ready
+    (0, react_4.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 ((0, token_1.isNativeToken)(order.srcTokenAddress)) {
+                    await switchChainAndExecute(order.srcChain, {
+                        to: order.globalAddress,
+                        value: amount,
+                    });
+                }
+                else {
+                    const data = (0, viem_1.encodeFunctionData)({
+                        abi: viem_1.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]);
+    (0, useOnOrderSuccess_1.useOnOrderSuccess)({
+        orderData: walletOat,
+        orderId: walletOrderId,
+        onSuccess: (txHash) => onSuccess?.({ orderId: walletOrderId, txHash }),
+    });
+    const isWaitingForExecution = !!walletOrderId && walletOat?.data?.order.status !== "executed";
+    const handleWalletPay = (0, react_4.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: b3Chain_1.thirdwebB3Chain, partnerId });
+        setB3ModalOpen(true);
+    };
+    const isLoading = isLoadingAnyspendQuote;
+    const isPending = isCreatingSwapOrder || isSendingDeposit || isWaitingForExecution;
+    const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+    const chainName = anyspend_1.ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain";
+    const chainLogoUrl = anyspend_1.ALL_CHAINS[selectedSrcChainId]?.logoUrl;
+    // Collapse QR on mobile when a wallet connector is available
+    const isMobile = (0, react_1.useIsMobile)();
+    const hasWalletConnector = typeof window !== "undefined" && !!window.ethereum;
+    const [qrExpanded, setQrExpanded] = (0, react_4.useState)(!isMobile || !hasWalletConnector);
+    /* ------------------------------------------------------------------ */
+    /* Render                                                             */
+    /* ------------------------------------------------------------------ */
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-crypto-pay-panel flex flex-col gap-4", classes?.cryptoPanel), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-token-selector", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Pay with" }), (0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: effectiveAddress, chainIdsFilter: (0, anyspend_1.getAvailableChainIds)("from"), context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)("from"), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.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: (0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-left", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-400", children: "Select token" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : ((0, jsx_runtime_1.jsxs)(react_3.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")) })] }) }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && ((0, jsx_runtime_1.jsxs)(react_3.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 ? ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: (0, cn_1.cn)(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
+                            ? "Creating order..."
+                            : isSendingDeposit
+                                ? "Confirm in wallet..."
+                                : "Confirming transaction..."] })) : (buttonText) })), isMobile && hasWalletConnector ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setQrExpanded(prev => !prev), className: "flex w-full items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1 text-xs font-medium text-gray-400 dark:text-gray-500", children: [qrExpanded ? ("or send directly") : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.QrCode, { className: "h-3 w-3" }), " or send with QR code"] })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: (0, cn_1.cn)("h-3 w-3 transition-transform", qrExpanded && "rotate-180") })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500", children: "or send directly" }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200 dark:bg-neutral-700" })] })), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { initial: false, children: qrExpanded && ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeInOut" }, className: "overflow-hidden", children: isCreatingQrOrder && !globalAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-sm text-gray-500 dark:text-gray-400", children: "Creating deposit address..." })] })) : globalAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "shrink-0 rounded-xl bg-white p-2.5 shadow-sm ring-1 ring-gray-100 dark:bg-white dark:ring-gray-200", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: qrValue, size: 132, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Send", " ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol] }), " ", "on", " ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [chainLogoUrl && ((0, jsx_runtime_1.jsx)("img", { src: chainLogoUrl, alt: "", className: "mb-px mr-0.5 inline h-3.5 w-3.5 rounded-full align-text-bottom" })), chainName] }), " ", "to:"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleCopyAddress, className: "group flex items-start gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-left transition-colors hover:border-gray-300 hover:bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/60 dark:hover:border-neutral-600 dark:hover:bg-neutral-800", children: [(0, jsx_runtime_1.jsx)("span", { className: "min-w-0 break-all font-mono text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: globalAddress }), (0, jsx_runtime_1.jsx)("span", { className: "mt-0.5 shrink-0 text-gray-400 transition-colors group-hover:text-gray-600 dark:group-hover:text-gray-300", children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3.5 w-3.5 text-green-500" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-3.5 w-3.5" }) })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs leading-snug text-orange-500/80 dark:text-orange-400/80", children: ["Only send ", selectedSrcToken?.symbol, " on", " ", chainLogoUrl && ((0, jsx_runtime_1.jsx)("img", { src: chainLogoUrl, alt: "", className: "mr-0.5 inline h-3 w-3 rounded-full align-text-bottom" })), chainName, ". Sending other tokens or using a different network may result in loss of funds."] })] })] })) : null }, "qr-section")) })] }));
+}

package/dist/cjs/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/cjs/anyspend/react/components/checkout/DiscountCodeInput.js

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiscountCodeInput = DiscountCodeInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const number_1 = require("../../../../shared/utils/number");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+function formatAmount(amount, decimals, symbol) {
+    const bi = (0, number_1.safeBigInt)(amount);
+    if (bi === BigInt(0))
+        return "Free";
+    return `${(0, number_1.formatTokenAmount)(bi, decimals)} ${symbol}`;
+}
+function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, className, }) {
+    const [code, setCode] = (0, react_1.useState)("");
+    const [error, setError] = (0, react_1.useState)(null);
+    const [isValidating, setIsValidating] = (0, react_1.useState)(false);
+    const handleApply = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-discount anyspend-discount-applied space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), (0, jsx_runtime_1.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" })] }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3.5 w-3.5" }) })] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-discount space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount Code" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-discount-input-row flex gap-2", children: [(0, jsx_runtime_1.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: (0, cn_1.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") }), (0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }) : "Apply" })] }), error && (0, jsx_runtime_1.jsx)("p", { className: "anyspend-discount-error text-xs text-red-500", children: error })] }));
+}

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