@b3dotfun/sdk 0.1.69-alpha.2 → 0.1.69-alpha.21

package/dist/cjs/anyspend/constants/rpc.d.ts

@@ -13,7 +13,7 @@ export declare const OPTIMISM_PUBLIC_RPC = "https://optimism-rpc.publicnode.com"
 export declare const POLYGON_PUBLIC_RPC = "https://polygon-bor-rpc.publicnode.com";
 export declare const AVALANCHE_PUBLIC_RPC = "https://avalanche-c-chain-rpc.publicnode.com";
 export declare const BSC_PUBLIC_RPC = "https://bsc-rpc.publicnode.com";
-export declare const B3_PUBLIC_RPC = "https://mainnet-rpc.b3.fun/http";
+export declare const B3_PUBLIC_RPC = "https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2/";
 export declare const ABSTRACT_PUBLIC_RPC = "https://api.mainnet.abs.xyz";
 export declare const HYPEREVM_PUBLIC_RPC = "https://rpc.hyperliquid.xyz/evm";
 /**

package/dist/cjs/anyspend/constants/rpc.js

@@ -18,7 +18,7 @@ exports.POLYGON_PUBLIC_RPC = "https://polygon-bor-rpc.publicnode.com";
 exports.AVALANCHE_PUBLIC_RPC = "https://avalanche-c-chain-rpc.publicnode.com";
 exports.BSC_PUBLIC_RPC = "https://bsc-rpc.publicnode.com";
 // Chain-specific public endpoints
-exports.B3_PUBLIC_RPC = "https://mainnet-rpc.b3.fun/http";
+exports.B3_PUBLIC_RPC = "https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2/";
 exports.ABSTRACT_PUBLIC_RPC = "https://api.mainnet.abs.xyz";
 exports.HYPEREVM_PUBLIC_RPC = "https://rpc.hyperliquid.xyz/evm";
 /**

package/dist/cjs/anyspend/react/components/AnySpendNFT.js

@@ -10,7 +10,7 @@ const number_1 = require("../../../shared/utils/number");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
 const react_3 = require("react");
-const chains_1 = require("viem/chains");
+const b3Viem_1 = require("../../../shared/constants/chains/b3Viem");
 const AnySpendCustom_1 = require("./AnySpendCustom");
 // ABI for contractURI and uri functions
 const CONTRACT_URI_ABI = [
@@ -92,5 +92,5 @@ function DropdownMenu({ nftContract }) {
     const [open, setOpen] = (0, react_3.useState)(false);
     const chain = anyspend_1.ALL_CHAINS[nftContract.chainId];
     const nftUrl = (0, anyspend_1.getExplorerAddressUrl)(nftContract.chainId, nftContract.contractAddress);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "absolute bottom-3 right-3 z-10 flex items-center justify-center rounded-full bg-black/20 p-1 text-white hover:bg-black/30", "aria-label": "Open NFT menu", children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { className: "h-3 w-3" }) }) }), (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { align: "end", className: "bg-b3-react-background border-b3-react-border min-w-48 rounded-lg border p-0 shadow-md backdrop-blur-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "pointer-events-auto flex w-full flex-col gap-2 py-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2 text-sm", children: ["Native mint price:", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold", children: [(0, number_1.formatTokenAmount)(BigInt(nftContract.price), nftContract.currency.decimals, 6, false), " ", nftContract.currency.symbol] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2", children: [(0, jsx_runtime_1.jsx)("img", { src: chain?.logoUrl, className: (0, utils_1.cn)("h-5 w-5", nftContract.chainId !== chains_1.b3.id && "rounded-full") }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm", children: ["Minted on ", (0, jsx_runtime_1.jsx)("span", { className: "font-semibold", children: chain ? (0, anyspend_1.getChainName)(nftContract.chainId) : "Unknown" })] })] }), (0, jsx_runtime_1.jsx)("a", { href: nftUrl, target: "_blank", rel: "noopener noreferrer", className: "hover:bg-as-on-surface-3 text-as-primary flex items-center gap-2 rounded px-2 text-sm", children: "View NFT onchain" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "absolute bottom-3 right-3 z-10 flex items-center justify-center rounded-full bg-black/20 p-1 text-white hover:bg-black/30", "aria-label": "Open NFT menu", children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { className: "h-3 w-3" }) }) }), (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { align: "end", className: "bg-b3-react-background border-b3-react-border min-w-48 rounded-lg border p-0 shadow-md backdrop-blur-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "pointer-events-auto flex w-full flex-col gap-2 py-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2 text-sm", children: ["Native mint price:", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold", children: [(0, number_1.formatTokenAmount)(BigInt(nftContract.price), nftContract.currency.decimals, 6, false), " ", nftContract.currency.symbol] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2", children: [(0, jsx_runtime_1.jsx)("img", { src: chain?.logoUrl, className: (0, utils_1.cn)("h-5 w-5", nftContract.chainId !== b3Viem_1.b3Viem.id && "rounded-full") }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm", children: ["Minted on ", (0, jsx_runtime_1.jsx)("span", { className: "font-semibold", children: chain ? (0, anyspend_1.getChainName)(nftContract.chainId) : "Unknown" })] })] }), (0, jsx_runtime_1.jsx)("a", { href: nftUrl, target: "_blank", rel: "noopener noreferrer", className: "hover:bg-as-on-surface-3 text-as-primary flex items-center gap-2 rounded px-2 text-sm", children: "View NFT onchain" })] }) })] }));
 }

package/dist/cjs/anyspend/react/components/AnySpendStakeB3.js

@@ -268,7 +268,7 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsx)("a", { href: `https://basescan.org/tx/${stakingTxHash}`, target: "_blank", rel: "noopener noreferrer", className: "text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors", children: "View transaction" }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(chains_1.base.id, stakingTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors", children: "View transaction" }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
                                     setB3ModalOpen(false);
                                     onSuccess?.();
                                 }, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium", children: "Done" })] })] }) }));

package/dist/cjs/anyspend/react/components/AnySpendStakeB3ExactIn.js

@@ -278,7 +278,7 @@ function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress,
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsx)("a", { href: `https://basescan.org/tx/${stakingTxHash}`, target: "_blank", rel: "noopener noreferrer", className: "text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors", children: "View transaction" }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(chains_1.base.id, stakingTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors", children: "View transaction" }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
                                     setB3ModalOpen(false);
                                     onSuccess?.((0, number_1.formatTokenAmount)(BigInt(userStakeAmount), 18) ?? "");
                                 }, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium", children: "Done" })] })] }) }));

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

@@ -121,5 +121,7 @@ export interface AnySpendCheckoutProps {
     feeOnTop?: boolean;
     /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
     kycEnabled?: boolean;
+    /** Extra metadata included under the 'callbackMetadata' key in the order's callbackMetadata (e.g. workflowId, orgId from checkout session) */
+    callbackMetadata?: Record<string, unknown>;
 }
-export declare function AnySpendCheckout({ mode, recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, formSchema, formComponent, onFormSubmit, shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, variablePricing, feeOnTop, kycEnabled, }: AnySpendCheckoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCheckout({ mode, recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, formSchema, formComponent, onFormSubmit, shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, variablePricing, feeOnTop, kycEnabled, callbackMetadata: callbackMetadataProp, }: AnySpendCheckoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -24,7 +24,7 @@ shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp,
 // New discount props
 enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, 
 // Variable pricing
-variablePricing, feeOnTop, kycEnabled = false, }) {
+variablePricing, feeOnTop, kycEnabled = false, callbackMetadata: callbackMetadataProp, }) {
     // ===== Variable pricing state =====
     const [variablePricingAmount, setVariablePricingAmount] = (0, react_2.useState)("0");
     const isVariablePricingActive = variablePricing?.enabled === true;
@@ -122,10 +122,11 @@ variablePricing, feeOnTop, kycEnabled = false, }) {
         isVariablePricingActive,
         variablePricingAmount,
     ]);
-    // Get destination token metadata
-    const { data: tokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
-    const tokenSymbol = tokenData?.symbol || "";
-    const tokenDecimals = tokenData?.decimals || 18;
+    // Get destination token metadata. While loading, skip price-dependent UI
+    // since the 18-decimal fallback is wrong for non-18 tokens (e.g. USDC).
+    const { data: tokenData, isLoading: isTokenDataLoading } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    const tokenSymbol = tokenData?.symbol ?? "";
+    const tokenDecimals = tokenData?.decimals ?? 18;
     // Resolve USD equivalent for non-stablecoin tokens (shown in cart summary)
     const isStablecoin = (0, react_2.useMemo)(() => {
         return [
@@ -176,8 +177,12 @@ variablePricing, feeOnTop, kycEnabled = false, }) {
         if (isVariablePricingActive && variablePricingAmount !== "0") {
             meta.variablePricingAmount = variablePricingAmount;
         }
+        // Namespace caller-supplied metadata to avoid collisions with internal keys
+        if (callbackMetadataProp)
+            meta.callbackMetadata = callbackMetadataProp;
         return Object.keys(meta).length > 0 ? meta : undefined;
     }, [
+        callbackMetadataProp,
         formData,
         selectedShipping,
         shippingAddress,
@@ -201,5 +206,9 @@ variablePricing, feeOnTop, kycEnabled = false, }) {
         (shippingOptions && shippingOptions.length > 0) ||
         collectShippingAddress ||
         enableDiscountCode;
-    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: (0, jsx_runtime_1.jsx)(CheckoutLayout_1.CheckoutLayout, { mode: mode, paymentPanel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && ((0, jsx_runtime_1.jsx)(VariablePricingInput_1.VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(CheckoutFormPanel_1.CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: {
+                successTitle: "Payment Successful",
+                successDescription: "Your payment has been processed successfully.",
+                ...content,
+            }, theme: theme, children: (0, jsx_runtime_1.jsx)(CheckoutLayout_1.CheckoutLayout, { mode: mode, paymentPanel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && ((0, jsx_runtime_1.jsx)(VariablePricingInput_1.VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(CheckoutFormPanel_1.CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: isTokenDataLoading, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: isTokenDataLoading, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
 }

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

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

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

@@ -1,8 +1,8 @@
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+import { type ReactNode } from "react";
+import type { AnySpendCheckoutClasses, CheckoutSummaryLine } from "./AnySpendCheckout";
 interface CartSummaryProps {
     /** Formatted total (final amount after all adjustments) */
-    total: string;
+    total: ReactNode;
     tokenSymbol?: string;
     classes?: AnySpendCheckoutClasses;
     /** Formatted subtotal (sum of items only — shown when adjustments exist) */
@@ -25,6 +25,8 @@ interface CartSummaryProps {
     summaryLines?: CheckoutSummaryLine[];
     /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
     usdEquivalent?: string | null;
+    /** When true, hide adjustment rows and USD equivalent (caller passes a skeleton as `total`). */
+    pricesLoading?: boolean;
 }
-export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, pricesLoading, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -9,7 +9,8 @@ const react_1 = require("react");
 const CartItemRow_1 = require("./CartItemRow");
 const CartSummary_1 = require("./CartSummary");
 const PoweredByBranding_1 = require("./PoweredByBranding");
-function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
+const PriceSkeleton_1 = require("./PriceSkeleton");
+function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, pricesLoading = false, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
     const formattedTotal = (0, react_1.useMemo)(() => (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(totalAmount), tokenDecimals), [totalAmount, tokenDecimals]);
     // Compute subtotal from items only (before adjustments)
     const formattedSubtotal = (0, react_1.useMemo)(() => {
@@ -19,9 +20,9 @@ function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals
         }
         return (0, number_1.formatTokenAmount)(subtotal, tokenDecimals);
     }, [items, tokenDecimals]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-cart-panel flex flex-col", classes?.cartPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-cart-panel flex flex-col", classes?.cartPanel), "aria-busy": pricesLoading || undefined, children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
                     const itemTotal = (0, number_1.safeBigInt)(item.amount) * BigInt(item.quantity);
-                    const formattedPrice = `${(0, number_1.formatTokenAmount)(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+                    const formattedPrice = pricesLoading ? ((0, jsx_runtime_1.jsx)(PriceSkeleton_1.PriceSkeleton, {})) : (`${(0, number_1.formatTokenAmount)(itemTotal, tokenDecimals)} ${tokenSymbol}`);
                     return (0, jsx_runtime_1.jsx)(CartItemRow_1.CartItemRow, { item: item, formattedPrice: formattedPrice, classes: classes }, item.id || index);
-                }) }), (0, jsx_runtime_1.jsx)(CartSummary_1.CartSummary, { total: formattedTotal, tokenSymbol: tokenSymbol, classes: classes, subtotal: formattedSubtotal, tokenDecimals: tokenDecimals, shipping: shipping, tax: tax, discount: discount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), footer === undefined ? ((0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
+                }) }), (0, jsx_runtime_1.jsx)(CartSummary_1.CartSummary, { total: pricesLoading ? (0, jsx_runtime_1.jsx)(PriceSkeleton_1.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 ? ((0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
 }

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

@@ -10,7 +10,7 @@ const AddressForm_1 = require("./AddressForm");
 const ShippingSelector_1 = require("./ShippingSelector");
 const DiscountCodeInput_1 = require("./DiscountCodeInput");
 const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
-function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }) {
+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] = (0, react_1.useState)({});
     const hasFormFields = formSchema && formSchema.fields.length > 0;
     const hasShipping = shippingOptions && shippingOptions.length > 0;
@@ -56,7 +56,7 @@ function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingO
     if (!hasAnyContent)
         return null;
     // Shared shipping + discount section
-    const shippingAndDiscount = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasShipping && shippingOptions && ((0, jsx_runtime_1.jsx)(ShippingSelector_1.ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals })), enableDiscountCode && validateDiscount && ((0, jsx_runtime_1.jsx)(DiscountCodeInput_1.DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals }))] }));
+    const shippingAndDiscount = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasShipping && shippingOptions && ((0, jsx_runtime_1.jsx)(ShippingSelector_1.ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: pricesLoading })), enableDiscountCode && validateDiscount && ((0, jsx_runtime_1.jsx)(DiscountCodeInput_1.DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: pricesLoading }))] }));
     // Render custom form slot if provided
     if (checkoutFormSlot) {
         return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-form-panel space-y-4", classes?.formPanel), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-form-slot", children: checkoutFormSlot({

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

@@ -56,9 +56,7 @@ function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, desti
     if (activeOrderId) {
         return ((0, jsx_runtime_1.jsx)(CheckoutOrderStatus_1.CheckoutOrderStatus, { orderId: activeOrderId, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, onRetry: handleRetry, showPoints: showPoints, showOrderId: showOrderId, classes: classes }));
     }
-    const accordionButtonClass = (active) => (0, cn_1.cn)("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", active
-        ? "bg-white dark:bg-neutral-900"
-        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
-    const expandedPanelClass = (0, cn_1.cn)("anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900");
+    const accordionButtonClass = (active) => (0, cn_1.cn)("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", !active && "hover:bg-gray-50 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
+    const expandedPanelClass = (0, cn_1.cn)("anyspend-payment-method-panel border-t border-gray-100 px-4 py-4 dark:border-neutral-800");
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-crypto", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "crypto" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CryptoPayPanel_1.CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-card", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(VisaLogo, {}), (0, jsx_runtime_1.jsx)(MastercardLogo, {}), (0, jsx_runtime_1.jsx)(AmexLogo, {})] })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "card" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(FiatCheckoutPanel_1.FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, feeOnTop: feeOnTop, kycEnabled: kycEnabled }) }) }, "card-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-coinbase", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(CoinbaseLogo, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CoinbaseCheckoutPanel_1.CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
 }

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

@@ -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/cjs/anyspend/react/components/checkout/CheckoutSuccess.js

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

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

@@ -13,7 +13,6 @@ const chain_1 = require("../../../../anyspend/utils/chain");
 const token_1 = require("../../../../anyspend/utils/token");
 const react_1 = require("../../../../global-account/react");
 const react_2 = require("../../../../global-account/react");
-const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const number_1 = require("../../../../shared/utils/number");
 const cn_1 = require("../../../../shared/utils/cn");
 const lucide_react_1 = require("lucide-react");
@@ -21,8 +20,10 @@ const qrcode_react_1 = require("qrcode.react");
 const viem_1 = require("viem");
 const react_3 = require("motion/react");
 const react_4 = require("react");
+const react_5 = require("thirdweb/react");
 const relay_kit_ui_1 = require("@relayprotocol/relay-kit-ui");
 const ChainTokenIcon_1 = require("../common/ChainTokenIcon");
+const CryptoPaymentMethod_1 = require("../common/CryptoPaymentMethod");
 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 = (0, react_4.useRef)(onError);
@@ -35,11 +36,10 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
     const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_4.useState)(destinationTokenChainId);
     const [selectedSrcToken, setSelectedSrcToken] = (0, react_4.useState)(null);
     const [copied, setCopied] = (0, react_4.useState)(false);
-    const { address: walletAddress } = (0, react_1.useAccountWallet)();
-    const effectiveAddress = senderAddress || walletAddress;
-    const { partnerId } = (0, react_1.useB3Config)();
-    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
-    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    const { address: walletAddress, connectedEOAWallet } = (0, react_1.useAccountWallet)();
+    const connectedAddress = walletAddress || connectedEOAWallet?.getAccount()?.address;
+    const effectiveAddress = connectedAddress || senderAddress;
+    const { connect: openConnectModal } = (0, react_5.useConnectModal)();
     const { data: dstTokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
     // Default to destination token data once available
     (0, react_4.useEffect)(() => {
@@ -169,9 +169,8 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
     /* ------------------------------------------------------------------ */
     const [walletOrderId, setWalletOrderId] = (0, react_4.useState)();
     const [isSendingDeposit, setIsSendingDeposit] = (0, react_4.useState)(false);
-    const [depositRejected, setDepositRejected] = (0, react_4.useState)(false);
     const depositSentRef = (0, react_4.useRef)(false);
-    const { switchChainAndExecute } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    const { switchChainAndExecuteWithEOA } = (0, react_1.useUnifiedChainSwitchAndExecute)();
     const { createOrder: createSwapOrder, isCreatingOrder: isCreatingSwapOrder } = (0, useAnyspendCreateOrder_1.useAnyspendCreateOrder)({
         onSuccess: data => {
             const id = data.data?.id;
@@ -186,7 +185,7 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
     const { orderAndTransactions: walletOat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(walletOrderId);
     // Auto-send deposit tx once swap order is ready
     (0, react_4.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")
@@ -198,8 +197,9 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
             try {
                 setIsSendingDeposit(true);
                 const amount = BigInt(order.srcAmount);
+                let txHash;
                 if ((0, token_1.isNativeToken)(order.srcTokenAddress)) {
-                    await switchChainAndExecute(order.srcChain, {
+                    txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
                         to: order.globalAddress,
                         value: amount,
                     });
@@ -210,12 +210,18 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
                         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);
@@ -223,10 +229,8 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
             }
             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 {
@@ -234,7 +238,7 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
             }
         };
         sendDeposit();
-    }, [walletOat, switchChainAndExecute, walletOrderId, depositRejected]);
+    }, [walletOat, switchChainAndExecuteWithEOA, walletOrderId]);
     (0, useOnOrderSuccess_1.useOnOrderSuccess)({
         orderData: walletOat,
         orderId: walletOrderId,
@@ -242,9 +246,10 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
     });
     const isWaitingForExecution = !!walletOrderId && walletOat?.data?.order.status !== "executed";
     const handleWalletPay = (0, react_4.useCallback)(() => {
-        if (!selectedSrcToken || !walletAddress)
+        if (!selectedSrcToken || !connectedAddress)
             return;
         depositSentRef.current = false;
+        setWalletOrderId(undefined);
         createSwapOrder({
             recipientAddress,
             orderType: "swap",
@@ -259,7 +264,7 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
         });
     }, [
         selectedSrcToken,
-        walletAddress,
+        connectedAddress,
         effectiveAddress,
         recipientAddress,
         selectedSrcChainId,
@@ -291,13 +296,28 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
             setTimeout(() => setCopied(false), 2000);
         }
     };
-    const handleConnectWallet = () => {
-        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: b3Chain_1.thirdwebB3Chain, partnerId });
-        setB3ModalOpen(true);
+    const [shouldAutoPay, setShouldAutoPay] = (0, react_4.useState)(false);
+    const handleConnectWallet = async () => {
+        try {
+            const wallet = await openConnectModal(CryptoPaymentMethod_1.connectModalConfig);
+            if (wallet) {
+                setShouldAutoPay(true);
+            }
+        }
+        catch (error) {
+            console.error("Failed to connect wallet:", error);
+        }
     };
+    // Auto-trigger payment after wallet connect
+    (0, react_4.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 = anyspend_1.ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain";
     const chainLogoUrl = anyspend_1.ALL_CHAINS[selectedSrcChainId]?.logoUrl;
     // Collapse QR on mobile when a wallet connector is available
@@ -316,7 +336,7 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
                                 name: token.name,
                                 symbol: token.symbol,
                             });
-                        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-left", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-400", children: "Select token" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : ((0, jsx_runtime_1.jsxs)(react_3.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")) })] }) }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && ((0, jsx_runtime_1.jsxs)(react_3.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 ? ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: (0, cn_1.cn)(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
+                        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-left", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-400", children: "Select token" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : ((0, jsx_runtime_1.jsxs)(react_3.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")) })] }) }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { children: connectedAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && ((0, jsx_runtime_1.jsxs)(react_3.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 ? ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: (0, cn_1.cn)(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
                             ? "Creating order..."
                             : isSendingDeposit
                                 ? "Confirm in wallet..."

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