@b3dotfun/sdk 0.0.87-alpha.1 → 0.0.87-alpha.3

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

@@ -1162,47 +1162,44 @@ function AnySpendInner({
           )}
 
           {/* Reverse swap direction section */}
-          <Button
-            variant="ghost"
-            className={cn(
-              "border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
-              isBuyMode && "top-[calc(50%+56px)] cursor-default",
-              activeTab === "fiat" && "hidden",
-              selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50",
-            )}
-            onClick={() => {
-              if (activeTab === "fiat" || isBuyMode) {
-                return;
-              }
-
-              // Prevent swapping if destination is Hyperliquid (only supported as destination, not source)
-              if (selectedDstChainId === HYPERLIQUID_CHAIN_ID) {
-                return;
-              }
-
-              // Swap chain selections
-              const tempSrcChainId = selectedSrcChainId;
-              const tempDstChainId = selectedDstChainId;
-              setSelectedSrcChainId(tempDstChainId);
-              setSelectedDstChainId(tempSrcChainId);
-
-              // Swap token selections
-              const tempSrcToken = selectedSrcToken;
-              const tempDstToken = selectedDstToken;
-              setSelectedSrcToken(tempDstToken);
-              setSelectedDstToken(tempSrcToken);
-
-              // Swap amounts
-              const tempSrcAmount = srcAmount;
-              const tempDstAmount = dstAmount;
-              setSrcAmount(tempDstAmount);
-              setDstAmount(tempSrcAmount);
-            }}
-          >
-            <div className="relative flex items-center justify-center transition-opacity">
-              <ArrowDown className="text-as-primary/50 h-5 w-5" />
+          {activeTab === "crypto" && (
+            <div className="z-10 -my-6 flex justify-center">
+              <Button
+                variant="ghost"
+                className={cn(
+                  "border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
+                  isBuyMode && "cursor-default",
+                  selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50",
+                )}
+                onClick={() => {
+                  if (isBuyMode) {
+                    return;
+                  }
+
+                  // Prevent swapping if destination is Hyperliquid (only supported as destination, not source)
+                  if (selectedDstChainId === HYPERLIQUID_CHAIN_ID) {
+                    return;
+                  }
+
+                  // Swap chain selections
+                  setSelectedSrcChainId(selectedDstChainId);
+                  setSelectedDstChainId(selectedSrcChainId);
+
+                  // Swap token selections
+                  setSelectedSrcToken(selectedDstToken);
+                  setSelectedDstToken(selectedSrcToken);
+
+                  // Swap amounts
+                  setSrcAmount(dstAmount);
+                  setDstAmount(srcAmount);
+                }}
+              >
+                <div className="relative flex items-center justify-center transition-opacity">
+                  <ArrowDown className="text-as-primary/50 h-5 w-5" />
+                </div>
+              </Button>
             </div>
-          </Button>
+          )}
 
           {/* Receive section - Hidden when fiat tab is active */}
           {/* Receive section - Hidden when fiat tab is active */}

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

@@ -336,8 +336,6 @@ function AnySpendCustomInner({
     }
   }, [srcChainId, tokenList, getTokenWithBalance, nativeTokens, fungibleTokens, dirtySelectSrcToken, dstToken.address]);
 
-  // const { account: isAuthenticated } = useB3();
-
   const getRelayQuoteRequest = useMemo(() => {
     return generateGetRelayQuoteRequest({
       orderType: orderType,

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

@@ -1,7 +1,14 @@
 "use client";
 
 import app from "@b3dotfun/sdk/global-account/app";
-import { Button, IPFSMediaRenderer, toast, useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
+import {
+  Button,
+  IPFSMediaRenderer,
+  toast,
+  useAuthentication,
+  useB3Config,
+  useProfile,
+} from "@b3dotfun/sdk/global-account/react";
 import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
@@ -50,7 +57,8 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   const [zoom, setZoom] = useState(1);
   const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const { setUser, user, partnerId } = useB3();
+  const { partnerId } = useB3Config();
+  const { user, setUser } = useAuthentication(partnerId);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const contentType = useModalStore(state => state.contentType);
 

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

@@ -6,7 +6,6 @@ import { Account, Wallet } from "thirdweb/wallets";
 import { ClientType } from "../../../client-manager";
 
 import { WagmiProvider } from "wagmi";
-import { useAuthentication } from "../../hooks/useAuthentication";
 import { createWagmiConfig } from "../../utils/createWagmiConfig";
 import { LocalSDKProvider } from "./LocalSDKProvider";
 import { B3Context, B3ContextType } from "./types";
@@ -89,7 +88,7 @@ export function InnerProvider({
   rpcUrls?: Record<number, string>;
 }) {
   const activeAccount = useActiveAccount();
-  const { user, setUser, refetchUser } = useAuthentication(partnerId);
+  //const { user, setUser, refetchUser } = useAuthentication(partnerId);
   const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls });
 
   // Use given accountOverride or activeAccount from thirdweb
@@ -100,12 +99,12 @@ export function InnerProvider({
       <QueryClientProvider client={queryClient}>
         <B3Context.Provider
           value={{
-            account: effectiveAccount,
+            //account: effectiveAccount,
             automaticallySetFirstEoa: false,
-            setWallet: () => {},
+            //setWallet: () => {},
             wallet: undefined,
-            user,
-            setUser,
+            //user,
+            //setUser,
             initialized: true,
             ready: !!effectiveAccount,
             environment,
@@ -113,7 +112,7 @@ export function InnerProvider({
             theme,
             clientType,
             partnerId,
-            refetchUser,
+            //refetchUser,
           }}
         >
           {children}

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

@@ -1,25 +1,14 @@
 import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
 import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
-import {
-  RelayKitProviderWrapper,
-  TooltipProvider,
-  useAuthentication,
-  useAuthStore,
-} from "@b3dotfun/sdk/global-account/react";
+import { RelayKitProviderWrapper, TooltipProvider, useAuthStore } from "@b3dotfun/sdk/global-account/react";
+import { useAutoSelectWallet } from "@b3dotfun/sdk/global-account/react/hooks/useAutoSelectWallet";
 import { createWagmiConfig } from "@b3dotfun/sdk/global-account/react/utils/createWagmiConfig";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
 import { loadGA4Script } from "@b3dotfun/sdk/global-account/utils/analytics";
-import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import "@relayprotocol/relay-kit-ui/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  getLastAuthProvider,
-  ThirdwebProvider,
-  useActiveAccount,
-  useConnectedWallets,
-  useSetActiveWallet,
-} from "thirdweb/react";
+import { useEffect, useMemo } from "react";
+import { ThirdwebProvider, useActiveAccount } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
 import { CreateConnectorFn, WagmiProvider } from "wagmi";
 import { ClientType, setClientType } from "../../../client-manager";
@@ -28,8 +17,6 @@ import { setToastContext, ToastProvider, useToastContext } from "../Toast/index"
 import { LocalSDKProvider } from "./LocalSDKProvider";
 import { B3Context, B3ContextType } from "./types";
 
-const debug = debugB3React("B3Provider");
-
 /**
  * Default permissions configuration for B3 provider
  */
@@ -164,66 +151,32 @@ export function InnerProvider({
   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);
+  //const isConnected = useAuthStore(state => state.isConnected);
+  //const justCompletedLogin = useAuthStore(state => state.justCompletedLogin);
 
   // Use given accountOverride or activeAccount from thirdweb
+  // WOJ: why if isAuthenticated is false, we don't use activeAccount, which should be undefined?
+  // skip isAuthenticated check ?
   const effectiveAccount = isAuthenticated ? accountOverride || activeAccount : undefined;
 
-  const setWallet = useCallback(
-    (wallet: Wallet) => {
-      setManuallySelectedWallet(wallet);
-      const account = wallet.getAccount();
-      debug("@@setWallet", wallet.id, account?.address);
-      setActiveWallet(wallet);
-    },
-    [setManuallySelectedWallet, setActiveWallet],
-  );
-
-  useEffect(() => {
-    const autoSelectFirstEOAWallet = async () => {
-      // Only proceed if auto-selection is enabled and user is authenticated
-      if (!automaticallySetFirstEoa || !isAuthenticated) {
-        return;
-      }
-
-      // Find the first EOA wallet (excluding ecosystem wallets)
-      const isEOAWallet = (wallet: Wallet) => !wallet.id.startsWith("ecosystem.");
-      const firstEOAWallet = wallets.find(isEOAWallet);
-
-      if (firstEOAWallet) {
-        // Only auto-select if the last auth was via wallet or no previous auth provider
-        const lastAuthProvider = await getLastAuthProvider();
-        const shouldAutoSelect = lastAuthProvider === null || lastAuthProvider === "wallet";
-
-        if (shouldAutoSelect) {
-          setWallet(firstEOAWallet);
-        }
-      }
-    };
+  // Wrapper to set active wallet via thirdweb
+  // Note: `wallet` in context is deprecated - use useActiveWallet() from thirdweb/react instead
 
-    autoSelectFirstEOAWallet();
-  }, [automaticallySetFirstEoa, isAuthenticated, setWallet, wallets]);
+  // Auto-select first EOA wallet when enabled
+  useAutoSelectWallet({
+    enabled: automaticallySetFirstEoa,
+  });
 
   return (
     <B3Context.Provider
       value={{
         account: effectiveAccount,
-        setWallet,
-        wallet: manuallySelectedWallet,
-        user,
-        setUser,
-        refetchUser,
+        // setWallet,
+        //wallet: undefined, // Deprecated: use useActiveWallet() from thirdweb/react instead
+        //user,
+        //setUser,
+        //refetchUser,
         initialized: true,
         ready: !!effectiveAccount,
         automaticallySetFirstEoa,
@@ -237,15 +190,11 @@ export function InnerProvider({
         enableTurnkey,
       }}
     >
-      <InnerProvider2>{children}</InnerProvider2>
+      {children}
     </B3Context.Provider>
   );
 }
 
-const InnerProvider2 = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
 /**
  * Component to connect the toast context to the global toast API
  */

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

@@ -1,4 +1,3 @@
-import { Users } from "@b3dotfun/b3-api";
 import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
 import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
@@ -12,11 +11,11 @@ import { ClientType } from "../../../client-manager";
 export interface B3ContextType {
   account?: Account;
   automaticallySetFirstEoa: boolean;
-  user?: Users;
-  setWallet: (wallet: Wallet) => void;
+  //user?: Users;
+  //setWallet: (wallet: Wallet) => void;
   wallet?: Wallet;
-  setUser: (user?: Users) => void;
-  refetchUser: () => Promise<any>;
+  //setUser: (user?: Users) => void;
+  //refetchUser: () => Promise<any>;
   initialized: boolean;
   ready: boolean;
   environment?: "development" | "production";
@@ -35,11 +34,11 @@ export interface B3ContextType {
 export const B3Context = createContext<B3ContextType>({
   account: undefined,
   automaticallySetFirstEoa: false,
-  user: undefined,
-  setWallet: () => {},
+  //user: undefined,
+  //setWallet: () => {},
   wallet: undefined,
-  setUser: () => {},
-  refetchUser: async () => {},
+  //setUser: () => {},
+  //refetchUser: async () => {},
   initialized: false,
   ready: false,
   environment: "development",

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

@@ -4,6 +4,7 @@ import { B3Context } from "./types";
 /**
  * Hook to access the B3 context
  * @throws Error if used outside a B3Provider
+ * @deprecated Use useB3Config or useB3Account instead
  */
 export function useB3() {
   const context = useContext(B3Context);

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

@@ -0,0 +1,7 @@
+import { useActiveAccount } from "thirdweb/react";
+
+// Wrapper around useActiveAccount
+export const useB3Account = () => {
+  const account = useActiveAccount();
+  return account;
+};

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

@@ -0,0 +1,34 @@
+import { useContext, useMemo } from "react";
+import { B3Context } from "./types";
+
+export const useB3Config = () => {
+  const context = useContext(B3Context);
+
+  if (!context) {
+    throw new Error("useB3 must be used within a B3Provider");
+  }
+
+  const {
+    automaticallySetFirstEoa,
+    environment,
+    theme,
+    clientType,
+    partnerId,
+    createClientReferenceId,
+    enableTurnkey,
+  } = context;
+
+  // Return a stable reference
+  return useMemo(
+    () => ({
+      automaticallySetFirstEoa,
+      environment,
+      theme,
+      clientType,
+      partnerId,
+      createClientReferenceId,
+      enableTurnkey,
+    }),
+    [automaticallySetFirstEoa, environment, theme, clientType, partnerId, createClientReferenceId, enableTurnkey],
+  );
+};

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

@@ -3,7 +3,7 @@ import {
   Button,
   ManageAccountModalProps,
   toast,
-  useB3,
+  useAuthentication,
   useModalStore,
   useQueryB3,
 } from "@b3dotfun/sdk/global-account/react";
@@ -37,7 +37,7 @@ export const LinkAccount = ({
   const isLinking = useModalStore(state => state.isLinking);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const contentType = useModalStore(state => state.contentType);
-  const { user, setUser } = useB3();
+  const { user, setUser } = useAuthentication(partnerId);
   const [isUpdatingCode, setIsUpdatingCode] = useState(false);
   const [newReferralCode, setNewReferralCode] = useState("");
   const [isEditingCode, setIsEditingCode] = useState(false);

package/src/global-account/react/components/LinkAccount/LinkNewAccount.tsx

@@ -1,5 +1,5 @@
 import app from "@b3dotfun/sdk/global-account/app";
-import { toast } from "@b3dotfun/sdk/global-account/react";
+import { toast, useB3Account } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { thirdwebB3Mainnet } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
@@ -11,7 +11,6 @@ import { createWallet, preAuthenticate, WalletId } from "thirdweb/wallets";
 import { WalletRow } from "../..";
 import { LinkNewAccountModalProps, useModalStore } from "../../stores/useModalStore";
 import { getProfileDisplayInfo } from "../../utils/profileDisplay";
-import { useB3 } from "../B3Provider/useB3";
 import { AppleIcon } from "../icons/AppleIcon";
 import { DiscordIcon } from "../icons/DiscordIcon";
 import { FarcasterIcon } from "../icons/FarcasterIcon";
@@ -117,7 +116,7 @@ export function LinkNewAccount({
       originalProfile: profile,
     }));
 
-  const { account } = useB3();
+  const account = useB3Account();
   const { mutate: linkProfile } = useLinkProfile();
 
   const onSuccess = useCallback(async () => {

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

@@ -1,4 +1,11 @@
-import { useAccountWallet, useB3, useModalStore, useProfile, useSimBalance } from "@b3dotfun/sdk/global-account/react";
+import {
+  useAccountWallet,
+  useAuthentication,
+  useB3Config,
+  useModalStore,
+  useProfile,
+  useSimBalance,
+} from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { Pencil } from "lucide-react";
@@ -15,7 +22,8 @@ const ProfileSection = () => {
     address: eoaAddress || account?.address,
     fresh: true,
   });
-  const { user } = useB3();
+  const { partnerId } = useB3Config();
+  const { user } = useAuthentication(partnerId);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const navigateBack = useModalStore(state => state.navigateBack);

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

@@ -1,6 +1,6 @@
 import { ens_normalize } from "@adraffy/ens-normalize";
 import app from "@b3dotfun/sdk/global-account/app";
-import { toast, useB3, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { Check, Loader2, Pencil, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -17,7 +17,8 @@ const SettingsProfileCard = () => {
     address: eoaAddress || account?.address,
     fresh: true,
   });
-  const { user, setUser } = useB3();
+  const { partnerId } = useB3Config();
+  const { user, setUser } = useAuthentication(partnerId);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const navigateBack = useModalStore(state => state.navigateBack);

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

@@ -3,11 +3,11 @@ import {
   SignInWithB3ModalProps,
   StyleRoot,
   useAuthStore,
-  useB3,
   useIsMobile,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
 import { ReactNode, useEffect } from "react";
+import { useB3Account } from "../B3Provider/useB3Account";
 import { ManageAccountButton } from "../custom/ManageAccountButton";
 import { Loading } from "../ui/Loading";
 
@@ -20,7 +20,7 @@ export type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackB
 
 export function SignInWithB3(props: SignInWithB3Props) {
   const { setB3ModalOpen, setB3ModalContentType, setEcoSystemAccountAddress } = useModalStore();
-  const { account } = useB3();
+  const account = useB3Account();
   const { isAuthenticating, isAuthenticated } = useAuthStore();
   const isMobile = useIsMobile();
 

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

@@ -1,8 +1,9 @@
 import {
   Loading,
   SignInWithB3ModalProps,
+  useAuthentication,
   useAuthStore,
-  useB3,
+  useB3Config,
   useGetAllTWSigners,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
@@ -33,7 +34,9 @@ export function SignInWithB3Flow({
   source = "signInWithB3Button",
   signersEnabled = false,
 }: SignInWithB3ModalProps) {
-  const { automaticallySetFirstEoa, user, refetchUser, enableTurnkey } = useB3();
+  const { automaticallySetFirstEoa, enableTurnkey } = useB3Config();
+  const { user, refetchUser } = useAuthentication(partnerId);
+
   const [step, setStep] = useState<"login" | "permissions" | null>(source === "requestPermissions" ? null : "login");
   const [sessionKeyAdded, setSessionKeyAdded] = useState(source === "requestPermissions" ? true : false);
   const { setB3ModalContentType, setB3ModalOpen, isOpen, contentType } = useModalStore();

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

@@ -5,6 +5,8 @@ export { B3Provider, InnerProvider } 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";
 export { StyleRoot } from "./StyleRoot";
 
 // SignInWithB3 Components

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

@@ -1,10 +1,11 @@
-import { useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { useProfile } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useEffect, useMemo, useState } from "react";
 import { getLastAuthProvider, useActiveWallet, useConnectedWallets, useWalletImage } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
 import { socialIcons } from "thirdweb/wallets/in-app";
+import { useB3Account } from "../components/B3Provider/useB3Account";
 
 const debug = debugB3React("useAccountWallet");
 
@@ -49,7 +50,7 @@ export function useAccountWallet(): {
   // const effectiveAccount = isAuthenticated ? accountOverride || activeAccount : undefined;
   // can we possibly just use useActiveAccount here?
   // --------------------
-  const { account } = useB3();
+  const account = useB3Account();
 
   const activeWallet = useActiveWallet();
   const connectedWallets = useConnectedWallets();
@@ -114,7 +115,7 @@ export function useAccountWallet(): {
 }
 
 export function useAccountWalletImage(): string {
-  const { account } = useB3();
+  const account = useB3Account();
 
   const activeWallet = useActiveWallet();
   const connectedWallets = useConnectedWallets();

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

@@ -0,0 +1,51 @@
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useCallback, useEffect } from "react";
+import { getLastAuthProvider, useConnectedWallets, useSetActiveWallet } from "thirdweb/react";
+import { Wallet } from "thirdweb/wallets";
+import { useAuthStore } from "../stores";
+
+const debug = debugB3React("useAutoSelectWallet");
+
+/**
+ * Hook to automatically select the first EOA wallet when user is authenticated
+ * Only auto-selects if the last auth was via wallet or no previous auth provider
+ */
+export function useAutoSelectWallet({ enabled }: { enabled: boolean }) {
+  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+  const wallets = useConnectedWallets();
+  const setActiveWallet = useSetActiveWallet();
+
+  const setWallet = useCallback(
+    (wallet: Wallet) => {
+      debug("@@setWallet", wallet.id, wallet.getAccount()?.address);
+      setActiveWallet(wallet);
+    },
+    [setActiveWallet],
+  );
+
+  useEffect(() => {
+    const autoSelectFirstEOAWallet = async () => {
+      // Only proceed if auto-selection is enabled and user is authenticated
+      if (!enabled || !isAuthenticated) {
+        return;
+      }
+
+      // Find the first EOA wallet (excluding ecosystem wallets)
+      const isEOAWallet = (wallet: Wallet) => !wallet.id.startsWith("ecosystem.");
+      const firstEOAWallet = wallets.find(isEOAWallet);
+
+      if (firstEOAWallet) {
+        // Only auto-select if the last auth was via wallet or no previous auth provider
+        const lastAuthProvider = await getLastAuthProvider();
+        const shouldAutoSelect = lastAuthProvider === null || lastAuthProvider === "wallet";
+
+        if (shouldAutoSelect) {
+          debug("Auto-selecting first EOA wallet", firstEOAWallet.id);
+          setWallet(firstEOAWallet);
+        }
+      }
+    };
+
+    autoSelectFirstEOAWallet();
+  }, [enabled, isAuthenticated, setWallet, wallets]);
+}

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

@@ -1,9 +1,10 @@
-import app from "../../app";
-import { useAuthStore } from "../stores";
-import { useCallback, useState } from "react";
-import { useB3 } from "../components/B3Provider/useB3";
 import { TurnkeyAuthInitResponse } from "@b3dotfun/b3-api";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useCallback, useState } from "react";
+import app from "../../app";
+import { useB3Config } from "../components";
+import { useAuthStore } from "../stores";
+import { useAuthentication } from "./useAuthentication";
 
 const debug = debugB3React("useTurnkeyAuth");
 
@@ -32,7 +33,8 @@ export function useTurnkeyAuth(): UseTurnkeyAuthReturn {
   const [error, setError] = useState<string | null>(null);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-  const { user } = useB3();
+  const { partnerId } = useB3Config();
+  const { user } = useAuthentication(partnerId);
 
   /**
    * Step 1: Initiate login with email