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

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

@@ -7,13 +7,14 @@ const cn_1 = require("../../../../shared/utils/cn");
 const number_1 = require("../../../../shared/utils/number");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
+const PriceSkeleton_1 = require("./PriceSkeleton");
 function formatAmount(amount, decimals, symbol) {
     const bi = (0, number_1.safeBigInt)(amount);
     if (bi === BigInt(0))
         return "Free";
     return `${(0, number_1.formatTokenAmount)(bi, decimals)} ${symbol}`;
 }
-function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, className, }) {
+function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, pricesLoading = false, className, }) {
     const [code, setCode] = (0, react_1.useState)("");
     const [error, setError] = (0, react_1.useState)(null);
     const [isValidating, setIsValidating] = (0, react_1.useState)(false);
@@ -44,11 +45,7 @@ function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false
     };
     // Show applied discount state
     if (appliedDiscount?.valid) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-discount anyspend-discount-applied space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), (0, jsx_runtime_1.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" })] }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3.5 w-3.5" }) })] })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-discount anyspend-discount-applied space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(PriceSkeleton_1.PriceSkeleton, {})) : (`-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`)) : ("Discount applied") })] }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3.5 w-3.5" }) })] })] }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-discount space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount Code" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-discount-input-row flex gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: code, onChange: e => {
                             setCode(e.target.value.toUpperCase());

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

@@ -14,13 +14,12 @@ const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
 const react_4 = require("react");
-const wagmi_1 = require("wagmi");
 const KycGate_1 = require("./KycGate");
 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 = (0, react_4.useRef)(onError);
     onErrorRef.current = onError;
-    const { address } = (0, wagmi_1.useAccount)();
+    const { address } = (0, react_2.useAccountWallet)();
     const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
     const setB3ModalContentType = (0, react_2.useModalStore)(state => state.setB3ModalContentType);
     const { data: tokenData } = (0, react_2.useTokenData)(destinationTokenChainId, destinationTokenAddress);

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

@@ -42,10 +42,9 @@ const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
 const react_3 = require("react");
-const wagmi_1 = require("wagmi");
 const useKycStatus_1 = require("../../hooks/useKycStatus");
 function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
-    const { address } = (0, wagmi_1.useAccount)();
+    const { address } = (0, react_1.useAccountWallet)();
     const { partnerId } = (0, react_1.useB3Config)();
     // Gate the status fetch behind explicit user consent so the wallet
     // signature prompt doesn't fire automatically on tab open.

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

@@ -0,0 +1,9 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PriceSkeleton = PriceSkeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+function PriceSkeleton({ className }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("animate-pulse-fade bg-b3-react-background inline-block h-4 w-16 rounded-md align-middle", className), "aria-hidden": "true" }));
+}

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

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

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

@@ -5,6 +5,14 @@ export declare enum CryptoPaymentMethodType {
     GLOBAL_WALLET = "global_wallet",
     TRANSFER_CRYPTO = "transfer_crypto"
 }
+export declare const recommendWallets: (import("thirdweb/wallets").Wallet<"io.metamask"> | import("thirdweb/wallets").Wallet<"com.coinbase.wallet"> | import("thirdweb/wallets").Wallet<"me.rainbow"> | import("thirdweb/wallets").Wallet<"io.rabby">)[];
+export declare const connectModalConfig: {
+    client: import("thirdweb").ThirdwebClient;
+    setActive: false;
+    size: "compact";
+    showThirdwebBranding: boolean;
+    wallets: (import("thirdweb/wallets").Wallet<"io.metamask"> | import("thirdweb/wallets").Wallet<"com.coinbase.wallet"> | import("thirdweb/wallets").Wallet<"me.rainbow"> | import("thirdweb/wallets").Wallet<"io.rabby">)[];
+};
 interface CryptoPaymentMethodProps {
     selectedPaymentMethod: CryptoPaymentMethodType;
     setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;

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

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoPaymentMethodType = void 0;
+exports.connectModalConfig = exports.recommendWallets = exports.CryptoPaymentMethodType = void 0;
 exports.CryptoPaymentMethod = CryptoPaymentMethod;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
@@ -19,12 +19,19 @@ var CryptoPaymentMethodType;
     CryptoPaymentMethodType["GLOBAL_WALLET"] = "global_wallet";
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (exports.CryptoPaymentMethodType = CryptoPaymentMethodType = {}));
-const recommendWallets = [
+exports.recommendWallets = [
     (0, wallets_1.createWallet)("io.metamask"),
     (0, wallets_1.createWallet)("com.coinbase.wallet"),
     (0, wallets_1.createWallet)("me.rainbow"),
     (0, wallets_1.createWallet)("io.rabby"),
 ];
+exports.connectModalConfig = {
+    client: thirdweb_1.client,
+    setActive: false,
+    size: "compact",
+    showThirdwebBranding: false,
+    wallets: exports.recommendWallets,
+};
 function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, classes, }) {
     const { connectedEOAWallet, connectedSmartWallet } = (0, react_1.useAccountWallet)();
     const { disconnect } = (0, react_2.useDisconnect)();
@@ -44,13 +51,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
             if (connectedEOAWallet) {
                 disconnect(connectedEOAWallet);
             }
-            const wallet = await openConnectModal({
-                client: thirdweb_1.client,
-                setActive: false,
-                size: "compact",
-                showThirdwebBranding: false,
-                wallets: recommendWallets,
-            });
+            const wallet = await openConnectModal(exports.connectModalConfig);
             if (wallet) {
                 setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);

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

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
 const react_1 = require("../../../../global-account/react");
 const utils_1 = require("../../../../shared/utils");
-const chains_1 = require("viem/chains");
+const b3Viem_1 = require("../../../../shared/constants/chains/b3Viem");
 const react_2 = require("../../../../global-account/react");
 const number_1 = require("../../../../shared/utils/number");
 const react_3 = require("@web3icons/react");
@@ -17,7 +17,7 @@ function InsufficientDepositPayment({ order, srcToken, depositDeficit, phantomWa
     const depositDeficitAmount = (0, number_1.formatUnits)(depositDeficit.toString(), srcToken.decimals);
     return ((0, jsx_runtime_1.jsxs)("div", { className: "insufficient-deposit-payment relative flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "insufficient-deposit-payment-text text-as-primary/50", children: "Please send remaining" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [(0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: depositDeficitAmount, onCopy: () => {
                                     react_2.toast.success("Copied to clipboard");
-                                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "border-as-brand text-as-primary border-b-2 pb-1 text-2xl font-semibold sm:text-xl", children: [depositDeficitAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", (0, anyspend_1.getChainName)(order.srcChain), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") })] })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 mb-1 mt-2", children: " to the address:" })] }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.globalAddress, onCopy: () => {
+                                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "border-as-brand text-as-primary border-b-2 pb-1 text-2xl font-semibold sm:text-xl", children: [depositDeficitAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", (0, anyspend_1.getChainName)(order.srcChain), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("h-6 rounded-full", order.srcChain === b3Viem_1.b3Viem.id && "h-5 rounded-none") })] })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 mb-1 mt-2", children: " to the address:" })] }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.globalAddress, onCopy: () => {
                     react_2.toast.success("Copied to clipboard");
                 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "payment-address bg-b3-react-background border-b3-react-border hover:border-as-brand group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "payment-buttons mt-4 flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                         ? "Pay from Phantom Wallet"

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

@@ -20,7 +20,7 @@ const qrcode_react_1 = require("qrcode.react");
 const react_5 = require("react");
 const react_timeago_1 = __importDefault(require("react-timeago"));
 const viem_1 = require("viem");
-const chains_1 = require("viem/chains");
+const b3Viem_1 = require("../../../../shared/constants/chains/b3Viem");
 const wagmi_1 = require("wagmi");
 const usePhantomTransfer_1 = require("../../hooks/usePhantomTransfer");
 const Accordion_1 = require("./Accordion");
@@ -140,6 +140,11 @@ function roundTokenAmount(amount) {
 exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal", order, depositTxs, relayTxs, executeTx, refundTxs, cryptoPaymentMethod, selectedCryptoPaymentMethod, onPaymentMethodChange, onBack, disableUrlParamManagement = false, points, returnToHomeUrl, returnHomeLabel, classes, }) {
     const router = (0, hooks_1.useRouter)();
     const searchParams = (0, hooks_1.useSearchParams)();
+    const { setHeaderMode } = (0, react_1.useToastContext)();
+    (0, react_5.useEffect)(() => {
+        setHeaderMode(true);
+        return () => setHeaderMode(false);
+    }, [setHeaderMode]);
     // Get theme from B3Provider context
     const { theme } = (0, react_1.useB3Config)();
     const colorMode = theme || "light";
@@ -461,7 +466,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
                 // Transfer Crypto Payment Method - Show new card-based UI
                 (0, jsx_runtime_1.jsx)(TransferCryptoDetails_1.TransferCryptoDetails, { order: order, recipientName: recipientName, srcToken: srcToken, dstToken: dstToken, tournament: tournament, nft: nft, onBack: handleBack, onPaymentMethodChange: onPaymentMethodChange })) : ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-payment-section relative flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-details-amount-section flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 order-details-amount-label", children: "Please send" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-amount-container flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [(0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount, onCopy: () => {
                                                 react_2.toast.success("Copied to clipboard");
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-amount-display flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "border-as-brand text-as-primary order-details-amount-text border-b-2 pb-1 text-2xl font-semibold sm:text-xl", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary order-details-copy-icon h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", (0, anyspend_1.getChainName)(order.srcChain), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") })] })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 order-details-address-label mb-1 mt-2", children: " to the address:" })] }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.globalAddress, onCopy: () => {
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-amount-display flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "border-as-brand text-as-primary order-details-amount-text border-b-2 pb-1 text-2xl font-semibold sm:text-xl", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary order-details-copy-icon h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", (0, anyspend_1.getChainName)(order.srcChain), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("h-6 rounded-full", order.srcChain === b3Viem_1.b3Viem.id && "h-5 rounded-none") })] })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 order-details-address-label mb-1 mt-2", children: " to the address:" })] }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.globalAddress, onCopy: () => {
                                 react_2.toast.success("Copied to clipboard");
                             }, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border hover:border-as-brand order-details-address-container group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary order-details-address-text overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "group-hover:text-as-brand text-as-primary/50 order-details-address-copy-icon h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (account?.address || phantomWalletAddress) && !showQRCode ? ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 mt-8 flex w-full flex-col items-center gap-4", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: handlePayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                                                 ? "Pay from Phantom Wallet"

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

@@ -15,7 +15,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");
 exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollapsible({ order, dstToken, tournament, nft, recipientName, formattedExpectedDstAmount, className, showTotal = false, totalAmount, points, isOpen, onOpenChange, classes, }) {
     const [internalOpen, setInternalOpen] = (0, react_3.useState)(true);
     // Use controlled mode if isOpen is provided, otherwise use internal state
@@ -45,5 +45,5 @@ exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollaps
                                                 ? order.metadata.action
                                                     ? (0, anyspend_1.capitalizeFirstLetter)(order.metadata.action)
                                                     : "Contract execution"
-                                                : "" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-nft-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-tournament-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? ((0, jsx_runtime_1.jsx)("div", { className: "order-details-hype-info flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-hype-amount", children: [(0, number_1.formatTokenAmount)(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("order-details-chain-logo h-3", order.dstChain !== chains_1.b3.id && "w-3 rounded-full", order.dstChain === chains_1.b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-points-label text-as-tertiary", children: "Points" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", (0, formatNumber_1.formatNumber)(points), " pts"] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-label text-as-tertiary", children: showTotal ? "Total (included fee)" : "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-collapsed flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
+                                                : "" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-nft-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-tournament-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? ((0, jsx_runtime_1.jsx)("div", { className: "order-details-hype-info flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-hype-amount", children: [(0, number_1.formatTokenAmount)(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3Viem_1.b3Viem.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("order-details-chain-logo h-3", order.dstChain !== b3Viem_1.b3Viem.id && "w-3 rounded-full", order.dstChain === b3Viem_1.b3Viem.id && "h-4") })] })] })] }), points !== undefined && points !== null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-points-label text-as-tertiary", children: "Points" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", (0, formatNumber_1.formatNumber)(points), " pts"] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-label text-as-tertiary", children: showTotal ? "Total (included fee)" : "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-collapsed flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
 });

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

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
 const react_1 = require("../../../../shared/react");
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
+const react_2 = require("../../../../global-account/react");
+const react_3 = require("react");
 const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
 const AnimatedCheckmark_1 = require("../icons/AnimatedCheckmark");
 const StepProgress_1 = require("./StepProgress");
@@ -17,15 +18,28 @@ function getStepIndex(status) {
         return 1;
     return -1;
 }
-exports.OrderStatus = (0, react_2.memo)(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
+function getToastIcon(type) {
+    const iconClass = "h-5 w-5";
+    switch (type) {
+        case "success":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: `${iconClass} text-green-500` });
+        case "error":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: `${iconClass} text-red-500` });
+        case "info":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: `${iconClass} text-blue-500` });
+        case "warning":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: `${iconClass} text-amber-500` });
+    }
+}
+exports.OrderStatus = (0, react_3.memo)(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
     const { text: defaultText, description: defaultDescription } = (0, anyspend_1.getStatusDisplay)(order);
     const { content, slots } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
     const searchParams = (0, react_1.useSearchParams)();
     const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
     const currentStepIndex = getStepIndex(order.status);
-    const prevStepIndexRef = (0, react_2.useRef)(currentStepIndex);
+    const prevStepIndexRef = (0, react_3.useRef)(currentStepIndex);
     const shouldAnimateCheck = currentStepIndex > prevStepIndexRef.current;
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         prevStepIndexRef.current = currentStepIndex;
     }, [currentStepIndex]);
     // Resolve content overrides based on order status
@@ -61,9 +75,26 @@ exports.OrderStatus = (0, react_2.memo)(function OrderStatus({ order, selectedCr
         if (content.processingDescription)
             description = content.processingDescription;
     }
+    const { latestToast } = (0, react_2.useToastContext)();
+    // Override subtitle with toast notification when present (title stays unchanged)
+    let notificationIcon = undefined;
+    if (latestToast && currentStepIndex >= 0) {
+        description = latestToast.message;
+        notificationIcon = getToastIcon(latestToast.type);
+    }
     const paymentSteps = [
-        { id: 1, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
-        { id: 2, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
+        {
+            id: 1,
+            title: text,
+            description: typeof description === "string" ? description : defaultDescription || "",
+            icon: notificationIcon,
+        },
+        {
+            id: 2,
+            title: text,
+            description: typeof description === "string" ? description : defaultDescription || "",
+            icon: notificationIcon,
+        },
     ];
     if (currentStepIndex === 0) {
         if (!(order.status === "scanning_deposit_transaction" && cryptoPaymentMethod === "transfer_crypto")) {

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

@@ -1,7 +1,9 @@
+import React from "react";
 export interface Step {
     id: string | number;
     title: string;
     description?: string;
+    icon?: React.ReactNode;
 }
 export interface StepProgressProps {
     steps: Step[];

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

@@ -1,17 +1,22 @@
 "use strict";
 "use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepProgress = StepProgress;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const framer_motion_1 = require("framer-motion");
+const react_2 = require("torph/react");
 const AnimatedCheckmark_1 = require("../icons/AnimatedCheckmark");
 function StepProgress({ steps, currentStepIndex, className = "", animateCompletedSteps = true, }) {
     const currentStep = steps[currentStepIndex];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: steps.map((_, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center", children: index < currentStepIndex ? (
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: steps.map((_, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center", children: index < currentStepIndex ? (
                             // Completed step - checkmark replaces the whole circle
                             (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, children: (0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-10 w-10", strokeWidth: 2.5, static: !animateCompletedSteps }) })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, className: `border-as-border-secondary relative flex h-10 w-10 items-center justify-center rounded-full border-[3px]`, children: index === currentStepIndex ? (
                                 // Current step - show spinning border and step number
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "border-t-as-primary absolute -inset-0.5 animate-spin rounded-full border-[3px] border-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: index + 1 })] })) : (
                                 // Future step - show step number with disabled styling
-                                (0, jsx_runtime_1.jsx)("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) })) }, index), index < steps.length - 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }))) }), currentStep && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: currentStep.title }), currentStep.description && (0, jsx_runtime_1.jsx)("p", { className: "text-as-tertiary mt-1 text-sm", children: currentStep.description })] }))] }));
+                                (0, jsx_runtime_1.jsx)("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) })) }), index < steps.length - 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }, index))) }), currentStep && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: (0, jsx_runtime_1.jsx)(react_2.TextMorph, { children: currentStep.title }) }), currentStep.description && ((0, jsx_runtime_1.jsxs)("p", { className: "text-as-tertiary mt-1 flex items-center justify-center gap-1.5 text-sm", children: [currentStep.icon, (0, jsx_runtime_1.jsx)(react_2.TextMorph, { children: currentStep.description })] }))] }))] }));
 }

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

@@ -11,7 +11,7 @@ const react_2 = require("@web3icons/react");
 const lucide_react_1 = require("lucide-react");
 const qrcode_react_1 = require("qrcode.react");
 const react_3 = require("react");
-const chains_1 = require("viem/chains");
+const b3Viem_1 = require("../../../../shared/constants/chains/b3Viem");
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
 const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
 const PaymentMethodSwitch_1 = require("./PaymentMethodSwitch");
@@ -71,5 +71,5 @@ exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails
                                             transition: "stroke-dashoffset 1s linear",
                                         } })] }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
                                                 react_1.toast.success("Amount copied to clipboard");
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") }), (0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: (0, anyspend_1.getChainName)(order.srcChain) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.ZERO_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-transfer-crypto-qr-code bg-as-surface-secondary max-h-48 max-w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiary h-4 w-4 cursor-pointer transition-all duration-200" }) })] })] })] }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "order-transfer-crypto-copy-btn w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }), (0, jsx_runtime_1.jsx)(PaymentMethodSwitch_1.PaymentMethodSwitch, { currentMethod: CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === b3Viem_1.b3Viem.id && "h-5 rounded-none") }), (0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: (0, anyspend_1.getChainName)(order.srcChain) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.ZERO_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-transfer-crypto-qr-code bg-as-surface-secondary max-h-48 max-w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiary h-4 w-4 cursor-pointer transition-all duration-200" }) })] })] })] }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "order-transfer-crypto-copy-btn w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }), (0, jsx_runtime_1.jsx)(PaymentMethodSwitch_1.PaymentMethodSwitch, { currentMethod: CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
 });

package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js

@@ -10,7 +10,6 @@ const react_query_1 = require("@tanstack/react-query");
 const react_2 = require("react");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
-const wagmi_1 = require("wagmi");
 const useKycStatus_1 = require("./useKycStatus");
 const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId");
 /**
@@ -20,7 +19,7 @@ const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId
 function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = (0, react_1.useB3Config)();
-    const { address } = (0, wagmi_1.useAccount)();
+    const { address, getHeaders: getWalletAuthHeaders } = (0, useKycStatus_1.useWalletAuthHeaders)();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data
@@ -44,12 +43,11 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                 const srcAmountOnRampInWei = (0, viem_1.parseUnits)(srcFiatAmount, constants_1.USDC_BASE.decimals);
                 // For card payments, include wallet auth headers so the backend can verify
                 // KYC by the signing wallet address (may differ from the B3 JWT address).
-                // Only use already-cached headers — never trigger a fresh wallet signature
-                // here, as that would prompt the user without their explicit consent.
-                // KycGate pre-caches the headers in the "Continue to Verify" user-gesture.
+                // First try cached headers (from KycGate), then sign on-the-fly.
+                // The user is already clicking "Continue"/"Pay" so signing here is acceptable.
                 let kycWalletHeaders;
                 if (onramp.vendor === "stripe-web2" && address) {
-                    kycWalletHeaders = (0, useKycStatus_1.getCachedWalletHeaders)(address);
+                    kycWalletHeaders = (0, useKycStatus_1.getCachedWalletHeaders)(address) || (await getWalletAuthHeaders());
                 }
                 return await anyspend_1.anyspendService.createOrder({
                     recipientAddress: (0, utils_1.normalizeAddress)(recipientAddress),

package/dist/cjs/anyspend/react/hooks/useKycStatus.d.ts

@@ -24,10 +24,12 @@ interface KycVerifyResponse {
 export declare function getCachedWalletHeaders(address: string): Record<string, string> | undefined;
 /**
  * Returns a function that builds the wallet-signature auth headers.
+ * Uses useAccountWallet (thirdweb) instead of wagmi so signing works
+ * for all wallet types (social login, EOA, smart wallet, etc.).
  * Caches signatures for 4 minutes (server allows 5-minute window).
  */
 export declare function useWalletAuthHeaders(): {
-    address: `0x${string}` | undefined;
+    address: string | undefined;
     getHeaders: () => Promise<Record<string, string>>;
 };
 export declare function useKycStatus(enabled?: boolean): {

package/dist/cjs/anyspend/react/hooks/useKycStatus.js

@@ -7,9 +7,9 @@ exports.useKycStatus = useKycStatus;
 exports.useCreateKycInquiry = useCreateKycInquiry;
 exports.useVerifyKyc = useVerifyKyc;
 const constants_1 = require("../../../anyspend/constants");
+const react_1 = require("../../../global-account/react");
 const react_query_1 = require("@tanstack/react-query");
-const react_1 = require("react");
-const wagmi_1 = require("wagmi");
+const react_2 = require("react");
 function buildWalletAuthMessage(walletAddress, timestamp) {
     return `AnySpend wants to verify your identity for card payments.\n\nThis signature does not trigger a blockchain transaction or cost any gas.\n\nWallet: ${walletAddress.toLowerCase()}\nNonce: ${timestamp}`;
 }
@@ -27,21 +27,25 @@ function getCachedWalletHeaders(address) {
 }
 /**
  * Returns a function that builds the wallet-signature auth headers.
+ * Uses useAccountWallet (thirdweb) instead of wagmi so signing works
+ * for all wallet types (social login, EOA, smart wallet, etc.).
  * Caches signatures for 4 minutes (server allows 5-minute window).
  */
 function useWalletAuthHeaders() {
-    const { address } = (0, wagmi_1.useAccount)();
-    const { signMessageAsync } = (0, wagmi_1.useSignMessage)();
-    const getHeaders = (0, react_1.useCallback)(async () => {
+    const { address, wallet } = (0, react_1.useAccountWallet)();
+    const signMessage = wallet.signMessage;
+    const getHeaders = (0, react_2.useCallback)(async () => {
         if (!address)
             throw new Error("No wallet connected");
+        if (!signMessage)
+            throw new Error("Wallet does not support message signing");
         const walletAddress = address.toLowerCase();
         const cached = headerCache.get(walletAddress);
         if (cached && Date.now() < cached.expiresAt)
             return cached.headers;
         const timestamp = Math.floor(Date.now() / 1000);
         const message = buildWalletAuthMessage(walletAddress, timestamp);
-        const signature = await signMessageAsync({ message });
+        const signature = await signMessage({ message });
         const headers = {
             "X-Wallet-Address": walletAddress,
             "X-Wallet-Signature": signature,
@@ -50,7 +54,7 @@ function useWalletAuthHeaders() {
         // Cache for 4 minutes so repeated fetches don't re-prompt the user
         headerCache.set(walletAddress, { headers, expiresAt: Date.now() + 4 * 60 * 1000 });
         return headers;
-    }, [address, signMessageAsync]);
+    }, [address, signMessage]);
     return { address, getHeaders };
 }
 function useKycStatus(enabled = true) {

package/dist/cjs/anyspend/utils/chain.js

@@ -30,6 +30,7 @@ exports.getHyperliquidChain = getHyperliquidChain;
 exports.getAvailableChainIds = getAvailableChainIds;
 const constants_1 = require("../../anyspend/constants");
 const rpc_1 = require("../../anyspend/constants/rpc");
+const b3Viem_1 = require("../../shared/constants/chains/b3Viem");
 const invariant_1 = __importDefault(require("invariant"));
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
@@ -192,16 +193,16 @@ exports.EVM_MAINNET = {
         coingeckoName: "bsc",
         wethAddress: "0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c",
     },
-    [chains_1.b3.id]: {
-        id: chains_1.b3.id,
-        name: chains_1.b3.name,
+    [b3Viem_1.b3Viem.id]: {
+        id: b3Viem_1.b3Viem.id,
+        name: b3Viem_1.b3Viem.name,
         logoUrl: "https://assets.relay.link/icons/square/8333/light.png",
         type: chain_1.ChainType.EVM,
         nativeRequired: (0, viem_1.parseEther)("0.0001"),
         canDepositNative: true,
-        defaultToken: (0, token_1.getEthToken)(chains_1.b3.id),
-        nativeToken: (0, token_1.getEthToken)(chains_1.b3.id),
-        viem: getCustomEvmChain(chains_1.b3, rpc_1.B3_PUBLIC_RPC),
+        defaultToken: (0, token_1.getEthToken)(b3Viem_1.b3Viem.id),
+        nativeToken: (0, token_1.getEthToken)(b3Viem_1.b3Viem.id),
+        viem: b3Viem_1.b3Viem,
         pollingInterval: 1000, // 1 second for B3
         zapperEnum: "B3_MAINNET",
         coingeckoName: "b3",
@@ -547,7 +548,7 @@ function getPaymentUrl(address, amount, currency, chainId, decimals) {
     }
 }
 function getExplorerTxUrl(chainId, txHash) {
-    if (chainId === chains_1.b3.id) {
+    if (chainId === b3Viem_1.b3Viem.id) {
         return "https://explorer.b3.fun/b3/tx/" + txHash;
     }
     if (exports.EVM_CHAINS[chainId]) {