@b3dotfun/sdk 0.1.66 → 0.1.68

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

@@ -0,0 +1,269 @@
+"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 constants_1 = require("../../../../anyspend/constants");
+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, onOrderCreated, onError, callbackMetadata, classes, }) {
+    // Stable refs for callback props to avoid re-triggering effects
+    const onErrorRef = (0, react_4.useRef)(onError);
+    onErrorRef.current = onError;
+    const { data: tokenData } = (0, react_2.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    const { theme, stripePublishableKey } = (0, react_2.useB3Config)();
+    // Clean decimal string for API calls (no commas, no subscripts)
+    const formattedAmount = (0, react_4.useMemo)(() => {
+        const decimals = tokenData?.decimals || 18;
+        return (0, number_1.formatUnits)(BigInt(totalAmount).toString(), decimals);
+    }, [totalAmount, tokenData]);
+    // Determine if destination token is a stablecoin (amount ≈ USD)
+    const isStablecoin = (0, react_4.useMemo)(() => {
+        return [
+            "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // USDC Base
+            "0xdAC17F958D2ee523a2206206994597C13D831ec7", // USDT Ethereum
+        ].some(addr => addr.toLowerCase() === destinationTokenAddress.toLowerCase());
+    }, [destinationTokenAddress]);
+    // Get USD equivalent via quote for non-stablecoin tokens
+    const { anyspendQuote, isLoadingAnyspendQuote } = (0, react_1.useAnyspendQuote)({
+        type: "swap",
+        srcChain: 8453, // Base (USDC source)
+        dstChain: destinationTokenChainId,
+        srcTokenAddress: constants_1.USDC_BASE.address,
+        dstTokenAddress: destinationTokenAddress,
+        tradeType: "EXACT_OUTPUT",
+        amount: totalAmount,
+    });
+    // USD amount to charge: direct for stablecoins, quote-derived for others.
+    // Rounded to 2 decimals so minor quote fluctuations don't retrigger the Stripe support check.
+    const usdAmount = (0, react_4.useMemo)(() => {
+        if (isStablecoin)
+            return formattedAmount;
+        if (!anyspendQuote?.data?.currencyIn?.amount)
+            return null;
+        const raw = (0, number_1.formatUnits)(anyspendQuote.data.currencyIn.amount, constants_1.USDC_BASE.decimals);
+        return parseFloat(raw).toFixed(2);
+    }, [isStablecoin, formattedAmount, anyspendQuote]);
+    // Debug: log computed values for Stripe flow diagnostics
+    (0, react_4.useEffect)(() => {
+        console.log("@@fiat-checkout:debug", {
+            totalAmount,
+            formattedAmount,
+            isStablecoin,
+            isLoadingAnyspendQuote,
+            quoteAmount: anyspendQuote?.data?.currencyIn?.amount,
+            usdAmount,
+        });
+    }, [totalAmount, formattedAmount, isStablecoin, isLoadingAnyspendQuote, anyspendQuote, usdAmount]);
+    const { geoData, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeo, } = (0, react_1.useGeoOnrampOptions)(usdAmount || "0");
+    // 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.");
+            onErrorRef.current?.(error);
+        },
+    });
+    // Auto-create onramp order when Stripe Web2 is supported and all data is ready
+    (0, react_4.useEffect)(() => {
+        if (!isLoadingGeo &&
+            (!isStablecoin ? !isLoadingAnyspendQuote : true) &&
+            usdAmount &&
+            parseFloat(usdAmount) > 0 &&
+            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: usdAmount,
+                onramp: {
+                    vendor: "stripe-web2",
+                    paymentMethod: "",
+                    country: geoData?.country || "US",
+                    redirectUrl: window.location.origin,
+                },
+                expectedDstAmount: totalAmount,
+                callbackMetadata,
+            });
+        }
+    }, [
+        isLoadingGeo,
+        isStablecoin,
+        isLoadingAnyspendQuote,
+        usdAmount,
+        stripeWeb2Support,
+        orderId,
+        isCreatingOrder,
+        orderError,
+        tokenData,
+        recipientAddress,
+        destinationTokenAddress,
+        destinationTokenChainId,
+        totalAmount,
+        geoData,
+        callbackMetadata,
+        createOrder,
+    ]);
+    // Loading geo/stripe support check (and quote for non-stablecoins)
+    if (isLoadingGeo || (!isStablecoin && isLoadingAnyspendQuote)) {
+        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.jsxs)(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 flex flex-col gap-3", classes?.fiatPanel), children: [usdAmount && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-fiat-summary rounded-lg border border-gray-200 px-4 py-3 dark:border-gray-700", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-500 dark:text-gray-400", children: "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium text-gray-900 dark:text-white", children: ["$", parseFloat(usdAmount).toFixed(2)] })] }), !isStablecoin && tokenData && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1 flex items-center justify-between text-xs text-gray-400 dark:text-gray-500", children: [(0, jsx_runtime_1.jsxs)("span", { children: [formattedAmount, " ", tokenData.symbol] }), (0, jsx_runtime_1.jsx)("span", { children: "incl. fees" })] }))] })), (0, jsx_runtime_1.jsx)(StripeCheckout, { stripePaymentIntentId: stripePaymentIntentId, stripePublishableKey: stripePublishableKey, theme: theme, themeColor: themeColor, orderId: orderId, onSuccess: onSuccess, onOrderCreated: onOrderCreated, onError: onError, classes: classes })] }));
+    }
+    // TODO: Dead code — Stripe onramp is disabled at backend (isStripeOnrampSupported hardcoded false).
+    // Remove this block or implement onClick if Stripe onramp is re-enabled.
+    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.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "anyspend-fiat-redirect-btn w-full", textClassName: "text-white", children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", 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, onOrderCreated, 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, onOrderCreated: onOrderCreated, onError: onError, classes: classes }) }));
+}
+function StripeCheckoutForm({ themeColor, orderId, onSuccess, onOrderCreated, 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) {
+                console.error("@@checkout-stripe:error:", JSON.stringify(result.error, null, 2));
+                setMessage(result.error.message || "Payment failed. Please try again.");
+                return;
+            }
+            console.log("@@checkout-stripe:success:", JSON.stringify({ orderId }, null, 2));
+            // Payment succeeded — notify parent to show order lifecycle tracking
+            onOrderCreated?.(orderId);
+            // Also fire legacy callback for backward compatibility
+            onSuccess?.({ orderId, txHash: undefined });
+        }
+        catch (error) {
+            const errorMessage = error?.message || "Payment failed. Please try again.";
+            setMessage(errorMessage);
+            const errorObj = error instanceof Error ? error : new Error(errorMessage);
+            onError?.(errorObj);
+        }
+        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)(react_2.ShinyButton, { type: "submit", accentColor: themeColor || "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: (0, cn_1.cn)("anyspend-stripe-submit w-full", classes?.payButton), textClassName: "text-white", children: loading ? ((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" }), "Processing..."] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", 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: "flex items-center gap-1.5 text-xs text-gray-400 opacity-40 dark:text-gray-500", children: ["powered by", " ", (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/anyspend-logo-brand.svg", alt: "AnySpend", className: "inline-block h-3.5 dark:hidden" }), (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/anyspend-logo-brand-dark.svg", alt: "AnySpend", className: "hidden h-3.5 dark:inline-block" })] })] }));
+}

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

@@ -0,0 +1,11 @@
+import type { ShippingOption } from "../../../types/forms";
+interface ShippingSelectorProps {
+    options: ShippingOption[];
+    selectedId: string | null;
+    onSelect: (option: ShippingOption) => void;
+    tokenSymbol?: string;
+    tokenDecimals?: number;
+    className?: string;
+}
+export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,20 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShippingSelector = ShippingSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const number_1 = require("../../../../shared/utils/number");
+function formatAmount(amount, decimals, symbol) {
+    const bi = (0, number_1.safeBigInt)(amount);
+    if (bi === BigInt(0))
+        return "Free";
+    return `${(0, number_1.formatTokenAmount)(bi, decimals)} ${symbol}`;
+}
+function ShippingSelector({ options, selectedId, onSelect, tokenSymbol = "", tokenDecimals = 6, className, }) {
+    if (options.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-shipping-selector space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Shipping" }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-options space-y-2", children: options.map(option => ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("anyspend-shipping-option flex cursor-pointer items-center justify-between rounded-lg border p-3 transition-colors", selectedId === option.id
+                        ? "anyspend-shipping-option-selected border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/20"
+                        : "border-gray-200 bg-white hover:border-gray-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:border-neutral-500"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "shipping", checked: selectedId === option.id, onChange: () => onSelect(option), className: "h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-option-name text-sm font-medium text-gray-900 dark:text-gray-100", children: option.name }), (option.description || option.estimated_days) && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-option-detail text-xs text-gray-500 dark:text-gray-400", children: option.description || (option.estimated_days && `${option.estimated_days}`) }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100", children: formatAmount(option.amount, tokenDecimals, tokenSymbol) })] }, option.id))) })] }));
+}

package/dist/cjs/anyspend/react/components/common/ConnectWalletPayment.js

@@ -12,6 +12,7 @@ const centerTruncate_1 = __importDefault(require("../../../../shared/utils/cente
 const number_1 = require("../../../../shared/utils/number");
 const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
+const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
 const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
 const PaymentMethodSwitch_1 = require("./PaymentMethodSwitch");
@@ -22,6 +23,7 @@ function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecut
     const connectedEvmAddress = cryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET
         ? connectedSmartWallet?.getAccount()?.address
         : connectedEOAWallet?.getAccount()?.address;
+    const { slots } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
     const srcToken = order.metadata.srcToken;
     const dstToken = order.metadata.dstToken;
     const expectedDstAmount = order.type === "mint_nft" ||
@@ -34,11 +36,23 @@ function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecut
     if (!srcToken || !dstToken) {
         return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col items-center gap-6", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
-                                    ? "Pay from Phantom Wallet"
-                                    : cryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET
-                                        ? "Pay from Global Account"
-                                        : "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsxs)("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+    const paymentLabel = order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+        ? "Pay from Phantom Wallet"
+        : cryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET
+            ? "Pay from Global Account"
+            : "Pay from Connected Wallet";
+    const connectedAddress = order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+        ? phantomWalletAddress
+        : connectedEvmAddress;
+    if (slots.connectWalletButton) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col items-center gap-6", children: slots.connectWalletButton({
+                onPayment,
+                txLoading,
+                connectedAddress: connectedAddress || undefined,
+                paymentLabel,
+            }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col items-center gap-6", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: paymentLabel }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsxs)("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                             ? (0, centerTruncate_1.default)(phantomWalletAddress, 6)
                             : (0, centerTruncate_1.default)(connectedEvmAddress || "")] }), (0, jsx_runtime_1.jsx)(PaymentMethodSwitch_1.PaymentMethodSwitch, { currentMethod: cryptoPaymentMethod, onMethodChange: onPaymentMethodChange }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
 }

package/dist/cjs/anyspend/react/components/common/CryptoPaySection.js

@@ -43,7 +43,7 @@ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedS
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
     return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: classes?.container ||
             "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.label || "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), (0, jsx_runtime_1.jsx)("button", { className: classes?.paymentMethodButton ||
-                            "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethodDisplay_1.CryptoPaymentMethodDisplay, { paymentMethod: selectedCryptoPaymentMethod, connectedAddress: walletAddress, connectedName: connectedName }) })] }), (0, jsx_runtime_1.jsx)("div", { className: classes?.inputContainer, children: (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                            "text-as-tertiary flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethodDisplay_1.CryptoPaymentMethodDisplay, { paymentMethod: selectedCryptoPaymentMethod, connectedAddress: walletAddress, connectedName: connectedName }) })] }), (0, jsx_runtime_1.jsx)("div", { className: classes?.inputContainer, children: (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                         setIsSrcInputDirty(true);
                         setSrcAmount(value);
                     }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }) }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.balanceRow || "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {

package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethodDisplay.js

@@ -15,7 +15,7 @@ const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
  */
 function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }) {
     if (paymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress) })) : ((0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Connect wallet" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary whitespace-nowrap", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress) })) : ((0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Connect wallet" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
     }
     if (paymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Global Account" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));

package/dist/cjs/anyspend/react/components/common/CryptoReceiveSection.js

@@ -12,7 +12,7 @@ const OrderTokenAmount_1 = require("./OrderTokenAmount");
 const PointsBadge_1 = require("./PointsBadge");
 function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, effectiveRecipientAddress, recipientName, customRecipientLabel, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, disableAmountInput, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, classes, }) {
     return ((0, jsx_runtime_1.jsxs)(react_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: classes?.container ||
-            "receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.label || "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: [isDepositMode ? "Deposit" : "Receive", isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), effectiveRecipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: classes?.recipientButton || "text-as-tertiarry flex h-7 items-center gap-2 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: classes?.recipientValue || "text-as-tertiarry flex items-center gap-1 text-sm", children: customRecipientLabel ||
+            "receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.label || "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: [isDepositMode ? "Deposit" : "Receive", isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), effectiveRecipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: classes?.recipientButton || "text-as-tertiary flex h-7 items-center gap-2 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: classes?.recipientValue || "text-as-tertiary flex items-center gap-1 text-sm", children: customRecipientLabel ||
                                         (recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(effectiveRecipientAddress || "")) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }) })) : ((0, jsx_runtime_1.jsx)("button", { className: classes?.recipientButton || "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
             // Fixed destination token display for buy mode and deposit mode
             (0, jsx_runtime_1.jsxs)("div", { className: classes?.inputContainer || "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: classes?.input || "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.tokenSelector ||

package/dist/cjs/anyspend/react/components/common/OrderDetailsCollapsible.js

@@ -27,12 +27,12 @@ exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollaps
         ? "0"
         : order.type === "custom" || order.type === "deposit_first"
             ? order.payload.amount?.toString() || "0"
-            : order.payload.expectedDstAmount.toString();
+            : order.payload.expectedDstAmount?.toString() || "0";
     const finalFormattedExpectedDstAmount = formattedExpectedDstAmount || (0, number_1.formatTokenAmount)(BigInt(expectedDstAmount), dstToken.decimals);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(classes?.container ||
-            "order-details-collapsible bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2", className), children: showOrderDetails ? ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: "order-details-expanded w-full", initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-content flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-details-recipient-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-recipient-label text-as-tertiarry", children: "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-recipient-info flex flex-col items-end gap-1", children: [recipientName && ((0, jsx_runtime_1.jsx)("div", { className: "order-details-recipient-name text-as-primary font-semibold", children: recipientName })), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
+            "order-details-collapsible bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2", className), children: showOrderDetails ? ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: "order-details-expanded w-full", initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-content flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-details-recipient-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-recipient-label text-as-tertiary", children: "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-recipient-info flex flex-col items-end gap-1", children: [recipientName && ((0, jsx_runtime_1.jsx)("div", { className: "order-details-recipient-name text-as-primary font-semibold", children: recipientName })), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
                                             react_1.toast.success("Copied recipient address to clipboard");
-                                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-recipient-address text-as-primary flex items-center gap-2", children: [(0, centerTruncate_1.default)(order.recipientAddress, 10), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-details-recipient-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-expected-section flex w-full items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-expected-label text-as-tertiarry shrink-0", children: order.type === "swap" ||
+                                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-recipient-address text-as-primary flex items-center gap-2", children: [(0, centerTruncate_1.default)(order.recipientAddress, 10), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-details-recipient-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-expected-section flex w-full items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-expected-label text-as-tertiary shrink-0", children: order.type === "swap" ||
                                     order.type === "deposit_first" ||
                                     order.type === "mint_nft" ||
                                     order.type === "hype_duel"
@@ -45,5 +45,5 @@ exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollaps
                                                 ? order.metadata.action
                                                     ? (0, anyspend_1.capitalizeFirstLetter)(order.metadata.action)
                                                     : "Contract execution"
-                                                : "" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-nft-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-tournament-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? ((0, jsx_runtime_1.jsx)("div", { className: "order-details-hype-info flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-hype-amount", children: [(0, number_1.formatTokenAmount)(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("order-details-chain-logo h-3", order.dstChain !== chains_1.b3.id && "w-3 rounded-full", order.dstChain === chains_1.b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-points-label text-as-tertiarry", children: "Points" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", (0, formatNumber_1.formatNumber)(points), " pts"] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-collapsed flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
+                                                : "" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-nft-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-tournament-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? ((0, jsx_runtime_1.jsx)("div", { className: "order-details-hype-info flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-hype-amount", children: [(0, number_1.formatTokenAmount)(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("order-details-chain-logo h-3", order.dstChain !== chains_1.b3.id && "w-3 rounded-full", order.dstChain === chains_1.b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-points-label text-as-tertiary", children: "Points" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", (0, formatNumber_1.formatNumber)(points), " pts"] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-label text-as-tertiary", children: showTotal ? "Total (included fee)" : "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-collapsed flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
 });

package/dist/cjs/anyspend/react/components/common/OrderStatus.d.ts

@@ -1,6 +1,7 @@
 import { components } from "../../../../anyspend/types/api";
+import React from "react";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
-export declare const OrderStatus: import("react").NamedExoticComponent<{
+export declare const OrderStatus: React.NamedExoticComponent<{
     order: components["schemas"]["Order"];
     selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
 }>;