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

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

@@ -0,0 +1,50 @@
+export type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+export interface CheckoutItem {
+    id?: string;
+    name: string;
+    description?: string;
+    imageUrl?: string;
+    /** Amount in wei (smallest unit of destination token) */
+    amount: string;
+    quantity: number;
+}
+export interface AnySpendCheckoutProps {
+    /** Display mode */
+    mode?: "page" | "embedded";
+    /** The recipient address */
+    recipientAddress: string;
+    /** The destination token address */
+    destinationTokenAddress: string;
+    /** The destination chain ID */
+    destinationTokenChainId: number;
+    /** Line items */
+    items: CheckoutItem[];
+    /** Override computed total */
+    totalAmount?: string;
+    /** Organization name */
+    organizationName?: string;
+    /** Organization logo URL */
+    organizationLogo?: string;
+    /** Theme color (hex) */
+    themeColor?: string;
+    /** Custom button text */
+    buttonText?: string;
+    /** Checkout session ID (used by pay link backend to track sessions) */
+    checkoutSessionId?: string;
+    /** Called on successful payment */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called on payment error */
+    onError?: (error: Error) => void;
+    /** URL to redirect to after payment */
+    returnUrl?: string;
+    /** Label for the return button */
+    returnLabel?: string;
+    /** Custom class names */
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function AnySpendCheckout({ mode, recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, checkoutSessionId: _checkoutSessionId, // TODO: pass to payment panels for server-side session tracking
+onSuccess, onError, returnUrl, returnLabel, classes, }: AnySpendCheckoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendCheckout = AnySpendCheckout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../global-account/react");
+const react_2 = require("react");
+const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
+const CheckoutCartPanel_1 = require("./CheckoutCartPanel");
+const CheckoutLayout_1 = require("./CheckoutLayout");
+const CheckoutPaymentPanel_1 = require("./CheckoutPaymentPanel");
+function AnySpendCheckout({ mode = "page", recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", checkoutSessionId: _checkoutSessionId, // TODO: pass to payment panels for server-side session tracking
+onSuccess, onError, returnUrl, returnLabel, classes, }) {
+    // Compute total from items
+    const computedTotal = (0, react_2.useMemo)(() => {
+        if (totalAmountOverride)
+            return totalAmountOverride;
+        let total = BigInt(0);
+        for (const item of items) {
+            total += BigInt(item.amount) * BigInt(item.quantity);
+        }
+        return total.toString();
+    }, [items, totalAmountOverride]);
+    // Get destination token metadata
+    const { data: tokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    const tokenSymbol = tokenData?.symbol || "";
+    const tokenDecimals = tokenData?.decimals || 18;
+    const fingerprint = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(CheckoutLayout_1.CheckoutLayout, { mode: mode, paymentPanel: (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes }), classes: classes }) }));
+}

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

@@ -0,0 +1,47 @@
+import type { AnySpendCheckoutClasses } from "../types/classes";
+import type { CheckoutItem } from "./AnySpendCheckout";
+export interface AnySpendCheckoutTriggerProps {
+    /** Payment recipient address (hex) */
+    recipientAddress: string;
+    /** Destination token address */
+    destinationTokenAddress: string;
+    /** Destination chain ID */
+    destinationTokenChainId: number;
+    /** Line items to display in the cart (optional — if omitted, only the payment panel is shown) */
+    items?: CheckoutItem[];
+    /** Total amount in wei — required when items are not provided */
+    totalAmount?: string;
+    /** Organization name */
+    organizationName?: string;
+    /** Organization logo URL */
+    organizationLogo?: string;
+    /** Theme color (hex) */
+    themeColor?: string;
+    /** Custom button text */
+    buttonText?: string;
+    /** Workflow ID to trigger on payment */
+    workflowId?: string;
+    /** Organization ID that owns the workflow */
+    orgId?: string;
+    /** Optional callback metadata merged into the order */
+    callbackMetadata?: {
+        /** Passed as trigger result inputs — accessible via {{root.result.inputs.*}} */
+        inputs?: Record<string, unknown>;
+    } & Record<string, unknown>;
+    /** Called on successful payment */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called on payment error */
+    onError?: (error: Error) => void;
+    /** URL to redirect to after payment */
+    returnUrl?: string;
+    /** Label for the return button */
+    returnLabel?: string;
+    /** Custom class names */
+    classes?: AnySpendCheckoutClasses;
+    /** Display mode — set automatically when used inside B3DynamicModal */
+    mode?: "modal" | "page";
+}
+export declare function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, workflowId, orgId, callbackMetadata, onSuccess, onError, returnUrl, returnLabel, classes, }: AnySpendCheckoutTriggerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendCheckoutTrigger = AnySpendCheckoutTrigger;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../global-account/react");
+const number_1 = require("../../../../shared/utils/number");
+const cn_1 = require("../../../../shared/utils/cn");
+const react_2 = require("react");
+const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
+const CheckoutCartPanel_1 = require("./CheckoutCartPanel");
+const CheckoutPaymentPanel_1 = require("./CheckoutPaymentPanel");
+const PoweredByBranding_1 = require("./PoweredByBranding");
+function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", workflowId, orgId, callbackMetadata, onSuccess, onError, returnUrl, returnLabel, classes, }) {
+    // Merge workflowId + orgId into callbackMetadata
+    const mergedMetadata = (0, react_2.useMemo)(() => {
+        if (!workflowId && !orgId && !callbackMetadata)
+            return undefined;
+        return {
+            ...(workflowId ? { workflowId } : {}),
+            ...(orgId ? { orgId } : {}),
+            ...callbackMetadata,
+        };
+    }, [workflowId, orgId, callbackMetadata]);
+    // Compute total from items or use override
+    const computedTotal = (0, react_2.useMemo)(() => {
+        if (totalAmountOverride)
+            return totalAmountOverride;
+        if (!items || items.length === 0)
+            return "0";
+        let total = BigInt(0);
+        for (const item of items) {
+            total += BigInt(item.amount) * BigInt(item.quantity);
+        }
+        return total.toString();
+    }, [items, totalAmountOverride]);
+    // Get destination token metadata
+    const { data: tokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    const tokenSymbol = tokenData?.symbol || "";
+    const tokenDecimals = tokenData?.decimals || 18;
+    const formattedTotal = (0, react_2.useMemo)(() => (0, number_1.formatTokenAmount)(BigInt(computedTotal || "0"), tokenDecimals), [computedTotal, tokenDecimals]);
+    const hasItems = items && items.length > 0;
+    const fingerprint = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-checkout-trigger flex flex-col", children: [hasItems && ((0, jsx_runtime_1.jsx)("div", { className: "border-b border-gray-200 p-5 dark:border-gray-700", children: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes }) })), !hasItems && ((0, jsx_runtime_1.jsx)("div", { className: "border-b border-gray-200 p-5 dark:border-gray-700", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between", classes?.cartSummary), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [formattedTotal, " ", tokenSymbol] })] }), (0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })] }) })), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, callbackMetadata: mergedMetadata, classes: classes }) })] }) }));
+}

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

@@ -0,0 +1,8 @@
+import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CartItemRowProps {
+    item: CheckoutItem;
+    formattedPrice: string;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CartItemRow({ item, formattedPrice, classes }: CartItemRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CartItemRow = CartItemRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+function CartItemRow({ item, formattedPrice, classes }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-start gap-3 py-3", classes?.cartItemRow), children: [item.imageUrl && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-gray-100", classes?.cartItemImage), children: (0, jsx_runtime_1.jsx)("img", { src: item.imageUrl, alt: item.name, className: "h-full w-full object-cover" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 items-start justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemName), children: item.name }), item.description && ((0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("mt-0.5 line-clamp-2 text-xs text-gray-500 dark:text-gray-400", classes?.cartItemDescription), children: item.description })), item.quantity > 1 && (0, jsx_runtime_1.jsxs)("p", { className: "mt-0.5 text-xs text-gray-400 dark:text-gray-500", children: ["Qty: ", item.quantity] })] }), (0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("ml-3 text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemPrice), children: formattedPrice })] })] }));
+}

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CartSummary = CartSummary;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+function CartSummary({ total, tokenSymbol, classes }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("border-t border-gray-200 pt-3 dark:border-gray-700", classes?.cartSummary), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [total, " ", tokenSymbol] })] }) }));
+}

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

@@ -0,0 +1,12 @@
+import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutCartPanelProps {
+    items: CheckoutItem[];
+    totalAmount: string;
+    tokenSymbol?: string;
+    tokenDecimals?: number;
+    organizationName?: string;
+    organizationLogo?: string;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, organizationName, organizationLogo, classes, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutCartPanel = CheckoutCartPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const number_1 = require("../../../../shared/utils/number");
+const react_1 = require("react");
+const CartItemRow_1 = require("./CartItemRow");
+const CartSummary_1 = require("./CartSummary");
+const PoweredByBranding_1 = require("./PoweredByBranding");
+function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, organizationName, organizationLogo, classes, }) {
+    const formattedTotal = (0, react_1.useMemo)(() => (0, number_1.formatTokenAmount)(BigInt(totalAmount), tokenDecimals), [totalAmount, tokenDecimals]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-cart-panel flex flex-col", classes?.cartPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
+                    const itemTotal = BigInt(item.amount) * BigInt(item.quantity);
+                    const formattedPrice = `${(0, number_1.formatTokenAmount)(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+                    return (0, jsx_runtime_1.jsx)(CartItemRow_1.CartItemRow, { item: item, formattedPrice: formattedPrice, classes: classes }, item.id || index);
+                }) }), (0, jsx_runtime_1.jsx)(CartSummary_1.CartSummary, { total: formattedTotal, tokenSymbol: tokenSymbol, classes: classes }), (0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })] }));
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutLayoutProps {
+    mode: "page" | "embedded";
+    paymentPanel: ReactNode;
+    cartPanel: ReactNode;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CheckoutLayout({ mode, paymentPanel, cartPanel, classes }: CheckoutLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+"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.jsxs)("div", { className: (0, cn_1.cn)("anyspend-checkout mx-auto w-full", classes?.root), style: mode === "page" ? { maxWidth: 1100, padding: "2rem 1rem" } : undefined, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+                    __html: `
+            .anyspend-checkout-grid {
+              display: grid;
+              gap: 2rem;
+              grid-template-columns: 1fr;
+            }
+            @media (min-width: 768px) {
+              .anyspend-checkout-grid {
+                grid-template-columns: 1fr ${rightColumnWidth}px;
+              }
+              .anyspend-checkout-grid > .anyspend-payment-col { order: 1; }
+              .anyspend-checkout-grid > .anyspend-cart-col { order: 2; }
+            }
+          `,
+                } }), (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-gray-700 dark:bg-gray-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-gray-700 dark:bg-gray-800/50", classes?.cartColumn), style: { position: "sticky", top: 32, alignSelf: "start" }, children: cartPanel })] })] }));
+}

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

@@ -0,0 +1,20 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+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;
+}
+export declare function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, }: CheckoutPaymentPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,45 @@
+"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 CheckoutSuccess_1 = require("./CheckoutSuccess");
+const CoinbaseCheckoutPanel_1 = require("./CoinbaseCheckoutPanel");
+const CryptoCheckoutPanel_1 = require("./CryptoCheckoutPanel");
+const FiatCheckoutPanel_1 = require("./FiatCheckoutPanel");
+const QRCheckoutPanel_1 = require("./QRCheckoutPanel");
+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-gray-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, }) {
+    const [paymentMethod, setPaymentMethod] = (0, react_2.useState)("crypto");
+    const [paymentResult, setPaymentResult] = (0, react_2.useState)(null);
+    const handleSuccess = (result) => {
+        setPaymentResult(result);
+        onSuccess?.(result);
+    };
+    if (paymentResult) {
+        return ((0, jsx_runtime_1.jsx)(CheckoutSuccess_1.CheckoutSuccess, { txHash: paymentResult.txHash, orderId: paymentResult.orderId, returnUrl: returnUrl, returnLabel: returnLabel, 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-gray-900" : "bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-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-gray-800 dark:bg-gray-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" }), (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-gray-700 dark:border-gray-700", classes?.paymentMethodSelector), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-crypto", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("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: "Crypto wallet" })] }), (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)(CryptoCheckoutPanel_1.CryptoCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "crypto-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-qr", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("qr"), className: accordionButtonClass(paymentMethod === "qr"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "qr", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.QrCode, { 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: "QR code" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "qr" && ((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)(QRCheckoutPanel_1.QRCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "qr-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-card", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("card"), className: accordionButtonClass(paymentMethod === "card"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), (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, onSuccess: handleSuccess, onError: onError, classes: classes }) }) }, "card-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-coinbase", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("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, onSuccess: handleSuccess, onError: onError, 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,11 @@
+"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");
+function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }) {
+    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)(react_1.motion.div, { initial: { scale: 0.3, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { duration: 0.5, ease: "easeOut" }, className: "anyspend-success-icon mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-8 w-8 text-green-600 dark:text-green-400" }) }), (0, jsx_runtime_1.jsx)(react_1.motion.h2, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.2, ease: "easeOut" }, className: "anyspend-success-title text-xl font-semibold text-gray-900 dark:text-gray-100", children: "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: 0.35, ease: "easeOut" }, className: "anyspend-success-description mt-2 text-sm text-gray-500 dark:text-gray-400", children: "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: returnLabel || "Return to Store" }))] }));
+}

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

@@ -0,0 +1,16 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CoinbaseCheckoutPanelProps {
+    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 CoinbaseCheckoutPanel({ destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, }: CoinbaseCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+"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 cn_1 = require("../../../../shared/utils/cn");
+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");
+function CoinbaseCheckoutPanel({ destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, }) {
+    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 { coinbaseAvailablePaymentMethods, isLoading } = (0, react_1.useGeoOnrampOptions)(formattedAmount);
+    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." }) }));
+    }
+    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)("button", { className: (0, cn_1.cn)("anyspend-coinbase-btn w-full rounded-xl px-4 py-3 text-sm font-semibold text-white transition-all", "bg-[#0052FF] hover:bg-[#003ECF] active:scale-[0.98]"), style: themeColor ? { backgroundColor: themeColor } : undefined, children: "Continue with Coinbase" })] }));
+}

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

@@ -0,0 +1,33 @@
+import { components } from "../../../../anyspend/types/api";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CryptoCheckoutPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    buttonText?: string;
+    themeColor?: string;
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CryptoCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, onSuccess, onError, callbackMetadata, classes, }: CryptoCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export interface TokenSelectorModalProps {
+    open: boolean;
+    onClose: () => void;
+    tokenList: components["schemas"]["Token"][] | undefined;
+    isLoadingTokens: boolean;
+    tokenSearchQuery: string;
+    onSearchChange: (query: string) => void;
+    onSelectToken: (token: components["schemas"]["Token"]) => void;
+    selectedToken: components["schemas"]["Token"] | null;
+    walletAddress?: string;
+    chainId: number;
+    onChainChange: (chainId: number) => void;
+}
+export declare function TokenSelectorModal({ open, onClose, tokenList, isLoadingTokens, tokenSearchQuery, onSearchChange, onSelectToken, selectedToken, walletAddress, chainId, onChainChange, }: TokenSelectorModalProps): import("react/jsx-runtime").JSX.Element;
+export {};