@b3dotfun/sdk 0.0.77 → 0.0.78-alpha.0

package/dist/types/global-account/react/stores/useAuthStore.d.ts

@@ -27,6 +27,8 @@ interface AuthState {
     setIsAuthenticating: (isAuthenticating: boolean) => void;
     hasStartedConnecting: boolean;
     setHasStartedConnecting: (hasStartedConnecting: boolean) => void;
+    justCompletedLogin: boolean;
+    setJustCompletedLogin: (justCompletedLogin: boolean) => void;
 }
 export declare const useAuthStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AuthState>>;
 export {};

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -10,6 +10,8 @@ import { Account } from "thirdweb/wallets";
 interface BaseModalProps {
     /** Whether to show a back button in the modal header */
     showBackButton?: boolean;
+    /** Whether the modal can be closed by clicking outside or pressing escape. Defaults to true */
+    closable?: boolean;
 }
 /**
  * Props for the Sign In With B3 modal
@@ -39,6 +41,24 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
     /** Whether to show the signers enabled modal */
     signersEnabled?: boolean;
 }
+/**
+ * Props for the Turnkey Authentication modal
+ * Handles Turnkey email/OTP authentication flow
+ */
+export interface TurnkeyAuthModalProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "turnkeyAuth";
+    /** Callback function called when authentication is successful */
+    onSuccess: (_user: any) => void;
+    /** Callback function called when modal is closed */
+    onClose: () => void;
+    /** Initial email to pre-fill */
+    initialEmail?: string;
+    /** Whether to skip directly to OTP step */
+    skipToOtp?: boolean;
+    /** Whether the modal can be closed - defaults to false for Turnkey */
+    closable?: boolean;
+}
 /**
  * Props for the Request Permissions modal
  * Used to request permission for session keys to interact with contracts
@@ -451,7 +471,7 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps;
+export type ModalContentType = SignInWithB3ModalProps | TurnkeyAuthModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps;
 /**
  * State interface for the modal store
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.77",
+  "version": "0.0.78-alpha.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -283,7 +283,7 @@
   ],
   "dependencies": {
     "@adraffy/ens-normalize": "1.11.1",
-    "@b3dotfun/b3-api": "0.0.87",
+    "@b3dotfun/b3-api": "0.0.89",
     "@b3dotfun/basement-api": "0.0.11",
     "@feathersjs/authentication-client": "5.0.33",
     "@feathersjs/feathers": "5.0.33",

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

@@ -11,6 +11,7 @@ import {
   OrderHistory,
 } from "@b3dotfun/sdk/anyspend/react";
 import { AnySpendDepositHype } from "@b3dotfun/sdk/anyspend/react/components/AnyspendDepositHype";
+import { AnySpendDepositUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendDepositUpside";
 import { AnySpendStakeUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendStakeUpside";
 import { AnySpendStakeUpsideExactIn } from "@b3dotfun/sdk/anyspend/react/components/AnySpendStakeUpsideExactIn";
 import { useGlobalAccount, useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
@@ -29,10 +30,10 @@ import NotificationsContent from "./ManageAccount/NotificationsContent";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { Send } from "./Send/Send";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
+import { TurnkeyAuthModal } from "./TurnkeyAuthModal";
 import { ToastContainer, useToastContext } from "./Toast/index";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer";
-import { AnySpendDepositUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendDepositUpside";
 
 const debug = debugB3React("B3DynamicModal");
 
@@ -72,6 +73,7 @@ export function B3DynamicModal() {
     "anySpendBuySpin",
     "anySpendOrderHistory",
     "signInWithB3",
+    "turnkeyAuth",
     "anySpendSignatureMint",
     "anySpendBondKit",
     "linkAccount",
@@ -97,6 +99,8 @@ export function B3DynamicModal() {
 
   // Check if current content type is in freestyle types
   const isFreestyleType = freestyleTypes.includes(contentType?.type as string);
+  // Determine if modal should be closable - defaults to true unless explicitly set to false
+  const isClosable = contentType?.closable !== false;
   const hideCloseButton = true;
 
   // Build content class using cn utility
@@ -107,6 +111,7 @@ export function B3DynamicModal() {
     fullWidthTypes.includes(contentType?.type as string) && "w-full",
     isFreestyleType && "b3-modal-freestyle",
     contentType?.type === "signInWithB3" && "p-0",
+    contentType?.type === "turnkeyAuth" && "p-0",
     contentType?.type === "anySpend" && "md:p-0",
     contentType?.type === "send" && "p-0",
     contentType?.type === "manageAccount" && " md:p-0 md:pt-2",
@@ -123,6 +128,8 @@ export function B3DynamicModal() {
     switch (contentType.type) {
       case "signInWithB3":
         return <SignInWithB3Flow {...contentType} />;
+      case "turnkeyAuth":
+        return <TurnkeyAuthModal {...contentType} />;
       case "requestPermissions":
         return <RequestPermissions {...contentType} />;
       case "manageAccount":
@@ -182,8 +189,17 @@ export function B3DynamicModal() {
   const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
   const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
 
+  // Create a wrapper for onOpenChange that respects closable property
+  const handleOpenChange = (open: boolean) => {
+    // Only allow closing if the modal is closable
+    if (!open && !isClosable) {
+      return;
+    }
+    setB3ModalOpen(open);
+  };
+
   return (
-    <ModalComponent open={isOpen} onOpenChange={setB3ModalOpen}>
+    <ModalComponent open={isOpen} onOpenChange={handleOpenChange}>
       <ModalContent
         className={cn(
           contentClass,
@@ -198,11 +214,18 @@ export function B3DynamicModal() {
           "mx-auto w-full max-w-md sm:max-w-lg",
         )}
         hideCloseButton={hideCloseButton}
+        onEscapeKeyDown={!isClosable ? e => e.preventDefault() : undefined}
+        onPointerDownOutside={!isClosable ? e => e.preventDefault() : undefined}
+        onInteractOutside={!isClosable ? e => e.preventDefault() : undefined}
       >
         <ModalTitle className="sr-only hidden">{contentType?.type || "Modal"}</ModalTitle>
         <ModalDescription className="sr-only hidden">{contentType?.type || "Modal Body"}</ModalDescription>
 
-        <div className={cn("no-scrollbar flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]")}>
+        <div
+          className={cn(
+            "b3-modal-content no-scrollbar dark:bg-b3-background flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]",
+          )}
+        >
           {!hideCloseButton && (
             <button
               onClick={navigateBack}

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

@@ -62,6 +62,7 @@ export function B3Provider({
   connectors,
   overrideDefaultConnectors = false,
   createClientReferenceId,
+  enableTurnkey = false,
 }: {
   theme: "light" | "dark";
   children: React.ReactNode;
@@ -80,6 +81,7 @@ export function B3Provider({
   connectors?: CreateConnectorFn[];
   overrideDefaultConnectors?: boolean;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  enableTurnkey?: boolean;
 }) {
   // Initialize Google Analytics on mount
   useEffect(() => {
@@ -107,6 +109,7 @@ export function B3Provider({
                   clientType={clientType}
                   partnerId={partnerId}
                   createClientReferenceId={createClientReferenceId}
+                  enableTurnkey={enableTurnkey}
                 >
                   <ToastContextConnector />
                   <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
@@ -137,6 +140,7 @@ export function InnerProvider({
   clientType = "socket",
   partnerId,
   createClientReferenceId,
+  enableTurnkey,
 }: {
   children: React.ReactNode;
   accountOverride?: Account;
@@ -147,17 +151,21 @@ export function InnerProvider({
   clientType?: ClientType;
   partnerId: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  enableTurnkey?: boolean;
 }) {
   const activeAccount = useActiveAccount();
   const [manuallySelectedWallet, setManuallySelectedWallet] = useState<Wallet | undefined>(undefined);
   const wallets = useConnectedWallets();
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
   const isConnected = useAuthStore(state => state.isConnected);
+  const justCompletedLogin = useAuthStore(state => state.justCompletedLogin);
   const setActiveWallet = useSetActiveWallet();
   const { user, setUser, refetchUser } = useAuthentication(partnerId);
+
   debug("@@B3Provider:isConnected", isConnected);
   debug("@@wallets", wallets);
   debug("@@B3Provider:user", user);
+  debug("@@B3Provider:justCompletedLogin", justCompletedLogin);
 
   // Use given accountOverride or activeAccount from thirdweb
   const effectiveAccount = isAuthenticated ? accountOverride || activeAccount : undefined;
@@ -215,6 +223,7 @@ export function InnerProvider({
         clientType,
         partnerId: partnerId,
         createClientReferenceId,
+        enableTurnkey,
       }}
     >
       <InnerProvider2>{children}</InnerProvider2>

package/src/global-account/react/components/B3Provider/types.ts

@@ -25,6 +25,7 @@ export interface B3ContextType {
   clientType: ClientType;
   partnerId: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  enableTurnkey?: boolean;
 }
 
 /**
@@ -45,4 +46,5 @@ export const B3Context = createContext<B3ContextType>({
   clientType: "rest",
   partnerId: "",
   createClientReferenceId: undefined,
+  enableTurnkey: false,
 });

package/src/global-account/react/components/ManageAccount/BottomNavigation.tsx

@@ -48,7 +48,7 @@ const BottomNavigation = () => {
       <TabsListPrimitive className="flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent">
         <TabTriggerPrimitive
           value="home"
-          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]"
+          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white"
         >
           <HomeIcon />
           <span className="text-b3-grey font-neue-montreal-semibold text-xs">Home</span>
@@ -56,7 +56,7 @@ const BottomNavigation = () => {
 
         <TabTriggerPrimitive
           value="swap"
-          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]"
+          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white"
           onClick={() => {
             setB3ModalContentType({
               type: "anySpend",
@@ -70,7 +70,7 @@ const BottomNavigation = () => {
 
         <TabTriggerPrimitive
           value="settings"
-          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]"
+          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white"
         >
           <SettingsIcon />
           <span className="text-b3-grey font-neue-montreal-semibold text-xs">Settings</span>

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

@@ -33,16 +33,18 @@ export function SignInWithB3Flow({
   source = "signInWithB3Button",
   signersEnabled = false,
 }: SignInWithB3ModalProps) {
-  const { automaticallySetFirstEoa } = useB3();
+  const { automaticallySetFirstEoa, user, refetchUser, enableTurnkey } = useB3();
   const [step, setStep] = useState<"login" | "permissions" | null>(source === "requestPermissions" ? null : "login");
   const [sessionKeyAdded, setSessionKeyAdded] = useState(source === "requestPermissions" ? true : false);
-  const { setB3ModalContentType, setB3ModalOpen, isOpen } = useModalStore();
+  const { setB3ModalContentType, setB3ModalOpen, isOpen, contentType } = useModalStore();
   const account = useActiveAccount();
   const isAuthenticating = useAuthStore(state => state.isAuthenticating);
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
   const isConnected = useAuthStore(state => state.isConnected);
+  const setJustCompletedLogin = useAuthStore(state => state.setJustCompletedLogin);
   const [refetchCount, setRefetchCount] = useState(0);
   const [refetchError, setRefetchError] = useState<string | null>(null);
+  const [turnkeyAuthCompleted, setTurnkeyAuthCompleted] = useState(false);
   const {
     data: signers,
     refetch: refetchSigners,
@@ -82,6 +84,109 @@ export function SignInWithB3Flow({
     }, backoffDelay);
   }, [refetchCount, refetchSigners, onError, setRefetchQueued, refetchQueued]);
 
+  // Extract the completion flow logic to be reused
+  const handlePostTurnkeyFlow = useCallback(() => {
+    debug("Running post-Turnkey flow logic");
+
+    // Check if we already have a signer for this partner
+    const hasExistingSigner = signers?.some(signer => signer.partner.id === partnerId);
+
+    if (hasExistingSigner) {
+      // Path 1: User already has a signer for this partner
+      setSessionKeyAdded(true);
+      onSessionKeySuccess?.();
+      if (closeAfterLogin) {
+        setB3ModalOpen(false);
+      } else {
+        setB3ModalContentType({
+          type: "manageAccount",
+          chain,
+          partnerId,
+        });
+      }
+    } else if (signersEnabled) {
+      // Path 2: No existing signer, but signers are enabled
+      if (source !== "requestPermissions") {
+        // Navigate to permissions step to request new signer
+        setStep("permissions");
+      } else {
+        // Already in request permissions flow, retry fetching signers
+        handleRefetchSigners();
+      }
+    } else {
+      // Path 3: No existing signer and signers are not enabled
+      // Default handling for when no signer exists and signers are not enabled
+      if (closeAfterLogin) {
+        setB3ModalOpen(false);
+      } else {
+        // if not closed, default to manage account
+        setB3ModalContentType({
+          type: "manageAccount",
+          chain,
+          partnerId,
+        });
+      }
+    }
+  }, [
+    signers,
+    partnerId,
+    onSessionKeySuccess,
+    closeAfterLogin,
+    setB3ModalOpen,
+    setB3ModalContentType,
+    chain,
+    source,
+    signersEnabled,
+    handleRefetchSigners,
+    setSessionKeyAdded,
+  ]);
+
+  // Define handleTurnkeySuccess before the useEffect that uses it
+  const handleTurnkeySuccess = useCallback(
+    async (user: any) => {
+      debug("Turnkey authentication successful - setting completed flag", { user });
+
+      // Set completed flag FIRST before any async operations
+      setTurnkeyAuthCompleted(true);
+
+      // Refetch user to update the user state with Turnkey ID
+      debug("Refetching user after Turnkey success...");
+      await refetchUser();
+      debug("User refetched successfully");
+
+      // After user data is refreshed, close Turnkey modal and go back to sign-in flow
+      debug("Switching back to signInWithB3 modal");
+      setB3ModalContentType({
+        type: "signInWithB3",
+        strategies,
+        onLoginSuccess,
+        onSessionKeySuccess,
+        onError,
+        chain,
+        sessionKeyAddress,
+        partnerId,
+        closeAfterLogin,
+        source,
+        signersEnabled,
+      });
+      // The useEffect will re-run with updated user data to complete the sign-in process
+    },
+    [
+      refetchUser,
+      setB3ModalContentType,
+      strategies,
+      onLoginSuccess,
+      onSessionKeySuccess,
+      onError,
+      chain,
+      sessionKeyAddress,
+      partnerId,
+      closeAfterLogin,
+      source,
+      signersEnabled,
+    ],
+  );
+
   // Handle post-login flow after signers are loaded
   useEffect(() => {
     debug("@@SignInWithB3Flow:useEffect", {
@@ -93,38 +198,51 @@ export function SignInWithB3Flow({
       source,
     });
 
-    if (isConnected && isAuthenticated) {
-      // Check if we already have a signer for this partner
-      const hasExistingSigner = signers?.some(signer => signer.partner.id === partnerId);
-      if (hasExistingSigner) {
-        setSessionKeyAdded(true);
-        onSessionKeySuccess?.();
-        if (closeAfterLogin) {
-          setB3ModalOpen(false);
-        } else {
-          setB3ModalContentType({
-            type: "manageAccount",
-            chain,
-            partnerId,
-          });
-        }
-      } else if (source !== "requestPermissions") {
-        if (signersEnabled) setStep("permissions");
-      } else {
-        if (signersEnabled) handleRefetchSigners();
+    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);
       }
 
-      // Default handling
-      if (closeAfterLogin) {
-        setB3ModalOpen(false);
+      // 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));
+
+      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;
       }
 
-      // if not closed, always default to manage account
-      setB3ModalContentType({
-        type: "manageAccount",
-        chain,
-        partnerId,
-      });
+      // Normal flow continues after Turnkey auth is complete (or if not needed)
+      handlePostTurnkeyFlow();
     }
   }, [
     signers,
@@ -142,6 +260,13 @@ export function SignInWithB3Flow({
     isAuthenticating,
     isAuthenticated,
     isOpen,
+    setJustCompletedLogin,
+    user,
+    enableTurnkey,
+    turnkeyAuthCompleted,
+    handleTurnkeySuccess,
+    contentType,
+    handlePostTurnkeyFlow,
   ]);
 
   debug("render", {
@@ -205,34 +330,31 @@ export function SignInWithB3Flow({
     }
   }, [chain, onError, onSessionKeySuccessEnhanced, sessionKeyAddress, setB3ModalContentType, step]);
 
+  // Render content based on current step/state
+  let content = null;
+
   // Display error if refetch limit exceeded
   if (refetchError) {
-    return (
+    content = (
       <LoginStepContainer partnerId={partnerId}>
         <div className="p-4 text-center text-red-500">{refetchError}</div>
       </LoginStepContainer>
     );
-  }
-
-  if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
-    return (
+  } 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>
     );
-  }
-
-  if (step === "login") {
+  } else if (step === "login") {
     // Custom strategy
     if (strategies?.[0] === "privy") {
-      return <SignInWithB3Privy onSuccess={handleLoginSuccess} chain={chain} />;
-    }
-
-    // Strategies are explicitly provided
-    if (strategies) {
-      return (
+      content = <SignInWithB3Privy onSuccess={handleLoginSuccess} chain={chain} />;
+    } else if (strategies) {
+      // Strategies are explicitly provided
+      content = (
         <LoginStepCustom
           strategies={strategies}
           chain={chain}
@@ -241,11 +363,11 @@ export function SignInWithB3Flow({
           automaticallySetFirstEoa={!!automaticallySetFirstEoa}
         />
       );
+    } else {
+      // Default to handle all strategies we support
+      content = <LoginStep chain={chain} onSuccess={handleLoginSuccess} onError={onError} />;
     }
-
-    // Default to handle all strategies we support
-    return <LoginStep chain={chain} onSuccess={handleLoginSuccess} onError={onError} />;
   }
 
-  return null;
+  return content;
 }