@b3dotfun/sdk 0.0.83-test.0 → 0.0.83

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/hooks/useAnyspendFlow.js

@@ -9,7 +9,6 @@ import { base, mainnet } from "viem/chains";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod.js";
 import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod.js";
-import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi.js";
 import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay.js";
 import { useCryptoPaymentMethodState } from "./useCryptoPaymentMethodState.js";
 import { useRecipientAddressState } from "./useRecipientAddressState.js";
@@ -49,8 +48,6 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     // Recipient state with dual-state system (auto + explicit user selection)
     const { address: globalAddress } = useAccountWallet();
     const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
-    // Auto-set active wallet from wagmi
-    useAutoSetActiveWalletFromWagmi();
     // Recipient address state - hook automatically manages priority: props > user selection > wallet/global
     const { setSelectedRecipientAddress, effectiveRecipientAddress } = useRecipientAddressState({
         recipientAddressFromProps: recipientAddress,

package/dist/esm/anyspend/utils/chain.d.ts

@@ -1,6 +1,44 @@
 import { components } from "../../anyspend/types/api";
 import { Account, Chain, PublicClient, Transport, WalletClient } from "viem";
 import { ChainType, IBaseChain, IEVMChain, ISolanaChain } from "../types/chain";
+export declare const hyperEVM: {
+    blockExplorers: {
+        readonly default: {
+            readonly name: "HyperEVM Explorer";
+            readonly url: "https://hyperevmscan.io/";
+        };
+    };
+    blockTime?: number | undefined | undefined;
+    contracts?: {
+        [x: string]: import("viem").ChainContract | {
+            [sourceId: number]: import("viem").ChainContract | undefined;
+        } | undefined;
+        ensRegistry?: import("viem").ChainContract | undefined;
+        ensUniversalResolver?: import("viem").ChainContract | undefined;
+        multicall3?: import("viem").ChainContract | undefined;
+        erc6492Verifier?: import("viem").ChainContract | undefined;
+    } | undefined;
+    ensTlds?: readonly string[] | undefined;
+    id: 999;
+    name: "HyperEVM";
+    nativeCurrency: {
+        readonly name: "HyperEVM";
+        readonly symbol: "HYPE";
+        readonly decimals: 18;
+    };
+    experimental_preconfirmationTime?: number | undefined | undefined;
+    rpcUrls: {
+        readonly default: {
+            readonly http: readonly ["https://rpc.hyperliquid.xyz/evm"];
+        };
+    };
+    sourceId?: number | undefined | undefined;
+    testnet?: boolean | undefined | undefined;
+    custom?: Record<string, unknown> | undefined;
+    fees?: import("viem").ChainFees<undefined> | undefined;
+    formatters?: undefined;
+    serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
+};
 export declare const EVM_MAINNET: Record<number, IEVMChain>;
 export declare const EVM_TESTNET: Record<number, IEVMChain>;
 export declare const SOLANA_MAINNET: ISolanaChain;

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

@@ -3,10 +3,17 @@ import invariant from "invariant";
 import { createPublicClient, createWalletClient, defineChain, http, parseEther, } from "viem";
 import { abstract, arbitrum, avalanche, b3, base, bsc, mainnet, optimism, polygon } from "viem/chains";
 import { ChainType } from "../types/chain.js";
-import { getAvaxToken, getBnbToken, getEthToken, getPolToken, getSolanaToken } from "./token.js";
+import { getAvaxToken, getBnbToken, getEthToken, getHyperEVMNativeToken, getPolToken, getSolanaToken, HYPEREVM_CHAIN_ID, } from "./token.js";
 function getCustomEvmChain(chain, rpcUrl) {
     return defineChain({ ...chain, rpcUrls: { default: { http: [rpcUrl] } } });
 }
+export const hyperEVM = defineChain({
+    id: HYPEREVM_CHAIN_ID,
+    name: "HyperEVM",
+    nativeCurrency: { name: "HyperEVM", symbol: "HYPE", decimals: 18 },
+    rpcUrls: { default: { http: ["https://rpc.hyperliquid.xyz/evm"] } },
+    blockExplorers: { default: { name: "HyperEVM Explorer", url: "https://hyperevmscan.io/" } },
+});
 // export const b4testnet = defineChain({
 //   id: 19934,
 //   name: "B4 Testnet",
@@ -150,6 +157,20 @@ export const EVM_MAINNET = {
         coingeckoName: "abstract",
         wethAddress: "0x3439153eb7af838ad19d56e1571fbd09333c2809",
     },
+    [hyperEVM.id]: {
+        id: hyperEVM.id,
+        name: hyperEVM.name,
+        logoUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/32196.png",
+        type: ChainType.EVM,
+        nativeRequired: parseEther("0.01"),
+        canDepositNative: true,
+        defaultToken: getHyperEVMNativeToken(),
+        nativeToken: getHyperEVMNativeToken(),
+        viem: hyperEVM,
+        pollingInterval: 1000, // 1 second for Hyperliquid
+        coingeckoName: "hyperevm",
+        wethAddress: "0x5555555555555555555555555555555555555555",
+    },
 };
 export const EVM_TESTNET = {
 // [sepolia.id]: {

package/dist/esm/anyspend/utils/token.d.ts

@@ -1,7 +1,10 @@
 import { components } from "../../anyspend/types/api";
+export declare const HYPERLIQUID_CHAIN_ID = 1337;
+export declare const HYPEREVM_CHAIN_ID = 999;
 export declare function isNativeToken(address: string): boolean;
 export declare function getSolanaToken(): components["schemas"]["Token"];
 export declare function getEthToken(chainId: number): components["schemas"]["Token"];
 export declare function getPolToken(): components["schemas"]["Token"];
 export declare function getBnbToken(): components["schemas"]["Token"];
 export declare function getAvaxToken(): components["schemas"]["Token"];
+export declare function getHyperEVMNativeToken(): components["schemas"]["Token"];

package/dist/esm/anyspend/utils/token.js

@@ -1,5 +1,7 @@
-import { avalanche, bsc, polygon } from "viem/chains";
 import { RELAY_ETH_ADDRESS, RELAY_SOL_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../anyspend/constants/index.js";
+import { avalanche, bsc, polygon } from "viem/chains";
+export const HYPERLIQUID_CHAIN_ID = 1337;
+export const HYPEREVM_CHAIN_ID = 999;
 export function isNativeToken(address) {
     return address.toLowerCase() === RELAY_ETH_ADDRESS || address.toLowerCase() === RELAY_SOL_ADDRESS;
 }
@@ -63,3 +65,15 @@ export function getAvaxToken() {
         },
     };
 }
+export function getHyperEVMNativeToken() {
+    return {
+        chainId: HYPEREVM_CHAIN_ID,
+        address: RELAY_ETH_ADDRESS,
+        symbol: "HYPE",
+        name: "HYPE",
+        decimals: 18,
+        metadata: {
+            logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/32196.png",
+        },
+    };
+}

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -3,7 +3,6 @@ import { Loading, useAuthStore, useB3, useGetAllTWSigners, useModalStore, } from
 import { debugB3React } from "../../../../shared/utils/debug.js";
 import { useCallback, useEffect, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
-import { TurnkeyAuthModal } from "../TurnkeyAuthModal.js";
 import { SignInWithB3Privy } from "./SignInWithB3Privy.js";
 import { LoginStep, LoginStepContainer } from "./steps/LoginStep.js";
 import { LoginStepCustom } from "./steps/LoginStepCustom.js";
@@ -21,9 +20,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
     const account = useActiveAccount();
     const isAuthenticating = useAuthStore(state => state.isAuthenticating);
     const isAuthenticated = useAuthStore(state => state.isAuthenticated);
-    const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
     const isConnected = useAuthStore(state => state.isConnected);
-    const setIsConnected = useAuthStore(state => state.setIsConnected);
     const setJustCompletedLogin = useAuthStore(state => state.setJustCompletedLogin);
     const [refetchCount, setRefetchCount] = useState(0);
     const [refetchError, setRefetchError] = useState(null);
@@ -125,10 +122,6 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
         debug("Refetching user after Turnkey success...");
         await refetchUser();
         debug("User refetched successfully");
-        // Set authentication and connection state so UI updates properly
-        setIsAuthenticated(true);
-        setIsConnected(true);
-        setJustCompletedLogin(true);
         // After user data is refreshed, close Turnkey modal and go back to sign-in flow
         debug("Switching back to signInWithB3 modal");
         setB3ModalContentType({
@@ -158,9 +151,6 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
         closeAfterLogin,
         source,
         signersEnabled,
-        setIsAuthenticated,
-        setIsConnected,
-        setJustCompletedLogin,
     ]);
     // Handle post-login flow after signers are loaded
     useEffect(() => {
@@ -296,56 +286,21 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
     if (refetchError) {
         content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
     }
+    else if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+        content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
+    }
     else if (step === "login") {
-        // PRIORITY: If Turnkey is enabled, show Turnkey modal FIRST as the primary authentication option
-        // Show Turnkey when enabled and not already completed in this session
-        const shouldShowTurnkeyFirst = enableTurnkey && !turnkeyAuthCompleted;
-        if (shouldShowTurnkeyFirst) {
-            // Don't show loading spinner for Turnkey - let the modal handle its own loading state
-            // This prevents the infinite loop where isAuthenticating causes the modal to be replaced
-            debug("Showing Turnkey as primary authentication option", {
-                enableTurnkey,
-                turnkeyAuthCompleted,
-                isAuthenticated,
-            });
-            // Show Turnkey authentication as primary option
-            content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx(TurnkeyAuthModal, { onSuccess: async (authenticatedUser) => {
-                        debug("Turnkey authentication successful in primary flow", { authenticatedUser });
-                        setTurnkeyAuthCompleted(true);
-                        // After Turnkey auth, refetch user to get the full user object
-                        await refetchUser();
-                        // User is now authenticated via Turnkey
-                        // Set both isAuthenticated and isConnected to true so UI updates properly
-                        // Wallet connection is optional and can happen later for signing transactions
-                        setIsAuthenticated(true);
-                        setIsConnected(true);
-                        setJustCompletedLogin(true);
-                        // Call the login success callback
-                        onLoginSuccess?.({});
-                    }, onClose: () => {
-                        // If user closes Turnkey modal, they can still use wallet connection as fallback
-                        setTurnkeyAuthCompleted(true);
-                    }, initialEmail: "", skipToOtp: false }) }));
+        // Custom strategy
+        if (strategies?.[0] === "privy") {
+            content = _jsx(SignInWithB3Privy, { onSuccess: handleLoginSuccess, chain: chain });
+        }
+        else if (strategies) {
+            // Strategies are explicitly provided
+            content = (_jsx(LoginStepCustom, { strategies: strategies, chain: chain, onSuccess: handleLoginSuccess, onError: onError, automaticallySetFirstEoa: !!automaticallySetFirstEoa }));
         }
         else {
-            // Show loading spinner only if not in Turnkey flow
-            if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
-                content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
-            }
-            else {
-                // Custom strategy
-                if (strategies?.[0] === "privy") {
-                    content = _jsx(SignInWithB3Privy, { onSuccess: handleLoginSuccess, chain: chain });
-                }
-                else if (strategies) {
-                    // Strategies are explicitly provided
-                    content = (_jsx(LoginStepCustom, { strategies: strategies, chain: chain, onSuccess: handleLoginSuccess, onError: onError, automaticallySetFirstEoa: !!automaticallySetFirstEoa }));
-                }
-                else {
-                    // Default to handle all strategies we support
-                    content = _jsx(LoginStep, { chain: chain, onSuccess: handleLoginSuccess, onError: onError });
-                }
-            }
+            // Default to handle all strategies we support
+            content = _jsx(LoginStep, { chain: chain, onSuccess: handleLoginSuccess, onError: onError });
         }
     }
     return content;

package/dist/esm/global-account/react/hooks/index.d.ts

@@ -3,7 +3,6 @@ export { useAccountAssets } from "./useAccountAssets";
 export { useAccountWallet } from "./useAccountWallet";
 export { useAddTWSessionKey } from "./useAddTWSessionKey";
 export { useAnalytics } from "./useAnalytics";
-export { useAuth } from "./useAuth";
 export { useAuthentication } from "./useAuthentication";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";

package/dist/esm/global-account/react/hooks/index.js

@@ -3,7 +3,6 @@ export { useAccountAssets } from "./useAccountAssets.js";
 export { useAccountWallet } from "./useAccountWallet.js";
 export { useAddTWSessionKey } from "./useAddTWSessionKey.js";
 export { useAnalytics } from "./useAnalytics.js";
-export { useAuth } from "./useAuth.js";
 export { useAuthentication } from "./useAuthentication.js";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses.js";
 export { useB3EnsName } from "./useB3EnsName.js";

package/dist/esm/global-account/react/hooks/useAuthentication.d.ts

@@ -41,8 +41,8 @@ export declare function useAuthentication(partnerId: string): {
                 name?: string | undefined;
                 address?: string | undefined;
                 email?: string | undefined;
-                phone?: string | undefined;
                 username?: string | undefined;
+                phone?: string | undefined;
                 fid?: string | undefined;
             };
         }[] | undefined;
@@ -63,6 +63,6 @@ export declare function useAuthentication(partnerId: string): {
             turnkeyOtpId?: string | undefined;
         };
     } | undefined;
-    refetchUser: () => Promise<import("@feathersjs/authentication").AuthenticationResult>;
+    refetchUser: (wallet?: Wallet) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
     setUser: (newUser?: import("@b3dotfun/b3-api").Users) => void;
 };