@b3dotfun/sdk 0.1.69-alpha.24 → 0.1.69-alpha.26

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

@@ -1,11 +1,13 @@
 import {
   useAccountWallet,
+  useB3Config,
   useModalStore,
   useProfile,
   useSimBalance,
   useUser,
 } from "@b3dotfun/sdk/global-account/react";
 import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
+import { AVATAR_COLORS } from "@b3dotfun/sdk/shared/constants";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import Avatar from "boring-avatars";
@@ -15,9 +17,9 @@ import { useActiveAccount } from "thirdweb/react";
 import { useFirstEOA } from "../../hooks/useFirstEOA";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 
-const AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];
-
 const ProfileSection = () => {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const account = useActiveAccount();
   const { address: eoaAddress } = useFirstEOA();
   const { address: smartWalletAddress } = useAccountWallet();
@@ -60,7 +62,7 @@ const ProfileSection = () => {
   }, [avatarSrc]);
 
   const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
-  const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || "user";
+  const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || user?.email || "user";
 
   return (
     <div className="flex items-center justify-between px-5 py-6">
@@ -87,13 +89,18 @@ const ProfileSection = () => {
           </button>
         </div>
         <div className="global-account-profile-info flex flex-col gap-1">
-          <h2 className="text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl">
-            <div className="text-b3-foreground-muted"> $</div>
-            <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
-          </h2>
+          {!isBetterAuth && (
+            <h2 className="text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl">
+              <div className="text-b3-foreground-muted"> $</div>
+              <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
+            </h2>
+          )}
           <div className="b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">
             {currentUsername}
           </div>
+          {isBetterAuth && user?.email && (
+            <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">{user.email}</div>
+          )}
         </div>
       </div>
     </div>

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

@@ -1,7 +1,7 @@
-import { useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { useAuthentication, useB3Config, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { getSessionDurationDays, SESSION_DURATION_LABELS } from "@b3dotfun/sdk/shared/utils/session-duration";
-import { Loader2 } from "lucide-react";
+import { Bell, Clock, Link, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { Chain } from "thirdweb";
 import { useProfiles } from "thirdweb/react";
@@ -19,6 +19,8 @@ const SettingsContent = ({
   onLogout?: () => void;
   chain: Chain;
 }) => {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const { logout, user } = useAuthentication(partnerId);
@@ -58,7 +60,7 @@ const SettingsContent = ({
 
   return (
     <div className="flex h-[470px] flex-col">
-      <ModalHeader showBackButton={false} showCloseButton={false} title="Settings" />
+      {!isBetterAuth && <ModalHeader showBackButton={false} showCloseButton={false} title="Settings" />}
 
       {/* Profile Section */}
       <div className="p-5">
@@ -69,41 +71,22 @@ const SettingsContent = ({
 
       {/* Menu Items */}
       <div className="space-y-3 px-5">
+        {!isBetterAuth && (
+          <SettingsMenuItem
+            icon={<Link size={18} className="text-[#51525c]" />}
+            title="Linked Accounts"
+            subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
+            onClick={() => handleNavigate("linkAccount")}
+          />
+        )}
         <SettingsMenuItem
-          icon={
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z"
-                fill="#F4F4F5"
-              />
-            </svg>
-          }
-          title="Linked Accounts"
-          subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
-          onClick={() => handleNavigate("linkAccount")}
-        />
-        <SettingsMenuItem
-          icon={
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z"
-                fill="#F4F4F5"
-              />
-            </svg>
-          }
+          icon={<Bell size={18} className="text-[#51525c]" />}
           title="Notifications"
           subtitle="Manage your notifications"
           onClick={() => handleNavigate("notifications")}
         />
         <SettingsMenuItem
-          icon={
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z"
-                fill="#F4F4F5"
-              />
-            </svg>
-          }
+          icon={<Clock size={18} className="text-[#51525c]" />}
           title="Stay signed in"
           subtitle={SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`}
           onClick={() => handleNavigate("sessionDuration")}

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

@@ -18,7 +18,8 @@ const SettingsProfileCard = () => {
     address: eoaAddress || account?.address,
     fresh: true,
   });
-  const { partnerId } = useB3Config();
+  const { partnerId, authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const { user, setUser } = useAuthentication(partnerId);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
@@ -78,25 +79,33 @@ const SettingsProfileCard = () => {
 
     setIsSaving(true);
     try {
-      const sanitizedUsername = ens_normalize(editedUsername.trim());
-      const b3Username = `${sanitizedUsername}.b3.fun`;
-      const usernameSignMessage = `Register "${b3Username}"`;
-      const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
-
-      if (!usernameSignature) {
-        throw new Error("Failed to sign username registration message");
+      let updatedUser: Users;
+      if (isBetterAuth) {
+        // Better Auth: register username without wallet signing (DB-only, no ENS)
+        // Skip ens_normalize — it rejects underscores/mixed-case that are valid non-ENS usernames
+        const sanitizedUsername = editedUsername.trim().toLowerCase();
+        // Type assertion needed: b3-mono now accepts message/hash as optional for Better Auth users
+        updatedUser = (await app
+          .service("users")
+          .registerUsername({ username: sanitizedUsername } as any, {} as any)) as unknown as Users;
+      } else {
+        // Thirdweb: register username with wallet signature + on-chain ENS
+        const sanitizedUsername = ens_normalize(editedUsername.trim());
+        const b3Username = `${sanitizedUsername}.b3.fun`;
+        const usernameSignMessage = `Register "${b3Username}"`;
+        const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
+
+        if (!usernameSignature) {
+          throw new Error("Failed to sign username registration message");
+        }
+
+        updatedUser = (await app
+          .service("users")
+          .registerUsername(
+            { username: sanitizedUsername, message: usernameSignMessage, hash: usernameSignature },
+            {} as any,
+          )) as unknown as Users;
       }
-
-      console.log("@@usernameSignature", usernameSignature);
-
-      // Register username with ENS
-      // Note: Type assertion needed until @b3dotfun/b3-api package is updated with RegisterUsername type
-      const updatedUser = (await app
-        .service("users")
-        .registerUsername(
-          { username: sanitizedUsername, message: usernameSignMessage, hash: usernameSignature },
-          {} as any,
-        )) as unknown as Users;
       // Update user state - registerUsername returns an array with single user
       setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
 
@@ -179,7 +188,7 @@ const SettingsProfileCard = () => {
           <>
             <div className="flex items-center gap-1">
               <p className="b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">
-                {currentUsername}
+                {currentUsername || user?.email}
               </p>
             </div>
             <button

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

@@ -4,6 +4,7 @@ import {
   SignInWithB3ModalProps,
   StyleRoot,
   useAccountWallet,
+  useAuthStore,
   useAuthentication,
   useB3Config,
   useIsMobile,
@@ -14,6 +15,8 @@ import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { ReactNode, useEffect } from "react";
 import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { useUser } from "../../hooks/useUser";
+import { UserAvatar } from "../UserAvatar/UserAvatar";
 import { ManageAccountButton } from "../custom/ManageAccountButton";
 
 type SignInProps = {
@@ -30,7 +33,9 @@ type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton">
 
 export function SignIn(props: SignInWithB3Props) {
   const { className } = props;
-  const { automaticallySetFirstEoa, partnerId } = useB3Config();
+  const { automaticallySetFirstEoa, partnerId, authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
+
   const {
     address: globalAddress,
     ensName,
@@ -53,6 +58,11 @@ export function SignIn(props: SignInWithB3Props) {
 
   const setActiveWallet = useSetActiveWallet();
 
+  // Better Auth state
+  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+  const { user } = useUser();
+  const userDisplayName = user?.username || user?.email || "Account";
+
   const handleSetActiveAccount = (selectedWalletId: string | undefined) => {
     if (
       !selectedWalletId ||
@@ -72,21 +82,29 @@ export function SignIn(props: SignInWithB3Props) {
     }
   }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
 
+  const isLoggedIn = isBetterAuth ? isAuthenticated : !!globalAddress;
+
   // Desktop version - original dropdown menu
   return (
     <StyleRoot>
       <Menu className={`relative flex items-center ${className || ""}`} as="div">
-        {globalAddress ? (
+        {isLoggedIn ? (
           <>
             <MenuButton className="bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none">
-              {!!walletImage && (
-                <IPFSMediaRenderer
-                  src={walletImage}
-                  alt="Wallet Image"
-                  className="bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100"
-                />
+              {isBetterAuth ? (
+                <UserAvatar avatarUrl={user?.avatar} name={userDisplayName} size={24} />
+              ) : (
+                !!walletImage && (
+                  <IPFSMediaRenderer
+                    src={walletImage}
+                    alt="Wallet Image"
+                    className="bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100"
+                  />
+                )
               )}
-              <div className="text-as-primary">{ensName ? ensName : truncateAddress(globalAddress)}</div>
+              <div className="text-as-primary">
+                {isBetterAuth ? userDisplayName : ensName ? ensName : truncateAddress(globalAddress ?? "")}
+              </div>
             </MenuButton>
             <Transition
               enter="duration-200 ease-out"
@@ -103,7 +121,16 @@ export function SignIn(props: SignInWithB3Props) {
                 anchor={isMobile ? "top end" : undefined}
               >
                 <div className="bg-b3-react-background">
-                  {connectedEOAWallet ? (
+                  {isBetterAuth ? (
+                    /* Better Auth: show user info instead of wallet switching */
+                    <div className="flex items-center gap-3 rounded-xl p-3">
+                      <UserAvatar avatarUrl={user?.avatar} name={userDisplayName} size={48} />
+                      <div className="flex flex-col gap-0.5">
+                        {user?.username && <div className="text-b3-react-primary font-semibold">{user.username}</div>}
+                        {user?.email && <div className="text-b3-react-secondary text-sm">{user.email}</div>}
+                      </div>
+                    </div>
+                  ) : connectedEOAWallet ? (
                     <div
                       className={cn(
                         "border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3",
@@ -118,7 +145,7 @@ export function SignIn(props: SignInWithB3Props) {
                         />
                         <div className="ml-4 grow">
                           {ensName && <div>{ensName}</div>}
-                          <div>{truncateAddress(globalAddress)}</div>
+                          <div>{truncateAddress(globalAddress ?? "")}</div>
                           {/* <div>{walletInfo?.name}</div> */}
                         </div>
                       </div>
@@ -143,7 +170,7 @@ export function SignIn(props: SignInWithB3Props) {
                           />
                           <div className="grow pl-4">
                             {ensName && <div>{ensName}</div>}
-                            <div>{truncateAddress(globalAddress)}</div>
+                            <div>{truncateAddress(globalAddress ?? "")}</div>
                             <div>Smart wallet</div>
                           </div>
                         </div>
@@ -159,7 +186,9 @@ export function SignIn(props: SignInWithB3Props) {
                   <button className="mb-2 w-full space-y-1" onClick={onDisconnect}>
                     <div className="hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors">
                       <Icon className="fill-b3-react-primary mr-4 shrink-0 transition-colors" name="logout" />
-                      <div className="text-b3-react-primary mr-auto transition-colors">Disconnect</div>
+                      <div className="text-b3-react-primary mr-auto transition-colors">
+                        {isBetterAuth ? "Sign out" : "Disconnect"}
+                      </div>
                     </div>
                   </button>
                 </div>

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

@@ -0,0 +1,45 @@
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
+import { AVATAR_COLORS } from "@b3dotfun/sdk/shared/constants";
+import Avatar from "boring-avatars";
+import { useCallback, useEffect, useState } from "react";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
+
+interface UserAvatarProps {
+  /** Direct avatar URL (IPFS or HTTP). Resolved and validated internally. */
+  avatarUrl?: string | null;
+  /** Seed for the generated fallback avatar + alt text. Use email, username, or address. */
+  name?: string;
+  /** Avatar size in pixels (square). */
+  size?: number;
+  /** Additional className for the outer container. */
+  className?: string;
+}
+
+/**
+ * Renders a user avatar with IPFS support and boring-avatars fallback.
+ *
+ * - If `avatarUrl` is provided and valid, renders via IPFSMediaRenderer.
+ * - On load failure or missing URL, falls back to a deterministic boring-avatars beam.
+ */
+export function UserAvatar({ avatarUrl, name = "user", size = 40, className }: UserAvatarProps) {
+  const resolvedSrc = validateImageUrl(avatarUrl);
+  const [imgError, setImgError] = useState(false);
+
+  useEffect(() => {
+    setImgError(false);
+  }, [avatarUrl]);
+
+  const handleImgError = useCallback(() => setImgError(true), []);
+
+  return (
+    <div className={className} style={{ width: size, height: size, minWidth: size, minHeight: size }}>
+      {resolvedSrc && !imgError ? (
+        <div onErrorCapture={handleImgError} className="h-full w-full overflow-hidden rounded-full">
+          <IPFSMediaRenderer src={resolvedSrc} alt={name} className="h-full w-full object-cover" />
+        </div>
+      ) : (
+        <Avatar name={name} variant="beam" size={size} colors={AVATAR_COLORS} />
+      )}
+    </div>
+  );
+}

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

@@ -29,6 +29,9 @@ export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } fro
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 
+// UserAvatar
+export { UserAvatar } from "./UserAvatar/UserAvatar";
+
 // Deposit Components
 export { Deposit } from "./Deposit/Deposit";
 

package/src/shared/constants/index.ts

@@ -32,3 +32,5 @@ export const B3_AUTH_COOKIE_NAME = "b3-auth";
 export const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
 
 export const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
+
+export const AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];