@b3dotfun/sdk 0.0.83-test.0 → 0.0.84-alpha.0

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { eqci, getDefaultToken, roundUpUSDCBaseAmountToNearest } from "../../../anyspend/index.js";
-import { RELAY_ETH_ADDRESS, USDC_BASE } from "../../../anyspend/constants/index.js";
+import { USDC_BASE, ZERO_ADDRESS } from "../../../anyspend/constants/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useConnectedUserProfile, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { Badge, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TextShimmer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransitionPanel, useAccountWallet, useHasMounted, useProfile, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
 import { cn, formatUsername } from "../../../shared/utils/index.js";
@@ -13,11 +13,11 @@ import { ChevronRight, ChevronRightCircle, Info, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { base } from "viem/chains";
-import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState.js";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
+import { CryptoPaymentMethodDisplay } from "./common/CryptoPaymentMethodDisplay.js";
 import { FeeBreakDown } from "./common/FeeBreakDown.js";
 import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails } from "./common/OrderDetails.js";
@@ -111,8 +111,6 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const hasMounted = useHasMounted();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
-    // Auto-set active wallet from wagmi
-    useAutoSetActiveWalletFromWagmi();
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
     const [activeTab, setActiveTab] = useState(activeTabProps);
     // Payment method state with dual-state system (auto + explicit user selection)
@@ -148,7 +146,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         // First check native tokens (ETH, etc.)
         const nativeToken = nativeTokens?.find(t => t.chainId === srcChainId && Number(t.displayValue) > 0);
         if (nativeToken) {
-            const matchingToken = tokenList.find(t => t.address === RELAY_ETH_ADDRESS);
+            const matchingToken = tokenList.find(t => t.address === ZERO_ADDRESS);
             if (matchingToken)
                 return matchingToken;
         }
@@ -301,7 +299,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         },
     });
     const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
-    const { address: connectedAddress, name: connectedName } = useConnectedUserProfile();
+    const { address: connectedAddress, name: connectedName } = useConnectedUserProfile(effectiveCryptoPaymentMethod);
     const recipientProfile = useProfile({ address: recipientAddress });
     const recipientName = recipientProfile.data?.name;
     const handleCreateOrder = async (recipientAddress, onramp) => {
@@ -523,7 +521,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : (_jsx("span", { className: "whitespace-nowrap", children: "Connect wallet" })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: _jsx(CryptoPaymentMethodDisplay, { paymentMethod: effectiveCryptoPaymentMethod, connectedAddress: connectedAddress, connectedName: connectedName }) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",

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

@@ -1,13 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useProfile, useTokenData } from "../../../../global-account/react/index.js";
-import { formatUsername } from "../../../../shared/utils/index.js";
-import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
 import { formatDisplayNumber } from "../../../../shared/utils/number.js";
-import { ChevronRight, Info } from "lucide-react";
+import { Info } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
-import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
+import { CryptoPaymentMethodDisplay } from "./CryptoPaymentMethodDisplay.js";
 import { OrderTokenAmount } from "./OrderTokenAmount.js";
 import { TokenBalance } from "./TokenBalance.js";
 export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, onShowFeeDetail, }) {
@@ -40,7 +38,7 @@ export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, se
     useEffect(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [walletAddress ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(walletAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsxs(_Fragment, { children: ["Global Account", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: walletAddress, walletAddress: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: _jsx(CryptoPaymentMethodDisplay, { paymentMethod: selectedCryptoPaymentMethod, connectedAddress: walletAddress, connectedName: connectedName }) })] }), _jsx(OrderTokenAmount, { address: walletAddress, walletAddress: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {

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

@@ -4,13 +4,8 @@ import { toast, useAccountWallet, WalletImage } from "../../../../global-account
 import { cn } from "../../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
-import { WalletCoinbase, WalletMetamask, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
-import { useState } from "react";
-import { createPortal } from "react-dom";
-import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
-import { createWallet } from "thirdweb/wallets";
-import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
+import { useConnectModal, useDisconnect, useWalletInfo } from "thirdweb/react";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
 export var CryptoPaymentMethodType;
 (function (CryptoPaymentMethodType) {
@@ -20,195 +15,70 @@ export var CryptoPaymentMethodType;
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
 export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
-    const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
-    const { connector, address } = useAccount();
-    const { connect, connectors, isPending } = useConnect();
+    const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
     const { disconnect } = useDisconnect();
-    const { data: walletClient } = useWalletClient();
-    const [showWalletModal, setShowWalletModal] = useState(false);
-    const setActiveWallet = useSetActiveWallet();
+    const { connect: openConnectModal } = useConnectModal();
     const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
-    const isConnected = !!connectedEOAWallet;
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
     // Use custom hook to determine wallet display logic
-    const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
-    console.log("shouldShowWagmiWallet :", shouldShowWagmiWallet);
-    // Map wagmi connector names to thirdweb wallet IDs
-    const getThirdwebWalletId = (connectorName) => {
-        const walletMap = {
-            MetaMask: "io.metamask",
-            "Coinbase Wallet": "com.coinbase.wallet",
-            Rainbow: "me.rainbow",
-            WalletConnect: "walletConnect",
-            Phantom: "app.phantom",
-        };
-        return walletMap[connectorName] || null;
-    };
-    // Create thirdweb wallet from wagmi connector
-    const createThirdwebWalletFromConnector = async (connectorName) => {
-        const walletId = getThirdwebWalletId(connectorName);
-        if (!walletId) {
-            console.warn(`No thirdweb wallet ID found for connector: ${connectorName}`);
-            return null;
-        }
-        try {
-            const thirdwebWallet = createWallet(walletId);
-            // Connect the wallet to sync with the existing wagmi connection
-            await thirdwebWallet.connect({ client });
-            return thirdwebWallet;
-        }
-        catch (error) {
-            console.error(`Failed to create thirdweb wallet for ${connectorName}:`, error);
-            return null;
-        }
-    };
-    // Define available wallet connectors
-    const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name));
-    // Define wallet options with icons and info
-    const walletOptions = [
-        {
-            id: "metamask",
-            name: "MetaMask",
-            icon: _jsx(WalletMetamask, { size: 48 }),
-            description: "Connect using MetaMask browser extension",
-            connector: availableConnectors.find(c => c.name === "MetaMask"),
-        },
-        {
-            id: "coinbase",
-            name: "Coinbase Wallet",
-            icon: _jsx(WalletCoinbase, { size: 48 }),
-            description: "Connect using Coinbase Wallet",
-            connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
-        },
-        {
-            id: "rainbow",
-            name: "Rainbow",
-            icon: _jsx(WalletRainbow, { size: 48 }),
-            description: "Connect using Rainbow wallet",
-            connector: availableConnectors.find(c => c.name === "Rainbow"),
-        },
-        {
-            id: "walletconnect",
-            name: "WalletConnect",
-            icon: _jsx(WalletWalletConnect, { size: 48 }),
-            description: "Connect using WalletConnect protocol",
-            connector: availableConnectors.find(c => c.name === "WalletConnect"),
-        },
-    ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
-    // Reset modal state when closing
-    const handleCloseModal = () => {
-        setShowWalletModal(false);
-    };
-    // Function to request wallet permissions for specific wallet
-    const requestWalletPermissions = async (walletConnector) => {
+    const { shouldShowConnectedEOA } = useConnectedWalletDisplay(selectedPaymentMethod);
+    // Handle wallet connection using thirdweb modal
+    const handleConnectWallet = async () => {
         try {
-            // If a specific wallet connector is provided and it's different from current
-            if (walletConnector && connector?.name !== walletConnector.name) {
-                // Disconnect current and connect to the selected wallet
-                // if (isConnected) {
-                //   disconnect();
-                //   // Small delay to ensure disconnection
-                //   await new Promise(resolve => setTimeout(resolve, 100));
-                // }
-                await connect({ connector: walletConnector });
-                setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                toast.success(`Connected to ${walletConnector.name}`);
-                return;
+            // Disconnect current wallet before connecting a new one
+            if (connectedEOAWallet) {
+                await disconnect(connectedEOAWallet);
             }
-            // If same wallet or no specific wallet, request permissions for account switching
-            if (walletClient && "request" in walletClient) {
-                await walletClient.request({
-                    method: "wallet_requestPermissions",
-                    params: [{ eth_accounts: {} }],
-                });
-                toast.success("Account selection completed");
+            const wallet = await openConnectModal({ client, setActive: false });
+            if (wallet) {
+                // setActiveWallet(wallet);
                 setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-            }
-            else {
-                // Fallback: show modal for manual wallet selection
-                setShowWalletModal(true);
+                toast.success("Wallet connected");
             }
         }
         catch (error) {
-            console.error("Failed to request wallet permissions:", error);
+            console.error("Failed to connect wallet:", error);
             if (error && typeof error === "object" && "message" in error) {
                 const errorMessage = error.message.toLowerCase();
                 if (errorMessage.includes("rejected") ||
                     errorMessage.includes("denied") ||
                     errorMessage.includes("cancelled")) {
-                    toast.error("Account selection cancelled");
+                    // User cancelled - no toast needed
                 }
                 else {
-                    toast.error("Failed to open account selection");
+                    toast.error("Failed to connect wallet");
                 }
             }
-            else {
-                toast.error("Failed to open account selection");
-            }
         }
     };
-    return (_jsxs("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5", children: [_jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_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: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), process.env.NODE_ENV === "development" && (_jsxs("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [_jsx("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { onClick: () => toast.success("Success! Transaction completed"), className: "rounded bg-green-600 px-2 py-1 text-xs font-medium text-white hover:bg-green-700", children: "Success" }), _jsx("button", { onClick: () => toast.error("Error! Transaction failed"), className: "rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700", children: "Error" }), _jsx("button", { onClick: () => toast.info("Info: Processing your request..."), className: "rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700", children: "Info" }), _jsx("button", { onClick: () => toast.warning("Warning: Low balance detected"), className: "rounded bg-yellow-600 px-2 py-1 text-xs font-medium text-white hover:bg-yellow-700", children: "Warning" }), _jsx("button", { onClick: () => {
-                                            toast.success("Multiple test 1");
-                                            setTimeout(() => toast.info("Multiple test 2"), 200);
-                                            setTimeout(() => toast.warning("Multiple test 3"), 400);
-                                        }, className: "rounded bg-purple-600 px-2 py-1 text-xs font-medium text-white hover:bg-purple-700", children: "Multiple" })] })] })), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsxs("div", { className: "space-y-2", children: [shouldShowConnectedEOA && (_jsx("button", { onClick: () => {
-                                                    setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                                    onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                                    if (connectedEOAWallet) {
-                                                        setActiveWallet(connectedEOAWallet);
-                                                    }
-                                                    toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
-                                                }, className: cn("crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
-                                                    ? "connected-wallet border-as-brand bg-as-brand/5"
-                                                    : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name || connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(connectedEOAWallet?.getAccount()?.address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
-                                                                        e.stopPropagation();
-                                                                        disconnect();
-                                                                        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: _jsx(X, { className: "h-4 w-4" }) })] })] }) })), shouldShowWagmiWallet && (_jsx("button", { onClick: async () => {
-                                                    setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                                    onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                                    // Create thirdweb wallet from wagmi connector
-                                                    if (connector?.name) {
-                                                        const thirdwebWallet = await createThirdwebWalletFromConnector(connector.name);
-                                                        if (thirdwebWallet) {
-                                                            setActiveWallet(thirdwebWallet);
-                                                        }
-                                                    }
-                                                    toast.success(`Selected ${connector?.name || "wallet"}`);
-                                                }, className: cn("crypto-payment-method-connect-wallet wagmi-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
-                                                    ? "connected-wallet border-as-brand bg-as-brand/5"
-                                                    : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
-                                                                        e.stopPropagation();
-                                                                        disconnect();
-                                                                        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: _jsx(X, { className: "h-4 w-4" }) })] })] }) })), globalAddress && (_jsx("button", { onClick: () => {
-                                                    setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
-                                                    onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
-                                                    toast.success("Selected B3 Account");
-                                                }, className: cn("crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
-                                                    ? "connected-wallet border-as-brand bg-as-brand/5"
-                                                    : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(WalletImage, { fallback: _jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: _jsx(Wallet, { className: "h-5 w-5 text-purple-600" }) }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Global Account" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(globalAddress || "") })] })] }), _jsx("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), _jsxs("div", { className: "other-payment-methods", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("button", { onClick: () => {
-                                                    // Always show wallet selection modal first
-                                                    setShowWalletModal(true);
-                                                }, className: "crypto-payment-method-connect-wallet 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: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), _jsxs("button", { onClick: () => {
-                                                    setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
-                                                    onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
-                                                }, disabled: isCreatingOrder, className: "crypto-payment-method-transfer 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: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: _jsx(ZapIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] })] })] }), showWalletModal &&
-                createPortal(_jsx("div", { className: "wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), _jsx("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-3", children: walletOptions.map(walletOption => {
-                                        const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
-                                        return (_jsx("button", { onClick: async () => {
-                                                handleCloseModal();
-                                                await requestWalletPermissions(walletOption.connector);
-                                            }, disabled: isPending, className: `wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
-                                                ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
-                                                : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [walletOption.icon, _jsxs("div", { children: [_jsxs("div", { className: "wallet-option-name flex items-center gap-2", children: [_jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && (_jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), _jsx(ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
-                                    }) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
+    return (_jsx("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5", children: _jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_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: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), process.env.NODE_ENV === "development" && (_jsxs("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [_jsx("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { onClick: () => toast.success("Success! Transaction completed"), className: "rounded bg-green-600 px-2 py-1 text-xs font-medium text-white hover:bg-green-700", children: "Success" }), _jsx("button", { onClick: () => toast.error("Error! Transaction failed"), className: "rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700", children: "Error" }), _jsx("button", { onClick: () => toast.info("Info: Processing your request..."), className: "rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700", children: "Info" }), _jsx("button", { onClick: () => toast.warning("Warning: Low balance detected"), className: "rounded bg-yellow-600 px-2 py-1 text-xs font-medium text-white hover:bg-yellow-700", children: "Warning" }), _jsx("button", { onClick: () => {
+                                        toast.success("Multiple test 1");
+                                        setTimeout(() => toast.info("Multiple test 2"), 200);
+                                        setTimeout(() => toast.warning("Multiple test 3"), 400);
+                                    }, className: "rounded bg-purple-600 px-2 py-1 text-xs font-medium text-white hover:bg-purple-700", children: "Multiple" })] })] })), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || globalAddress) && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsxs("div", { className: "space-y-2", children: [shouldShowConnectedEOA && (_jsx("button", { onClick: () => {
+                                                setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                toast.success(`Selected ${eoaWalletInfo?.name || "wallet"}`);
+                                            }, className: cn("crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                                                ? "connected-wallet border-as-brand bg-as-brand/5"
+                                                : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(connectedEOAWallet?.getAccount()?.address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
+                                                                    e.stopPropagation();
+                                                                    if (connectedEOAWallet) {
+                                                                        disconnect(connectedEOAWallet);
+                                                                    }
+                                                                    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: _jsx(X, { className: "h-4 w-4" }) })] })] }) })), globalAddress && (_jsx("button", { onClick: () => {
+                                                setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                                                onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                                                toast.success("Selected B3 Account");
+                                            }, className: cn("crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+                                                ? "connected-wallet border-as-brand bg-as-brand/5"
+                                                : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(WalletImage, { fallback: _jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: _jsx(Wallet, { className: "h-5 w-5 text-purple-600" }) }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Global Account" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(globalAddress || "") })] })] }), _jsx("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), _jsxs("div", { className: "other-payment-methods", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("button", { onClick: handleConnectWallet, className: "crypto-payment-method-connect-wallet 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: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), _jsxs("button", { onClick: () => {
+                                                setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                                                onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                                            }, disabled: isCreatingOrder, className: "crypto-payment-method-transfer 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: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: _jsx(ZapIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] })] })] }) }));
 }

package/dist/esm/anyspend/react/components/common/CryptoPaymentMethodDisplay.d.ts

@@ -0,0 +1,15 @@
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+interface CryptoPaymentMethodDisplayProps {
+    paymentMethod: CryptoPaymentMethodType;
+    connectedAddress?: string | null;
+    connectedName?: string | null;
+}
+/**
+ * Displays the selected crypto payment method with appropriate label
+ * - CONNECT_WALLET: Shows wallet address/name or "Connect wallet"
+ * - GLOBAL_WALLET: Shows "Global Account"
+ * - TRANSFER_CRYPTO: Shows "Transfer crypto"
+ * - NONE: Shows "Select payment method"
+ */
+export declare function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }: CryptoPaymentMethodDisplayProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatUsername } from "../../../../shared/utils/index.js";
+import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
+import { ChevronRight } from "lucide-react";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
+/**
+ * Displays the selected crypto payment method with appropriate label
+ * - CONNECT_WALLET: Shows wallet address/name or "Connect wallet"
+ * - GLOBAL_WALLET: Shows "Global Account"
+ * - TRANSFER_CRYPTO: Shows "Transfer crypto"
+ * - NONE: Shows "Select payment method"
+ */
+export function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }) {
+    if (paymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+        return (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress) })) : (_jsx("span", { className: "whitespace-nowrap", children: "Connect wallet" })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+    }
+    if (paymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
+        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Global Account" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+    }
+    if (paymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+    }
+    // NONE or any other case
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+}

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ALL_CHAINS, getChainName, getPaymentUrl, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, } from "../../../../anyspend/index.js";
+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";
@@ -18,5 +18,5 @@ export function InsufficientDepositPayment({ order, srcToken, depositDeficit, ph
                     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"
-                                        : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsx("div", { children: "Or" }), _jsx(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: _jsxs("div", { className: "qr-code flex flex-col items-center rounded-lg pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(depositDeficit), order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "max-w-[200px]" }), _jsxs("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) })] })] }));
+                                        : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsx("div", { children: "Or" }), _jsx(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: _jsxs("div", { className: "qr-code flex flex-col items-center rounded-lg pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(depositDeficit), order.srcTokenAddress === ZERO_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "max-w-[200px]" }), _jsxs("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) })] })] }));
 }

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ALL_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, } from "../../../../anyspend/index.js";
+import { ALL_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, RELAY_SOLANA_MAINNET_CHAIN_ID, ZERO_ADDRESS, } from "../../../../anyspend/index.js";
 import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useB3, useModalStore, useProfile, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
 import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index.js";
 import { cn } from "../../../../shared/utils/index.js";
@@ -218,9 +218,9 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     // Main payment handler that triggers chain switch and payment
     const handlePayment = useCallback(async () => {
         console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
+        const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
         if (order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID) {
-            // Use the existing depositDeficit calculation to determine amount to send
-            const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
+            // Solana payment flow
             await initiatePhantomTransfer({
                 amountLamports: amountToSend,
                 tokenAddress: order.srcTokenAddress,
@@ -228,7 +228,8 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
             });
         }
         else {
-            // Use unified payment process for both EOA and AA wallets
+            // EVM payment flow (EOA and AA wallets)
+            // Note: Hyperliquid is NOT supported as source chain, only as destination chain
             await handleUnifiedPaymentProcess();
         }
     }, [order, walletClient?.chain?.id, depositDeficit, handleUnifiedPaymentProcess, initiatePhantomTransfer]);
@@ -410,7 +411,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                         ? centerTruncate(phantomWalletAddress, 6)
                                                         : centerTruncate(account?.address || "", 6)] })] }), _jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsxs(ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [_jsx("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), _jsx("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
                         // Default case - existing QR code flow
-                        _jsx(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: _jsxs("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), _jsxs("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), _jsxs("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [_jsx("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), _jsx("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : (_jsx(TimeAgo, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && (_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points })), _jsxs("button", { className: "text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline", onClick: handleBack, children: [_jsx(RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
+                        _jsx(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: _jsxs("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === ZERO_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), _jsxs("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), _jsxs("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [_jsx("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), _jsx("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : (_jsx(TimeAgo, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && (_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points })), _jsxs("button", { className: "text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline", onClick: handleBack, children: [_jsx(RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return (_jsxs("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [_jsxs("div", { className: "order-details-transaction-content flex grow items-center gap-4", children: [_jsx(motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: _jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary 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: _jsx(CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? (_jsx(TextShimmer, { duration: 1, children: title })) : (_jsx("span", { className: "text-as-primary", children: title })) })] }), _jsx("div", { className: "flex flex-col gap-1", children: tx ? (_jsx(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: _jsx("a", { href: getExplorerTxUrl(chainId, tx.txHash), target: "_blank", children: _jsx("div", { className: "text-as-primary/30 font-mono text-xs", children: centerTruncate(tx?.txHash, 6) }) }) })) : null })] }));

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ALL_CHAINS, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/index.js";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, ZERO_ADDRESS, getAvailableChainIds } from "../../../../anyspend/index.js";
 import { Button, useAccountWallet, useTokenBalancesByChain } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
@@ -21,7 +21,7 @@ export function OrderToken({ context, address, chainId, setChainId, token, setTo
         // Get balance for the selected token
         let balance = null;
         if (token && wallet?.address) {
-            if (token.address === RELAY_ETH_ADDRESS) {
+            if (token.address === ZERO_ADDRESS) {
                 // Native token
                 const nativeToken = nativeTokens?.find(t => t.chainId === chainId);
                 balance = nativeToken?.value ?? null;
@@ -40,7 +40,7 @@ export function OrderToken({ context, address, chainId, setChainId, token, setTo
             hasEnoughBalance,
         };
     }, [chainId, fungibleTokens, nativeTokens, requiredAmount, token, wallet?.address]);
-    return (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: token => {
+    return (_jsx(TokenSelector, { address: address, chainIdsFilter: getAvailableChainIds(context), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: getAvailableChainIds(context), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: token => {
             setChainId(token.chainId);
             setToken({
                 address: token.address,

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

@@ -4,7 +4,7 @@ import { ChevronsUpDown } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
 import { formatUnits } from "viem";
-import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/index.js";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, getAvailableChainIds } from "../../../../anyspend/index.js";
 import { getNativeRequired } from "../../../../anyspend/utils/chain.js";
 import { isNativeToken } from "../../../../anyspend/utils/token.js";
 import { Button, useTokenBalance } from "../../../../global-account/react/index.js";
@@ -73,5 +73,5 @@ export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context,
         // Then set the new token - the useEffect will handle setting the max balance
         setToken(token);
     };
-    return (_jsx("div", { className: cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: _jsxs("div", { className: cn("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? (_jsx("h2", { className: cn("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : (_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: cn("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("token-selector-button bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[chainId].name })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
+    return (_jsx("div", { className: cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: _jsxs("div", { className: cn("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? (_jsx("h2", { className: cn("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : (_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: cn("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && (_jsx(TokenSelector, { address: address, chainIdsFilter: getAvailableChainIds(context), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: getAvailableChainIds(context), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("token-selector-button bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[chainId].name })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronsUpDown } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
-import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/index.js";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, getAvailableChainIds } from "../../../../anyspend/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon.js";
@@ -43,5 +43,5 @@ export function OrderTokenAmountFiat({ disabled, inputValue, onChangeInput, cont
         }
     };
     // Original token amount input design for other contexts
-    return (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs("div", { className: cn("border-as-border-secondary bg-as-surface-primary flex cursor-pointer items-center justify-between rounded-xl border px-3 py-2", className), children: [_jsxs("div", { className: "flex items-center gap-3", children: [token.metadata?.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId]?.logoUrl, tokenUrl: token.metadata.logoURI, className: "h-10 w-10" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "font-bold text-white", children: token.symbol?.substring(0, 2) || "??" }) })), _jsxs("div", { children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/50 text-sm", children: ALL_CHAINS[chainId]?.name || "Unknown" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-600", children: "\u2248" }), _jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 20, spellCheck: "false", className: "text-as-primary bg-as-surface-primary w-[100px]", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, "aria-disabled": true, readOnly: true }, `input-${token.address}-${chainId}`), _jsx(ChevronsUpDown, { className: "h-4 w-4 cursor-pointer text-gray-400" })] })] }) }, `selector-${context}-${token.address}-${chainId}`));
+    return (_jsx(TokenSelector, { address: address, chainIdsFilter: getAvailableChainIds(context), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: getAvailableChainIds(context), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs("div", { className: cn("border-as-border-secondary bg-as-surface-primary flex cursor-pointer items-center justify-between rounded-xl border px-3 py-2", className), children: [_jsxs("div", { className: "flex items-center gap-3", children: [token.metadata?.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId]?.logoUrl, tokenUrl: token.metadata.logoURI, className: "h-10 w-10" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "font-bold text-white", children: token.symbol?.substring(0, 2) || "??" }) })), _jsxs("div", { children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/50 text-sm", children: ALL_CHAINS[chainId]?.name || "Unknown" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-600", children: "\u2248" }), _jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 20, spellCheck: "false", className: "text-as-primary bg-as-surface-primary w-[100px]", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, "aria-disabled": true, readOnly: true }, `input-${token.address}-${chainId}`), _jsx(ChevronsUpDown, { className: "h-4 w-4 cursor-pointer text-gray-400" })] })] }) }, `selector-${context}-${token.address}-${chainId}`));
 }