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

package/dist/cjs/global-account/react/hooks/useTurnkeyAuth.js

@@ -4,11 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTurnkeyAuth = useTurnkeyAuth;
-const app_1 = __importDefault(require("../../app"));
-const stores_1 = require("../stores");
+const debug_1 = require("../../../shared/utils/debug");
 const react_1 = require("react");
+const app_1 = __importDefault(require("../../app"));
 const useB3_1 = require("../components/B3Provider/useB3");
-const debug_1 = require("../../../shared/utils/debug");
+const stores_1 = require("../stores");
+const useAuth_1 = require("./useAuth");
 const debug = (0, debug_1.debugB3React)("useTurnkeyAuth");
 /**
  * Hook for Turnkey email-based OTP authentication
@@ -23,29 +24,55 @@ function useTurnkeyAuth() {
     const [error, setError] = (0, react_1.useState)(null);
     const setIsAuthenticating = (0, stores_1.useAuthStore)(state => state.setIsAuthenticating);
     const setIsAuthenticated = (0, stores_1.useAuthStore)(state => state.setIsAuthenticated);
-    const { user } = (0, useB3_1.useB3)();
+    const { partnerId } = (0, useB3_1.useB3)();
+    const { authenticate } = (0, useAuth_1.useAuth)();
     /**
      * Step 1: Initiate login with email
-     * - Calls backend to create sub-org (if needed) and send OTP
+     * - Calls backend turnkey-jwt strategy (init action) to create sub-org (if needed) and send OTP
      * - Returns otpId to use in verification step
+     *
+     * Note: Uses the turnkey-jwt authentication strategy, not the service directly.
+     * The turnkey-jwt strategy handles both OTP flow (init/verify) and final authentication.
      */
     const initiateLogin = (0, react_1.useCallback)(async (email) => {
         setIsLoading(true);
         setError(null);
         setIsAuthenticating(true);
         try {
-            if (!user?.userId) {
-                throw new Error("User ID is required to initiate Turnkey login.");
-            }
             debug(`Initiating login for: ${email}`);
-            // Call FeathersJS service to initialize OTP
-            const data = await app_1.default.service("turnkey-auth").init({ email, userId: user.userId });
+            // Use authentication service with turnkey-jwt strategy (init action)
+            // userId is resolved from authentication context on the backend (params.user.userId)
+            // Backend will get userId from _params.user?.userId if authenticated, or handle unauthenticated case
+            // So we only need to send email
+            debug(`Calling app.authenticate with turnkey-jwt strategy (init action)`, { email });
+            const response = await app_1.default.authenticate({
+                strategy: "turnkey-jwt",
+                action: "init",
+                email,
+            });
+            // The strategy returns the TurnkeyAuthInitResponse directly
+            const data = response;
             debug(`OTP initialized successfully. OtpId: ${data.otpId}`);
             return data;
         }
         catch (err) {
             debug("Error initiating login:", err);
-            const errorMessage = err.message || "Failed to send OTP email. Please try again.";
+            // Provide more detailed error information
+            let errorMessage = "Failed to send OTP email. Please try again.";
+            if (err.message) {
+                errorMessage = err.message;
+            }
+            else if (err.name === "TypeError" && err.message?.includes("fetch")) {
+                errorMessage = "Network error: Unable to reach the server. Please check your connection and try again.";
+            }
+            else if (err.code === "ECONNREFUSED" || err.code === "ENOTFOUND") {
+                errorMessage = "Connection error: Unable to reach the server. Please check your internet connection.";
+            }
+            else if (err.response) {
+                // FeathersJS error response
+                errorMessage = err.response.message || err.message || errorMessage;
+                debug("FeathersJS error response:", err.response);
+            }
             setError(errorMessage);
             throw err;
         }
@@ -53,11 +80,11 @@ function useTurnkeyAuth() {
             setIsLoading(false);
             setIsAuthenticating(false);
         }
-    }, [user, setIsAuthenticating]);
+    }, [setIsAuthenticating]);
     /**
      * Step 2: Verify OTP and authenticate
-     * - Verifies OTP with backend
-     * - Gets Turnkey session JWT
+     * - Verifies OTP with backend via turnkey-jwt strategy (verify action)
+     * - Gets Turnkey session JWT from the verify response
      * - Authenticates with b3-api using "turnkey-jwt" strategy
      * - JWT automatically stored in cookies by SDK
      */
@@ -66,19 +93,22 @@ function useTurnkeyAuth() {
         setError(null);
         setIsAuthenticating(true);
         try {
-            debug(`Verifying OTP...`, { userId: user?.userId });
-            // Step 1: Verify OTP and get Turnkey session JWT
-            const { turnkeySessionJwt } = await app_1.default.service("turnkey-auth").verify({
+            debug(`Verifying OTP...`, { otpId });
+            // Step 1: Verify OTP with backend using turnkey-jwt strategy (verify action)
+            // This returns the Turnkey session JWT
+            const response = await app_1.default.authenticate({
+                strategy: "turnkey-jwt",
+                action: "verify",
                 otpId,
                 otpCode,
             });
-            debug(`OTP verified! Authenticating with b3-api...`);
+            // The strategy returns the TurnkeyAuthVerifyResponse directly
+            const verifyResult = response;
+            const { turnkeySessionJwt } = verifyResult;
+            debug(`OTP verified! Got Turnkey session JWT. Authenticating with b3-api...`);
             // Step 2: Authenticate with b3-api using Turnkey JWT
-            // The SDK will automatically store the b3-api JWT in cookies
-            const authResult = await app_1.default.authenticate({
-                strategy: "turnkey-jwt",
-                accessToken: turnkeySessionJwt,
-            });
+            // Use the unified useAuth hook for authentication with "turnkey-jwt" strategy
+            const authResult = await authenticate(turnkeySessionJwt, partnerId || "");
             debug(`Successfully authenticated with b3-api!`, authResult);
             // Update auth store to reflect authenticated state
             setIsAuthenticated(true);
@@ -98,7 +128,7 @@ function useTurnkeyAuth() {
             setIsLoading(false);
             setIsAuthenticating(false);
         }
-    }, [user, setIsAuthenticating, setIsAuthenticated]);
+    }, [partnerId, setIsAuthenticating, setIsAuthenticated, authenticate]);
     const clearError = (0, react_1.useCallback)(() => {
         setError(null);
     }, []);

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

@@ -36,8 +36,8 @@ export declare function useUserQuery(): {
                 name?: string | undefined;
                 address?: string | undefined;
                 email?: string | undefined;
-                username?: string | undefined;
                 phone?: string | undefined;
+                username?: string | undefined;
                 fid?: string | undefined;
             };
         }[] | undefined;

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

@@ -15,6 +15,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod.js";
+import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
 import { useConnectedWalletDisplay } from "../hooks/useConnectedWalletDisplay.js";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState.js";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
@@ -312,6 +313,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // );
     const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = useAccountWallet();
     const globalWalletImage = useAccountWalletImage();
+    // Auto-set active wallet from wagmi
+    useAutoSetActiveWalletFromWagmi();
     // Get wallet address based on selected payment method
     const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
     // Recipient address state with dual-state system (auto + explicit user selection)

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

@@ -13,6 +13,7 @@ import { ChevronRight, ChevronRightCircle, Info, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { base } from "viem/chains";
+import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState.js";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
@@ -110,6 +111,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const hasMounted = useHasMounted();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
+    // Auto-set active wallet from wagmi
+    useAutoSetActiveWalletFromWagmi();
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
     const [activeTab, setActiveTab] = useState(activeTabProps);
     // Payment method state with dual-state system (auto + explicit user selection)

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

@@ -4,8 +4,13 @@ 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 { useConnectModal, useDisconnect, useWalletInfo } from "thirdweb/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 { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
 export var CryptoPaymentMethodType;
 (function (CryptoPaymentMethodType) {
@@ -15,70 +20,195 @@ export var CryptoPaymentMethodType;
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
 export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
-    const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
+    const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
+    const { connector, address } = useAccount();
+    const { connect, connectors, isPending } = useConnect();
     const { disconnect } = useDisconnect();
-    const { connect: openConnectModal } = useConnectModal();
+    const { data: walletClient } = useWalletClient();
+    const [showWalletModal, setShowWalletModal] = useState(false);
+    const setActiveWallet = useSetActiveWallet();
     const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
+    const isConnected = !!connectedEOAWallet;
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
     // Use custom hook to determine wallet display logic
-    const { shouldShowConnectedEOA } = useConnectedWalletDisplay(selectedPaymentMethod);
-    // Handle wallet connection using thirdweb modal
-    const handleConnectWallet = async () => {
+    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) => {
         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);
+                toast.success(`Connected to ${walletConnector.name}`);
+                return;
             }
-            const wallet = await openConnectModal({ 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: {} }],
+                });
+                toast.success("Account selection completed");
                 setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                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
+                    toast.error("Account selection cancelled");
                 }
                 else {
-                    toast.error("Failed to connect wallet");
+                    toast.error("Failed to open account selection");
                 }
             }
+            else {
+                toast.error("Failed to open account selection");
+            }
         }
     };
-    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" })] })] })] })] })] }) }));
+    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)] }));
 }

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

@@ -9,6 +9,7 @@ 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";
@@ -48,6 +49,8 @@ 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/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/esm/anyspend/react/hooks/useAutoSetActiveWalletFromWagmi.js

@@ -0,0 +1,70 @@
+import { client } from "../../../shared/utils/thirdweb.js";
+import { useCallback, useEffect, useRef } from "react";
+import { useSetActiveWallet } from "thirdweb/react";
+import { createWallet } from "thirdweb/wallets";
+import { useAccount } from "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).
+ */
+export function useAutoSetActiveWalletFromWagmi() {
+    const { address: wagmiAddress, connector: wagmiConnector } = useAccount();
+    const setActiveWallet = useSetActiveWallet();
+    const prevWagmiAddress = useRef(undefined);
+    // Map wagmi connector names to thirdweb wallet IDs
+    const getThirdwebWalletId = 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 = useCallback(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);
+            await thirdwebWallet.connect({ 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
+    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]);
+}