@b3dotfun/sdk 0.0.47 → 0.0.48-alpha.0

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

@@ -5,7 +5,6 @@ import {
   useB3,
   useGetAllTWSigners,
   useModalStore,
-  useSiwe,
 } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useCallback, useEffect, useState } from "react";
@@ -31,19 +30,16 @@ export function SignInWithB3Flow({
   sessionKeyAddress,
   partnerId,
   closeAfterLogin = false,
-  loginWithSiwe = false,
   source = "signInWithB3Button",
   signersEnabled = false,
 }: SignInWithB3ModalProps) {
-  const { setUser, automaticallySetFirstEoa } = useB3();
+  const { automaticallySetFirstEoa } = 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 account = useActiveAccount();
-  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const isAuthenticating = useAuthStore(state => state.isAuthenticating);
   const isConnected = useAuthStore(state => state.isConnected);
-  const setIsConnected = useAuthStore(state => state.setIsConnected);
   const [refetchCount, setRefetchCount] = useState(0);
   const [refetchError, setRefetchError] = useState<string | null>(null);
   const {
@@ -57,7 +53,6 @@ export function SignInWithB3Flow({
       enabled: signersEnabled,
     },
   });
-  const { authenticate } = useSiwe();
   const [refetchQueued, setRefetchQueued] = useState(false);
 
   // Enhanced refetchSigners function that tracks number of attempts
@@ -175,13 +170,11 @@ export function SignInWithB3Flow({
       sessionKeyAddress,
       partnerId,
       closeAfterLogin,
-      loginWithSiwe,
       source: "requestPermissions",
     });
   }, [
     chain,
     closeAfterLogin,
-    loginWithSiwe,
     onError,
     onLoginSuccess,
     onSessionKeySuccess,
@@ -193,20 +186,9 @@ export function SignInWithB3Flow({
 
   const handleLoginSuccess = useCallback(
     async (account: Account) => {
-      debug("Authenticating with B3 via SIWE");
-      setIsConnected(true);
-      if (loginWithSiwe) {
-        debug("setIsAuthenticating:true:1");
-        setIsAuthenticating(true);
-        const userAuth = await authenticate(account, partnerId);
-        setUser(userAuth.user);
-      }
-      debug("handleLoginSuccess:account", account);
       onLoginSuccess?.(account);
-      debug("setIsAuthenticating:false:1");
-      setIsAuthenticating(false);
     },
-    [loginWithSiwe, onLoginSuccess, authenticate, partnerId, setUser, setIsConnected, setIsAuthenticating],
+    [onLoginSuccess],
   );
 
   useEffect(() => {
@@ -243,7 +225,7 @@ export function SignInWithB3Flow({
   if (step === "login") {
     // Custom strategy
     if (strategies?.[0] === "privy") {
-      return <SignInWithB3Privy onSuccess={handleLoginSuccess} partnerId={partnerId} chain={chain} />;
+      return <SignInWithB3Privy onSuccess={handleLoginSuccess} chain={chain} />;
     }
 
     // Strategies are explicitly provided
@@ -251,7 +233,6 @@ export function SignInWithB3Flow({
       return (
         <LoginStepCustom
           strategies={strategies}
-          partnerId={partnerId}
           chain={chain}
           onSuccess={handleLoginSuccess}
           onError={onError}
@@ -261,7 +242,7 @@ export function SignInWithB3Flow({
     }
 
     // Default to handle all strategies we support
-    return <LoginStep partnerId={partnerId} chain={chain} onSuccess={handleLoginSuccess} onError={onError} />;
+    return <LoginStep chain={chain} onSuccess={handleLoginSuccess} onError={onError} />;
   }
 
   return null;

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

@@ -2,6 +2,7 @@ import {
   Loading,
   useAuthentication,
   useAuthStore,
+  useB3,
   useHandleConnectWithPrivy,
 } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
@@ -14,12 +15,12 @@ interface SignInWithB3PrivyProps {
   onError?: (error: Error) => Promise<void>;
   onSuccess: (account: Account) => Promise<void>;
   accessToken?: string;
-  partnerId: string;
   chain: Chain;
 }
 
-export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: SignInWithB3PrivyProps) {
-  const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(partnerId, chain, onSuccess);
+export function SignInWithB3Privy({ onSuccess, onError, chain }: SignInWithB3PrivyProps) {
+  const { partnerId } = useB3();
+  const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(chain, onSuccess);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const { logout } = useAuthentication(partnerId);

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

@@ -1,6 +1,5 @@
-import { useAuthentication, useAuthStore, useB3, useQueryB3 } from "@b3dotfun/sdk/global-account/react";
+import { useAuthentication, useB3, useQueryB3 } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
-import { debug } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { Chain } from "thirdweb";
 import { ConnectEmbed, darkTheme, lightTheme } from "thirdweb/react";
@@ -14,7 +13,6 @@ interface LoginStepProps {
   /** Optional callback function called when an error occurs */
   onError?: (error: Error) => Promise<void>;
   /** Partner ID used for authentication */
-  partnerId: string;
   /** Blockchain chain information */
   chain: Chain;
   /** Optional authentication strategy options */
@@ -56,15 +54,12 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
   );
 }
 
-export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepProps) {
+export function LoginStep({ onSuccess, chain }: LoginStepProps) {
+  const { partnerId, theme } = useB3();
   const wallet = ecosystemWallet(ecosystemWalletId, {
     partnerId: partnerId,
   });
-
-  const { theme } = useB3();
-  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
-  const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-  const { logout } = useAuthentication(partnerId);
+  const { onConnect } = useAuthentication(partnerId);
 
   return (
     <LoginStepContainer partnerId={partnerId}>
@@ -86,54 +81,21 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
                 },
               })
         }
-        autoConnect
         style={{
           width: "100%",
           height: "100%",
           border: 0,
         }}
-        // TODO: Integrate with SIWE in useSIWE
-        // auth={{
-        //   isLoggedIn: async (address) => {
-        //     console.log("checking if logged in!", { address });
-        //     return await isLoggedIn();
-        //   },
-        //   doLogin: async (params) => {
-        //     console.log("logging in!");
-        //     await login(params);
-        //   },
-        //   getLoginPayload: async ({ address }) =>
-        //     generatePayload({ address }),
-        //   doLogout: async () => {
-        //     console.log("logging out!");
-        //     await logout();
-        //   },
-        // }}
         header={{
           title: "Sign in with B3",
           titleIcon: "https://cdn.b3.fun/b3_logo.svg",
         }}
         className="b3-login-step"
         onConnect={async wallet => {
-          try {
-            setIsAuthenticating(true);
-            debug("setIsAuthenticating:true:6");
-
-            const account = wallet.getAccount();
-            if (!account) throw new Error("No account found");
-
-            await onSuccess(account);
-            setIsAuthenticated(true);
-
-            console.log("connected!", wallet.id);
-          } catch (error) {
-            await onError?.(error as Error);
-            await logout();
-            setIsAuthenticated(false);
-          } finally {
-            debug("setIsAuthenticating:false:6");
-            setIsAuthenticating(false);
-          }
+          await onConnect(wallet);
+          const account = wallet.getAccount();
+          if (!account) throw new Error("No account found");
+          await onSuccess(account);
         }}
       />
     </LoginStepContainer>

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

@@ -7,6 +7,7 @@ import {
   LoginStepContainer,
   useAuthentication,
   useAuthStore,
+  useB3,
   useConnect,
   WalletRow,
 } from "@b3dotfun/sdk/global-account/react";
@@ -21,7 +22,6 @@ interface LoginStepCustomProps {
   automaticallySetFirstEoa: boolean;
   onSuccess: (account: Account) => Promise<void>;
   onError?: (error: Error) => Promise<void>;
-  partnerId: string;
   chain: Chain;
   strategies: AllowedStrategy[];
   maxInitialWallets?: number;
@@ -32,12 +32,12 @@ const debug = debugB3React("LoginStepCustom");
 export function LoginStepCustom({
   onSuccess,
   onError,
-  partnerId,
   chain,
   strategies,
   maxInitialWallets = 2,
   automaticallySetFirstEoa,
 }: LoginStepCustomProps) {
+  const { partnerId } = useB3();
   const [isLoading, setIsLoading] = useState(false);
   const [showAllWallets, setShowAllWallets] = useState(false);
   const { connect } = useConnect(partnerId, chain);

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

@@ -1,10 +1,11 @@
-import { Button, StyleRoot, useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { Button, StyleRoot, useAuthentication, useB3, useModalStore } 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(props.partnerId, props.loginWithSiwe);
+  const { isConnected } = useAuthentication(partnerId);
 
   const handleClickManageAccount = () => {
     setB3ModalContentType({

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

@@ -1,124 +1,185 @@
 import app from "@b3dotfun/sdk/global-account/app";
 import { authenticateWithB3JWT } from "@b3dotfun/sdk/global-account/bsmnt";
-import { useAuthStore, useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useAuthStore, useSiwe } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
-import { b3MainnetThirdWeb } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { useEffect, useRef } from "react";
-import { useActiveWallet, useAutoConnect, useConnectedWallets, useDisconnect } from "thirdweb/react";
-import { ecosystemWallet } from "thirdweb/wallets";
+import { ConnectionOptions } from "@thirdweb-dev/wagmi-adapter";
+import { getConnectors } from "@wagmi/core";
+import { useCallback, useEffect, useRef } from "react";
+import {
+  useActiveWallet,
+  useAutoConnect,
+  useConnectedWallets,
+  useDisconnect,
+  useSetActiveWallet,
+} from "thirdweb/react";
+import { ecosystemWallet, Wallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
-import { useConnect } from "./useConnect";
-import { useSiwe } from "./useSiwe";
+import { useAccount, useConnect, useSwitchAccount } from "wagmi";
+import { useUserQuery } from "./useUserQuery";
+import { useWagmiConfig } from "./useWagmiConfig";
 
 const debug = debugB3React("useAuthentication");
 
-export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
+export function useAuthentication(partnerId: string) {
   const { disconnect } = useDisconnect();
   const wallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
-  const { authenticate } = useSiwe();
-  const { setUser } = useB3();
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-  const setIsConnecting = useAuthStore(state => state.setIsConnecting);
   const setIsConnected = useAuthStore(state => state.setIsConnected);
   const isConnecting = useAuthStore(state => state.isConnecting);
   const isConnected = useAuthStore(state => state.isConnected);
-  const useAutoConnectLoadingPrevious = useRef(false);
-  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const isAuthenticating = useAuthStore(state => state.isAuthenticating);
-  const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
+  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setHasStartedConnecting = useAuthStore(state => state.setHasStartedConnecting);
-  const { connect } = useConnect(partnerId, b3MainnetThirdWeb);
+  const setActiveWallet = useSetActiveWallet();
+  const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
+  const { authenticate } = useSiwe();
+  const { user, setUser } = useUserQuery();
+  const useAutoConnectLoadingPrevious = useRef(false);
+  const wagmiConfig = useWagmiConfig(partnerId);
+  const { connect } = useConnect();
+  const activeWagmiAccount = useAccount();
+  const { switchAccount } = useSwitchAccount();
+  debug("@@activeWagmiAccount", activeWagmiAccount);
 
   const wallet = ecosystemWallet(ecosystemWalletId, {
     partnerId: partnerId,
   });
 
-  const { isLoading: useAutoConnectLoading } = useAutoConnect({
-    client,
-    wallets: [wallet],
-    onConnect: async wallet => {
-      setHasStartedConnecting(true);
-
-      try {
-        setIsConnected(true);
-        if (!loginWithSiwe) {
-          debug("Skipping SIWE login", { loginWithSiwe });
-          setIsAuthenticated(true);
-
-          setIsAuthenticating(false);
+  const syncWagmi = useCallback(async () => {
+    function syncWagmiFunc() {
+      const connectors = getConnectors(wagmiConfig);
+      debug("@@syncWagmi", {
+        connectors,
+        wallets,
+      });
+
+      // For each that matchs a TW wallet on wallets, connect to the wagmi connector
+      // or, since ecosystem wallets is separate, connect those via in-app-wallet from wagmi
+      connectors.forEach(async connector => {
+        const twWallet = wallets.find(wallet => wallet.id === connector.id || connector.id === "in-app-wallet");
+
+        // If no TW wallet, do not prompt the user to connect
+        if (!twWallet) {
           return;
         }
-        debug("setIsAuthenticating:true:4");
-        const account = await wallet.getAccount();
-        if (!account) {
-          throw new Error("No account found during auto-connect");
+
+        // Metamask will prompt to connect, we can just switch accounts here.
+        if (connector.id === "io.metamask") {
+          return switchAccount({ connector });
         }
 
-        // Try to re-authenticate first
-        try {
-          const userAuth = await app.reAuthenticate();
-          setUser(userAuth.user);
-          setIsAuthenticated(true);
-          setIsAuthenticating(false);
-          debug("Re-authenticated successfully", { userAuth });
-
-          // Authenticate on BSMNT with B3 JWT
-          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
-          console.log("@@b3Jwt", b3Jwt);
-        } catch (error) {
-          // If re-authentication fails, try fresh authentication
-          debug("Re-authentication failed, attempting fresh authentication");
-          const userAuth = await authenticate(account, partnerId);
-          setUser(userAuth.user);
-          setIsAuthenticated(true);
-          setIsAuthenticating(false);
-          debug("Fresh authentication successful", { userAuth });
-
-          // Authenticate on BSMNT with B3 JWT
-          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
-          console.log("@@b3Jwt", b3Jwt);
+        if (
+          // If it's not an in-app wallet or it is the ecosystem wallet, connect
+          connector.id !== "in-app-wallet" ||
+          (connector.id === "in-app-wallet" && twWallet.id === ecosystemWalletId)
+        ) {
+          try {
+            const options = {
+              wallet: twWallet, // the connected wallet
+            } satisfies ConnectionOptions;
+            debug("@@syncWagmi:connecting", { twWallet, connector });
+            connect({
+              connector,
+              ...options,
+            });
+          } catch (error) {
+            console.error("@@syncWagmi:error", error);
+          }
+        } else {
+          debug("@@syncWagmi:not-connecting", connector);
         }
+      });
+    }
+    syncWagmiFunc();
+    // wagmi config shouldn't change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [partnerId, wallets]);
+
+  useEffect(() => {
+    syncWagmi();
+  }, [wallets, syncWagmi]);
+
+  const authenticateUser = useCallback(
+    async (wallet?: Wallet) => {
+      setHasStartedConnecting(true);
+
+      const account = wallet ? wallet.getAccount() : activeWallet?.getAccount();
+      if (!account) {
+        throw new Error("No account found during auto-connect");
+      }
+      if (!account) {
+        throw new Error("No account found during auto-connect");
+      }
+
+      // Try to re-authenticate first
+      try {
+        const userAuth = await app.reAuthenticate();
+        setUser(userAuth.user);
+        setIsAuthenticated(true);
+        setIsAuthenticating(false);
+        debug("Re-authenticated successfully", { userAuth });
+
+        // Authenticate on BSMNT with B3 JWT
+        const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+        debug("@@b3Jwt", b3Jwt);
       } catch (error) {
-        debug("Auto-connect authentication failed", { error });
-        setIsAuthenticated(false);
-        debug("setIsAuthenticating:false:4");
-        setUser();
+        // If re-authentication fails, try fresh authentication
+        debug("Re-authentication failed, attempting fresh authentication");
+        const userAuth = await authenticate(account, partnerId);
+        setUser(userAuth.user);
+        setIsAuthenticated(true);
+        setIsAuthenticating(false);
+        debug("Fresh authentication successful", { userAuth });
+
+        // Authenticate on BSMNT with B3 JWT
+        const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+        debug("@@b3Jwt", b3Jwt);
       }
-      setIsAuthenticating(false);
     },
-  });
+    [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting],
+  );
 
-  /**
-   * useAutoConnectLoading starts as false
-   */
-  useEffect(() => {
-    if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
-      setIsAuthenticating(false);
-    }
-    useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
-  }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating]);
+  const onConnect = useCallback(
+    async (wallet: Wallet) => {
+      debug("@@useAuthentication:onConnect", { wallet });
 
-  // Ensure isAuthenticating stays true until we're fully ready
-  useEffect(() => {
-    if (useAutoConnectLoading) {
-      setIsConnecting(true);
-    } else if (!isAuthenticated) {
-      // Only set isAuthenticating to false if we're not authenticated
-      // This prevents the flicker state where both isAuthenticating and isAuthenticated are false
-      const timeout = setTimeout(() => {
-        debug("setIsAuthenticating:false:5a");
-        setIsConnecting(false);
-      }, 100); // Add a small delay to prevent quick flickers
-      return () => clearTimeout(timeout);
-    } else {
-      debug("setIsAuthenticating:false:5b");
-      setIsConnecting(false);
-    }
-  }, [useAutoConnectLoading, isAuthenticated, setIsConnecting, setIsConnected]);
+      try {
+        setHasStartedConnecting(true);
+        setIsConnected(true);
+        setIsAuthenticating(true);
+        await setActiveWallet(wallet);
+        await authenticateUser(wallet);
+      } catch (error) {
+        debug("@@useAuthentication:onConnect:failed", { error });
+        setIsAuthenticated(false);
+        setUser(undefined);
+      } finally {
+        setIsAuthenticating(false);
+      }
+
+      debug({
+        isAuthenticated,
+        isAuthenticating,
+        isConnected,
+      });
+    },
+    [
+      authenticateUser,
+      isAuthenticated,
+      isAuthenticating,
+      isConnected,
+      setActiveWallet,
+      setHasStartedConnecting,
+      setIsAuthenticated,
+      setIsAuthenticating,
+      setIsConnected,
+      setUser,
+    ],
+  );
 
   const logout = async (callback?: () => void) => {
     if (activeWallet) {
@@ -150,7 +211,23 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
     callback?.();
   };
 
-  const isReady = isAuthenticated && !useAutoConnectLoading && !isAuthenticating;
+  const { isLoading: useAutoConnectLoading } = useAutoConnect({
+    client,
+    wallets: [wallet],
+    onConnect: onConnect,
+  });
+
+  /**
+   * useAutoConnectLoading starts as false
+   */
+  useEffect(() => {
+    if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
+      setIsAuthenticating(false);
+    }
+    useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
+  }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating]);
+
+  const isReady = isAuthenticated && !isAuthenticating;
 
   return {
     logout,
@@ -160,7 +237,11 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
     isConnected,
     wallet,
     preAuthenticate,
-    connect,
+    connect: onConnect,
     isAuthenticating,
+    onConnect,
+    user,
+    refetchUser: authenticateUser,
+    setUser,
   };
 }

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

@@ -1,4 +1,4 @@
-import { useConnect } from "@b3dotfun/sdk/global-account/react";
+import { useB3, useConnect } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useIdentityToken, usePrivy } from "@privy-io/react-auth";
 import { useCallback, useRef, useState } from "react";
@@ -10,7 +10,8 @@ const debug = debugB3React("@@b3:useHandleConnectWithPrivy");
  * This essentially wraps our useConnect hook to handle the Privy auth flow.
  * Currently, this is for the basement-privy strategy
  */
-export function useHandleConnectWithPrivy(partnerId: string, chain?: Chain, onSuccess?: (account: Account) => void) {
+export function useHandleConnectWithPrivy(chain?: Chain, onSuccess?: (account: Account) => void) {
+  const { partnerId } = useB3();
   if (!chain) {
     throw new Error("Chain is required");
   }