@b3dotfun/sdk 0.1.68-alpha.0 → 0.1.68-alpha.10

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

@@ -3,6 +3,7 @@ import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { Chain } from "thirdweb";
 import { ConnectEmbed, darkTheme, lightTheme } from "thirdweb/react";
+import { useMemo } from "react";
 import { Account, ecosystemWallet, SingleStepAuthArgsType } from "thirdweb/wallets";
 /**
  * Props for the LoginStep component
@@ -49,42 +50,40 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
   );
 }
 
-export function LoginStep({ onSuccess, chain }: LoginStepProps) {
-  const { partnerId, theme } = useB3Config();
-  const wallet = ecosystemWallet(ecosystemWalletId, {
-    partnerId: partnerId,
-  });
-  const { onConnect } = useAuthentication(partnerId);
+/** Inner component that only mounts when partnerId is a non-empty string.
+ *  Keeps all hooks unconditional without calling useAuthentication(""). */
+function LoginStepContent({
+  onSuccess,
+  chain,
+  partnerId,
+  theme,
+}: {
+  onSuccess: (account: Account) => Promise<void>;
+  chain: Chain;
+  partnerId: string;
+  theme: string;
+}) {
+  const wallet = useMemo(() => ecosystemWallet(ecosystemWalletId, { partnerId }), [partnerId]);
+  // skipAutoConnect: AuthenticationProvider already owns the auto-connect instance.
+  // Creating another here would cause a second authentication cycle (another 401 attempt)
+  // that makes the modal flash between spinner and blank before finally showing the login form.
+  const { onConnect } = useAuthentication(partnerId, { skipAutoConnect: true });
 
   return (
     <LoginStepContainer partnerId={partnerId}>
       <ConnectEmbed
         showThirdwebBranding={false}
+        autoConnect={false}
         client={client}
         chain={chain}
         wallets={[wallet]}
         theme={
           theme === "light"
-            ? lightTheme({
-                colors: {
-                  modalBg: "hsl(var(--b3-react-background))",
-                },
-              })
-            : darkTheme({
-                colors: {
-                  modalBg: "hsl(var(--b3-react-background))",
-                },
-              })
+            ? lightTheme({ colors: { modalBg: "hsl(var(--b3-react-background))" } })
+            : darkTheme({ colors: { modalBg: "hsl(var(--b3-react-background))" } })
         }
-        style={{
-          width: "100%",
-          height: "100%",
-          border: 0,
-        }}
-        header={{
-          title: "Sign in with B3",
-          titleIcon: "https://cdn.b3.fun/b3_logo.svg",
-        }}
+        style={{ width: "100%", height: "100%", border: 0 }}
+        header={{ title: "Sign in with B3", titleIcon: "https://cdn.b3.fun/b3_logo.svg" }}
         className="b3-login-step"
         onConnect={async (wallet, allConnectedWallets) => {
           await onConnect(wallet, allConnectedWallets);
@@ -96,3 +95,14 @@ export function LoginStep({ onSuccess, chain }: LoginStepProps) {
     </LoginStepContainer>
   );
 }
+
+export function LoginStep({ onSuccess, chain }: LoginStepProps) {
+  const { partnerId, theme } = useB3Config();
+
+  // partnerId may be undefined during the brief B3Provider hydration window.
+  // Return null rather than rendering ConnectEmbed with an invalid ecosystem
+  // wallet config (which causes a blank screen).
+  if (!partnerId) return null;
+
+  return <LoginStepContent onSuccess={onSuccess} chain={chain} partnerId={partnerId} theme={theme} />;
+}

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

@@ -43,7 +43,7 @@ export function LoginStepCustom({
   const { connect } = useConnect(partnerId, chain);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-  const { logout } = useAuthentication(partnerId);
+  const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
   const { connect: connectTW } = useConnectTW();
 
   // Split strategies into auth and wallet types

package/src/global-account/react/hooks/useAuth.ts

@@ -18,7 +18,7 @@ import { Wallet, ecosystemWallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
 import { useAccount, useConnect, useSwitchAccount } from "wagmi";
 import { LocalSDKContext } from "../components/B3Provider/LocalSDKProvider";
-import { createWagmiConfig } from "../utils/createWagmiConfig";
+import { getCachedWagmiConfig } from "../utils/createWagmiConfig";
 import { useSearchParam } from "./useSearchParamsSSR";
 import { useUserQuery } from "./useUserQuery";
 
@@ -47,7 +47,7 @@ export function useAuth() {
   const useAutoConnectLoadingPrevious = useRef(false);
   const referralCode = useSearchParam("referralCode");
   const { partnerId } = useB3Config();
-  const wagmiConfig = createWagmiConfig({ partnerId });
+  const wagmiConfig = getCachedWagmiConfig({ partnerId });
   const { connect } = useConnect();
   const activeWagmiAccount = useAccount();
   const { switchAccount } = useSwitchAccount();

package/src/global-account/react/hooks/useAuthentication.ts

@@ -24,11 +24,26 @@ import { useUserQuery } from "./useUserQuery";
 
 const debug = debugB3React("useAuthentication");
 
-export function useAuthentication(partnerId: string) {
+export function useAuthentication(partnerId: string, { skipAutoConnect = false }: { skipAutoConnect?: boolean } = {}) {
   const { onConnectCallback, onLogoutCallback } = useContext(LocalSDKContext);
   const { disconnect } = useDisconnect();
   const wallets = useConnectedWallets();
+  // Keep refs so logout() always disconnects current wallets, not stale closure values.
+  // autoConnectCore captures onConnect (and thus logout) from the first render before wallets
+  // are populated — without these refs, logout() would capture wallets=[] and disconnect nothing.
+  const walletsRef = useRef(wallets);
+  useEffect(() => {
+    walletsRef.current = wallets;
+  }, [wallets]);
   const activeWallet = useActiveWallet();
+  // Track the active wallet by ref so logout() can disconnect the exact reference
+  // stored in thirdweb's activeWalletStore. walletsRef.current (from useConnectedWallets)
+  // may hold a different object reference than what thirdweb considers "active",
+  // causing the identity check in onWalletDisconnect to fail silently.
+  const activeWalletRef = useRef(activeWallet);
+  useEffect(() => {
+    activeWalletRef.current = activeWallet;
+  }, [activeWallet]);
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -153,23 +168,31 @@ export function useAuthentication(partnerId: string) {
 
   const logout = useCallback(
     async (callback?: () => void) => {
-      if (activeWallet) {
-        debug("@@logout:activeWallet", activeWallet);
-        disconnect(activeWallet);
-        debug("@@logout:activeWallet", activeWallet);
-      }
-
-      // Log out of each wallet
-      wallets.forEach(wallet => {
-        console.log("@@logging out", wallet);
-        disconnect(wallet);
+      // Only disconnect ecosystem/smart wallets, preserve EOA wallets (e.g. MetaMask)
+      // so they remain available after re-login.
+      // Use walletsRef.current (not the stale closure value) so we always get current wallets —
+      // autoConnectCore captures logout from the first render when wallets is still [].
+      walletsRef.current.forEach(wallet => {
+        debug("@@logout:wallet", wallet.id);
+        if (wallet.id.startsWith("ecosystem.") || wallet.id === "smart") {
+          disconnect(wallet);
+        }
       });
 
-      // Delete localStorage thirdweb:connected-wallet-ids
-      // https://npc-labs.slack.com/archives/C070E6HNG85/p1750185115273099
+      // Always disconnect the active wallet to clear thirdweb's activeAccountStore.
+      // Without this, any auto-reconnected wallet (e.g. Coinbase Wallet, MetaMask)
+      // keeps activeAccount set, and ConnectEmbed renders show=false (blank modal).
+      // We use the exact reference from activeWalletRef because thirdweb's
+      // onWalletDisconnect uses strict identity (===) to decide whether to clear
+      // activeAccountStore.
+      if (activeWalletRef.current) {
+        debug("@@logout:disconnecting active wallet", activeWalletRef.current.id);
+        disconnect(activeWalletRef.current);
+      }
+
+      // Clear user-specific storage but preserve wallet connection state
+      // so EOA wallets (e.g. MetaMask) can auto-reconnect on next login
       if (typeof localStorage !== "undefined") {
-        localStorage.removeItem("thirdweb:connected-wallet-ids");
-        localStorage.removeItem("wagmi.store");
         localStorage.removeItem("lastAuthProvider");
         localStorage.removeItem("b3-user");
       }
@@ -179,6 +202,9 @@ export function useAuthentication(partnerId: string) {
 
       setIsAuthenticated(false);
       setIsConnected(false);
+      // Reset isAuthenticating so any in-flight page-load auto-connect that set it true
+      // does not keep the login modal spinner stuck after logout() is called.
+      setIsAuthenticating(false);
       setUser();
       callback?.();
 
@@ -186,34 +212,53 @@ export function useAuthentication(partnerId: string) {
         await onLogoutCallback();
       }
     },
-    [activeWallet, disconnect, wallets, setIsAuthenticated, setUser, setIsConnected, onLogoutCallback],
+    // wallets intentionally omitted — we use walletsRef.current so this callback stays stable
+    // and always operates on current wallets even when captured in stale closures.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disconnect, setIsAuthenticated, setIsAuthenticating, setUser, setIsConnected, onLogoutCallback],
   );
 
   const onConnect = useCallback(
     async (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => {
       debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
+      const ecosystemWalletToDisconnect = allConnectedWallets.find(w => w.id.startsWith("ecosystem."));
       try {
-        const wallet = allConnectedWallets.find(wallet => wallet.id.startsWith("ecosystem."));
-
-        if (!wallet) {
+        if (!ecosystemWalletToDisconnect) {
           throw new Error("No smart wallet found during auto-connect");
         }
 
-        debug("@@useAuthentication:onConnect", { wallet });
+        debug("@@useAuthentication:onConnect", { wallet: ecosystemWalletToDisconnect });
         setHasStartedConnecting(true);
         setIsConnected(true);
         setIsAuthenticating(true);
-        await setActiveWallet(wallet);
-        const userAuth = await authenticateUser(wallet);
+        await setActiveWallet(ecosystemWalletToDisconnect);
+        const userAuth = await authenticateUser(ecosystemWalletToDisconnect);
 
         if (userAuth && onConnectCallback) {
-          await onConnectCallback(wallet, userAuth.accessToken);
+          await onConnectCallback(ecosystemWalletToDisconnect, userAuth.accessToken);
         }
       } catch (error) {
         debug("@@useAuthentication:onConnect:failed", { error });
         setIsAuthenticated(false);
         setUser(undefined);
-
+        // Directly disconnect the ecosystem wallet we set active above.
+        // We can't rely on logout()'s activeWalletRef here because it's updated
+        // via useEffect (deferred until after paint), but this callback may run
+        // entirely within a single React commit cycle — before the ref updates.
+        if (ecosystemWalletToDisconnect) {
+          debug("@@useAuthentication:onConnect:disconnecting ecosystem wallet", ecosystemWalletToDisconnect.id);
+          disconnect(ecosystemWalletToDisconnect);
+        }
+        // Also disconnect the wallet that autoConnectCore set as active.
+        // When only a non-ecosystem wallet (e.g. MetaMask) auto-reconnects,
+        // ecosystemWalletToDisconnect is undefined, so the block above is skipped.
+        // But autoConnectCore already set this wallet as thirdweb's activeWallet,
+        // leaving activeAccount set. ConnectEmbed checks show = !activeAccount,
+        // so if we don't clear it, the login form renders blank.
+        if (_walleAutoConnectedWith && _walleAutoConnectedWith !== ecosystemWalletToDisconnect) {
+          debug("@@useAuthentication:onConnect:disconnecting auto-connected wallet", _walleAutoConnectedWith.id);
+          disconnect(_walleAutoConnectedWith);
+        }
         await logout();
       } finally {
         setIsAuthenticating(false);
@@ -229,6 +274,7 @@ export function useAuthentication(partnerId: string) {
       isAuthenticated,
       isAuthenticating,
       isConnected,
+      disconnect,
       setHasStartedConnecting,
       setIsConnected,
       setIsAuthenticating,
@@ -243,9 +289,13 @@ export function useAuthentication(partnerId: string) {
 
   const { isLoading: useAutoConnectLoading } = useAutoConnect({
     client,
-    wallets: [wallet],
+    // When skipAutoConnect is true (e.g. LoginStepContent, SignInWithB3Flow), pass an empty
+    // wallets array so useAutoConnect completes immediately without firing onConnect.
+    // Only AuthenticationProvider (the primary instance) should own auto-connect.
+    wallets: skipAutoConnect ? [] : [wallet],
     onConnect,
     onTimeout: () => {
+      if (skipAutoConnect) return;
       logout().catch(error => {
         debug("@@useAuthentication:logout on timeout failed", { error });
       });
@@ -253,14 +303,17 @@ export function useAuthentication(partnerId: string) {
   });
 
   /**
-   * useAutoConnectLoading starts as false
+   * useAutoConnectLoading starts as false.
+   * Only the primary (non-skip) instance manages isAuthenticating via this effect
+   * to avoid race conditions when multiple useAuthentication instances are mounted.
    */
   useEffect(() => {
+    if (skipAutoConnect) return;
     if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
       setIsAuthenticating(false);
     }
     useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
-  }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating]);
+  }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating, skipAutoConnect]);
 
   const isReady = isAuthenticated && !isAuthenticating;
 

package/src/global-account/react/hooks/useGetAllTWSigners.tsx

@@ -130,7 +130,8 @@ export function useGetAllTWSigners({ chain, accountAddress, queryOptions }: UseG
       });
       return result;
     },
-    enabled: Boolean(chain && accountAddress),
+    // Respect queryOptions.enabled if explicitly set (e.g. signersEnabled=false from SignInWithB3Flow)
+    enabled: queryOptions?.enabled !== false && Boolean(chain && accountAddress),
     refetchOnMount: true,
     refetchOnWindowFocus: true,
     refetchOnReconnect: true,

package/src/global-account/react/stores/useModalStore.ts

@@ -712,6 +712,10 @@ interface ModalState {
   setLinkingState: (isLinking: boolean, method?: string | null) => void;
   /** Function to update closable property of current content without adding to history */
   setClosable: (closable: boolean) => void;
+  /** Whether a third-party iframe (e.g. Persona KYC) is currently active over the modal */
+  personaActive: boolean;
+  /** Function to mark a third-party iframe as active/inactive */
+  setPersonaActive: (active: boolean) => void;
 }
 
 /**
@@ -755,4 +759,6 @@ export const useModalStore = create<ModalState>(set => ({
     set(state => ({
       contentType: state.contentType ? { ...state.contentType, closable } : null,
     })),
+  personaActive: false,
+  setPersonaActive: (active: boolean) => set({ personaActive: active }),
 }));

package/src/global-account/react/utils/createWagmiConfig.tsx

@@ -38,3 +38,21 @@ export function createWagmiConfig(options: CreateWagmiConfigOptions) {
     connectors: finalConnectors,
   });
 }
+
+/** Module-level cache — wagmi configs must not be recreated on every render. */
+const wagmiConfigCache = new Map<string, ReturnType<typeof createWagmiConfig>>();
+
+/**
+ * Returns a cached wagmi config for the given partnerId.
+ * Use this instead of calling createWagmiConfig() directly inside React components or hooks
+ * to avoid registering duplicate EventEmitter listeners on every render.
+ */
+export function getCachedWagmiConfig(options: CreateWagmiConfigOptions) {
+  const key = options.partnerId;
+  let config = wagmiConfigCache.get(key);
+  if (!config) {
+    config = createWagmiConfig(options);
+    wagmiConfigCache.set(key, config);
+  }
+  return config;
+}