@b3dotfun/sdk 0.1.66 → 0.1.68

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

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutLayout = CheckoutLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+function CheckoutLayout({ mode, paymentPanel, cartPanel, classes }) {
+    const rightColumnWidth = mode === "page" ? 380 : 340;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-checkout mx-auto w-full", classes?.root), style: {
+            ...(mode === "page" ? { maxWidth: 1100, padding: "2rem 1rem" } : undefined),
+            "--anyspend-cart-width": `${rightColumnWidth}px`,
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-checkout-grid", classes?.layout), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-payment-col order-2", "rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900", classes?.paymentColumn), children: paymentPanel }), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-cart-col order-1", "rounded-2xl border border-gray-200 bg-gray-50 p-6 dark:border-neutral-700 dark:bg-neutral-800/50", classes?.cartColumn), children: cartPanel })] }) }));
+}

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

@@ -0,0 +1,28 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutOrderStatusProps {
+    /** The order ID to track */
+    orderId: string;
+    /** Theme color (hex) */
+    themeColor?: string;
+    /** Return URL for the terminal success state */
+    returnUrl?: string;
+    /** Label for the return button */
+    returnLabel?: string;
+    /** Called when the order reaches "executed" */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called when the order reaches a failure/expired/refunded terminal state */
+    onError?: (error: Error) => void;
+    /** Called when the user clicks "Try again" on failure */
+    onRetry?: () => void;
+    /** Show the points row in the order status summary. Defaults to false. */
+    showPoints?: boolean;
+    /** Show the order ID row in the order status summary. Defaults to false. */
+    showOrderId?: boolean;
+    /** Custom class names */
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CheckoutOrderStatus({ orderId, themeColor, returnUrl, returnLabel, onSuccess, onError, onRetry, showPoints, showOrderId, classes, }: CheckoutOrderStatusProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,65 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutOrderStatus = CheckoutOrderStatus;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const useAnyspendOrderAndTransactions_1 = require("../../../../anyspend/react/hooks/useAnyspendOrderAndTransactions");
+const useOnOrderSuccess_1 = require("../../../../anyspend/react/hooks/useOnOrderSuccess");
+const react_1 = require("../../../../global-account/react");
+const cn_1 = require("../../../../shared/utils/cn");
+const formatNumber_1 = require("../../../../shared/utils/formatNumber");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("motion/react");
+const react_3 = require("react");
+const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
+const OrderStatus_1 = require("../common/OrderStatus");
+function CheckoutOrderStatus({ orderId, themeColor, returnUrl, returnLabel, onSuccess, onError, onRetry, showPoints = false, showOrderId = false, classes, }) {
+    // Stable refs for callback props to avoid re-triggering effects
+    const onErrorRef = (0, react_3.useRef)(onError);
+    onErrorRef.current = onError;
+    const { orderAndTransactions, isLoadingOrderAndTransactions } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(orderId);
+    const order = orderAndTransactions?.data?.order;
+    const executeTx = orderAndTransactions?.data?.executeTx;
+    const points = orderAndTransactions?.data?.points;
+    const { content } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
+    // Fire onSuccess when order reaches "executed"
+    (0, useOnOrderSuccess_1.useOnOrderSuccess)({
+        orderData: orderAndTransactions,
+        orderId,
+        onSuccess: (txHash) => onSuccess?.({ orderId, txHash }),
+    });
+    // Fire onError once for terminal failure states
+    const onErrorCalled = (0, react_3.useRef)(false);
+    (0, react_3.useEffect)(() => {
+        if (!order || onErrorCalled.current)
+            return;
+        if (order.status === "failure" || order.status === "expired" || order.status === "refunded") {
+            const { description } = (0, anyspend_1.getStatusDisplay)(order);
+            onErrorRef.current?.(new Error(description || `Order ${order.status}`));
+            onErrorCalled.current = true;
+        }
+    }, [order]);
+    // Reset error flag if orderId changes
+    const prevOrderId = (0, react_3.useRef)(orderId);
+    (0, react_3.useEffect)(() => {
+        if (prevOrderId.current !== orderId) {
+            onErrorCalled.current = false;
+            prevOrderId.current = orderId;
+        }
+    }, [orderId]);
+    // Clear persisted orderId when order reaches a terminal state
+    const orderStatus = order?.status;
+    (0, react_3.useEffect)(() => {
+        if (orderStatus && ["executed", "failure", "expired", "refunded"].includes(orderStatus)) {
+            sessionStorage.removeItem("anyspend_checkout_orderId");
+        }
+    }, [orderStatus]);
+    // Loading state
+    if (isLoadingOrderAndTransactions || !order) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col items-center gap-3 py-12", classes?.orderStatusPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading order status..." })] }));
+    }
+    const isExecuted = order.status === "executed";
+    const isRefunding = order.status === "refunding";
+    return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-checkout-order-status flex flex-col items-center gap-5 py-6", classes?.orderStatusPanel), children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order }), (showPoints || showOrderId) && ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, delay: 0.15 }, className: "bg-as-surface-secondary border-as-border-secondary w-full rounded-xl border px-4 py-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 text-sm", children: [showPoints && points != null && points > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary", children: "Points" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-brand font-semibold", children: ["+", (0, formatNumber_1.formatNumber)(points), " pts"] })] }), showOrderId && (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" })] })), showOrderId && ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary shrink-0", children: "Order ID" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: order.id })] }))] }) })), isExecuted && executeTx && ((0, jsx_runtime_1.jsxs)(react_2.motion.a, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.3, ease: "easeOut" }, href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, executeTx.txHash), target: "_blank", rel: "noopener noreferrer", className: (0, cn_1.cn)("flex items-center gap-1.5 text-sm text-blue-600 hover:underline dark:text-blue-400", classes?.transactionLink), children: ["View Transaction", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "h-3.5 w-3.5" })] })), order.status === "failure" && order.errorDetails && ((0, jsx_runtime_1.jsx)(react_2.motion.p, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, delay: 0.2 }, className: "max-w-[40ch] text-center text-sm text-red-500 dark:text-red-400", children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) })), (order.status === "failure" || order.status === "expired") && onRetry && ((0, jsx_runtime_1.jsxs)(react_2.motion.button, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, delay: 0.3 }, onClick: onRetry, className: (0, cn_1.cn)("flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-medium transition-colors", "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-neutral-800 dark:text-gray-300 dark:hover:bg-neutral-700", classes?.retryButton), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "h-4 w-4" }), content.retryButtonLabel || "Try Again"] })), (isExecuted || order.status === "refunded") && returnUrl && ((0, jsx_runtime_1.jsx)(react_2.motion.a, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, delay: 0.4 }, href: returnUrl, className: (0, cn_1.cn)("inline-flex rounded-xl px-6 py-3 text-sm font-medium transition-colors", classes?.returnButton), style: { backgroundColor: themeColor || "#111827", color: "#fff" }, children: content.returnButtonLabel || returnLabel || "Return to Store" })), isRefunding && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Please wait while your funds are being returned." }))] }));
+}

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

@@ -0,0 +1,31 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+export type PaymentMethod = "crypto" | "card" | "coinbase";
+interface CheckoutPaymentPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    buttonText?: string;
+    themeColor?: string;
+    returnUrl?: string;
+    returnLabel?: string;
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
+    classes?: AnySpendCheckoutClasses;
+    /** Which payment method to expand initially. Defaults to none (all collapsed). */
+    defaultPaymentMethod?: PaymentMethod;
+    /** Optional sender (payer) address — pre-fills token balances in the crypto panel */
+    senderAddress?: string;
+    /** Show the points row in the order status summary. Defaults to false. */
+    showPoints?: boolean;
+    /** Show the order ID row in the order status summary. Defaults to false. */
+    showOrderId?: boolean;
+    /** Whether the checkout form is valid. When false, payment methods are disabled. */
+    isFormValid?: boolean;
+}
+export declare function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid, }: CheckoutPaymentPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,64 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutPaymentPanel = CheckoutPaymentPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const CheckoutOrderStatus_1 = require("./CheckoutOrderStatus");
+const CoinbaseCheckoutPanel_1 = require("./CoinbaseCheckoutPanel");
+const CryptoPayPanel_1 = require("./CryptoPayPanel");
+const FiatCheckoutPanel_1 = require("./FiatCheckoutPanel");
+const SESSION_STORAGE_KEY = "anyspend_checkout_orderId";
+function RadioCircle({ selected, themeColor }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border-2 transition-colors", selected ? "border-blue-600" : "border-gray-300 dark:border-neutral-600"), style: selected && themeColor ? { borderColor: themeColor } : undefined, children: selected && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-blue-600", style: themeColor ? { backgroundColor: themeColor } : undefined })) }));
+}
+/** Card brand logos - all use consistent 32x20 viewBox */
+function VisaLogo() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 32 20", style: { width: 32, height: 20 }, "aria-label": "Visa", children: [(0, jsx_runtime_1.jsx)("rect", { width: "32", height: "20", rx: "3", fill: "#1A1F71" }), (0, jsx_runtime_1.jsx)("text", { x: "16", y: "13.5", textAnchor: "middle", fill: "white", fontSize: "9", fontWeight: "bold", fontFamily: "sans-serif", fontStyle: "italic", children: "VISA" })] }));
+}
+function MastercardLogo() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 32 20", style: { width: 32, height: 20 }, "aria-label": "Mastercard", children: [(0, jsx_runtime_1.jsx)("rect", { width: "32", height: "20", rx: "3", fill: "#252525" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12.5", cy: "10", r: "6", fill: "#EB001B" }), (0, jsx_runtime_1.jsx)("circle", { cx: "19.5", cy: "10", r: "6", fill: "#F79E1B" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 5.6a6 6 0 0 1 0 8.8 6 6 0 0 1 0-8.8z", fill: "#FF5F00" })] }));
+}
+function AmexLogo() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 32 20", style: { width: 32, height: 20 }, "aria-label": "Amex", children: [(0, jsx_runtime_1.jsx)("rect", { width: "32", height: "20", rx: "3", fill: "#006FCF" }), (0, jsx_runtime_1.jsx)("text", { x: "16", y: "13", textAnchor: "middle", fill: "white", fontSize: "7", fontWeight: "bold", fontFamily: "sans-serif", children: "AMEX" })] }));
+}
+/** Coinbase mark */
+function CoinbaseLogo() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", style: { width: 20, height: 20 }, "aria-label": "Coinbase", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "#0052FF" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 4.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm-1.8 4.8h3.6c.33 0 .6.27.6.6v4.2c0 .33-.27.6-.6.6h-3.6a.6.6 0 0 1-.6-.6V9.9c0-.33.27-.6.6-.6z", fill: "white" })] }));
+}
+function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid = true, }) {
+    const [paymentMethod, setPaymentMethod] = (0, react_2.useState)(defaultPaymentMethod ?? null);
+    // Restore activeOrderId from sessionStorage (handles page refresh / Coinbase return)
+    const [activeOrderId, setActiveOrderId] = (0, react_2.useState)(() => {
+        if (typeof window !== "undefined") {
+            return sessionStorage.getItem(SESSION_STORAGE_KEY) || null;
+        }
+        return null;
+    });
+    // Persist activeOrderId to sessionStorage
+    (0, react_2.useEffect)(() => {
+        if (activeOrderId) {
+            sessionStorage.setItem(SESSION_STORAGE_KEY, activeOrderId);
+        }
+        else {
+            sessionStorage.removeItem(SESSION_STORAGE_KEY);
+        }
+    }, [activeOrderId]);
+    const handleOrderCreated = (0, react_2.useCallback)((orderId) => {
+        setActiveOrderId(orderId);
+    }, []);
+    const handleRetry = (0, react_2.useCallback)(() => {
+        setActiveOrderId(null);
+    }, []);
+    if (activeOrderId) {
+        return ((0, jsx_runtime_1.jsx)(CheckoutOrderStatus_1.CheckoutOrderStatus, { orderId: activeOrderId, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, onRetry: handleRetry, showPoints: showPoints, showOrderId: showOrderId, classes: classes }));
+    }
+    const accordionButtonClass = (active) => (0, cn_1.cn)("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", active
+        ? "bg-white dark:bg-neutral-900"
+        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
+    const expandedPanelClass = (0, cn_1.cn)("anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-crypto", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "crypto" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CryptoPayPanel_1.CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-card", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(VisaLogo, {}), (0, jsx_runtime_1.jsx)(MastercardLogo, {}), (0, jsx_runtime_1.jsx)(AmexLogo, {})] })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "card" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(FiatCheckoutPanel_1.FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "card-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-coinbase", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(CoinbaseLogo, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CoinbaseCheckoutPanel_1.CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
+}

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

@@ -0,0 +1,10 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutSuccessProps {
+    txHash?: string;
+    orderId?: string;
+    returnUrl?: string;
+    returnLabel?: string;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }: CheckoutSuccessProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,31 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutSuccess = CheckoutSuccess;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("motion/react");
+const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
+const AnimatedCheckmark_1 = require("../icons/AnimatedCheckmark");
+function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }) {
+    const { content, slots } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
+    if (slots.successScreen) {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: slots.successScreen({
+                title: typeof content.successTitle === "string" ? content.successTitle : "Payment Successful",
+                description: typeof content.successDescription === "string"
+                    ? content.successDescription
+                    : "Your payment has been processed successfully.",
+                txHash,
+                orderId,
+                explorerUrl: txHash ? `https://explorer.b3.fun/tx/${txHash}` : undefined,
+                onDone: () => {
+                    if (returnUrl)
+                        window.location.href = returnUrl;
+                },
+                returnUrl,
+                returnLabel: content.returnButtonLabel || returnLabel,
+            }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-checkout-success flex flex-col items-center py-8 text-center", classes?.successPanel), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-success-icon mb-4", children: (0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-16 w-16" }) }), (0, jsx_runtime_1.jsx)(react_1.motion.h2, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 1.0, ease: "easeOut" }, className: "anyspend-success-title text-xl font-semibold text-gray-900 dark:text-gray-100", children: content.successTitle || "Payment Successful" }), (0, jsx_runtime_1.jsx)(react_1.motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 1.15, ease: "easeOut" }, className: "anyspend-success-description mt-2 text-sm text-gray-500 dark:text-gray-400", children: content.successDescription || "Your payment has been processed successfully." }), txHash && ((0, jsx_runtime_1.jsxs)(react_1.motion.a, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.5, ease: "easeOut" }, href: `https://explorer.b3.fun/tx/${txHash}`, target: "_blank", rel: "noopener noreferrer", className: "anyspend-success-tx-link mt-4 flex items-center gap-1.5 text-sm text-blue-600 hover:underline dark:text-blue-400", children: ["View Transaction", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "h-3.5 w-3.5" })] })), !txHash && orderId && ((0, jsx_runtime_1.jsxs)(react_1.motion.p, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.5, ease: "easeOut" }, className: "anyspend-success-order-id mt-4 text-xs text-gray-400 dark:text-gray-500", children: ["Order ID: ", orderId] })), returnUrl && ((0, jsx_runtime_1.jsx)(react_1.motion.a, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.6, ease: "easeOut" }, href: returnUrl, className: (0, cn_1.cn)("anyspend-success-return-btn mt-6 inline-flex rounded-xl px-6 py-3 text-sm font-medium transition-colors", classes?.returnButton), style: { backgroundColor: "#111827", color: "#fff" }, children: content.returnButtonLabel || returnLabel || "Return to Store" }))] }));
+}

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

@@ -0,0 +1,20 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CoinbaseCheckoutPanelProps {
+    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 order is created — triggers lifecycle tracking in parent */
+    onOrderCreated?: (orderId: string) => void;
+    onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CoinbaseCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, }: CoinbaseCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,170 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoinbaseCheckoutPanel = CoinbaseCheckoutPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../anyspend/react");
+const anyspend_1 = require("../../../../anyspend/services/anyspend");
+const number_1 = require("../../../../shared/utils/number");
+const react_2 = require("../../../../global-account/react");
+const lucide_react_1 = require("lucide-react");
+const react_3 = require("motion/react");
+const react_4 = require("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",
+};
+function CoinbaseCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, }) {
+    // Stable refs for callback props to avoid re-triggering effects
+    const onSuccessRef = (0, react_4.useRef)(onSuccess);
+    onSuccessRef.current = onSuccess;
+    const onOrderCreatedRef = (0, react_4.useRef)(onOrderCreated);
+    onOrderCreatedRef.current = onOrderCreated;
+    const onErrorRef = (0, react_4.useRef)(onError);
+    onErrorRef.current = onError;
+    const { data: tokenData } = (0, react_2.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    const formattedAmount = (0, react_4.useMemo)(() => {
+        const decimals = tokenData?.decimals || 18;
+        return (0, number_1.formatTokenAmount)(BigInt(totalAmount), decimals);
+    }, [totalAmount, tokenData]);
+    const { geoData, coinbaseAvailablePaymentMethods, isLoading } = (0, react_1.useGeoOnrampOptions)(formattedAmount);
+    // Order + redirect state
+    const [orderId, setOrderId] = (0, react_4.useState)(null);
+    const [isRedirecting, setIsRedirecting] = (0, react_4.useState)(false);
+    const [error, setError] = (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;
+            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
+    (0, react_4.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);
+        anyspend_1.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 = (0, react_4.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 ((0, jsx_runtime_1.jsxs)(react_3.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: [(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: "ml-2 text-sm", children: "Checking availability..." })] }));
+    }
+    if (coinbaseAvailablePaymentMethods.length === 0) {
+        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-coinbase-unavailable py-4 text-center", children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(react_3.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: [(0, jsx_runtime_1.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." }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { initial: false, children: error && ((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: "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: error }) }, "coinbase-error")) }), (0, jsx_runtime_1.jsx)(react_2.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 ? ((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" }), isRedirecting ? "Redirecting to Coinbase..." : "Creating order..."] })) : error ? ("Try again") : ("Continue with Coinbase") })] }));
+}

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