@b3dotfun/sdk 0.1.66-alpha.1 → 0.1.66-alpha.3

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

@@ -0,0 +1,317 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoCheckoutPanel = CryptoCheckoutPanel;
+exports.TokenSelectorModal = TokenSelectorModal;
+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 useAnyspendTokens_1 = require("../../../../anyspend/react/hooks/useAnyspendTokens");
+const useOnOrderSuccess_1 = require("../../../../anyspend/react/hooks/useOnOrderSuccess");
+const anyspend_1 = require("../../../../anyspend");
+const chain_1 = require("../../../../anyspend/utils/chain");
+const react_1 = require("../../../../global-account/react");
+const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
+const number_1 = require("../../../../shared/utils/number");
+const token_1 = require("../../../../anyspend/utils/token");
+const cn_1 = require("../../../../shared/utils/cn");
+const react_2 = require("../../../../global-account/react");
+const react_3 = require("../../../../global-account/react");
+const dialog_1 = require("../../../../global-account/react/components/ui/dialog");
+const drawer_1 = require("../../../../global-account/react/components/ui/drawer");
+const lucide_react_1 = require("lucide-react");
+const viem_1 = require("viem");
+const react_4 = require("motion/react");
+const react_5 = require("react");
+const ChainTokenIcon_1 = require("../common/ChainTokenIcon");
+function CryptoCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText = "Pay", themeColor, onSuccess, onError, callbackMetadata, classes, }) {
+    const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_5.useState)(destinationTokenChainId);
+    const [selectedSrcToken, setSelectedSrcToken] = (0, react_5.useState)(null);
+    const [showTokenSelector, setShowTokenSelector] = (0, react_5.useState)(false);
+    const [tokenSearchQuery, setTokenSearchQuery] = (0, react_5.useState)("");
+    // Get wallet & modal
+    const { address: walletAddress } = (0, react_1.useAccountWallet)();
+    const { partnerId } = (0, react_1.useB3Config)();
+    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    // Get destination token data
+    const { data: dstTokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    // Get token list for source chain
+    const { data: tokenList, isLoading: isLoadingTokens } = (0, useAnyspendTokens_1.useAnyspendTokenList)(selectedSrcChainId, tokenSearchQuery);
+    // Set default source token to destination token (same-chain, no swap needed)
+    (0, react_5.useEffect)(() => {
+        if (!selectedSrcToken && tokenList && tokenList.length > 0) {
+            // Try to find the destination token in the list
+            const dstToken = tokenList.find((t) => t.address.toLowerCase() === destinationTokenAddress.toLowerCase() && t.chainId === destinationTokenChainId);
+            if (dstToken) {
+                setSelectedSrcToken(dstToken);
+            }
+            else {
+                // Default to first token
+                setSelectedSrcToken(tokenList[0]);
+            }
+        }
+    }, [tokenList, selectedSrcToken, destinationTokenAddress, destinationTokenChainId]);
+    // Compute source amount from destination amount using quote
+    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,
+    });
+    // Get balance
+    const tokenAddress = selectedSrcToken
+        ? (0, token_1.isNativeToken)(selectedSrcToken.address)
+            ? "native"
+            : selectedSrcToken.address
+        : undefined;
+    const { data: balanceData } = (0, react_1.useSimTokenBalance)(walletAddress, tokenAddress, selectedSrcChainId);
+    const balance = (0, react_5.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]);
+    // Determine the amount to pay in source token
+    const srcAmount = (0, react_5.useMemo)(() => {
+        if (isSameToken)
+            return totalAmount;
+        return anyspendQuote?.data?.currencyIn?.amount || "0";
+    }, [isSameToken, totalAmount, anyspendQuote]);
+    const srcAmountFormatted = (0, react_5.useMemo)(() => {
+        if (!selectedSrcToken)
+            return "0";
+        const decimals = selectedSrcToken.decimals || 18;
+        return (0, number_1.formatTokenAmount)(BigInt(srcAmount || "0"), decimals);
+    }, [srcAmount, selectedSrcToken]);
+    // Check if user has enough balance
+    const hasEnoughBalance = balance.raw >= BigInt(srcAmount || "0");
+    // Order tracking state
+    const [orderId, setOrderId] = (0, react_5.useState)();
+    const [isSendingDeposit, setIsSendingDeposit] = (0, react_5.useState)(false);
+    const depositSentRef = (0, react_5.useRef)(false);
+    // Wallet transaction execution
+    const { switchChainAndExecute } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    // Create order
+    const { createOrder, isCreatingOrder } = (0, useAnyspendCreateOrder_1.useAnyspendCreateOrder)({
+        onSuccess: (data) => {
+            const id = data?.data?.id;
+            if (id) {
+                setOrderId(id);
+            }
+        },
+        onError: (error) => {
+            setIsSendingDeposit(false);
+            onError?.(error);
+        },
+    });
+    // Poll order status until executed
+    const { orderAndTransactions: oat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(orderId);
+    // Send deposit transaction once order is created and ready
+    (0, react_5.useEffect)(() => {
+        if (!oat?.data?.order || depositSentRef.current)
+            return;
+        const order = oat.data.order;
+        if (order.status !== "scanning_deposit_transaction")
+            return;
+        if (oat.data.depositTxs?.length)
+            return; // Already deposited
+        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),
+                    });
+                }
+            }
+            catch (error) {
+                depositSentRef.current = false;
+                onError?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
+            }
+            finally {
+                setIsSendingDeposit(false);
+            }
+        };
+        sendDeposit();
+    }, [oat, switchChainAndExecute, onError]);
+    // Only call onSuccess when order is actually executed with a real txHash
+    (0, useOnOrderSuccess_1.useOnOrderSuccess)({
+        orderData: oat,
+        orderId,
+        onSuccess: (txHash) => {
+            onSuccess?.({ orderId, txHash });
+        },
+    });
+    const isWaitingForExecution = !!orderId && oat?.data?.order.status !== "executed";
+    const handlePay = (0, react_5.useCallback)(async () => {
+        if (!selectedSrcToken || !walletAddress)
+            return;
+        depositSentRef.current = false;
+        const dstToken = {
+            address: destinationTokenAddress,
+            chainId: destinationTokenChainId,
+            decimals: dstTokenData?.decimals || 18,
+            symbol: dstTokenData?.symbol || "",
+            name: dstTokenData?.name || "",
+            metadata: {
+                logoURI: dstTokenData?.logoURI || "",
+            },
+        };
+        createOrder({
+            recipientAddress,
+            orderType: "swap",
+            srcChain: selectedSrcChainId,
+            dstChain: destinationTokenChainId,
+            srcToken: selectedSrcToken,
+            dstToken,
+            srcAmount,
+            expectedDstAmount: totalAmount,
+            callbackMetadata,
+        });
+    }, [
+        selectedSrcToken,
+        walletAddress,
+        recipientAddress,
+        selectedSrcChainId,
+        destinationTokenChainId,
+        destinationTokenAddress,
+        dstTokenData,
+        srcAmount,
+        totalAmount,
+        callbackMetadata,
+        createOrder,
+    ]);
+    const handleSelectToken = (token) => {
+        setSelectedSrcToken(token);
+        setSelectedSrcChainId(token.chainId);
+        setShowTokenSelector(false);
+        setTokenSearchQuery("");
+    };
+    const isLoading = isLoadingAnyspendQuote || isLoadingTokens;
+    const isPending = isCreatingOrder || isSendingDeposit || isWaitingForExecution;
+    const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-crypto-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: "anyspend-token-label mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Pay with" }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowTokenSelector(true), className: (0, cn_1.cn)("anyspend-token-btn 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-gray-700 dark:bg-gray-800 dark:hover:border-gray-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.ChevronDown, { className: "h-4 w-4 text-gray-400" })] })] }), (0, jsx_runtime_1.jsx)(TokenSelectorModal, { open: showTokenSelector, onClose: () => {
+                    setShowTokenSelector(false);
+                    setTokenSearchQuery("");
+                }, tokenList: tokenList, isLoadingTokens: isLoadingTokens, tokenSearchQuery: tokenSearchQuery, onSearchChange: setTokenSearchQuery, onSelectToken: handleSelectToken, selectedToken: selectedSrcToken, walletAddress: walletAddress, chainId: selectedSrcChainId, onChainChange: chainId => {
+                    setSelectedSrcChainId(chainId);
+                    setSelectedSrcToken(null);
+                    setTokenSearchQuery("");
+                } }), (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-quote-display rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-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_4.AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)(react_4.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_4.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_4.AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && ((0, jsx_runtime_1.jsxs)(react_4.motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "anyspend-balance-warning text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !walletAddress ? ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: b3Chain_1.thirdwebB3Chain, partnerId });
+                    setB3ModalOpen(true);
+                }, className: (0, cn_1.cn)("anyspend-crypto-pay-btn w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]", classes?.payButton), style: themeColor ? { backgroundColor: themeColor } : undefined, children: "Connect Wallet to Pay" })) : ((0, jsx_runtime_1.jsx)("button", { onClick: handlePay, disabled: !canPay, className: (0, cn_1.cn)("anyspend-crypto-pay-btn w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", canPay ? "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]" : "cursor-not-allowed bg-blue-600 opacity-50", classes?.payButton), style: !canPay ? undefined : themeColor ? { backgroundColor: themeColor } : undefined, 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" }), isCreatingOrder
+                            ? "Creating order..."
+                            : isSendingDeposit
+                                ? "Confirm in wallet..."
+                                : "Confirming transaction..."] })) : (buttonText) }))] }));
+}
+const SOURCE_CHAINS = Object.values(chain_1.EVM_MAINNET).map(c => ({ id: c.id, name: c.name, logoUrl: c.logoUrl }));
+function TokenSelectorModal({ open, onClose, tokenList, isLoadingTokens, tokenSearchQuery, onSearchChange, onSelectToken, selectedToken, walletAddress, chainId, onChainChange, }) {
+    const isMobile = (0, react_3.useIsMobile)();
+    const searchInputRef = (0, react_5.useRef)(null);
+    // Fetch all balances for the wallet on this chain
+    const { data: balanceData } = (0, react_1.useSimBalance)(walletAddress, [chainId]);
+    // Build a lookup map: lowercase token address -> balance info
+    const balanceMap = (0, react_5.useMemo)(() => {
+        const map = new Map();
+        if (!balanceData?.balances)
+            return map;
+        for (const b of balanceData.balances) {
+            if (b.amount && BigInt(b.amount) > BigInt(0)) {
+                map.set(b.address.toLowerCase(), {
+                    raw: BigInt(b.amount),
+                    formatted: (0, number_1.formatTokenAmount)(BigInt(b.amount), b.decimals),
+                    decimals: b.decimals,
+                });
+            }
+        }
+        return map;
+    }, [balanceData]);
+    // Sort tokens: tokens with balance first (sorted by balance desc), then the rest
+    const sortedTokenList = (0, react_5.useMemo)(() => {
+        if (!tokenList)
+            return undefined;
+        const withBalance = [];
+        const withoutBalance = [];
+        for (const token of tokenList) {
+            const bal = balanceMap.get(token.address.toLowerCase());
+            if (bal) {
+                withBalance.push(token);
+            }
+            else {
+                withoutBalance.push(token);
+            }
+        }
+        withBalance.sort((a, b) => {
+            const balA = balanceMap.get(a.address.toLowerCase())?.raw || BigInt(0);
+            const balB = balanceMap.get(b.address.toLowerCase())?.raw || BigInt(0);
+            if (balB > balA)
+                return 1;
+            if (balB < balA)
+                return -1;
+            return 0;
+        });
+        return [...withBalance, ...withoutBalance];
+    }, [tokenList, balanceMap]);
+    // Keep showing the previous list while new chain tokens are loading
+    const prevListRef = (0, react_5.useRef)(undefined);
+    if (sortedTokenList && sortedTokenList.length > 0) {
+        prevListRef.current = sortedTokenList;
+    }
+    const displayList = sortedTokenList && sortedTokenList.length > 0
+        ? sortedTokenList
+        : isLoadingTokens
+            ? prevListRef.current
+            : sortedTokenList;
+    // Focus search input when modal opens
+    (0, react_5.useEffect)(() => {
+        if (open) {
+            const timer = setTimeout(() => searchInputRef.current?.focus(), 100);
+            return () => clearTimeout(timer);
+        }
+    }, [open]);
+    const ModalComponent = isMobile ? drawer_1.Drawer : dialog_1.Dialog;
+    const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
+    const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
+    const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
+    return ((0, jsx_runtime_1.jsxs)(ModalComponent, { open: open, onOpenChange: (v) => {
+            if (!v)
+                onClose();
+        }, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+                    __html: `.anyspend-token-modal .b3-modal-ga-branding { display: none; } .anyspend-token-modal .modal-inner-content { margin-bottom: 0; }`,
+                } }), (0, jsx_runtime_1.jsxs)(ModalContent, { className: "anyspend-token-modal flex max-h-[80dvh] flex-col overflow-hidden rounded-2xl bg-white p-0 shadow-xl sm:max-h-[70dvh] dark:bg-gray-900", children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only", children: "Select token" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only", children: "Choose a token to pay with" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between px-5 py-4", children: (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Select token" }) }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-chain-selector flex items-center gap-2 px-5 pb-3", children: SOURCE_CHAINS.map(chain => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onChainChange(chain.id), title: chain.name, className: "relative shrink-0 rounded-full transition-opacity", style: { opacity: chain.id === chainId ? 1 : 0.4 }, children: [(0, jsx_runtime_1.jsx)("img", { src: chain.logoUrl, alt: chain.name, className: "h-7 w-7 rounded-full" }), chain.id === chainId && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-full", style: { boxShadow: "0 0 0 2px #3b82f6" } }))] }, chain.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-token-search flex items-center gap-2 border-b border-gray-100 px-5 py-2.5 dark:border-gray-800", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "h-4 w-4 shrink-0 text-gray-400" }), (0, jsx_runtime_1.jsx)("input", { ref: searchInputRef, type: "text", value: tokenSearchQuery, onChange: e => onSearchChange(e.target.value), placeholder: "Search tokens...", className: "anyspend-token-search-input w-full bg-transparent text-sm outline-none placeholder:text-gray-400 dark:text-gray-100" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-token-list relative flex-1 overflow-y-auto", style: { minHeight: 300 }, children: [displayList?.map((token) => {
+                                        const isSelected = selectedToken &&
+                                            selectedToken.address.toLowerCase() === token.address.toLowerCase() &&
+                                            selectedToken.chainId === token.chainId;
+                                        const tokenBalance = balanceMap.get(token.address.toLowerCase());
+                                        return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onSelectToken(token), className: (0, cn_1.cn)("anyspend-token-option flex w-full items-center gap-3 px-5 py-3 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-800", isSelected && "bg-blue-50 dark:bg-blue-900/20"), children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[token.chainId]?.logoUrl || "", tokenUrl: token.metadata?.logoURI, className: "h-8 w-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: token.symbol }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: token.name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [tokenBalance && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-300", children: tokenBalance.formatted })), isSelected && (0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-blue-600" })] })] }, `${token.chainId}-${token.address}`));
+                                    }), !isLoadingTokens && displayList && displayList.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "px-5 py-8 text-center text-sm text-gray-400", children: "No tokens found" }))] })] })] })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface FiatCheckoutPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    themeColor?: string;
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    onError?: (error: Error) => void;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,215 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiatCheckoutPanel = FiatCheckoutPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../anyspend/react");
+const cn_1 = require("../../../../shared/utils/cn");
+const number_1 = require("../../../../shared/utils/number");
+const payment_utils_1 = require("../../../../shared/utils/payment.utils");
+const react_2 = require("../../../../global-account/react");
+const react_stripe_js_1 = require("@stripe/react-stripe-js");
+const lucide_react_1 = require("lucide-react");
+const react_3 = require("motion/react");
+const react_4 = require("react");
+function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, classes, }) {
+    const { data: tokenData } = (0, react_2.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    const { theme, stripePublishableKey } = (0, react_2.useB3Config)();
+    const formattedAmount = (0, react_4.useMemo)(() => {
+        const decimals = tokenData?.decimals || 18;
+        return (0, number_1.formatTokenAmount)(BigInt(totalAmount), decimals);
+    }, [totalAmount, tokenData]);
+    const { geoData, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeo, } = (0, react_1.useGeoOnrampOptions)(formattedAmount);
+    // Order state
+    const [orderId, setOrderId] = (0, react_4.useState)(null);
+    const [stripePaymentIntentId, setStripePaymentIntentId] = (0, react_4.useState)(null);
+    const [orderError, setOrderError] = (0, react_4.useState)(null);
+    const orderCreatedRef = (0, react_4.useRef)(false);
+    const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
+        onSuccess: (data) => {
+            const id = data?.data?.id;
+            const intentId = data?.data?.stripePaymentIntentId;
+            if (id && intentId) {
+                setOrderId(id);
+                setStripePaymentIntentId(intentId);
+            }
+            else {
+                setOrderError("Failed to initialize payment. Please try again.");
+            }
+        },
+        onError: (error) => {
+            setOrderError(error.message || "Failed to create payment order.");
+            onError?.(error);
+        },
+    });
+    // Auto-create onramp order when Stripe Web2 is supported and all data is ready
+    (0, react_4.useEffect)(() => {
+        if (!isLoadingGeo &&
+            stripeWeb2Support?.isSupport &&
+            !orderCreatedRef.current &&
+            !orderId &&
+            !isCreatingOrder &&
+            !orderError &&
+            tokenData &&
+            recipientAddress) {
+            orderCreatedRef.current = true;
+            const dstToken = {
+                address: destinationTokenAddress,
+                chainId: destinationTokenChainId,
+                decimals: tokenData.decimals || 18,
+                symbol: tokenData.symbol || "",
+                name: tokenData.name || "",
+                metadata: {
+                    logoURI: tokenData.logoURI || "",
+                },
+            };
+            createOrder({
+                recipientAddress,
+                orderType: "swap",
+                dstChain: destinationTokenChainId,
+                dstToken,
+                srcFiatAmount: formattedAmount,
+                onramp: {
+                    vendor: "stripe-web2",
+                    paymentMethod: "",
+                    country: geoData?.country || "US",
+                    redirectUrl: window.location.origin,
+                },
+                expectedDstAmount: totalAmount,
+            });
+        }
+    }, [
+        isLoadingGeo,
+        stripeWeb2Support,
+        orderId,
+        isCreatingOrder,
+        orderError,
+        tokenData,
+        recipientAddress,
+        destinationTokenAddress,
+        destinationTokenChainId,
+        formattedAmount,
+        totalAmount,
+        geoData,
+        createOrder,
+    ]);
+    // Loading geo/stripe support check
+    if (isLoadingGeo) {
+        return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-loading flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading payment form..." })] }));
+    }
+    const hasStripeWeb2 = stripeWeb2Support && stripeWeb2Support.isSupport;
+    const hasStripeRedirect = !!stripeOnrampSupport;
+    // Not available in region
+    if (!hasStripeWeb2 && !hasStripeRedirect) {
+        return ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-unavailable py-4 text-center", classes?.fiatPanel), children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Card payments are not available in your region for this amount." }) }));
+    }
+    // Order creation error - show with retry
+    if (orderError) {
+        return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-error flex flex-col items-center gap-3 py-4", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-500", children: orderError }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                        setOrderError(null);
+                        orderCreatedRef.current = false;
+                    }, className: "anyspend-fiat-retry text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400", children: "Try again" })] }));
+    }
+    // Creating order / waiting for PaymentIntent
+    if (hasStripeWeb2 && (isCreatingOrder || !stripePaymentIntentId)) {
+        return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-initializing flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1.5, className: "text-sm", children: "Initializing secure payment..." })] }));
+    }
+    // Stripe Web2 embedded form
+    if (hasStripeWeb2 && stripePaymentIntentId && orderId) {
+        return ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-stripe", classes?.fiatPanel), children: (0, jsx_runtime_1.jsx)(StripeCheckout, { stripePaymentIntentId: stripePaymentIntentId, stripePublishableKey: stripePublishableKey, theme: theme, themeColor: themeColor, orderId: orderId, onSuccess: onSuccess, onError: onError, classes: classes }) }));
+    }
+    // Fallback: Stripe redirect flow (only if web2 not available but redirect is)
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-fiat-redirect flex flex-col gap-3 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "You'll be redirected to Stripe to complete your payment securely." }), (0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("anyspend-fiat-redirect-btn flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all active:scale-[0.98]", "bg-blue-600 hover:bg-blue-700"), style: themeColor ? { backgroundColor: themeColor } : undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "h-3.5 w-3.5" }), "Pay with Card"] }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "h-3 w-3" }), "Secured by Stripe"] })] }));
+}
+function StripeCheckout({ stripePaymentIntentId, stripePublishableKey, theme, themeColor, orderId, onSuccess, onError, classes, }) {
+    const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = (0, react_1.useStripeClientSecret)(stripePaymentIntentId);
+    if (isLoadingStripeClientSecret) {
+        return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: "anyspend-stripe-loading flex flex-col items-center gap-3 py-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading payment form..." })] }));
+    }
+    if (stripeClientSecretError || !clientSecret) {
+        return ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: "anyspend-stripe-error py-4 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-500", children: stripeClientSecretError?.message || "Failed to load payment form. Please try again." }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: (0, payment_utils_1.getStripePromise)(stripePublishableKey), options: {
+            clientSecret,
+            appearance: {
+                theme: theme === "light" ? "stripe" : "night",
+                variables: {
+                    borderRadius: "8px",
+                },
+            },
+        }, children: (0, jsx_runtime_1.jsx)(StripeCheckoutForm, { themeColor: themeColor, orderId: orderId, onSuccess: onSuccess, onError: onError, classes: classes }) }));
+}
+function StripeCheckoutForm({ themeColor, orderId, onSuccess, onError, classes }) {
+    const stripe = (0, react_stripe_js_1.useStripe)();
+    const elements = (0, react_stripe_js_1.useElements)();
+    const [loading, setLoading] = (0, react_4.useState)(false);
+    const [message, setMessage] = (0, react_4.useState)(null);
+    const [stripeReady, setStripeReady] = (0, react_4.useState)(false);
+    const [showAddressElement, setShowAddressElement] = (0, react_4.useState)(false);
+    (0, react_4.useEffect)(() => {
+        if (stripe && elements) {
+            setStripeReady(true);
+        }
+    }, [stripe, elements]);
+    const handlePaymentElementChange = (0, react_4.useCallback)((event) => {
+        setShowAddressElement(event.value?.type === "card");
+    }, []);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!stripe || !elements) {
+            setMessage("Payment system is not ready. Please wait.");
+            return;
+        }
+        setLoading(true);
+        setMessage(null);
+        try {
+            const result = (await stripe.confirmPayment({
+                elements,
+                redirect: "if_required",
+            }));
+            if (result.error) {
+                setMessage(result.error.message || "Payment failed. Please try again.");
+                return;
+            }
+            // Payment succeeded
+            onSuccess?.({ orderId, txHash: undefined });
+        }
+        catch (error) {
+            const errorMessage = error?.message || "Payment failed. Please try again.";
+            setMessage(errorMessage);
+            onError?.(error instanceof Error ? error : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const stripeElementOptions = {
+        layout: "tabs",
+        fields: {
+            billingDetails: "auto",
+        },
+        wallets: {
+            applePay: "auto",
+            googlePay: "auto",
+        },
+    };
+    if (!stripeReady) {
+        return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: "anyspend-stripe-loading flex flex-col items-center gap-3 py-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading payment form..." })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_3.motion.form, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, ease: "easeOut" }, onSubmit: handleSubmit, className: "anyspend-stripe-form flex flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-stripe-payment-element", children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { onChange: handlePaymentElementChange, options: stripeElementOptions }) }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { initial: false, children: showAddressElement && ((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: "easeOut" }, style: { overflow: "hidden" }, className: "anyspend-stripe-address-element", children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { options: {
+                            mode: "billing",
+                            fields: {
+                                phone: "always",
+                            },
+                            display: {
+                                name: "split",
+                            },
+                            validation: {
+                                phone: {
+                                    required: "always",
+                                },
+                            },
+                        } }) }, "address-element")) }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { initial: false, children: message && ((0, jsx_runtime_1.jsx)(react_3.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: "anyspend-stripe-error rounded-lg border border-red-200 bg-red-50 px-3 py-2 dark:border-red-800 dark:bg-red-900/20", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) }, "stripe-error")) }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !stripe || !elements || loading, className: (0, cn_1.cn)("anyspend-stripe-submit flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", !stripe || !elements || loading
+                    ? "cursor-not-allowed bg-gray-300 dark:bg-gray-600"
+                    : "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]", classes?.payButton), style: themeColor && !loading ? { backgroundColor: themeColor } : undefined, children: loading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), "Processing..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "h-3.5 w-3.5" }), "Complete Payment"] })) }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "h-3 w-3" }), "Secured by Stripe"] })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface PoweredByBrandingProps {
+    organizationName?: string;
+    organizationLogo?: string;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function PoweredByBranding({ organizationName, organizationLogo, classes }: PoweredByBrandingProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoweredByBranding = PoweredByBranding;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+function PoweredByBranding({ organizationName, organizationLogo, classes }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between pt-4", classes?.poweredBy), children: [organizationLogo || organizationName ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [organizationLogo && ((0, jsx_runtime_1.jsx)("img", { src: organizationLogo, alt: organizationName || "Organization", className: "h-5 w-5 rounded-full" })), organizationName && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: organizationName }))] })) : ((0, jsx_runtime_1.jsx)("div", {})), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["powered by ", (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-gray-500 dark:text-gray-400", children: "anyspend" })] })] }));
+}

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

@@ -0,0 +1,17 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface QRCheckoutPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    themeColor?: string;
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata: _callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};