@b3dotfun/sdk 0.1.69-alpha.15 → 0.1.69-alpha.17

package/dist/cjs/shared/constants/chains/b3Chain.js

@@ -56,11 +56,11 @@ exports.b3Testnet = (0, viem_1.defineChain)({
 exports.b3Mainnet = (0, viem_1.defineChain)({
     id: 8333,
     name: "B3",
-    rpc: "https://mainnet-rpc.b3.fun",
+    rpc: "https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2",
     rpcUrls: {
         default: {
-            http: ["https://mainnet-rpc.b3.fun"],
-            ws: ["wss://mainnet-rpc.b3.fun/ws"],
+            http: ["https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2"],
+            ws: ["wss://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2"],
         },
     },
     icon: {
@@ -128,7 +128,7 @@ exports.thirdwebB3Testnet = (0, thirdweb_1.defineChain)({
 exports.thirdwebB3Mainnet = (0, thirdweb_1.defineChain)({
     id: 8333,
     name: "B3",
-    rpc: "https://mainnet-rpc.b3.fun/http",
+    rpc: "https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2/",
     icon: {
         url: "https://cdn.b3.fun/b3_logo.svg",
         width: 32,

package/dist/cjs/shared/constants/chains/b3Viem.d.ts

@@ -0,0 +1,6 @@
+import type { Chain } from "viem";
+/**
+ * Viem's built-in `b3` chain points at mainnet-rpc.b3.fun; we spread it and override
+ * RPC URLs so all SDK call sites stay aligned with {@link B3_PUBLIC_RPC}.
+ */
+export declare const b3Viem: Chain;

package/dist/cjs/shared/constants/chains/b3Viem.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.b3Viem = void 0;
+const rpc_1 = require("../../../anyspend/constants/rpc");
+const chains_1 = require("viem/chains");
+/**
+ * Viem's built-in `b3` chain points at mainnet-rpc.b3.fun; we spread it and override
+ * RPC URLs so all SDK call sites stay aligned with {@link B3_PUBLIC_RPC}.
+ */
+exports.b3Viem = {
+    ...chains_1.b3,
+    rpcUrls: {
+        ...chains_1.b3.rpcUrls,
+        default: {
+            ...chains_1.b3.rpcUrls.default,
+            http: [rpc_1.B3_PUBLIC_RPC],
+        },
+    },
+};

package/dist/cjs/shared/constants/chains/supported.d.ts

@@ -2,6 +2,7 @@ import type { Chain as ThirdwebChain } from "thirdweb";
 export declare const supportedChains: import("viem").Chain[];
 export declare const supportedChainsTW: ThirdwebChain[];
 export declare const supportedChainNetworks: {
+    formatters?: Record<string, any> | undefined;
     contracts?: Record<string, {
         blockCreated?: number | undefined;
         address: string;
@@ -9,7 +10,6 @@ export declare const supportedChainNetworks: {
     sourceId?: number | undefined;
     testnet?: boolean | undefined;
     fees?: Record<string, any> | undefined;
-    formatters?: Record<string, any> | undefined;
     color?: string | undefined;
     testnetConfigID?: number | undefined;
     badge?: string | undefined;

package/dist/cjs/shared/generated/chain-networks.json

@@ -5,8 +5,8 @@
     "name": "B3",
     "rpcUrls": {
       "default": {
-        "http": "https://mainnet-rpc.b3.fun",
-        "ws": "wss://mainnet-rpc.b3.fun/ws"
+        "http": "https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2/",
+        "ws": "wss://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2/"
       },
       "backups": []
     },

package/dist/cjs/shared/utils/chains.d.ts

@@ -1,4 +1,4 @@
-import { Chain } from "viem/chains";
+import type { Chain } from "viem";
 export declare function getChainById(id: number): Chain | undefined;
 export declare function chainIdToName(id: number): string | undefined;
 export declare function getExplorerUrl(chain: Chain, txHash: string): string;

package/dist/cjs/shared/utils/chains.js

@@ -5,8 +5,8 @@ exports.chainIdToName = chainIdToName;
 exports.getExplorerUrl = getExplorerUrl;
 exports.getAddressExplorerUrl = getAddressExplorerUrl;
 exports.getTokenExplorerUrl = getTokenExplorerUrl;
+const b3Viem_1 = require("../../shared/constants/chains/b3Viem");
 const supported_1 = require("../../shared/constants/chains/supported");
-const chains_1 = require("viem/chains");
 const baseChainBaseUrl = "https://basescan.org";
 function getChainById(id) {
     return Object.values(supported_1.supportedChains).find(chain => chain.id === id);
@@ -16,7 +16,7 @@ function chainIdToName(id) {
     return name === "Base Mainnet" ? "Base" : name === "The Open Network" ? "Open Network" : name;
 }
 function getExplorerUrl(chain, txHash) {
-    if (chain.id === chains_1.b3.id) {
+    if (chain.id === b3Viem_1.b3Viem.id) {
         return "https://explorer.b3.fun/b3/tx/" + txHash;
     }
     let baseUrl = chain.blockExplorers?.default.url;

package/dist/esm/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/esm/anyspend/constants/rpc.js

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

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

@@ -7,7 +7,7 @@ import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/nu
 import { MoreVertical } from "lucide-react";
 import { AnimatePresence } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { b3 } from "viem/chains";
+import { b3Viem } from "../../../shared/constants/chains/b3Viem.js";
 import { AnySpendCustom } from "./AnySpendCustom.js";
 // ABI for contractURI and uri functions
 const CONTRACT_URI_ABI = [
@@ -89,5 +89,5 @@ function DropdownMenu({ nftContract }) {
     const [open, setOpen] = useState(false);
     const chain = ALL_CHAINS[nftContract.chainId];
     const nftUrl = getExplorerAddressUrl(nftContract.chainId, nftContract.contractAddress);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _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: _jsx(MoreVertical, { className: "h-3 w-3" }) }) }), _jsx(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: _jsxs("div", { className: "pointer-events-auto flex w-full flex-col gap-2 py-2", children: [_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:", _jsxs("span", { className: "font-semibold", children: [formatTokenAmount(BigInt(nftContract.price), nftContract.currency.decimals, 6, false), " ", nftContract.currency.symbol] })] }), _jsxs("div", { className: "hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2", children: [_jsx("img", { src: chain?.logoUrl, className: cn("h-5 w-5", nftContract.chainId !== b3.id && "rounded-full") }), _jsxs("span", { className: "text-sm", children: ["Minted on ", _jsx("span", { className: "font-semibold", children: chain ? getChainName(nftContract.chainId) : "Unknown" })] })] }), _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 (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _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: _jsx(MoreVertical, { className: "h-3 w-3" }) }) }), _jsx(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: _jsxs("div", { className: "pointer-events-auto flex w-full flex-col gap-2 py-2", children: [_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:", _jsxs("span", { className: "font-semibold", children: [formatTokenAmount(BigInt(nftContract.price), nftContract.currency.decimals, 6, false), " ", nftContract.currency.symbol] })] }), _jsxs("div", { className: "hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2", children: [_jsx("img", { src: chain?.logoUrl, className: cn("h-5 w-5", nftContract.chainId !== b3Viem.id && "rounded-full") }), _jsxs("span", { className: "text-sm", children: ["Minted on ", _jsx("span", { className: "font-semibold", children: chain ? getChainName(nftContract.chainId) : "Unknown" })] })] }), _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/esm/anyspend/react/components/checkout/AnySpendCheckout.js

@@ -202,5 +202,9 @@ variablePricing, feeOnTop, kycEnabled = false, callbackMetadata: callbackMetadat
         (shippingOptions && shippingOptions.length > 0) ||
         collectShippingAddress ||
         enableDiscountCode;
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && (_jsx(VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(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 }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(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: _jsx(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 (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: {
+                successTitle: "Payment Successful",
+                successDescription: "Your payment has been processed successfully.",
+                ...content,
+            }, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && (_jsx(VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(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 }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(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: _jsx(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 }) }) }));
 }

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

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

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

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

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

@@ -15,12 +15,19 @@ export var CryptoPaymentMethodType;
     CryptoPaymentMethodType["GLOBAL_WALLET"] = "global_wallet";
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
-const recommendWallets = [
+export const recommendWallets = [
     createWallet("io.metamask"),
     createWallet("com.coinbase.wallet"),
     createWallet("me.rainbow"),
     createWallet("io.rabby"),
 ];
+export const connectModalConfig = {
+    client,
+    setActive: false,
+    size: "compact",
+    showThirdwebBranding: false,
+    wallets: recommendWallets,
+};
 export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, classes, }) {
     const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
     const { disconnect } = useDisconnect();
@@ -40,13 +47,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
             if (connectedEOAWallet) {
                 disconnect(connectedEOAWallet);
             }
-            const wallet = await openConnectModal({
-                client,
-                setActive: false,
-                size: "compact",
-                showThirdwebBranding: false,
-                wallets: recommendWallets,
-            });
+            const wallet = await openConnectModal(connectModalConfig);
             if (wallet) {
                 setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ALL_CHAINS, getChainName, getPaymentUrl, RELAY_SOLANA_MAINNET_CHAIN_ID, ZERO_ADDRESS, } from "../../../../anyspend/index.js";
 import { Badge, CopyToClipboard, ShinyButton, TextLoop } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
-import { b3 } from "viem/chains";
+import { b3Viem } from "../../../../shared/constants/chains/b3Viem.js";
 import { toast } from "../../../../global-account/react/index.js";
 import { formatUnits } from "../../../../shared/utils/number.js";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web3icons/react";
@@ -14,7 +14,7 @@ export function InsufficientDepositPayment({ order, srcToken, depositDeficit, ph
     const depositDeficitAmount = formatUnits(depositDeficit.toString(), srcToken.decimals);
     return (_jsxs("div", { className: "insufficient-deposit-payment relative flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "insufficient-deposit-payment-text text-as-primary/50", children: "Please send remaining" }), _jsxs("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [_jsx(CopyToClipboard, { text: depositDeficitAmount, onCopy: () => {
                                     toast.success("Copied to clipboard");
-                                }, children: _jsxs("div", { className: "flex items-center gap-2", children: [_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] }), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), _jsxs(Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", getChainName(order.srcChain), _jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") })] })] }), _jsx("span", { className: "text-as-primary/50 mb-1 mt-2", children: " to the address:" })] }), _jsx(CopyToClipboard, { text: order.globalAddress, onCopy: () => {
+                                }, children: _jsxs("div", { className: "flex items-center gap-2", children: [_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] }), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), _jsxs(Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", getChainName(order.srcChain), _jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("h-6 rounded-full", order.srcChain === b3Viem.id && "h-5 rounded-none") })] })] }), _jsx("span", { className: "text-as-primary/50 mb-1 mt-2", children: " to the address:" })] }), _jsx(CopyToClipboard, { text: order.globalAddress, onCopy: () => {
                     toast.success("Copied to clipboard");
                 }, children: _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: [_jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), _jsx(Copy, { className: "group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), _jsxs("div", { className: "payment-buttons mt-4 flex w-full flex-col items-center gap-2", children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                         ? "Pay from Phantom Wallet"

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

@@ -14,7 +14,7 @@ import { QRCodeSVG } from "qrcode.react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import TimeAgo from "react-timeago";
 import { encodeFunctionData, erc20Abi } from "viem";
-import { b3 } from "viem/chains";
+import { b3Viem } from "../../../../shared/constants/chains/b3Viem.js";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import { usePhantomTransfer } from "../../hooks/usePhantomTransfer.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion.js";
@@ -460,7 +460,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                 // Transfer Crypto Payment Method - Show new card-based UI
                 _jsx(TransferCryptoDetails, { order: order, recipientName: recipientName, srcToken: srcToken, dstToken: dstToken, tournament: tournament, nft: nft, onBack: handleBack, onPaymentMethodChange: onPaymentMethodChange })) : (_jsxs("div", { className: "order-details-payment-section relative flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "order-details-amount-section flex flex-col gap-1", children: [_jsx("span", { className: "text-as-primary/50 order-details-amount-label", children: "Please send" }), _jsxs("div", { className: "order-details-amount-container flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [_jsx(CopyToClipboard, { text: roundedUpSrcAmount, onCopy: () => {
                                                 toast.success("Copied to clipboard");
-                                            }, children: _jsxs("div", { className: "order-details-amount-display flex items-center gap-2", children: [_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] }), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary order-details-copy-icon h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), _jsxs(Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", getChainName(order.srcChain), _jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") })] })] }), _jsx("span", { className: "text-as-primary/50 order-details-address-label mb-1 mt-2", children: " to the address:" })] }), _jsx(CopyToClipboard, { text: order.globalAddress, onCopy: () => {
+                                            }, children: _jsxs("div", { className: "order-details-amount-display flex items-center gap-2", children: [_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] }), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary order-details-copy-icon h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), _jsxs(Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", getChainName(order.srcChain), _jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("h-6 rounded-full", order.srcChain === b3Viem.id && "h-5 rounded-none") })] })] }), _jsx("span", { className: "text-as-primary/50 order-details-address-label mb-1 mt-2", children: " to the address:" })] }), _jsx(CopyToClipboard, { text: order.globalAddress, onCopy: () => {
                                 toast.success("Copied to clipboard");
                             }, children: _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: [_jsx("div", { className: "text-as-primary order-details-address-text overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), _jsx(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 ? (_jsx("div", { className: "mb-4 mt-8 flex w-full flex-col items-center gap-4", children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex w-full flex-col items-center gap-2", children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: handlePayment, children: txLoading ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "pl-4 text-lg md:text-sm", children: order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                                                 ? "Pay from Phantom Wallet"

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

@@ -9,7 +9,7 @@ import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { ChevronDown, Copy } from "lucide-react";
 import { motion } from "motion/react";
 import { memo, useState } from "react";
-import { b3 } from "viem/chains";
+import { b3Viem } from "../../../../shared/constants/chains/b3Viem.js";
 export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ order, dstToken, tournament, nft, recipientName, formattedExpectedDstAmount, className, showTotal = false, totalAmount, points, isOpen, onOpenChange, classes, }) {
     const [internalOpen, setInternalOpen] = useState(true);
     // Use controlled mode if isOpen is provided, otherwise use internal state
@@ -39,5 +39,5 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
                                                 ? order.metadata.action
                                                     ? capitalizeFirstLetter(order.metadata.action)
                                                     : "Contract execution"
-                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-points-label text-as-tertiary", children: "Points" }), _jsxs("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", formatNumber(points), " pts"] })] })] })), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiary", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
+                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3Viem.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3Viem.id && "w-3 rounded-full", order.dstChain === b3Viem.id && "h-4") })] })] })] }), points !== undefined && points !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-points-label text-as-tertiary", children: "Points" }), _jsxs("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", formatNumber(points), " pts"] })] })] })), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiary", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
 });

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

@@ -8,7 +8,7 @@ import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web
 import { ChevronLeft, Copy } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useEffect, useMemo, useState } from "react";
-import { b3 } from "viem/chains";
+import { b3Viem } from "../../../../shared/constants/chains/b3Viem.js";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
 import { PaymentMethodSwitch } from "./PaymentMethodSwitch.js";
@@ -68,5 +68,5 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({ order
                                             transition: "stroke-dashoffset 1s linear",
                                         } })] }), _jsx("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), _jsxs("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [_jsxs("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [_jsxs("div", { className: "order-transfer-crypto-amount-card w-full", children: [_jsx("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), _jsx("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsx(CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
                                                 toast.success("Amount copied to clipboard");
-                                            }, children: _jsxs("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [_jsxs("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), _jsx(Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), _jsxs("div", { className: "order-transfer-crypto-chain-card w-full", children: [_jsx("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), _jsx("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsxs("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [_jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") }), _jsx("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: getChainName(order.srcChain) })] }) })] })] }), _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: [_jsx("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: _jsx("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: _jsxs("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === 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" }), _jsxs("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), _jsxs("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [_jsx("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), _jsxs("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [_jsx("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), _jsx("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: _jsx(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" }) })] })] })] }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), _jsxs("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [_jsx(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" }), _jsx(PaymentMethodSwitch, { currentMethod: CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
+                                            }, children: _jsxs("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [_jsxs("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), _jsx(Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), _jsxs("div", { className: "order-transfer-crypto-chain-card w-full", children: [_jsx("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), _jsx("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsxs("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [_jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === b3Viem.id && "h-5 rounded-none") }), _jsx("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: getChainName(order.srcChain) })] }) })] })] }), _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: [_jsx("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: _jsx("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: _jsxs("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === 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" }), _jsxs("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), _jsxs("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [_jsx("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), _jsxs("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [_jsx("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), _jsx("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: _jsx(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" }) })] })] })] }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), _jsxs("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [_jsx(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" }), _jsx(PaymentMethodSwitch, { currentMethod: CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
 });