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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.82-alpha.3",
+  "version": "0.0.83-test.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpend.tsx

@@ -38,6 +38,7 @@ import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
 import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod";
+import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
 import { useConnectedWalletDisplay } from "../hooks/useConnectedWalletDisplay";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
@@ -460,6 +461,9 @@ function AnySpendInner({
 
   const globalWalletImage = useAccountWalletImage();
 
+  // Auto-set active wallet from wagmi
+  useAutoSetActiveWalletFromWagmi();
+
   // Get wallet address based on selected payment method
   const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
 

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -44,6 +44,7 @@ import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { base } from "viem/chains";
+import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
@@ -246,6 +247,9 @@ function AnySpendCustomInner({
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
+  // Auto-set active wallet from wagmi
+  useAutoSetActiveWalletFromWagmi();
+
   const [activePanel, setActivePanel] = useState<PanelView>(
     loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER,
   );

package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx

@@ -4,8 +4,13 @@ import { toast, useAccountWallet, WalletImage } from "@b3dotfun/sdk/global-accou
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+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, WalletId } from "thirdweb/wallets";
+import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 
 export enum CryptoPaymentMethodType {
@@ -30,32 +35,128 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  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);
+  const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
+  console.log("shouldShowWagmiWallet :", shouldShowWagmiWallet);
 
-  // Handle wallet connection using thirdweb modal
-  const handleConnectWallet = async () => {
+  // Map wagmi connector names to thirdweb wallet IDs
+  const getThirdwebWalletId = (connectorName: string): WalletId | null => {
+    const walletMap: Record<string, WalletId> = {
+      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: string) => {
+    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: <WalletMetamask size={48} />,
+      description: "Connect using MetaMask browser extension",
+      connector: availableConnectors.find(c => c.name === "MetaMask"),
+    },
+    {
+      id: "coinbase",
+      name: "Coinbase Wallet",
+      icon: <WalletCoinbase size={48} />,
+      description: "Connect using Coinbase Wallet",
+      connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
+    },
+    {
+      id: "rainbow",
+      name: "Rainbow",
+      icon: <WalletRainbow size={48} />,
+      description: "Connect using Rainbow wallet",
+      connector: availableConnectors.find(c => c.name === "Rainbow"),
+    },
+    {
+      id: "walletconnect",
+      name: "WalletConnect",
+      icon: <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?: any) => {
     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 as any).message.toLowerCase();
         if (
@@ -63,10 +164,12 @@ export function CryptoPaymentMethod({
           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");
       }
     }
   };
@@ -133,7 +236,7 @@ export function CryptoPaymentMethod({
         {/* Payment Methods */}
         <div className="crypto-payment-methods flex flex-col gap-4">
           {/* Installed Wallets Section */}
-          {(shouldShowConnectedEOA || globalAddress) && (
+          {(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && (
             <div className="installed-wallets">
               <h3 className="text-as-primary/80 mb-3 text-sm font-medium">Connected wallets</h3>
               <div className="space-y-2">
@@ -144,7 +247,10 @@ export function CryptoPaymentMethod({
                     onClick={() => {
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                      toast.success(`Selected ${eoaWalletInfo?.name || "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",
@@ -160,7 +266,7 @@ export function CryptoPaymentMethod({
                         </div>
                         <div className="flex flex-col">
                           <span className="text-as-primary font-semibold">
-                            {eoaWalletInfo?.name || "Connected Wallet"}
+                            {eoaWalletInfo?.name || connector?.name || "Connected Wallet"}
                           </span>
                           <span className="text-as-primary/60 text-sm">
                             {shortenAddress(connectedEOAWallet?.getAccount()?.address || "")}
@@ -174,9 +280,62 @@ export function CryptoPaymentMethod({
                         <button
                           onClick={e => {
                             e.stopPropagation();
-                            if (connectedEOAWallet) {
-                              disconnect(connectedEOAWallet);
+                            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"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </div>
+                  </button>
+                )}
+
+                {shouldShowWagmiWallet && (
+                  <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",
+                    )}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
+                          <Wallet className="h-5 w-5 text-blue-600" />
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-as-primary font-semibold">{connector?.name || "Connected Wallet"}</span>
+                          <span className="text-as-primary/60 text-sm">{shortenAddress(address || "")}</span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (
+                          <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                        )}
+                        <button
+                          onClick={e => {
+                            e.stopPropagation();
+                            disconnect();
                             toast.success("Wallet disconnected");
                             if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
                               setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
@@ -239,7 +398,10 @@ export function CryptoPaymentMethod({
             <div className="space-y-3">
               {/* Connect Wallet Section */}
               <button
-                onClick={handleConnectWallet}
+                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"
               >
                 <div className="flex items-center gap-3">
@@ -276,6 +438,75 @@ export function CryptoPaymentMethod({
           </div>
         </div>
       </div>
+
+      {/* Wallet Connection Modal */}
+      {showWalletModal &&
+        createPortal(
+          <div className="wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
+            <div className="max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900">
+              <div className="mb-4 flex items-center justify-between">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  {isConnected ? "Switch wallet or account" : "Choose wallet to connect"}
+                </h3>
+                <button
+                  onClick={handleCloseModal}
+                  className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+
+              <div className="space-y-4">
+                {/* Custom wallet options */}
+                <div className="space-y-3">
+                  {walletOptions.map(walletOption => {
+                    const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
+
+                    return (
+                      <button
+                        key={walletOption.id}
+                        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"
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            {walletOption.icon}
+
+                            <div>
+                              <div className="wallet-option-name flex items-center gap-2">
+                                <div className="text-sm font-semibold text-gray-900 dark:text-white">
+                                  {walletOption.name}
+                                </div>
+                                {isCurrentWallet && (
+                                  <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">
+                                    Connected
+                                  </span>
+                                )}
+                              </div>
+                              <div className="text-xs text-gray-500 dark:text-gray-400">
+                                {isCurrentWallet ? "Switch account or reconnect" : walletOption.description}
+                              </div>
+                            </div>
+                          </div>
+                          <ChevronRightCircle className="h-5 w-5 text-gray-400" />
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>,
+          typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body,
+        )}
     </div>
   );
 }

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -24,6 +24,7 @@ import { components } from "../../types/api";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
 import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod";
+import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi";
 import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
 import { useCryptoPaymentMethodState } from "./useCryptoPaymentMethodState";
 import { useRecipientAddressState } from "./useRecipientAddressState";
@@ -110,6 +111,9 @@ export function useAnyspendFlow({
   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/src/anyspend/react/hooks/useAutoSetActiveWalletFromWagmi.ts

@@ -0,0 +1,80 @@
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { useCallback, useEffect, useRef } from "react";
+import { useSetActiveWallet } from "thirdweb/react";
+import { WalletId, 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<string | undefined>(undefined);
+
+  // Map wagmi connector names to thirdweb wallet IDs
+  const getThirdwebWalletId = useCallback((connectorName: string): WalletId | null => {
+    const walletMap: Record<string, WalletId> = {
+      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: string) => {
+      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]);
+}

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -10,6 +10,7 @@ import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useCallback, useEffect, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { Account } from "thirdweb/wallets";
+import { TurnkeyAuthModal } from "../TurnkeyAuthModal";
 import { SignInWithB3Privy } from "./SignInWithB3Privy";
 import { LoginStep, LoginStepContainer } from "./steps/LoginStep";
 import { LoginStepCustom } from "./steps/LoginStepCustom";
@@ -40,7 +41,9 @@ export function SignInWithB3Flow({
   const account = useActiveAccount();
   const isAuthenticating = useAuthStore(state => state.isAuthenticating);
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+  const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const isConnected = useAuthStore(state => state.isConnected);
+  const setIsConnected = useAuthStore(state => state.setIsConnected);
   const setJustCompletedLogin = useAuthStore(state => state.setJustCompletedLogin);
   const [refetchCount, setRefetchCount] = useState(0);
   const [refetchError, setRefetchError] = useState<string | null>(null);
@@ -154,6 +157,11 @@ export function SignInWithB3Flow({
       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({
@@ -184,6 +192,9 @@ export function SignInWithB3Flow({
       closeAfterLogin,
       source,
       signersEnabled,
+      setIsAuthenticated,
+      setIsConnected,
+      setJustCompletedLogin,
     ],
   );
 
@@ -340,32 +351,76 @@ export function SignInWithB3Flow({
         <div className="p-4 text-center text-red-500">{refetchError}</div>
       </LoginStepContainer>
     );
-  } else if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
-    content = (
-      <LoginStepContainer partnerId={partnerId}>
-        <div className="my-8 flex min-h-[350px] items-center justify-center">
-          <Loading variant="white" size="lg" />
-        </div>
-      </LoginStepContainer>
-    );
   } else if (step === "login") {
-    // Custom strategy
-    if (strategies?.[0] === "privy") {
-      content = <SignInWithB3Privy onSuccess={handleLoginSuccess} chain={chain} />;
-    } else if (strategies) {
-      // Strategies are explicitly provided
+    // 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 = (
-        <LoginStepCustom
-          strategies={strategies}
-          chain={chain}
-          onSuccess={handleLoginSuccess}
-          onError={onError}
-          automaticallySetFirstEoa={!!automaticallySetFirstEoa}
-        />
+        <LoginStepContainer partnerId={partnerId}>
+          <TurnkeyAuthModal
+            onSuccess={async (authenticatedUser: any) => {
+              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?.({} as Account);
+            }}
+            onClose={() => {
+              // If user closes Turnkey modal, they can still use wallet connection as fallback
+              setTurnkeyAuthCompleted(true);
+            }}
+            initialEmail=""
+            skipToOtp={false}
+          />
+        </LoginStepContainer>
       );
     } else {
-      // Default to handle all strategies we support
-      content = <LoginStep chain={chain} onSuccess={handleLoginSuccess} onError={onError} />;
+      // Show loading spinner only if not in Turnkey flow
+      if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+        content = (
+          <LoginStepContainer partnerId={partnerId}>
+            <div className="my-8 flex min-h-[350px] items-center justify-center">
+              <Loading variant="white" size="lg" />
+            </div>
+          </LoginStepContainer>
+        );
+      } else {
+        // Custom strategy
+        if (strategies?.[0] === "privy") {
+          content = <SignInWithB3Privy onSuccess={handleLoginSuccess} chain={chain} />;
+        } else if (strategies) {
+          // Strategies are explicitly provided
+          content = (
+            <LoginStepCustom
+              strategies={strategies}
+              chain={chain}
+              onSuccess={handleLoginSuccess}
+              onError={onError}
+              automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+            />
+          );
+        } else {
+          // Default to handle all strategies we support
+          content = <LoginStep chain={chain} onSuccess={handleLoginSuccess} onError={onError} />;
+        }
+      }
     }
   }
 

package/src/global-account/react/hooks/index.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";