@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.10

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

@@ -3,15 +3,17 @@ 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";
 import { useMemo } from "react";
-export function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals = 18, shipping, tax, discount, summaryLines, usdEquivalent, }) {
-    const hasAdjustments = !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
-    const formattedShipping = useMemo(() => (shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null), [shipping?.amount, tokenDecimals]);
-    const formattedTax = useMemo(() => (tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null), [tax?.amount, tokenDecimals]);
-    const formattedDiscount = useMemo(() => (discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null), [discount?.amount, tokenDecimals]);
-    const formattedSummaryLines = useMemo(() => summaryLines?.map(line => ({
-        ...line,
-        formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
-        isNegative: safeBigInt(line.amount) < BigInt(0),
-    })), [summaryLines, tokenDecimals]);
-    return (_jsxs("div", { className: cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary), children: [hasAdjustments && subtotal && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSubtotal), children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Subtotal" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [subtotal, " ", tokenSymbol] })] })), formattedShipping && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsx("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: shipping?.label || "Shipping" }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedShipping, " ", tokenSymbol] })] })), formattedTax && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [tax?.label || "Tax", tax?.rate && _jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", tax.rate, ")"] })] }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedTax, " ", tokenSymbol] })] })), formattedDiscount && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartDiscount), children: [_jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [discount?.label || "Discount", discount?.code && (_jsx("span", { className: "ml-1 rounded bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/20 dark:text-green-400", children: discount.code }))] }), _jsxs("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: ["-", formattedDiscount, " ", tokenSymbol] })] })), formattedSummaryLines?.map(line => (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [line.label, line.description && (_jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", line.description, ")"] }))] }), _jsxs("span", { className: cn("text-sm", line.isNegative ? "font-medium text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [line.formattedAmount, " ", tokenSymbol] })] }, line.label))), _jsxs("div", { className: cn("flex flex-col", hasAdjustments && "mt-1 border-t border-gray-100 pt-2 dark:border-neutral-800"), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), _jsxs("span", { className: cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [total, " ", tokenSymbol] })] }), usdEquivalent && (_jsx("div", { className: "flex justify-end", children: _jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["~", usdEquivalent, " USD"] }) }))] })] }));
+export function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals = 18, shipping, tax, discount, summaryLines, usdEquivalent, pricesLoading = false, }) {
+    const formattedShipping = useMemo(() => (!pricesLoading && shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null), [pricesLoading, shipping?.amount, tokenDecimals]);
+    const formattedTax = useMemo(() => (!pricesLoading && tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null), [pricesLoading, tax?.amount, tokenDecimals]);
+    const formattedDiscount = useMemo(() => (!pricesLoading && discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null), [pricesLoading, discount?.amount, tokenDecimals]);
+    const formattedSummaryLines = useMemo(() => pricesLoading
+        ? undefined
+        : summaryLines?.map(line => ({
+            ...line,
+            formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
+            isNegative: safeBigInt(line.amount) < BigInt(0),
+        })), [pricesLoading, summaryLines, tokenDecimals]);
+    const hasAdjustments = !!formattedShipping || !!formattedTax || !!formattedDiscount || !!formattedSummaryLines?.length;
+    return (_jsxs("div", { className: cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary), children: [hasAdjustments && subtotal && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSubtotal), children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Subtotal" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [subtotal, " ", tokenSymbol] })] })), formattedShipping && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsx("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: shipping?.label || "Shipping" }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedShipping, " ", tokenSymbol] })] })), formattedTax && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [tax?.label || "Tax", tax?.rate && _jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", tax.rate, ")"] })] }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedTax, " ", tokenSymbol] })] })), formattedDiscount && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartDiscount), children: [_jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [discount?.label || "Discount", discount?.code && (_jsx("span", { className: "ml-1 rounded bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/20 dark:text-green-400", children: discount.code }))] }), _jsxs("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: ["-", formattedDiscount, " ", tokenSymbol] })] })), formattedSummaryLines?.map(line => (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [line.label, line.description && (_jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", line.description, ")"] }))] }), _jsxs("span", { className: cn("text-sm", line.isNegative ? "font-medium text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [line.formattedAmount, " ", tokenSymbol] })] }, line.label))), _jsxs("div", { className: cn("flex flex-col", hasAdjustments && "mt-1 border-t border-gray-100 pt-2 dark:border-neutral-800"), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), _jsxs("span", { className: cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [total, " ", tokenSymbol] })] }), !pricesLoading && usdEquivalent && (_jsx("div", { className: "flex justify-end", children: _jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["~", usdEquivalent, " USD"] }) }))] })] }));
 }

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

@@ -5,6 +5,8 @@ interface CheckoutCartPanelProps {
     totalAmount: string;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+    pricesLoading?: boolean;
     organizationName?: string;
     organizationLogo?: string;
     classes?: AnySpendCheckoutClasses;
@@ -28,5 +30,5 @@ interface CheckoutCartPanelProps {
     /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
     usdEquivalent?: string | null;
 }
-export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, pricesLoading, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,7 +6,8 @@ import { useMemo } from "react";
 import { CartItemRow } from "./CartItemRow.js";
 import { CartSummary } from "./CartSummary.js";
 import { PoweredByBranding } from "./PoweredByBranding.js";
-export function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
+import { PriceSkeleton } from "./PriceSkeleton.js";
+export function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, pricesLoading = false, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
     const formattedTotal = useMemo(() => formatTokenAmount(safeBigInt(totalAmount), tokenDecimals), [totalAmount, tokenDecimals]);
     // Compute subtotal from items only (before adjustments)
     const formattedSubtotal = useMemo(() => {
@@ -16,9 +17,9 @@ export function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenD
         }
         return formatTokenAmount(subtotal, tokenDecimals);
     }, [items, tokenDecimals]);
-    return (_jsxs("div", { className: cn("anyspend-cart-panel flex flex-col", classes?.cartPanel), children: [_jsx("h2", { className: cn("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), _jsx("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
+    return (_jsxs("div", { className: cn("anyspend-cart-panel flex flex-col", classes?.cartPanel), "aria-busy": pricesLoading || undefined, children: [_jsx("h2", { className: cn("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), _jsx("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
                     const itemTotal = safeBigInt(item.amount) * BigInt(item.quantity);
-                    const formattedPrice = `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+                    const formattedPrice = pricesLoading ? (_jsx(PriceSkeleton, {})) : (`${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`);
                     return _jsx(CartItemRow, { item: item, formattedPrice: formattedPrice, classes: classes }, item.id || index);
-                }) }), _jsx(CartSummary, { total: formattedTotal, tokenSymbol: tokenSymbol, classes: classes, subtotal: formattedSubtotal, tokenDecimals: tokenDecimals, shipping: shipping, tax: tax, discount: discount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), footer === undefined ? (_jsx(PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
+                }) }), _jsx(CartSummary, { total: pricesLoading ? _jsx(PriceSkeleton, { className: "w-20" }) : formattedTotal, tokenSymbol: tokenSymbol, classes: classes, subtotal: formattedSubtotal, tokenDecimals: tokenDecimals, shipping: shipping, tax: tax, discount: discount, summaryLines: summaryLines, usdEquivalent: usdEquivalent, pricesLoading: pricesLoading }), footer === undefined ? (_jsx(PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
 }

package/dist/esm/anyspend/react/components/checkout/CheckoutFormPanel.d.ts

@@ -16,6 +16,8 @@ interface CheckoutFormPanelProps {
     /** Token info for display */
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+    pricesLoading?: boolean;
     /** CSS class overrides */
     classes?: AnySpendCheckoutClasses;
     /** Current form data (lifted state) */
@@ -35,5 +37,5 @@ interface CheckoutFormPanelProps {
     /** Slot overrides */
     checkoutFormSlot?: (props: CheckoutFormComponentProps) => React.ReactNode;
 }
-export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, pricesLoading, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -7,7 +7,7 @@ import { AddressForm } from "./AddressForm.js";
 import { ShippingSelector } from "./ShippingSelector.js";
 import { DiscountCodeInput } from "./DiscountCodeInput.js";
 const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
-export function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }) {
+export function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, pricesLoading = false, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }) {
     const [errors, setErrors] = useState({});
     const hasFormFields = formSchema && formSchema.fields.length > 0;
     const hasShipping = shippingOptions && shippingOptions.length > 0;
@@ -53,7 +53,7 @@ export function CheckoutFormPanel({ formSchema, formComponent: FormComponent, sh
     if (!hasAnyContent)
         return null;
     // Shared shipping + discount section
-    const shippingAndDiscount = (_jsxs(_Fragment, { children: [hasShipping && shippingOptions && (_jsx(ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals })), enableDiscountCode && validateDiscount && (_jsx(DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals }))] }));
+    const shippingAndDiscount = (_jsxs(_Fragment, { children: [hasShipping && shippingOptions && (_jsx(ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: pricesLoading })), enableDiscountCode && validateDiscount && (_jsx(DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: pricesLoading }))] }));
     // Render custom form slot if provided
     if (checkoutFormSlot) {
         return (_jsxs("div", { className: cn("anyspend-form-panel space-y-4", classes?.formPanel), children: [_jsx("div", { className: "anyspend-form-slot", children: checkoutFormSlot({

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

@@ -30,6 +30,8 @@ interface CheckoutPaymentPanelProps {
     feeOnTop?: boolean;
     /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
     kycEnabled?: boolean;
+    /** Whether to show fiat payment options (card + coinbase). Defaults to true. */
+    showFiatOption?: boolean;
 }
-export declare function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid, feeOnTop, kycEnabled, }: CheckoutPaymentPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid, feeOnTop, kycEnabled, showFiatOption, }: CheckoutPaymentPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 "use client";
-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 { cn } from "../../../../shared/utils/cn.js";
 import { CreditCard, Wallet } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -26,8 +26,18 @@ function AmexLogo() {
 function CoinbaseLogo() {
     return (_jsxs("svg", { viewBox: "0 0 24 24", style: { width: 20, height: 20 }, "aria-label": "Coinbase", children: [_jsx("circle", { cx: "12", cy: "12", r: "12", fill: "#0052FF" }), _jsx("path", { d: "M12 4.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm-1.8 4.8h3.6c.33 0 .6.27.6.6v4.2c0 .33-.27.6-.6.6h-3.6a.6.6 0 0 1-.6-.6V9.9c0-.33.27-.6.6-.6z", fill: "white" })] }));
 }
-export function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid = true, feeOnTop, kycEnabled = false, }) {
-    const [paymentMethod, setPaymentMethod] = useState(defaultPaymentMethod ?? null);
+export function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid = true, feeOnTop, kycEnabled = false, showFiatOption = true, }) {
+    const [paymentMethod, setPaymentMethod] = useState(() => {
+        if (!showFiatOption && (defaultPaymentMethod === "card" || defaultPaymentMethod === "coinbase")) {
+            return "crypto";
+        }
+        return defaultPaymentMethod ?? null;
+    });
+    useEffect(() => {
+        if (!showFiatOption && (paymentMethod === "card" || paymentMethod === "coinbase")) {
+            setPaymentMethod("crypto");
+        }
+    }, [showFiatOption, paymentMethod]);
     // Restore activeOrderId from sessionStorage (handles page refresh / Coinbase return)
     const [activeOrderId, setActiveOrderId] = useState(() => {
         if (typeof window !== "undefined") {
@@ -53,9 +63,7 @@ export function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress
     if (activeOrderId) {
         return (_jsx(CheckoutOrderStatus, { orderId: activeOrderId, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, onRetry: handleRetry, showPoints: showPoints, showOrderId: showOrderId, classes: classes }));
     }
-    const accordionButtonClass = (active) => cn("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", active
-        ? "bg-white dark:bg-neutral-900"
-        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
-    const expandedPanelClass = cn("anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900");
-    return (_jsxs("div", { className: cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [_jsx("h2", { className: cn("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && (_jsx("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), _jsxs("div", { className: cn("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [_jsxs("div", { className: "anyspend-method-crypto", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [_jsx(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), _jsx(Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "crypto" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), _jsxs("div", { className: "anyspend-method-card", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [_jsx(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), _jsx(CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(VisaLogo, {}), _jsx(MastercardLogo, {}), _jsx(AmexLogo, {})] })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "card" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, feeOnTop: feeOnTop, kycEnabled: kycEnabled }) }) }, "card-panel")) })] }), _jsxs("div", { className: "anyspend-method-coinbase", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [_jsx(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), _jsx(CoinbaseLogo, {}), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
+    const accordionButtonClass = (active) => cn("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", !active && "hover:bg-gray-50 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
+    const expandedPanelClass = cn("anyspend-payment-method-panel border-t border-gray-100 px-4 py-4 dark:border-neutral-800");
+    return (_jsxs("div", { className: cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [_jsx("h2", { className: cn("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && (_jsx("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), _jsxs("div", { className: cn("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [_jsxs("div", { className: "anyspend-method-crypto", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [_jsx(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), _jsx(Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "crypto" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), showFiatOption && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "anyspend-method-card", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [_jsx(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), _jsx(CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(VisaLogo, {}), _jsx(MastercardLogo, {}), _jsx(AmexLogo, {})] })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "card" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, feeOnTop: feeOnTop, kycEnabled: kycEnabled }) }) }, "card-panel")) })] }), _jsxs("div", { className: "anyspend-method-coinbase", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [_jsx(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), _jsx(CoinbaseLogo, {}), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] }))] })] }));
 }

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

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

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

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

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

@@ -8,9 +8,8 @@ import { useOnOrderSuccess } from "../../../../anyspend/react/hooks/useOnOrderSu
 import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, getAvailableChainIds } from "../../../../anyspend/index.js";
 import { getPaymentUrl } from "../../../../anyspend/utils/chain.js";
 import { isNativeToken } from "../../../../anyspend/utils/token.js";
-import { useAccountWallet, useB3Config, useIsMobile, useModalStore, useSimTokenBalance, useTokenData, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { useAccountWallet, useIsMobile, useSimTokenBalance, useTokenData, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
 import { ShinyButton, TextShimmer } from "../../../../global-account/react/index.js";
-import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { Check, ChevronDown, ChevronsUpDown, Copy, Loader2, QrCode } from "lucide-react";
@@ -18,8 +17,10 @@ import { QRCodeSVG } from "qrcode.react";
 import { encodeFunctionData, erc20Abi } from "viem";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useConnectModal } from "thirdweb/react";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { ChainTokenIcon } from "../common/ChainTokenIcon.js";
+import { connectModalConfig } from "../common/CryptoPaymentMethod.js";
 export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText = "Pay", themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, senderAddress, }) {
     // Stable refs for callback props to avoid re-triggering effects
     const onErrorRef = useRef(onError);
@@ -32,11 +33,10 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
     const [selectedSrcChainId, setSelectedSrcChainId] = useState(destinationTokenChainId);
     const [selectedSrcToken, setSelectedSrcToken] = useState(null);
     const [copied, setCopied] = useState(false);
-    const { address: walletAddress } = useAccountWallet();
-    const effectiveAddress = senderAddress || walletAddress;
-    const { partnerId } = useB3Config();
-    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    const { address: walletAddress, connectedEOAWallet } = useAccountWallet();
+    const connectedAddress = walletAddress || connectedEOAWallet?.getAccount()?.address;
+    const effectiveAddress = connectedAddress || senderAddress;
+    const { connect: openConnectModal } = useConnectModal();
     const { data: dstTokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
     // Default to destination token data once available
     useEffect(() => {
@@ -166,9 +166,8 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
     /* ------------------------------------------------------------------ */
     const [walletOrderId, setWalletOrderId] = useState();
     const [isSendingDeposit, setIsSendingDeposit] = useState(false);
-    const [depositRejected, setDepositRejected] = useState(false);
     const depositSentRef = useRef(false);
-    const { switchChainAndExecute } = useUnifiedChainSwitchAndExecute();
+    const { switchChainAndExecuteWithEOA } = useUnifiedChainSwitchAndExecute();
     const { createOrder: createSwapOrder, isCreatingOrder: isCreatingSwapOrder } = useAnyspendCreateOrder({
         onSuccess: data => {
             const id = data.data?.id;
@@ -183,7 +182,7 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
     const { orderAndTransactions: walletOat } = useAnyspendOrderAndTransactions(walletOrderId);
     // Auto-send deposit tx once swap order is ready
     useEffect(() => {
-        if (!walletOat?.data?.order || depositSentRef.current || depositRejected)
+        if (!walletOat?.data?.order || depositSentRef.current)
             return;
         const order = walletOat.data.order;
         if (order.status !== "scanning_deposit_transaction")
@@ -195,8 +194,9 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
             try {
                 setIsSendingDeposit(true);
                 const amount = BigInt(order.srcAmount);
+                let txHash;
                 if (isNativeToken(order.srcTokenAddress)) {
-                    await switchChainAndExecute(order.srcChain, {
+                    txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
                         to: order.globalAddress,
                         value: amount,
                     });
@@ -207,12 +207,18 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
                         functionName: "transfer",
                         args: [order.globalAddress, amount],
                     });
-                    await switchChainAndExecute(order.srcChain, {
+                    txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
                         to: order.srcTokenAddress,
                         data,
                         value: BigInt(0),
                     });
                 }
+                if (!txHash) {
+                    // User cancelled or tx failed — reset so they can retry
+                    depositSentRef.current = false;
+                    setWalletOrderId(undefined);
+                    return;
+                }
                 // Deposit sent — notify parent to transition to order lifecycle tracking
                 if (walletOrderId) {
                     onOrderCreatedRef.current?.(walletOrderId);
@@ -220,10 +226,8 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
             }
             catch (error) {
                 depositSentRef.current = false;
-                const isUserRejection = error?.code === 4001 || error?.message?.includes("rejected") || error?.message?.includes("denied");
-                if (isUserRejection) {
-                    setDepositRejected(true);
-                }
+                // Reset order so user can retry
+                setWalletOrderId(undefined);
                 onErrorRef.current?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
             }
             finally {
@@ -231,7 +235,7 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
             }
         };
         sendDeposit();
-    }, [walletOat, switchChainAndExecute, walletOrderId, depositRejected]);
+    }, [walletOat, switchChainAndExecuteWithEOA, walletOrderId]);
     useOnOrderSuccess({
         orderData: walletOat,
         orderId: walletOrderId,
@@ -239,9 +243,10 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
     });
     const isWaitingForExecution = !!walletOrderId && walletOat?.data?.order.status !== "executed";
     const handleWalletPay = useCallback(() => {
-        if (!selectedSrcToken || !walletAddress)
+        if (!selectedSrcToken || !connectedAddress)
             return;
         depositSentRef.current = false;
+        setWalletOrderId(undefined);
         createSwapOrder({
             recipientAddress,
             orderType: "swap",
@@ -256,7 +261,7 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
         });
     }, [
         selectedSrcToken,
-        walletAddress,
+        connectedAddress,
         effectiveAddress,
         recipientAddress,
         selectedSrcChainId,
@@ -288,13 +293,28 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
             setTimeout(() => setCopied(false), 2000);
         }
     };
-    const handleConnectWallet = () => {
-        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
-        setB3ModalOpen(true);
+    const [shouldAutoPay, setShouldAutoPay] = useState(false);
+    const handleConnectWallet = async () => {
+        try {
+            const wallet = await openConnectModal(connectModalConfig);
+            if (wallet) {
+                setShouldAutoPay(true);
+            }
+        }
+        catch (error) {
+            console.error("Failed to connect wallet:", error);
+        }
     };
+    // Auto-trigger payment after wallet connect
+    useEffect(() => {
+        if (shouldAutoPay && connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoadingAnyspendQuote) {
+            setShouldAutoPay(false);
+            handleWalletPay();
+        }
+    }, [shouldAutoPay, connectedAddress, selectedSrcToken, hasEnoughBalance, isLoadingAnyspendQuote, handleWalletPay]);
     const isLoading = isLoadingAnyspendQuote;
     const isPending = isCreatingSwapOrder || isSendingDeposit || isWaitingForExecution;
-    const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+    const canPay = connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
     const chainName = ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain";
     const chainLogoUrl = ALL_CHAINS[selectedSrcChainId]?.logoUrl;
     // Collapse QR on mobile when a wallet connector is available
@@ -313,7 +333,7 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
                                 name: token.name,
                                 symbol: token.symbol,
                             });
-                        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs("button", { className: cn("flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600", classes?.tokenSelector), children: [selectedSrcToken ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : (_jsx("span", { className: "text-sm text-gray-400", children: "Select token" })), _jsx(ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800/50", classes?.quoteDisplay), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), _jsx(AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: _jsx(TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : (_jsxs(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), _jsx(AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (_jsxs(motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !walletAddress ? (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: cn("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: cn("w-full", classes?.payButton), textClassName: cn(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
+                        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs("button", { className: cn("flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600", classes?.tokenSelector), children: [selectedSrcToken ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : (_jsx("span", { className: "text-sm text-gray-400", children: "Select token" })), _jsx(ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800/50", classes?.quoteDisplay), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), _jsx(AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: _jsx(TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : (_jsxs(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), _jsx(AnimatePresence, { children: connectedAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (_jsxs(motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !connectedAddress ? (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: cn("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: cn("w-full", classes?.payButton), textClassName: cn(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
                             ? "Creating order..."
                             : isSendingDeposit
                                 ? "Confirm in wallet..."

package/dist/esm/anyspend/react/components/checkout/DiscountCodeInput.d.ts

@@ -6,7 +6,9 @@ interface DiscountCodeInputProps {
     loading?: boolean;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — renders applied amount as skeleton. */
+    pricesLoading?: boolean;
     className?: string;
 }
-export declare function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading, tokenSymbol, tokenDecimals, className, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading, tokenSymbol, tokenDecimals, pricesLoading, className, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,13 +4,14 @@ import { cn } from "../../../../shared/utils/cn.js";
 import { formatTokenAmount, safeBigInt } from "../../../../shared/utils/number.js";
 import { X, Loader2, Check } from "lucide-react";
 import { useState, useCallback } from "react";
+import { PriceSkeleton } from "./PriceSkeleton.js";
 function formatAmount(amount, decimals, symbol) {
     const bi = safeBigInt(amount);
     if (bi === BigInt(0))
         return "Free";
     return `${formatTokenAmount(bi, decimals)} ${symbol}`;
 }
-export function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, className, }) {
+export function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, pricesLoading = false, className, }) {
     const [code, setCode] = useState("");
     const [error, setError] = useState(null);
     const [isValidating, setIsValidating] = useState(false);
@@ -41,11 +42,7 @@ export function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading
     };
     // Show applied discount state
     if (appliedDiscount?.valid) {
-        return (_jsxs("div", { className: cn("anyspend-discount anyspend-discount-applied space-y-2", className), children: [_jsx("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), _jsxs("div", { className: "anyspend-discount-badge flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-3 py-2 dark:border-green-800 dark:bg-green-900/20", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), _jsx("span", { className: "anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300", children: appliedDiscount.discount_type === "percentage"
-                                        ? `${appliedDiscount.discount_value}% off`
-                                        : appliedDiscount.discount_amount
-                                            ? `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
-                                            : "Discount applied" })] }), _jsx("button", { type: "button", onClick: handleRemove, className: "anyspend-discount-remove rounded p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }));
+        return (_jsxs("div", { className: cn("anyspend-discount anyspend-discount-applied space-y-2", className), children: [_jsx("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), _jsxs("div", { className: "anyspend-discount-badge flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-3 py-2 dark:border-green-800 dark:bg-green-900/20", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), _jsx("span", { className: "anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300", children: appliedDiscount.discount_type === "percentage" ? (`${appliedDiscount.discount_value}% off`) : appliedDiscount.discount_amount ? (pricesLoading ? (_jsx(PriceSkeleton, {})) : (`-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`)) : ("Discount applied") })] }), _jsx("button", { type: "button", onClick: handleRemove, className: "anyspend-discount-remove rounded p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }));
     }
     return (_jsxs("div", { className: cn("anyspend-discount space-y-2", className), children: [_jsx("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount Code" }), _jsxs("div", { className: "anyspend-discount-input-row flex gap-2", children: [_jsx("input", { type: "text", value: code, onChange: e => {
                             setCode(e.target.value.toUpperCase());

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

@@ -5,19 +5,18 @@ 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, useModalStore, useTokenData } from "../../../../global-account/react/index.js";
+import { ShinyButton, TextShimmer, useAccountWallet, useB3Config, useModalStore, useTokenData, } from "../../../../global-account/react/index.js";
 import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { Loader2, Lock, Wallet } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useAccount } from "wagmi";
 import { KycGate } from "./KycGate.js";
 export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, kycEnabled = false, }) {
     // Stable refs for callback props to avoid re-triggering effects
     const onErrorRef = useRef(onError);
     onErrorRef.current = onError;
-    const { address } = useAccount();
+    const { address } = useAccountWallet();
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
     const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);

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

@@ -1,15 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../shared/utils/cn.js";
-import { ShinyButton, TextShimmer, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
+import { ShinyButton, TextShimmer, useAccountWallet, useB3Config, useModalStore, } from "../../../../global-account/react/index.js";
 import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
 import { Loader2, ShieldCheck, AlertTriangle, Clock, Wallet } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useAccount } from "wagmi";
 import { useCreateKycInquiry, useKycStatus, useVerifyKyc, useWalletAuthHeaders } from "../../hooks/useKycStatus.js";
 export function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
-    const { address } = useAccount();
+    const { address } = useAccountWallet();
     const { partnerId } = useB3Config();
     // Gate the status fetch behind explicit user consent so the wallet
     // signature prompt doesn't fire automatically on tab open.

package/dist/esm/anyspend/react/components/checkout/PriceSkeleton.d.ts

@@ -0,0 +1,5 @@
+interface PriceSkeletonProps {
+    className?: string;
+}
+export declare function PriceSkeleton({ className }: PriceSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+export function PriceSkeleton({ className }) {
+    return (_jsx("span", { className: cn("animate-pulse-fade bg-b3-react-background inline-block h-4 w-16 rounded-md align-middle", className), "aria-hidden": "true" }));
+}

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

@@ -5,7 +5,9 @@ interface ShippingSelectorProps {
     onSelect: (option: ShippingOption) => void;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — renders price as skeleton. */
+    pricesLoading?: boolean;
     className?: string;
 }
-export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, pricesLoading, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -2,16 +2,17 @@
 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";
+import { PriceSkeleton } from "./PriceSkeleton.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, }) {
+export function ShippingSelector({ options, selectedId, onSelect, tokenSymbol = "", tokenDecimals = 6, pricesLoading = false, 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))) })] }));
+                        : "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: pricesLoading ? _jsx(PriceSkeleton, {}) : formatAmount(option.amount, tokenDecimals, tokenSymbol) })] }, option.id))) })] }));
 }