@b3dotfun/sdk 0.1.66 → 0.1.68

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

@@ -0,0 +1,266 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAnyspendCreateOnrampOrder, useAnyspendQuote, useGeoOnrampOptions, useStripeClientSecret, } from "../../../../anyspend/react/index.js";
+import { USDC_BASE } from "../../../../anyspend/constants/index.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { formatUnits } from "../../../../shared/utils/number.js";
+import { getStripePromise } from "../../../../shared/utils/payment.utils.js";
+import { ShinyButton, TextShimmer, useB3Config, useTokenData } from "../../../../global-account/react/index.js";
+import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { Loader2, Lock } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, }) {
+    // Stable refs for callback props to avoid re-triggering effects
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+    const { theme, stripePublishableKey } = useB3Config();
+    // Clean decimal string for API calls (no commas, no subscripts)
+    const formattedAmount = useMemo(() => {
+        const decimals = tokenData?.decimals || 18;
+        return formatUnits(BigInt(totalAmount).toString(), decimals);
+    }, [totalAmount, tokenData]);
+    // Determine if destination token is a stablecoin (amount ≈ USD)
+    const isStablecoin = 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 } = useAnyspendQuote({
+        type: "swap",
+        srcChain: 8453, // Base (USDC source)
+        dstChain: destinationTokenChainId,
+        srcTokenAddress: 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 = useMemo(() => {
+        if (isStablecoin)
+            return formattedAmount;
+        if (!anyspendQuote?.data?.currencyIn?.amount)
+            return null;
+        const raw = formatUnits(anyspendQuote.data.currencyIn.amount, USDC_BASE.decimals);
+        return parseFloat(raw).toFixed(2);
+    }, [isStablecoin, formattedAmount, anyspendQuote]);
+    // Debug: log computed values for Stripe flow diagnostics
+    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, } = useGeoOnrampOptions(usdAmount || "0");
+    // Order state
+    const [orderId, setOrderId] = useState(null);
+    const [stripePaymentIntentId, setStripePaymentIntentId] = useState(null);
+    const [orderError, setOrderError] = useState(null);
+    const orderCreatedRef = useRef(false);
+    const { createOrder, isCreatingOrder } = 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
+    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 (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: cn("anyspend-fiat-loading flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(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 (_jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-fiat-unavailable py-4 text-center", classes?.fiatPanel), children: _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 (_jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-fiat-error flex flex-col items-center gap-3 py-4", classes?.fiatPanel), children: [_jsx("p", { className: "text-sm text-red-500", children: orderError }), _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 (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: cn("anyspend-fiat-initializing flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Initializing secure payment..." })] }));
+    }
+    // Stripe Web2 embedded form
+    if (hasStripeWeb2 && stripePaymentIntentId && orderId) {
+        return (_jsxs(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, ease: "easeOut" }, className: cn("anyspend-fiat-stripe flex flex-col gap-3", classes?.fiatPanel), children: [usdAmount && (_jsxs("div", { className: "anyspend-fiat-summary rounded-lg border border-gray-200 px-4 py-3 dark:border-gray-700", children: [_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400", children: "Total" }), _jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: ["$", parseFloat(usdAmount).toFixed(2)] })] }), !isStablecoin && tokenData && (_jsxs("div", { className: "mt-1 flex items-center justify-between text-xs text-gray-400 dark:text-gray-500", children: [_jsxs("span", { children: [formattedAmount, " ", tokenData.symbol] }), _jsx("span", { children: "incl. fees" })] }))] })), _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 (_jsxs("div", { className: cn("anyspend-fiat-redirect flex flex-col gap-3 py-2", classes?.fiatPanel), children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "You'll be redirected to Stripe to complete your payment securely." }), _jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", className: "anyspend-fiat-redirect-btn w-full", textClassName: "text-white", children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Lock, { className: "h-3.5 w-3.5" }), "Pay with Card"] }) }), _jsxs("p", { className: "anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400", children: [_jsx(Lock, { className: "h-3 w-3" }), "Secured by Stripe"] })] }));
+}
+function StripeCheckout({ stripePaymentIntentId, stripePublishableKey, theme, themeColor, orderId, onSuccess, onOrderCreated, onError, classes, }) {
+    const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = useStripeClientSecret(stripePaymentIntentId);
+    if (isLoadingStripeClientSecret) {
+        return (_jsxs(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: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading payment form..." })] }));
+    }
+    if (stripeClientSecretError || !clientSecret) {
+        return (_jsx(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: _jsx("p", { className: "text-sm text-red-500", children: stripeClientSecretError?.message || "Failed to load payment form. Please try again." }) }));
+    }
+    return (_jsx(Elements, { stripe: getStripePromise(stripePublishableKey), options: {
+            clientSecret,
+            appearance: {
+                theme: theme === "light" ? "stripe" : "night",
+                variables: {
+                    borderRadius: "8px",
+                },
+            },
+        }, children: _jsx(StripeCheckoutForm, { themeColor: themeColor, orderId: orderId, onSuccess: onSuccess, onOrderCreated: onOrderCreated, onError: onError, classes: classes }) }));
+}
+function StripeCheckoutForm({ themeColor, orderId, onSuccess, onOrderCreated, onError, classes, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState(null);
+    const [stripeReady, setStripeReady] = useState(false);
+    const [showAddressElement, setShowAddressElement] = useState(false);
+    useEffect(() => {
+        if (stripe && elements) {
+            setStripeReady(true);
+        }
+    }, [stripe, elements]);
+    const handlePaymentElementChange = 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 (_jsxs(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: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading payment form..." })] }));
+    }
+    return (_jsxs(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: [_jsx("div", { className: "anyspend-stripe-payment-element", children: _jsx(PaymentElement, { onChange: handlePaymentElementChange, options: stripeElementOptions }) }), _jsx(AnimatePresence, { initial: false, children: showAddressElement && (_jsx(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: _jsx(AddressElement, { options: {
+                            mode: "billing",
+                            fields: {
+                                phone: "always",
+                            },
+                            display: {
+                                name: "split",
+                            },
+                            validation: {
+                                phone: {
+                                    required: "always",
+                                },
+                            },
+                        } }) }, "address-element")) }), _jsx(AnimatePresence, { initial: false, children: message && (_jsx(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: _jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) }, "stripe-error")) }), _jsx(ShinyButton, { type: "submit", accentColor: themeColor || "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: cn("anyspend-stripe-submit w-full", classes?.payButton), textClassName: "text-white", children: loading ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Processing..."] })) : (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Lock, { className: "h-3.5 w-3.5" }), "Complete Payment"] })) }), _jsxs("p", { className: "anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400", children: [_jsx(Lock, { className: "h-3 w-3" }), "Secured by Stripe"] })] }));
+}

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

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+export function PoweredByBranding({ organizationName, organizationLogo, classes }) {
+    return (_jsxs("div", { className: cn("flex items-center justify-between pt-4", classes?.poweredBy), children: [organizationLogo || organizationName ? (_jsxs("div", { className: "flex items-center gap-2", children: [organizationLogo && (_jsx("img", { src: organizationLogo, alt: organizationName || "Organization", className: "h-5 w-5 rounded-full" })), organizationName && (_jsx("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: organizationName }))] })) : (_jsx("div", {})), _jsxs("span", { className: "flex items-center gap-1.5 text-xs text-gray-400 opacity-40 dark:text-gray-500", children: ["powered by", " ", _jsx("img", { src: "https://cdn.b3.fun/anyspend-logo-brand.svg", alt: "AnySpend", className: "inline-block h-3.5 dark:hidden" }), _jsx("img", { src: "https://cdn.b3.fun/anyspend-logo-brand-dark.svg", alt: "AnySpend", className: "hidden h-3.5 dark:inline-block" })] })] }));
+}

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { formatTokenAmount, safeBigInt } from "../../../../shared/utils/number.js";
+function formatAmount(amount, decimals, symbol) {
+    const bi = safeBigInt(amount);
+    if (bi === BigInt(0))
+        return "Free";
+    return `${formatTokenAmount(bi, decimals)} ${symbol}`;
+}
+export function ShippingSelector({ options, selectedId, onSelect, tokenSymbol = "", tokenDecimals = 6, className, }) {
+    if (options.length === 0)
+        return null;
+    return (_jsxs("div", { className: cn("anyspend-shipping-selector space-y-2", className), children: [_jsx("div", { className: "anyspend-shipping-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Shipping" }), _jsx("div", { className: "anyspend-shipping-options space-y-2", children: options.map(option => (_jsxs("label", { className: 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: [_jsxs("div", { className: "flex items-center gap-3", children: [_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" }), _jsxs("div", { children: [_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) && (_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}`) }))] })] }), _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/esm/anyspend/react/components/common/ConnectWalletPayment.js

@@ -6,6 +6,7 @@ import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext.js";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
 import { PaymentMethodSwitch } from "./PaymentMethodSwitch.js";
@@ -16,6 +17,7 @@ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSw
     const connectedEvmAddress = cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
         ? connectedSmartWallet?.getAccount()?.address
         : connectedEOAWallet?.getAccount()?.address;
+    const { slots } = useAnySpendCustomization();
     const srcToken = order.metadata.srcToken;
     const dstToken = order.metadata.dstToken;
     const expectedDstAmount = order.type === "mint_nft" ||
@@ -28,11 +30,23 @@ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSw
     if (!srcToken || !dstToken) {
         return _jsx("div", { children: "Loading..." });
     }
-    return (_jsx("div", { className: "flex w-full flex-col items-center gap-6", children: _jsxs(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: [_jsx(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 ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
-                                    ? "Pay from Phantom Wallet"
-                                    : cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
-                                        ? "Pay from Global Account"
-                                        : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsxs("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+    const paymentLabel = order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+        ? "Pay from Phantom Wallet"
+        : cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+            ? "Pay from Global Account"
+            : "Pay from Connected Wallet";
+    const connectedAddress = order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+        ? phantomWalletAddress
+        : connectedEvmAddress;
+    if (slots.connectWalletButton) {
+        return (_jsx("div", { className: "flex w-full flex-col items-center gap-6", children: slots.connectWalletButton({
+                onPayment,
+                txLoading,
+                connectedAddress: connectedAddress || undefined,
+                paymentLabel,
+            }) }));
+    }
+    return (_jsx("div", { className: "flex w-full flex-col items-center gap-6", children: _jsxs(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: [_jsx(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 ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: paymentLabel }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsxs("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                             ? centerTruncate(phantomWalletAddress, 6)
                             : centerTruncate(connectedEvmAddress || "")] }), _jsx(PaymentMethodSwitch, { currentMethod: cryptoPaymentMethod, onMethodChange: onPaymentMethodChange }), _jsx("div", { className: "mt-4", children: _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
 }

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

@@ -40,7 +40,7 @@ export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, se
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
     return (_jsxs(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: [_jsxs("div", { className: "flex items-center justify-between", children: [_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 && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), _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: _jsx(CryptoPaymentMethodDisplay, { paymentMethod: selectedCryptoPaymentMethod, connectedAddress: walletAddress, connectedName: connectedName }) })] }), _jsx("div", { className: classes?.inputContainer, children: _jsx(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: _jsx(CryptoPaymentMethodDisplay, { paymentMethod: selectedCryptoPaymentMethod, connectedAddress: walletAddress, connectedName: connectedName }) })] }), _jsx("div", { className: classes?.inputContainer, children: _jsx(OrderTokenAmount, { address: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                         setIsSrcInputDirty(true);
                         setSrcAmount(value);
                     }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }) }), _jsxs("div", { className: classes?.balanceRow || "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {

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

@@ -12,7 +12,7 @@ import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
  */
 export function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }) {
     if (paymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
-        return (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress) })) : (_jsx("span", { className: "whitespace-nowrap", children: "Connect wallet" })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+        return (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx("span", { className: "text-as-tertiary whitespace-nowrap", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress) })) : (_jsx("span", { className: "whitespace-nowrap", children: "Connect wallet" })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
     }
     if (paymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
         return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Global Account" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));

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

@@ -9,7 +9,7 @@ import { OrderTokenAmount } from "./OrderTokenAmount.js";
 import { PointsBadge } from "./PointsBadge.js";
 export 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 (_jsxs(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: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_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 && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), effectiveRecipientAddress ? (_jsx("button", { className: classes?.recipientButton || "text-as-tertiarry flex h-7 items-center gap-2 rounded-lg", onClick: onSelectRecipient, children: _jsxs(_Fragment, { children: [_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: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_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 && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), effectiveRecipientAddress ? (_jsx("button", { className: classes?.recipientButton || "text-as-tertiary flex h-7 items-center gap-2 rounded-lg", onClick: onSelectRecipient, children: _jsxs(_Fragment, { children: [_jsx("span", { className: classes?.recipientValue || "text-as-tertiary flex items-center gap-1 text-sm", children: customRecipientLabel ||
                                         (recipientName ? formatUsername(recipientName) : shortenAddress(effectiveRecipientAddress || "")) }), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: classes?.recipientButton || "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
             // Fixed destination token display for buy mode and deposit mode
             _jsxs("div", { className: classes?.inputContainer || "flex items-center justify-between", children: [_jsx("div", { className: classes?.input || "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: classes?.tokenSelector ||

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

@@ -21,12 +21,12 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
         ? "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 || formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
     return (_jsx("div", { className: cn(classes?.container ||
-            "order-details-collapsible bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2", className), children: showOrderDetails ? (_jsx(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: _jsxs("div", { className: "order-details-content flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm", children: [_jsxs("div", { className: "order-details-recipient-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-recipient-label text-as-tertiarry", children: "Recipient" }), _jsxs("div", { className: "order-details-recipient-info flex flex-col items-end gap-1", children: [recipientName && (_jsx("div", { className: "order-details-recipient-name text-as-primary font-semibold", children: recipientName })), _jsx(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 ? (_jsx(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: _jsxs("div", { className: "order-details-content flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm", children: [_jsxs("div", { className: "order-details-recipient-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-recipient-label text-as-tertiary", children: "Recipient" }), _jsxs("div", { className: "order-details-recipient-info flex flex-col items-end gap-1", children: [recipientName && (_jsx("div", { className: "order-details-recipient-name text-as-primary font-semibold", children: recipientName })), _jsx(CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
                                             toast.success("Copied recipient address to clipboard");
-                                        }, children: _jsxs("div", { className: "order-details-recipient-address text-as-primary flex items-center gap-2", children: [centerTruncate(order.recipientAddress, 10), _jsx(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" })] }) })] })] }), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-expected-section flex w-full items-start justify-between gap-2", children: [_jsx("div", { className: "order-details-expected-label text-as-tertiarry shrink-0", children: order.type === "swap" ||
+                                        }, children: _jsxs("div", { className: "order-details-recipient-address text-as-primary flex items-center gap-2", children: [centerTruncate(order.recipientAddress, 10), _jsx(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" })] }) })] })] }), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-expected-section flex w-full items-start justify-between gap-2", children: [_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"
@@ -39,5 +39,5 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
                                                 ? order.metadata.action
                                                     ? capitalizeFirstLetter(order.metadata.action)
                                                     : "Contract execution"
-                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-points-label text-as-tertiarry", children: "Points" }), _jsxs("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", formatNumber(points), " pts"] })] })] })), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
+                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-points-label text-as-tertiary", children: "Points" }), _jsxs("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", formatNumber(points), " pts"] })] })] })), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiary", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
 });

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

package/dist/esm/anyspend/react/components/common/OrderStatus.js

@@ -1,39 +1,113 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getStatusDisplay } from "../../../../anyspend/index.js";
 import { useSearchParams } from "../../../../shared/react/index.js";
-import { Check, X } from "lucide-react";
-import { memo } from "react";
+import { Clock, Loader2, RotateCcw, X } from "lucide-react";
+import { memo, useEffect, useRef } from "react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext.js";
+import { AnimatedCheckmark } from "../icons/AnimatedCheckmark.js";
 import { StepProgress } from "./StepProgress.js";
+/** Map order status to its step index in the StepProgress. -1 = not a step state. */
+function getStepIndex(status) {
+    if (["waiting_stripe_payment", "scanning_deposit_transaction"].includes(status))
+        return 0;
+    if (["quoting_after_deposit", "sending_token_from_vault", "relay", "executing"].includes(status))
+        return 1;
+    return -1;
+}
 export const OrderStatus = memo(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
-    const showCheck = order.status === "executed" || order.status === "quoting_after_deposit";
-    const { text, status: displayStatus, description } = getStatusDisplay(order);
+    const { text: defaultText, description: defaultDescription } = getStatusDisplay(order);
+    const { content, slots } = useAnySpendCustomization();
     const searchParams = useSearchParams();
     const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
-    console.log("OrderStatus", displayStatus);
-    console.log("OrderStatus", order);
+    const currentStepIndex = getStepIndex(order.status);
+    const prevStepIndexRef = useRef(currentStepIndex);
+    const shouldAnimateCheck = currentStepIndex > prevStepIndexRef.current;
+    useEffect(() => {
+        prevStepIndexRef.current = currentStepIndex;
+    }, [currentStepIndex]);
+    // Resolve content overrides based on order status
+    let text = defaultText;
+    let description = defaultDescription;
+    if (order.status === "executed") {
+        if (content.successTitle && typeof content.successTitle === "string")
+            text = content.successTitle;
+        if (content.successDescription)
+            description = content.successDescription;
+    }
+    else if (order.status === "failure") {
+        if (content.failureTitle && typeof content.failureTitle === "string")
+            text = content.failureTitle;
+        if (content.failureDescription)
+            description = content.failureDescription;
+    }
+    else if (order.status === "expired") {
+        if (content.expiredTitle && typeof content.expiredTitle === "string")
+            text = content.expiredTitle;
+        if (content.expiredDescription)
+            description = content.expiredDescription;
+    }
+    else if (order.status === "refunded") {
+        if (content.refundedTitle && typeof content.refundedTitle === "string")
+            text = content.refundedTitle;
+        if (content.refundedDescription)
+            description = content.refundedDescription;
+    }
+    else if (content.processingTitle || content.processingDescription) {
+        if (content.processingTitle && typeof content.processingTitle === "string")
+            text = content.processingTitle;
+        if (content.processingDescription)
+            description = content.processingDescription;
+    }
     const paymentSteps = [
-        {
-            id: 1,
-            title: text,
-            description: description,
-        },
-        {
-            id: 2,
-            title: text,
-            description: description,
-        },
+        { id: 1, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
+        { id: 2, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
     ];
-    if (["waiting_stripe_payment", "scanning_deposit_transaction"].includes(order.status)) {
-        // hide step if order is scanning_deposit_transaction and crypto payment method is transfer_crypto
+    if (currentStepIndex === 0) {
         if (!(order.status === "scanning_deposit_transaction" && cryptoPaymentMethod === "transfer_crypto")) {
             return _jsx(StepProgress, { steps: paymentSteps, currentStepIndex: 0 });
         }
     }
-    if (["relay", "executing", "sending_token_from_vault"].includes(order.status)) {
-        return _jsx(StepProgress, { steps: paymentSteps, currentStepIndex: 1 });
+    if (currentStepIndex === 1) {
+        return _jsx(StepProgress, { steps: paymentSteps, currentStepIndex: 1, animateCompletedSteps: shouldAnimateCheck });
+    }
+    if (order.status === "refunding") {
+        return (_jsx("div", { className: "flex items-center justify-center gap-2", children: _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-amber-500/15", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-amber-500" }) }), _jsx("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), _jsx("div", { className: "text-as-tertiary mt-1 text-center text-sm", children: description })] }) }));
     }
     if (selectedCryptoPaymentMethod === "transfer_crypto" && order.status === "scanning_deposit_transaction") {
         return null;
     }
-    return (_jsx("div", { className: "flex items-center justify-center gap-2", children: showCheck ? (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: `bg-as-success-secondary relative flex h-10 w-10 items-center justify-center rounded-full`, children: _jsx(Check, { className: "text-as-content-icon-success h-6 w-6" }) }), _jsx("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), _jsx("div", { className: "text-as-tertiarry mt-1 text-center", children: description })] })) : (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "bg-as-error-secondary flex h-10 w-10 items-center justify-center rounded-full text-base", children: _jsx(X, { className: "text-as-content-icon-error h-5 w-5" }) }), _jsx("div", { className: "font-sf-rounded text-as-content-primary mt-4 text-lg font-semibold", children: text }), _jsx("div", { className: "text-as-tertiarry text-center", style: { whiteSpace: "normal" }, children: description })] })) }));
+    if (order.status === "executed") {
+        return (_jsx("div", { className: "flex items-center justify-center gap-2", children: _jsxs("div", { className: "flex flex-col items-center", children: [_jsx(AnimatedCheckmark, { className: "h-14 w-14" }), _jsx("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: content.successTitle || text }), _jsx("div", { className: "text-as-tertiary mt-1 text-center text-sm", children: content.successDescription || description })] }) }));
+    }
+    if (order.status === "expired") {
+        if (slots.errorScreen) {
+            return (_jsx(_Fragment, { children: slots.errorScreen({
+                    title: text,
+                    description: typeof description === "string" ? description : defaultDescription || "",
+                    errorType: "expired",
+                    orderId: order.id,
+                }) }));
+        }
+        return (_jsx("div", { className: "flex items-center justify-center gap-2", children: _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15", children: _jsx(Clock, { className: "h-5 w-5 text-amber-500" }) }), _jsx("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), _jsx("div", { className: "text-as-tertiary mt-1 text-center text-sm", children: description })] }) }));
+    }
+    if (order.status === "refunded") {
+        if (slots.errorScreen) {
+            return (_jsx(_Fragment, { children: slots.errorScreen({
+                    title: text,
+                    description: typeof description === "string" ? description : defaultDescription || "",
+                    errorType: "refunded",
+                    orderId: order.id,
+                }) }));
+        }
+        return (_jsx("div", { className: "flex items-center justify-center gap-2", children: _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "bg-as-surface-secondary flex h-10 w-10 items-center justify-center rounded-full", children: _jsx(RotateCcw, { className: "text-as-secondary h-5 w-5" }) }), _jsx("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), _jsx("div", { className: "text-as-tertiary mt-1 text-center text-sm", children: description })] }) }));
+    }
+    if (slots.errorScreen) {
+        return (_jsx(_Fragment, { children: slots.errorScreen({
+                title: text,
+                description: typeof description === "string" ? description : defaultDescription || "",
+                errorType: "failure",
+                orderId: order.id,
+            }) }));
+    }
+    return (_jsx("div", { className: "flex items-center justify-center gap-2", children: _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "bg-as-error-secondary flex h-10 w-10 items-center justify-center rounded-full", children: _jsx(X, { className: "text-as-content-icon-error h-5 w-5" }) }), _jsx("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), _jsx("div", { className: "text-as-tertiary mt-1 text-center text-sm", style: { whiteSpace: "normal" }, children: description })] }) }));
 });