@b3dotfun/sdk 0.0.82-alpha.3 → 0.0.83-test.0

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

@@ -22,6 +22,7 @@ const react_4 = require("react");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const useAutoSelectCryptoPaymentMethod_1 = require("../hooks/useAutoSelectCryptoPaymentMethod");
+const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
 const useConnectedWalletDisplay_1 = require("../hooks/useConnectedWalletDisplay");
 const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodState");
 const useRecipientAddressState_1 = require("../hooks/useRecipientAddressState");
@@ -319,6 +320,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // );
     const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = (0, react_2.useAccountWallet)();
     const globalWalletImage = (0, useAccountWallet_1.useAccountWalletImage)();
+    // Auto-set active wallet from wagmi
+    (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
     // Get wallet address based on selected payment method
     const { walletAddress } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(effectiveCryptoPaymentMethod);
     // Recipient address state with dual-state system (auto + explicit user selection)

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

@@ -52,6 +52,7 @@ const lucide_react_1 = require("lucide-react");
 const react_4 = require("motion/react");
 const react_5 = __importStar(require("react"));
 const chains_1 = require("viem/chains");
+const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
 const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodState");
 const useRecipientAddressState_1 = require("../hooks/useRecipientAddressState");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
@@ -149,6 +150,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const hasMounted = (0, react_2.useHasMounted)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
+    // Auto-set active wallet from wagmi
+    (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
     const [activePanel, setActivePanel] = (0, react_5.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
     const [activeTab, setActiveTab] = (0, react_5.useState)(activeTabProps);
     // Payment method state with dual-state system (auto + explicit user selection)

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

@@ -8,8 +8,13 @@ const react_1 = require("../../../../global-account/react");
 const cn_1 = require("../../../../shared/utils/cn");
 const formatAddress_1 = require("../../../../shared/utils/formatAddress");
 const thirdweb_1 = require("../../../../shared/utils/thirdweb");
+const react_2 = require("@web3icons/react");
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("thirdweb/react");
+const react_3 = require("react");
+const react_dom_1 = require("react-dom");
+const react_4 = require("thirdweb/react");
+const wallets_1 = require("thirdweb/wallets");
+const wagmi_1 = require("wagmi");
 const useConnectedWalletDisplay_1 = require("../../hooks/useConnectedWalletDisplay");
 var CryptoPaymentMethodType;
 (function (CryptoPaymentMethodType) {
@@ -19,70 +24,195 @@ var CryptoPaymentMethodType;
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (exports.CryptoPaymentMethodType = CryptoPaymentMethodType = {}));
 function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
-    const { connectedEOAWallet, connectedSmartWallet } = (0, react_1.useAccountWallet)();
-    const { disconnect } = (0, react_2.useDisconnect)();
-    const { connect: openConnectModal } = (0, react_2.useConnectModal)();
-    const { data: eoaWalletInfo } = (0, react_2.useWalletInfo)(connectedEOAWallet?.id);
+    const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = (0, react_1.useAccountWallet)();
+    const { connector, address } = (0, wagmi_1.useAccount)();
+    const { connect, connectors, isPending } = (0, wagmi_1.useConnect)();
+    const { disconnect } = (0, wagmi_1.useDisconnect)();
+    const { data: walletClient } = (0, wagmi_1.useWalletClient)();
+    const [showWalletModal, setShowWalletModal] = (0, react_3.useState)(false);
+    const setActiveWallet = (0, react_4.useSetActiveWallet)();
+    const { data: eoaWalletInfo } = (0, react_4.useWalletInfo)(connectedEOAWallet?.id);
+    const isConnected = !!connectedEOAWallet;
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
     // Use custom hook to determine wallet display logic
-    const { shouldShowConnectedEOA } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedPaymentMethod);
-    // Handle wallet connection using thirdweb modal
-    const handleConnectWallet = async () => {
+    const { shouldShowConnectedEOA, shouldShowWagmiWallet } = (0, useConnectedWalletDisplay_1.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 = (0, wallets_1.createWallet)(walletId);
+            // Connect the wallet to sync with the existing wagmi connection
+            await thirdwebWallet.connect({ client: thirdweb_1.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: (0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { size: 48 }),
+            description: "Connect using MetaMask browser extension",
+            connector: availableConnectors.find(c => c.name === "MetaMask"),
+        },
+        {
+            id: "coinbase",
+            name: "Coinbase Wallet",
+            icon: (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { size: 48 }),
+            description: "Connect using Coinbase Wallet",
+            connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
+        },
+        {
+            id: "rainbow",
+            name: "Rainbow",
+            icon: (0, jsx_runtime_1.jsx)(react_2.WalletRainbow, { size: 48 }),
+            description: "Connect using Rainbow wallet",
+            connector: availableConnectors.find(c => c.name === "Rainbow"),
+        },
+        {
+            id: "walletconnect",
+            name: "WalletConnect",
+            icon: (0, jsx_runtime_1.jsx)(react_2.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) => {
         try {
-            // Disconnect current wallet before connecting a new one
-            if (connectedEOAWallet) {
-                await disconnect(connectedEOAWallet);
+            // 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);
+                react_1.toast.success(`Connected to ${walletConnector.name}`);
+                return;
             }
-            const wallet = await openConnectModal({ client: thirdweb_1.client, setActive: false });
-            if (wallet) {
-                // setActiveWallet(wallet);
+            // 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: {} }],
+                });
+                react_1.toast.success("Account selection completed");
                 setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                react_1.toast.success("Wallet connected");
+            }
+            else {
+                // Fallback: show modal for manual wallet selection
+                setShowWalletModal(true);
             }
         }
         catch (error) {
-            console.error("Failed to connect wallet:", error);
+            console.error("Failed to request wallet permissions:", error);
             if (error && typeof error === "object" && "message" in error) {
                 const errorMessage = error.message.toLowerCase();
                 if (errorMessage.includes("rejected") ||
                     errorMessage.includes("denied") ||
                     errorMessage.includes("cancelled")) {
-                    // User cancelled - no toast needed
+                    react_1.toast.error("Account selection cancelled");
                 }
                 else {
-                    react_1.toast.error("Failed to connect wallet");
+                    react_1.toast.error("Failed to open account selection");
                 }
             }
+            else {
+                react_1.toast.error("Failed to open account selection");
+            }
         }
     };
-    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), process.env.NODE_ENV === "development" && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.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" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.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" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.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" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.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" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                        react_1.toast.success("Multiple test 1");
-                                        setTimeout(() => react_1.toast.info("Multiple test 2"), 200);
-                                        setTimeout(() => react_1.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" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || globalAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "installed-wallets", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [shouldShowConnectedEOA && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                                setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                                onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                                react_1.toast.success(`Selected ${eoaWalletInfo?.name || "wallet"}`);
-                                            }, className: (0, cn_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(connectedEOAWallet?.getAccount()?.address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
-                                                                    e.stopPropagation();
-                                                                    if (connectedEOAWallet) {
-                                                                        disconnect(connectedEOAWallet);
-                                                                    }
-                                                                    react_1.toast.success("Wallet disconnected");
-                                                                    if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
-                                                                        setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
-                                                                    }
-                                                                }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), globalAddress && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                                setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
-                                                onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
-                                                react_1.toast.success("Selected B3 Account");
-                                            }, className: (0, cn_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.WalletImage, { fallback: (0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-purple-600" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Global Account" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress || "") })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "other-payment-methods", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ZapIcon, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] })] })] }) }));
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), process.env.NODE_ENV === "development" && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.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" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.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" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.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" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.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" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                            react_1.toast.success("Multiple test 1");
+                                            setTimeout(() => react_1.toast.info("Multiple test 2"), 200);
+                                            setTimeout(() => react_1.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" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "installed-wallets", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [shouldShowConnectedEOA && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                    setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                    onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                    if (connectedEOAWallet) {
+                                                        setActiveWallet(connectedEOAWallet);
+                                                    }
+                                                    react_1.toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
+                                                }, className: (0, cn_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name || connector?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(connectedEOAWallet?.getAccount()?.address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
+                                                                        e.stopPropagation();
+                                                                        disconnect();
+                                                                        react_1.toast.success("Wallet disconnected");
+                                                                        if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                                                                            setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                                                                        }
+                                                                    }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), shouldShowWagmiWallet && ((0, jsx_runtime_1.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);
+                                                        }
+                                                    }
+                                                    react_1.toast.success(`Selected ${connector?.name || "wallet"}`);
+                                                }, className: (0, cn_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
+                                                                        e.stopPropagation();
+                                                                        disconnect();
+                                                                        react_1.toast.success("Wallet disconnected");
+                                                                        if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                                                                            setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                                                                        }
+                                                                    }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), globalAddress && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                    setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                                                    onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                                                    react_1.toast.success("Selected B3 Account");
+                                                }, className: (0, cn_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.WalletImage, { fallback: (0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-purple-600" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Global Account" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress || "") })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "other-payment-methods", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ZapIcon, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] })] })] }), showWalletModal &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: "wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: walletOptions.map(walletOption => {
+                                        const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
+                                        return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [walletOption.icon, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "wallet-option-name flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && ((0, jsx_runtime_1.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" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
+                                    }) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
 }

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

@@ -13,6 +13,7 @@ const chains_1 = require("viem/chains");
 const CryptoPaymentMethod_1 = require("../components/common/CryptoPaymentMethod");
 const FiatPaymentMethod_1 = require("../components/common/FiatPaymentMethod");
 const useAutoSelectCryptoPaymentMethod_1 = require("./useAutoSelectCryptoPaymentMethod");
+const useAutoSetActiveWalletFromWagmi_1 = require("./useAutoSetActiveWalletFromWagmi");
 const useConnectedWalletDisplay_1 = require("./useConnectedWalletDisplay");
 const useCryptoPaymentMethodState_1 = require("./useCryptoPaymentMethodState");
 const useRecipientAddressState_1 = require("./useRecipientAddressState");
@@ -52,6 +53,8 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
     // Recipient state with dual-state system (auto + explicit user selection)
     const { address: globalAddress } = (0, react_2.useAccountWallet)();
     const { walletAddress } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(effectiveCryptoPaymentMethod);
+    // Auto-set active wallet from wagmi
+    (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
     // Recipient address state - hook automatically manages priority: props > user selection > wallet/global
     const { setSelectedRecipientAddress, effectiveRecipientAddress } = (0, useRecipientAddressState_1.useRecipientAddressState)({
         recipientAddressFromProps: recipientAddress,

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

@@ -0,0 +1,10 @@
+/**
+ * Hook that automatically sets the active thirdweb wallet when a wagmi wallet connects.
+ *
+ * This is useful for syncing wagmi wallet connections with thirdweb's wallet system,
+ * ensuring that when users connect via wagmi, the active wallet is properly set.
+ *
+ * Place this hook in components that stay mounted throughout the user flow
+ * (not in components that unmount during navigation).
+ */
+export declare function useAutoSetActiveWalletFromWagmi(): void;

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoSetActiveWalletFromWagmi = useAutoSetActiveWalletFromWagmi;
+const thirdweb_1 = require("../../../shared/utils/thirdweb");
+const react_1 = require("react");
+const react_2 = require("thirdweb/react");
+const wallets_1 = require("thirdweb/wallets");
+const wagmi_1 = require("wagmi");
+/**
+ * Hook that automatically sets the active thirdweb wallet when a wagmi wallet connects.
+ *
+ * This is useful for syncing wagmi wallet connections with thirdweb's wallet system,
+ * ensuring that when users connect via wagmi, the active wallet is properly set.
+ *
+ * Place this hook in components that stay mounted throughout the user flow
+ * (not in components that unmount during navigation).
+ */
+function useAutoSetActiveWalletFromWagmi() {
+    const { address: wagmiAddress, connector: wagmiConnector } = (0, wagmi_1.useAccount)();
+    const setActiveWallet = (0, react_2.useSetActiveWallet)();
+    const prevWagmiAddress = (0, react_1.useRef)(undefined);
+    // Map wagmi connector names to thirdweb wallet IDs
+    const getThirdwebWalletId = (0, react_1.useCallback)((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 = (0, react_1.useCallback)(async (connectorName) => {
+        const walletId = getThirdwebWalletId(connectorName);
+        if (!walletId) {
+            console.warn(`No thirdweb wallet ID found for connector: ${connectorName}`);
+            return null;
+        }
+        try {
+            const thirdwebWallet = (0, wallets_1.createWallet)(walletId);
+            await thirdwebWallet.connect({ client: thirdweb_1.client });
+            return thirdwebWallet;
+        }
+        catch (error) {
+            console.error(`Failed to create thirdweb wallet for ${connectorName}:`, error);
+            return null;
+        }
+    }, [getThirdwebWalletId]);
+    // Listen for wagmi wallet connections and automatically set active wallet
+    (0, react_1.useEffect)(() => {
+        const isNewConnection = wagmiAddress && wagmiAddress !== prevWagmiAddress.current;
+        if (isNewConnection && wagmiConnector?.name) {
+            prevWagmiAddress.current = wagmiAddress;
+            const setupThirdwebWallet = async () => {
+                try {
+                    const thirdwebWallet = await createThirdwebWalletFromConnector(wagmiConnector.name);
+                    if (thirdwebWallet) {
+                        setActiveWallet(thirdwebWallet);
+                        console.log(`Auto-set active wallet for ${wagmiConnector.name}`);
+                    }
+                }
+                catch (error) {
+                    console.error("Failed to auto-set active wallet:", error);
+                }
+            };
+            setupThirdwebWallet();
+        }
+        if (!wagmiAddress) {
+            prevWagmiAddress.current = undefined;
+        }
+    }, [wagmiAddress, wagmiConnector?.name, setActiveWallet, createThirdwebWalletFromConnector]);
+}

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

@@ -6,6 +6,7 @@ const react_1 = require("../../../../global-account/react");
 const debug_1 = require("../../../../shared/utils/debug");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
+const TurnkeyAuthModal_1 = require("../TurnkeyAuthModal");
 const SignInWithB3Privy_1 = require("./SignInWithB3Privy");
 const LoginStep_1 = require("./steps/LoginStep");
 const LoginStepCustom_1 = require("./steps/LoginStepCustom");
@@ -23,7 +24,9 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
     const account = (0, react_3.useActiveAccount)();
     const isAuthenticating = (0, react_1.useAuthStore)(state => state.isAuthenticating);
     const isAuthenticated = (0, react_1.useAuthStore)(state => state.isAuthenticated);
+    const setIsAuthenticated = (0, react_1.useAuthStore)(state => state.setIsAuthenticated);
     const isConnected = (0, react_1.useAuthStore)(state => state.isConnected);
+    const setIsConnected = (0, react_1.useAuthStore)(state => state.setIsConnected);
     const setJustCompletedLogin = (0, react_1.useAuthStore)(state => state.setJustCompletedLogin);
     const [refetchCount, setRefetchCount] = (0, react_2.useState)(0);
     const [refetchError, setRefetchError] = (0, react_2.useState)(null);
@@ -125,6 +128,10 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
         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({
@@ -154,6 +161,9 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
         closeAfterLogin,
         source,
         signersEnabled,
+        setIsAuthenticated,
+        setIsConnected,
+        setJustCompletedLogin,
     ]);
     // Handle post-login flow after signers are loaded
     (0, react_2.useEffect)(() => {
@@ -289,21 +299,56 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
     if (refetchError) {
         content = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
     }
-    else if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
-        content = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: (0, jsx_runtime_1.jsx)(react_1.Loading, { variant: "white", size: "lg" }) }) }));
-    }
     else if (step === "login") {
-        // Custom strategy
-        if (strategies?.[0] === "privy") {
-            content = (0, jsx_runtime_1.jsx)(SignInWithB3Privy_1.SignInWithB3Privy, { onSuccess: handleLoginSuccess, chain: chain });
-        }
-        else if (strategies) {
-            // Strategies are explicitly provided
-            content = ((0, jsx_runtime_1.jsx)(LoginStepCustom_1.LoginStepCustom, { strategies: strategies, chain: chain, onSuccess: handleLoginSuccess, onError: onError, automaticallySetFirstEoa: !!automaticallySetFirstEoa }));
+        // 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 = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)(TurnkeyAuthModal_1.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 }) }));
         }
         else {
-            // Default to handle all strategies we support
-            content = (0, jsx_runtime_1.jsx)(LoginStep_1.LoginStep, { chain: chain, onSuccess: handleLoginSuccess, onError: onError });
+            // Show loading spinner only if not in Turnkey flow
+            if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+                content = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: (0, jsx_runtime_1.jsx)(react_1.Loading, { variant: "white", size: "lg" }) }) }));
+            }
+            else {
+                // Custom strategy
+                if (strategies?.[0] === "privy") {
+                    content = (0, jsx_runtime_1.jsx)(SignInWithB3Privy_1.SignInWithB3Privy, { onSuccess: handleLoginSuccess, chain: chain });
+                }
+                else if (strategies) {
+                    // Strategies are explicitly provided
+                    content = ((0, jsx_runtime_1.jsx)(LoginStepCustom_1.LoginStepCustom, { strategies: strategies, chain: chain, onSuccess: handleLoginSuccess, onError: onError, automaticallySetFirstEoa: !!automaticallySetFirstEoa }));
+                }
+                else {
+                    // Default to handle all strategies we support
+                    content = (0, jsx_runtime_1.jsx)(LoginStep_1.LoginStep, { chain: chain, onSuccess: handleLoginSuccess, onError: onError });
+                }
+            }
         }
     }
     return content;

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

@@ -3,6 +3,7 @@ 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/cjs/global-account/react/hooks/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useURLParams = exports.useUnifiedChainSwitchAndExecute = exports.useTurnkeyAuth = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalanceDirect = exports.useTokenBalance = exports.useSiwe = exports.useSimSvmBalance = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfileSettings = exports.useProfilePreference = exports.useProfile = exports.useDisplayName = exports.useOneBalance = exports.useNotifications = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAnalytics = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = exports.createWagmiConfig = void 0;
+exports.useURLParams = exports.useUnifiedChainSwitchAndExecute = exports.useTurnkeyAuth = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalanceDirect = exports.useTokenBalance = exports.useSiwe = exports.useSimSvmBalance = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfileSettings = exports.useProfilePreference = exports.useProfile = exports.useDisplayName = exports.useOneBalance = exports.useNotifications = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAuth = exports.useAnalytics = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = exports.createWagmiConfig = void 0;
 var createWagmiConfig_1 = require("../utils/createWagmiConfig");
 Object.defineProperty(exports, "createWagmiConfig", { enumerable: true, get: function () { return createWagmiConfig_1.createWagmiConfig; } });
 var useAccountAssets_1 = require("./useAccountAssets");
@@ -25,6 +25,8 @@ var useAddTWSessionKey_1 = require("./useAddTWSessionKey");
 Object.defineProperty(exports, "useAddTWSessionKey", { enumerable: true, get: function () { return useAddTWSessionKey_1.useAddTWSessionKey; } });
 var useAnalytics_1 = require("./useAnalytics");
 Object.defineProperty(exports, "useAnalytics", { enumerable: true, get: function () { return useAnalytics_1.useAnalytics; } });
+var useAuth_1 = require("./useAuth");
+Object.defineProperty(exports, "useAuth", { enumerable: true, get: function () { return useAuth_1.useAuth; } });
 var useAuthentication_1 = require("./useAuthentication");
 Object.defineProperty(exports, "useAuthentication", { enumerable: true, get: function () { return useAuthentication_1.useAuthentication; } });
 var useB3BalanceFromAddresses_1 = require("./useB3BalanceFromAddresses");