@b3dotfun/sdk 0.0.88 → 0.0.89-alpha.0

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

@@ -11,6 +11,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";
@@ -43,7 +44,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);
@@ -85,7 +88,9 @@ export function SignInWithB3Flow({
       refetchSigners();
       setRefetchQueued(false);
     }, backoffDelay);
-  }, [refetchCount, refetchSigners, onError, setRefetchQueued, refetchQueued]);
+    // State setters are stable and don't need to be in dependencies
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refetchCount, refetchSigners, onError, refetchQueued]);
 
   // Extract the completion flow logic to be reused
   const handlePostTurnkeyFlow = useCallback(() => {
@@ -157,6 +162,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({
@@ -176,7 +186,6 @@ export function SignInWithB3Flow({
     },
     [
       refetchUser,
-      setB3ModalContentType,
       strategies,
       onLoginSuccess,
       onSessionKeySuccess,
@@ -187,90 +196,102 @@ export function SignInWithB3Flow({
       closeAfterLogin,
       source,
       signersEnabled,
+      setB3ModalContentType,
+      setIsAuthenticated,
+      setIsConnected,
+      setJustCompletedLogin,
     ],
   );
 
   // Handle post-login flow after signers are loaded
-  useEffect(() => {
-    debug("@@SignInWithB3Flow:useEffect", {
-      isConnected,
-      isAuthenticating,
-      isFetchingSigners,
-      closeAfterLogin,
-      isOpen,
-      source,
-    });
+  useEffect(
+    () => {
+      debug("@@SignInWithB3Flow:useEffect", {
+        isConnected,
+        isAuthenticating,
+        isFetchingSigners,
+        closeAfterLogin,
+        isOpen,
+        source,
+      });
 
-    if (isConnected && isAuthenticated && user) {
-      // Mark that login just completed BEFORE opening manage account or closing modal
-      // This allows Turnkey modal to show (if enableTurnkey is true)
-      if (closeAfterLogin) {
-        setJustCompletedLogin(true);
-      }
+      if (isConnected && isAuthenticated && user) {
+        // Mark that login just completed BEFORE opening manage account or closing modal
+        // This allows Turnkey modal to show (if enableTurnkey is true)
+        if (closeAfterLogin) {
+          setJustCompletedLogin(true);
+        }
 
-      // Check if we should show Turnkey login form
-      // Show if enableTurnkey is true AND user just logged in AND hasn't completed Turnkey auth in this session
-      // For new users (!turnkeyId): Show email form
-      // For returning users (turnkeyId && turnkeyEmail): Auto-skip to OTP
-      // Also check that we're not already showing the Turnkey modal
-      const hasTurnkeyId = user?.partnerIds?.turnkeyId;
-      const hasTurnkeyEmail = !!user?.email;
-      const isTurnkeyModalCurrentlyOpen = contentType?.type === "turnkeyAuth";
-      const shouldShowTurnkeyModal =
-        enableTurnkey &&
-        user &&
-        !turnkeyAuthCompleted &&
-        !isTurnkeyModalCurrentlyOpen &&
-        (!hasTurnkeyId || (hasTurnkeyId && hasTurnkeyEmail));
+        // Check if we should show Turnkey login form as SECONDARY option (after wallet connection)
+        // This only applies when:
+        // - enableTurnkey={true} is set on B3Provider
+        // - NEXT_PUBLIC_TURNKEY_PRIMARY is NOT set to true (otherwise Turnkey shows as primary)
+        // - User just logged in AND hasn't completed Turnkey auth in this session
+        // For new users (!turnkeyId): Show email form
+        // For returning users (turnkeyId && turnkeyEmail): Auto-skip to OTP
+        // Also check that we're not already showing the Turnkey modal
+        const hasTurnkeyId = user?.partnerIds?.turnkeyId;
+        const hasTurnkeyEmail = !!user?.email;
+        const isTurnkeyModalCurrentlyOpen = contentType?.type === "turnkeyAuth";
+        const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
+        const shouldShowTurnkeyModal =
+          enableTurnkey &&
+          !isTurnkeyPrimary &&
+          user &&
+          !turnkeyAuthCompleted &&
+          !isTurnkeyModalCurrentlyOpen &&
+          (!hasTurnkeyId || (hasTurnkeyId && hasTurnkeyEmail));
 
-      if (shouldShowTurnkeyModal) {
-        // Extract email from user object - check partnerIds.turnkeyEmail first, then twProfiles, then user.email
-        const email = user?.email || user?.twProfiles?.find((profile: any) => profile.details?.email)?.details?.email;
+        if (shouldShowTurnkeyModal) {
+          // Extract email from user object - check partnerIds.turnkeyEmail first, then twProfiles, then user.email
+          const email = user?.email || user?.twProfiles?.find((profile: any) => profile.details?.email)?.details?.email;
 
-        // Open Turnkey modal through the modal store
-        setB3ModalContentType({
-          type: "turnkeyAuth",
-          onSuccess: handleTurnkeySuccess,
-          onClose: () => {
-            // After closing Turnkey modal, continue with the rest of the flow
-            setTurnkeyAuthCompleted(true);
-            debug("Turnkey modal closed, running post-Turnkey flow");
-            handlePostTurnkeyFlow();
-          },
-          initialEmail: email,
-          skipToOtp: !!(hasTurnkeyId && hasTurnkeyEmail),
-          closable: false, // Turnkey modal cannot be closed until auth is complete
-        });
-        return;
-      }
+          // Open Turnkey modal through the modal store
+          setB3ModalContentType({
+            type: "turnkeyAuth",
+            onSuccess: handleTurnkeySuccess,
+            onClose: () => {
+              // After closing Turnkey modal, continue with the rest of the flow
+              setTurnkeyAuthCompleted(true);
+              debug("Turnkey modal closed, running post-Turnkey flow");
+              handlePostTurnkeyFlow();
+            },
+            initialEmail: email,
+            skipToOtp: !!(hasTurnkeyId && hasTurnkeyEmail),
+            closable: false, // Turnkey modal cannot be closed until auth is complete
+          });
+          return;
+        }
 
-      // Normal flow continues after Turnkey auth is complete (or if not needed)
-      handlePostTurnkeyFlow();
-    }
-  }, [
-    signers,
-    isFetchingSigners,
-    partnerId,
-    handleRefetchSigners,
-    source,
-    closeAfterLogin,
-    setB3ModalContentType,
-    chain,
-    onSessionKeySuccess,
-    setB3ModalOpen,
-    signersEnabled,
-    isConnected,
-    isAuthenticating,
-    isAuthenticated,
-    isOpen,
-    setJustCompletedLogin,
-    user,
-    enableTurnkey,
-    turnkeyAuthCompleted,
-    handleTurnkeySuccess,
-    contentType,
-    handlePostTurnkeyFlow,
-  ]);
+        // Normal flow continues after Turnkey auth is complete (or if not needed)
+        handlePostTurnkeyFlow();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      signers,
+      isFetchingSigners,
+      partnerId,
+      handleRefetchSigners,
+      source,
+      closeAfterLogin,
+      setB3ModalContentType,
+      chain,
+      onSessionKeySuccess,
+      setB3ModalOpen,
+      signersEnabled,
+      isConnected,
+      isAuthenticating,
+      isAuthenticated,
+      isOpen,
+      user,
+      enableTurnkey,
+      turnkeyAuthCompleted,
+      // handleTurnkeySuccess, // This is causing infinite loops
+      contentType,
+      handlePostTurnkeyFlow,
+    ],
+  );
 
   debug("render", {
     step,
@@ -286,7 +307,9 @@ export function SignInWithB3Flow({
     if (closeAfterLogin && sessionKeyAdded) {
       setB3ModalOpen(false);
     }
-  }, [closeAfterLogin, sessionKeyAdded, setB3ModalOpen]);
+    // setB3ModalOpen is stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [closeAfterLogin, sessionKeyAdded]);
 
   const onSessionKeySuccessEnhanced = useCallback(() => {
     onSessionKeySuccess?.();
@@ -343,32 +366,77 @@ 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 NEXT_PUBLIC_TURNKEY_PRIMARY is true, show Turnkey modal FIRST as the primary authentication option
+    // Setting NEXT_PUBLIC_TURNKEY_PRIMARY="true" implicitly enables Turnkey
+    const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
+    const shouldShowTurnkeyFirst = isTurnkeyPrimary && !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", {
+        isTurnkeyPrimary,
+        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/components/SignInWithB3/SignInWithB3Privy.tsx

@@ -2,7 +2,7 @@ import {
   Loading,
   useAuthentication,
   useAuthStore,
-  useB3,
+  useB3Config,
   useHandleConnectWithPrivy,
 } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
@@ -19,7 +19,7 @@ interface SignInWithB3PrivyProps {
 }
 
 export function SignInWithB3Privy({ onSuccess, onError, chain }: SignInWithB3PrivyProps) {
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(chain, onSuccess);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);

package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx

@@ -1,4 +1,4 @@
-import { useAuthentication, useB3, useQueryB3 } from "@b3dotfun/sdk/global-account/react";
+import { useAuthentication, useB3Config, useQueryB3 } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { Chain } from "thirdweb";
@@ -50,7 +50,7 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
 }
 
 export function LoginStep({ onSuccess, chain }: LoginStepProps) {
-  const { partnerId, theme } = useB3();
+  const { partnerId, theme } = useB3Config();
   const wallet = ecosystemWallet(ecosystemWalletId, {
     partnerId: partnerId,
   });

package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx

@@ -7,7 +7,7 @@ import {
   LoginStepContainer,
   useAuthentication,
   useAuthStore,
-  useB3,
+  useB3Config,
   useConnect,
   WalletRow,
 } from "@b3dotfun/sdk/global-account/react";
@@ -37,7 +37,7 @@ export function LoginStepCustom({
   maxInitialWallets = 2,
   automaticallySetFirstEoa,
 }: LoginStepCustomProps) {
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const [isLoading, setIsLoading] = useState(false);
   const [showAllWallets, setShowAllWallets] = useState(false);
   const { connect } = useConnect(partnerId, chain);

package/src/global-account/react/components/StyleRoot.tsx

@@ -1,11 +1,11 @@
 import { PropsWithChildren } from "react";
-import { useB3 } from "./B3Provider/useB3";
+import { useB3Config } from "./B3Provider/useB3Config";
 
 export function StyleRoot({ children, id }: PropsWithChildren<{ id?: string }>) {
-  const { theme: b3Theme } = useB3();
+  const { theme } = useB3Config();
 
   return (
-    <div className="b3-root" id={id} data-theme={b3Theme}>
+    <div className="b3-root" id={id} data-theme={theme}>
       {children}
     </div>
   );

package/src/global-account/react/components/TurnkeyAuthModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTurnkeyAuth } from "../hooks/useTurnkeyAuth";
 
 type ModalStep = "email" | "otp" | "success";
@@ -94,17 +94,20 @@ export function TurnkeyAuthModal({ onClose, onSuccess, initialEmail = "", skipTo
     }
   };
 
+  const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
+  const walletBrand = isTurnkeyPrimary ? "Smart Wallet" : "AnySpend Wallet";
+
   return (
     <div className="font-neue-montreal p-8">
       {/* Email Step */}
       {step === "email" && (
         <>
           <h2 className="mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white">
-            Setup your AnySpend Wallet
+            Setup your {walletBrand}
           </h2>
           <div className="mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400">
             <p>
-              AnySpend uses a secure,
+              {isTurnkeyPrimary ? "We use a secure," : "AnySpend uses a secure,"}
               <br />
               embedded wallet to fund your workflows.
             </p>
@@ -158,7 +161,7 @@ export function TurnkeyAuthModal({ onClose, onSuccess, initialEmail = "", skipTo
           <h2 className="mb-4 text-center text-2xl font-bold text-gray-900 dark:text-white">2FA Security</h2>
           <div className="mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400">
             <p>
-              AnySpend uses a secure,
+              {isTurnkeyPrimary ? "We use a secure," : "AnySpend uses a secure,"}
               <br />
               embedded wallet to fund your workflows.
               <br />

package/src/global-account/react/components/custom/ManageAccountButton.tsx

@@ -1,11 +1,10 @@
-import { Button, StyleRoot, useAuthentication, useB3, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { Button, StyleRoot, useModalStore, useUser } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { SignInWithB3Props } from "../SignInWithB3/SignInWithB3";
 
 export function ManageAccountButton(props: SignInWithB3Props & { className?: string }) {
-  const { partnerId } = useB3();
   const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
-  const { isConnected } = useAuthentication(partnerId);
+  const { isConnected } = useUser();
 
   const handleClickManageAccount = () => {
     setB3ModalContentType({

package/src/global-account/react/components/index.ts

@@ -1,9 +1,8 @@
 // TODO woj: Barrel file for all components, this might be reason of bundle size issues
 // Core Components
 export { B3DynamicModal } from "./B3DynamicModal";
-export { B3Provider, InnerProvider } from "./B3Provider/B3Provider";
+export { B3Provider } from "./B3Provider/B3Provider";
 export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
-export { B3Context, type B3ContextType } from "./B3Provider/types";
 export { useB3 } from "./B3Provider/useB3";
 export { useB3Account } from "./B3Provider/useB3Account";
 export { useB3Config } from "./B3Provider/useB3Config";

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";
@@ -51,3 +52,4 @@ export { useTokensFromAddress } from "./useTokensFromAddress";
 export { useTurnkeyAuth } from "./useTurnkeyAuth";
 export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";
 export { useURLParams } from "./useURLParams";
+export { useUser } from "./useUser";