@b3dotfun/sdk 0.0.20 → 0.0.21-alpha.0

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

@@ -1,118 +1,66 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaymentMethod = void 0;
+exports.CryptoPaymentMethodType = void 0;
 exports.CryptoPaymentMethod = CryptoPaymentMethod;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
+const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const cn_1 = require("../../../../shared/utils/cn");
 const formatAddress_1 = require("../../../../shared/utils/formatAddress");
+const thirdweb_1 = require("../../../../shared/utils/thirdweb");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
+const react_dom_1 = require("react-dom");
 const sonner_1 = require("sonner");
 const react_3 = require("thirdweb/react");
+const wallets_1 = require("thirdweb/wallets");
 const wagmi_1 = require("wagmi");
-var PaymentMethod;
-(function (PaymentMethod) {
-    PaymentMethod["NONE"] = "none";
-    PaymentMethod["CONNECT_WALLET"] = "connect_wallet";
-    PaymentMethod["TRANSFER_CRYPTO"] = "transfer_crypto";
-})(PaymentMethod || (exports.PaymentMethod = PaymentMethod = {}));
+var CryptoPaymentMethodType;
+(function (CryptoPaymentMethodType) {
+    CryptoPaymentMethodType["NONE"] = "none";
+    CryptoPaymentMethodType["CONNECT_WALLET"] = "connect_wallet";
+    CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
+})(CryptoPaymentMethodType || (exports.CryptoPaymentMethodType = CryptoPaymentMethodType = {}));
 function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
-    const { connect, connectors, isPending: isConnecting, error: connectError } = (0, wagmi_1.useConnect)();
-    const wagmiAccount = (0, wagmi_1.useAccount)();
-    const { address: globalAddress, connectedEOAWallet, isActiveEOAWallet, wallet: globalWallet } = (0, react_1.useAccountWallet)();
+    const { wallet: globalWallet } = (0, react_1.useAccountWallet)();
+    const activeWallet = (0, react_3.useActiveWallet)();
     const { disconnect } = (0, wagmi_1.useDisconnect)();
-    const previousAddress = (0, react_2.useRef)(globalAddress);
-    const setActiveWallet = (0, react_3.useSetActiveWallet)();
-    // Automatically set EOA wallet as active when available
-    (0, react_2.useEffect)(() => {
-        if (connectedEOAWallet) {
-            console.log("Setting active wallet", connectedEOAWallet);
-            setActiveWallet(connectedEOAWallet);
-        }
-    }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet]);
-    // Handle wallet connection success
-    (0, react_2.useEffect)(() => {
-        if (globalAddress && previousAddress.current !== globalAddress) {
-            previousAddress.current = globalAddress;
-            sonner_1.toast.success("Wallet connected successfully");
-            // Automatically select connect wallet method and go back to main view
-            setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-            onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-        }
-    }, [globalAddress, setSelectedPaymentMethod, onSelectPaymentMethod]);
-    // Handle connection errors
-    (0, react_2.useEffect)(() => {
-        if (connectError) {
-            // Handle specific error cases
-            if (connectError.message.includes("Connector already connected")) {
-                // If connector is already connected, just proceed with the flow
-                console.log("Connector already connected, proceeding with selection");
-                // Use wagmi account address or global address
-                if (wagmiAccount.address || globalAddress) {
-                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                }
-                else {
-                    // Fallback: proceed anyway as the connector reports it's connected
-                    setTimeout(() => {
-                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    }, 100);
-                }
-            }
-            else {
-                sonner_1.toast.error(`Failed to connect wallet: ${connectError.message}`);
-            }
-        }
-    }, [connectError, globalAddress, wagmiAccount.address, setSelectedPaymentMethod, onSelectPaymentMethod]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [!globalAddress ? (
-                        // Not connected - show single connect button
-                        (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
-                                // Prevent connecting if already connecting or if there's already a connection
-                                if (isConnecting)
-                                    return;
-                                try {
-                                    // Check if wagmi already has a connection
-                                    if (wagmiAccount.isConnected && wagmiAccount.address) {
-                                        // Already connected via wagmi, just proceed with selection
-                                        console.log("Wagmi already connected, proceeding with selection");
-                                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                        return;
-                                    }
-                                    // Check if global address exists (b3 account system)
-                                    if (globalAddress) {
-                                        // Already connected via global account, just proceed with selection
-                                        console.log("Global address already exists, proceeding with selection");
-                                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                        return;
-                                    }
-                                    // Use the first available connector or a preferred one
-                                    const preferredConnector = connectors.find(c => c.name.toLowerCase().includes("metamask")) || connectors[0];
-                                    if (preferredConnector) {
-                                        connect({ connector: preferredConnector });
-                                    }
-                                }
-                                catch (error) {
-                                    console.error("Connection error:", error);
-                                    sonner_1.toast.error("Failed to connect wallet. Please try again.");
-                                }
-                            }, disabled: isConnecting, className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: "Connect your wallet to continue" })] })] }), isConnecting ? ((0, jsx_runtime_1.jsx)("div", { className: "border-as-primary/20 border-t-as-primary h-5 w-5 animate-spin rounded-full border-2" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" }))] })) : (
-                        // Connected - show wallet info
-                        (0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-primary border-as-border-secondary rounded-xl border", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-green-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                                }, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                                    disconnect();
-                                                    sonner_1.toast.success("Wallet disconnected");
-                                                    if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET) {
-                                                        setSelectedPaymentMethod(PaymentMethod.NONE);
-                                                    }
-                                                }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
-                                setSelectedPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
-                                onSelectPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
-                            }, disabled: isCreatingOrder, className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] }) }));
+    const [showWalletModal, setShowWalletModal] = (0, react_2.useState)(false);
+    // Define available wallets for the modal
+    const availableWallets = [
+        (0, wallets_1.createWallet)("io.metamask"),
+        // createWallet("com.coinbase.wallet"),
+        (0, wallets_1.createWallet)("me.rainbow"),
+        (0, wallets_1.createWallet)("walletConnect"),
+        (0, wallets_1.createWallet)("io.rabby"),
+        (0, wallets_1.createWallet)("app.phantom"),
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto h-fit w-[460px] max-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [!activeWallet ? (
+                            // Not connected - show single connect button
+                            (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowWalletModal(true), className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: "Choose from multiple wallet options" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })) : (
+                            // Connected - show wallet info
+                            (0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-primary border-as-border-secondary rounded-xl border", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-green-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(activeWallet.getAccount()?.address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                        setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                        onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                    }, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: async () => {
+                                                        disconnect();
+                                                        sonner_1.toast.success("Wallet disconnected");
+                                                        if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                                                            setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                                                        }
+                                                    }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                                    setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                                    onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                                }, disabled: isCreatingOrder, className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] }), showWalletModal &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Connect Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowWalletModal(false), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)(react_3.ConnectEmbed, { client: thirdweb_1.client, chain: b3Chain_1.thirdwebB3Mainnet, wallets: availableWallets, showThirdwebBranding: false, theme: (0, react_3.lightTheme)(), onConnect: async (wallet) => {
+                                    console.log("Wallet connected:", wallet);
+                                    // setShowWalletModal(false);
+                                    setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                    onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                    setShowWalletModal(false);
+                                }, style: {
+                                    width: "100%",
+                                    minHeight: "300px",
+                                } })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
 }

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

@@ -53,7 +53,7 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
             id: FiatPaymentMethod.STRIPE,
             name: "Stripe",
             description: "Credit or debit card payment",
-            badge: stripeFee ? `$${stripeFee} fee` : "Standard Fee",
+            badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : "Standard Fee",
             badgeColor: "bg-yellow-100 text-yellow-800",
             available: true,
         });

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

@@ -1,5 +1,5 @@
 import { components } from "../../../../anyspend/types/api";
-import { PaymentMethod } from "./CryptoPaymentMethod";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 interface OrderDetailsProps {
     isMainnet: boolean;
     mode?: "modal" | "page";
@@ -8,7 +8,7 @@ interface OrderDetailsProps {
     relayTx: components["schemas"]["RelayTx"] | null;
     executeTx: components["schemas"]["ExecuteTx"] | null;
     refundTxs: components["schemas"]["RefundTx"][] | null;
-    paymentMethod?: PaymentMethod;
+    cryptoPaymentMethod?: CryptoPaymentMethodType;
     onBack?: () => void;
 }
 export declare const OrderDetails: import("react").NamedExoticComponent<OrderDetailsProps>;

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

@@ -126,12 +126,12 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, paymentMethod = CryptoPaymentMethod_1.PaymentMethod.NONE, onBack, }) {
+exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, cryptoPaymentMethod, onBack, }) {
     const router = (0, hooks_1.useRouter)();
     const searchParams = (0, hooks_1.useSearchParams)();
-    // Read payment method from URL parameters
-    const paymentMethodFromUrl = searchParams.get("paymentMethod");
-    const effectivePaymentMethod = paymentMethodFromUrl || paymentMethod || CryptoPaymentMethod_1.PaymentMethod.NONE;
+    // Read crypto payment method from URL parameters
+    const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod");
+    const effectiveCryptoPaymentMethod = cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE;
     const setB3ModalOpen = (0, react_1.useModalStore)((state) => state.setB3ModalOpen);
     const srcToken = order.metadata.srcToken;
     const dstToken = order.metadata.dstToken;
@@ -476,7 +476,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
                                 ? `Waiting for payment`
                                 : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusDisplay === "processing" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: order.onrampMetadata ? ((0, jsx_runtime_1.jsx)(PaymentVendorUI_1.default, { isMainnet: isMainnet, order: order, dstTokenSymbol: dstToken.symbol })) : effectivePaymentMethod === CryptoPaymentMethod_1.PaymentMethod.CONNECT_WALLET ? ((0, jsx_runtime_1.jsx)(ConnectWalletPayment_1.default, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft })) : effectivePaymentMethod === CryptoPaymentMethod_1.PaymentMethod.TRANSFER_CRYPTO ? (
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusDisplay === "processing" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: order.onrampMetadata ? ((0, jsx_runtime_1.jsx)(PaymentVendorUI_1.default, { isMainnet: isMainnet, order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsx)(ConnectWalletPayment_1.default, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
                 // 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 })) : ((0, jsx_runtime_1.jsxs)("div", { className: "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: "text-as-primary/50", children: "Please send" }), (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: roundedUpSrcAmount, onCopy: () => {
                                                 sonner_1.toast.success("Copied to clipboard");
@@ -488,11 +488,9 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
                                                         ? (0, centerTruncate_1.default)(phantomWalletAddress, 6)
                                                         : (0, centerTruncate_1.default)(account?.address || "", 6)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
                         // Default case - existing QR code flow
-                        (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain), className: "max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && ((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)("button", { className: "flex w-full items-center justify-center gap-2", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
+                        (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && ((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)("button", { className: "flex w-full items-center justify-center gap-2", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex grow items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-b3-react-background relative h-10 w-10 rounded-full", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full bg-black/70 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg shadow-purple-500/30 backdrop-blur-sm", style: {
-                                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)",
-                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "text-as-primary h-3 w-3" }) })) }), (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, children: title })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary", children: title })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: tx ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(chainId, tx.txHash), target: "_blank", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 font-mono text-xs", children: (0, centerTruncate_1.default)(tx?.txHash, 6) }) }) })) : null })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex grow items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-b3-react-background relative h-10 w-10 rounded-full", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full bg-black/70 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "text-as-primary h-3 w-3" }) })) }), (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, children: title })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary", children: title })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: tx ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(chainId, tx.txHash), target: "_blank", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 font-mono text-xs", children: (0, centerTruncate_1.default)(tx?.txHash, 6) }) }) })) : null })] }));
 }
 exports.OrderDetailsLoadingView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mb-4 h-12 w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)(react_1.Skeleton, { className: "rounded-lg p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[200px] w-[200px]" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-5 w-5 rounded-full" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 w-full" }, i))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background mt-8 w-full rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mb-3 h-4 w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 flex-1" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 w-full" })] }));

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

@@ -23,10 +23,10 @@ exports.OrderStatus = (0, react_1.memo)(function OrderStatus({ order }) {
             description: description,
         },
     ];
-    if (order.status === "waiting_stripe_payment") {
+    if (["waiting_stripe_payment"].includes(order.status)) {
         return (0, jsx_runtime_1.jsx)(StepProgress_1.StepProgress, { steps: paymentSteps, currentStepIndex: 0 });
     }
-    if (order.status === "relay") {
+    if (["relay", "sending_token_from_vault"].includes(order.status)) {
         return (0, jsx_runtime_1.jsx)(StepProgress_1.StepProgress, { steps: paymentSteps, currentStepIndex: 1 });
     }
     if (!isComplete && displayStatus !== "failure") {

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

@@ -87,9 +87,7 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
         try {
             const result = (await stripe.confirmPayment({
                 elements,
-                confirmParams: {
-                    return_url: `${window.location.origin}/?orderId=${order.id}&waitingForDeposit=true&fromStripe=true`,
-                },
+                redirect: "if_required",
             }));
             if (result.error) {
                 // This point will only be reached if there is an immediate error.

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

@@ -0,0 +1,42 @@
+export interface RecipientSelectionProps {
+    /**
+     * Initial recipient address value
+     */
+    initialValue?: string;
+    /**
+     * Placeholder text for the input field
+     */
+    placeholder?: string;
+    /**
+     * Title text displayed in the header
+     */
+    title?: string;
+    /**
+     * Description text displayed below the title
+     */
+    description?: string;
+    /**
+     * Text for the confirm button
+     */
+    confirmText?: string;
+    /**
+     * Callback when back button is clicked
+     */
+    onBack: () => void;
+    /**
+     * Callback when recipient address is confirmed
+     * @param address - The recipient address entered by the user
+     */
+    onConfirm: (address: string) => void;
+    /**
+     * Whether the component should auto-focus the input
+     */
+    autoFocus?: boolean;
+    /**
+     * Custom validation function for the address
+     * @param address - The address to validate
+     * @returns true if valid, false otherwise
+     */
+    validateAddress?: (address: string) => boolean;
+}
+export declare function RecipientSelection({ initialValue, placeholder, title, description, confirmText, onBack, onConfirm, autoFocus, validateAddress, }: RecipientSelectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/common/RecipientSelection.example.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Example usage of the RecipientSelection component
+ * This file demonstrates various ways to use the component with different props
+ */
+export declare function BasicRecipientSelection(): import("react/jsx-runtime").JSX.Element;
+export declare function CustomRecipientSelection(): import("react/jsx-runtime").JSX.Element;
+export declare function ENSRecipientSelection(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/common/RecipientSelection.example.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicRecipientSelection = BasicRecipientSelection;
+exports.CustomRecipientSelection = CustomRecipientSelection;
+exports.ENSRecipientSelection = ENSRecipientSelection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Example usage of the RecipientSelection component
+ * This file demonstrates various ways to use the component with different props
+ */
+const viem_1 = require("viem");
+const RecipientSelection_1 = require("./RecipientSelection");
+// Basic usage example
+function BasicRecipientSelection() {
+    return ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { onBack: () => console.log("Back clicked"), onConfirm: address => console.log("Address confirmed:", address) }));
+}
+// Custom styling and validation example
+function CustomRecipientSelection() {
+    const validateEthereumAddress = (address) => {
+        return (0, viem_1.isAddress)(address);
+    };
+    return ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: "0x...", placeholder: "Enter Ethereum address", title: "Send to Ethereum Address", description: "Enter a valid Ethereum address to send tokens", confirmText: "Confirm Ethereum Address", validateAddress: validateEthereumAddress, autoFocus: false, onBack: () => console.log("Going back"), onConfirm: address => console.log("Valid Ethereum address:", address) }));
+}
+// ENS-focused example
+function ENSRecipientSelection() {
+    return ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { placeholder: "Enter ENS name (e.g., vitalik.eth)", title: "Send to ENS Address", description: "Enter an ENS name or Ethereum address", confirmText: "Confirm ENS Address", onBack: () => console.log("Back to previous view"), onConfirm: address => console.log("ENS or address:", address) }));
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecipientSelection = RecipientSelection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+function RecipientSelection({ initialValue = "", placeholder = "Enter recipient address", title = "Add recipient address or ENS", description = "Swap and send tokens to another address", confirmText = "Confirm recipient address", onBack, onConfirm, autoFocus = true, validateAddress, }) {
+    const [recipientAddress, setRecipientAddress] = (0, react_1.useState)(initialValue);
+    // Update internal state when initialValue changes
+    (0, react_1.useEffect)(() => {
+        setRecipientAddress(initialValue);
+    }, [initialValue]);
+    const handlePaste = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            setRecipientAddress(text);
+        }
+        catch (err) {
+            console.error("Failed to read clipboard:", err);
+        }
+    };
+    const handleConfirm = () => {
+        if (recipientAddress && (!validateAddress || validateAddress(recipientAddress))) {
+            onConfirm(recipientAddress);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && recipientAddress) {
+            handleConfirm();
+        }
+    };
+    const isAddressValid = !validateAddress || !recipientAddress || validateAddress(recipientAddress);
+    const canConfirm = recipientAddress && isAddressValid;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-around", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-secondary border-l", children: (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && ((0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleConfirm, disabled: !canConfirm, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
+}

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

@@ -69,5 +69,5 @@ exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails
                                             transition: "stroke-dashoffset 1s linear",
                                         } })] }), (0, jsx_runtime_1.jsx)("div", { className: "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: "flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-content-secondary text-sm font-medium", children: "Amount" }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
                                                 sonner_1.toast.success("Amount copied to clipboard");
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex cursor-pointer items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-content-secondary text-sm font-medium", children: "Chain" }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "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)("h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-sm font-semibold", children: (0, anyspend_1.getChainName)(order.srcChain) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "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: "border-as-border-primary h-full w-full border-r", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "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.RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain), className: "bg-as-surface-secondary max-h-48 max-w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "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: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full w-full flex-col gap-2 p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), (0, jsx_runtime_1.jsx)("div", { className: "place-self-end", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "group-hover:text-as-brand text-as-tertiarry 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.jsx)("div", { className: "flex flex-col gap-3", children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }) })] }));
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex cursor-pointer items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-content-secondary text-sm font-medium", children: "Chain" }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "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)("h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-sm font-semibold", children: (0, anyspend_1.getChainName)(order.srcChain) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "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: "border-as-border-primary h-full w-full border-r", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "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.RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "bg-as-surface-secondary max-h-48 max-w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "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: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full w-full flex-col gap-2 p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), (0, jsx_runtime_1.jsx)("div", { className: "place-self-end", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "group-hover:text-as-brand text-as-tertiarry 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.jsx)("div", { className: "flex flex-col gap-3", children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }) })] }));
 });

package/dist/cjs/anyspend/react/components/index.d.ts

@@ -16,6 +16,7 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
+export { RecipientSelection } from "./common/RecipientSelection";
 export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";
 export { TransferCryptoDetails } from "./common/TransferCryptoDetails";

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

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
+exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
 // Components
 var AnySpend_1 = require("./AnySpend");
 Object.defineProperty(exports, "AnySpend", { enumerable: true, get: function () { return AnySpend_1.AnySpend; } });
@@ -52,6 +52,8 @@ var OrderToken_1 = require("./common/OrderToken");
 Object.defineProperty(exports, "OrderToken", { enumerable: true, get: function () { return OrderToken_1.OrderToken; } });
 var OrderTokenAmount_1 = require("./common/OrderTokenAmount");
 Object.defineProperty(exports, "OrderTokenAmount", { enumerable: true, get: function () { return OrderTokenAmount_1.OrderTokenAmount; } });
+var RecipientSelection_1 = require("./common/RecipientSelection");
+Object.defineProperty(exports, "RecipientSelection", { enumerable: true, get: function () { return RecipientSelection_1.RecipientSelection; } });
 var StepProgress_1 = require("./common/StepProgress");
 Object.defineProperty(exports, "StepProgress", { enumerable: true, get: function () { return StepProgress_1.StepProgress; } });
 var TokenBalance_1 = require("./common/TokenBalance");

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

@@ -5,6 +5,7 @@ export * from "./useAnyspendOrderHistory";
 export * from "./useAnyspendQuote";
 export * from "./useAnyspendTokens";
 export * from "./useCoinbaseOnrampOptions";
+export * from "./useConnectedUserProfile";
 export * from "./useGeoOnrampOptions";
 export * from "./useGetGeo";
 export * from "./useSigMint";

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

@@ -21,6 +21,7 @@ __exportStar(require("./useAnyspendOrderHistory"), exports);
 __exportStar(require("./useAnyspendQuote"), exports);
 __exportStar(require("./useAnyspendTokens"), exports);
 __exportStar(require("./useCoinbaseOnrampOptions"), exports);
+__exportStar(require("./useConnectedUserProfile"), exports);
 __exportStar(require("./useGeoOnrampOptions"), exports);
 __exportStar(require("./useGetGeo"), exports);
 __exportStar(require("./useSigMint"), exports);

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

@@ -0,0 +1,12 @@
+/**
+ * Hook that provides connected user's address, profile, and cleaned display name
+ * Combines logic for getting connected address from either global account or thirdweb wallets
+ */
+export declare function useConnectedUserProfile(): {
+    address: string | undefined;
+    profile: import("@tanstack/react-query").UseQueryResult<import("../../../global-account/react").CombinedProfile, Error>;
+    name: string | null | undefined;
+    isLoading: boolean;
+    isError: boolean;
+    error: Error | null;
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectedUserProfile = useConnectedUserProfile;
+const react_1 = require("../../../global-account/react");
+const react_2 = require("thirdweb/react");
+/**
+ * Hook that provides connected user's address, profile, and cleaned display name
+ * Combines logic for getting connected address from either global account or thirdweb wallets
+ */
+function useConnectedUserProfile() {
+    const { address: globalAddress } = (0, react_1.useAccountWallet)();
+    const connectedWallets = (0, react_2.useConnectedWallets)();
+    // Get connected address from global account or first connected wallet
+    const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
+    // Fetch profile data for the connected address with cleaned name
+    const connectedProfile = (0, react_1.useProfile)({ address: connectedAddress });
+    return {
+        address: connectedAddress,
+        profile: connectedProfile,
+        name: connectedProfile.data?.name,
+        isLoading: connectedProfile.isLoading,
+        isError: connectedProfile.isError,
+        error: connectedProfile.error,
+    };
+}

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

@@ -16,13 +16,13 @@ export declare const useGenerateSigMintData: ({ recipientAddress, contractAddres
             creator?: string | undefined;
             signatureRequestBody?: {
                 currency?: string | undefined;
-                price?: string | undefined;
-                clonePrice?: string | undefined;
-                primarySaleRecipient?: string | undefined;
                 royaltyRecipient?: string | undefined;
                 royaltyBps?: number | undefined;
+                primarySaleRecipient?: string | undefined;
                 validityStartTimestamp?: number | undefined;
                 validityEndTimestamp?: number | undefined;
+                price?: string | undefined;
+                clonePrice?: string | undefined;
                 metadata: {
                     name?: string | undefined;
                     description?: string | undefined;
@@ -38,9 +38,9 @@ export declare const useGenerateSigMintData: ({ recipientAddress, contractAddres
             maxSupply?: number | undefined;
             conditions?: {
                 chainId: number;
-                tokenAddress: string;
                 conditionType: "user-owns-tokens";
                 isOnchain: boolean;
+                tokenAddress: string;
                 tokenAmount: string;
             }[] | undefined;
             isFreeMint?: boolean | undefined;
@@ -90,9 +90,9 @@ export declare const useSigMintCollection: ({ address, chainId }: FindByAddressP
                 description?: string | undefined;
                 name?: string | undefined;
                 image?: string | undefined;
+                attributes?: any;
                 externalLink?: string | undefined;
                 appUri?: string | undefined;
-                attributes?: any;
                 backgroundColor?: string | undefined;
                 promptImageUrl?: string | undefined;
             };

package/dist/cjs/anyspend/react/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./components";
 export * from "./hooks";
-export * from "./providers/AnyspendProvider";
+export * from "./providers";