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

package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js

@@ -1,12 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TabsContentPrimitive, TabsPrimitive, useModalStore, } from "../../../../global-account/react/index.js";
+import { TabsContentPrimitive, TabsPrimitive, useB3Config, useModalStore, } from "../../../../global-account/react/index.js";
 import BottomNavigation from "./BottomNavigation.js";
 import { HomeContent } from "./HomeContent.js";
 import SettingsContent from "./SettingsContent.js";
 export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }) {
+    const { authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
     const contentType = useModalStore(state => state.contentType);
     const { activeTab = "home", setActiveTab } = contentType;
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    // Better Auth: single-view layout — no Home/Swap tabs, just settings content
+    if (isBetterAuth) {
+        return (_jsx("div", { className: "b3-manage-account flex-1", children: _jsx(SettingsContent, { partnerId: partnerId, onLogout: onLogout, chain: chain }) }));
+    }
     return (_jsx("div", { className: "b3-manage-account flex-1", children: _jsxs(TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
                 const tab = value;
                 if (tab === "swap") {

package/dist/esm/global-account/react/components/ManageAccount/ProfileSection.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAccountWallet, useModalStore, useProfile, useSimBalance, useUser, } from "../../../../global-account/react/index.js";
+import { useAccountWallet, useB3Config, useModalStore, useProfile, useSimBalance, useUser, } from "../../../../global-account/react/index.js";
 import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
+import { AVATAR_COLORS } from "../../../../shared/constants/index.js";
 import { formatUsername } from "../../../../shared/utils/index.js";
 import { formatDisplayNumber } from "../../../../shared/utils/number.js";
 import Avatar from "boring-avatars";
@@ -9,8 +10,9 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { useFirstEOA } from "../../hooks/useFirstEOA.js";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
-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();
@@ -45,7 +47,7 @@ const ProfileSection = () => {
         setImgError(false);
     }, [avatarSrc]);
     const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
-    const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || "user";
-    return (_jsx("div", { className: "flex items-center justify-between px-5 py-6", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [_jsx("div", { className: "border-b3-line border-1 bg-b3-primary-wash size-14 overflow-hidden rounded-full border", children: avatarSrc && !imgError ? (_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "h-full w-full object-cover", onError: handleImgError })) : (_jsx(Avatar, { name: avatarSeed, variant: "beam", size: 56, colors: AVATAR_COLORS })) }), _jsx("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: _jsx(Pencil, { size: 10, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info flex flex-col gap-1", children: [_jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [_jsx("div", { className: "text-b3-foreground-muted", children: " $" }), _jsx("div", { className: "text-[30px]", children: formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 }) })] }), _jsx("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername })] })] }) }));
+    const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || user?.email || "user";
+    return (_jsx("div", { className: "flex items-center justify-between px-5 py-6", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [_jsx("div", { className: "border-b3-line border-1 bg-b3-primary-wash size-14 overflow-hidden rounded-full border", children: avatarSrc && !imgError ? (_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "h-full w-full object-cover", onError: handleImgError })) : (_jsx(Avatar, { name: avatarSeed, variant: "beam", size: 56, colors: AVATAR_COLORS })) }), _jsx("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: _jsx(Pencil, { size: 10, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info flex flex-col gap-1", children: [!isBetterAuth && (_jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [_jsx("div", { className: "text-b3-foreground-muted", children: " $" }), _jsx("div", { className: "text-[30px]", children: formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 }) })] })), _jsx("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername }), isBetterAuth && user?.email && (_jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: user.email }))] })] }) }));
 };
 export default ProfileSection;

package/dist/esm/global-account/react/components/ManageAccount/SettingsContent.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuthentication, useModalStore } from "../../../../global-account/react/index.js";
+import { useAuthentication, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
 import { getSessionDurationDays, SESSION_DURATION_LABELS } from "../../../../shared/utils/session-duration.js";
-import { Loader2 } from "lucide-react";
+import { Bell, Clock, Link, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useProfiles } from "thirdweb/react";
 import SignOutIcon from "../icons/SignOutIcon.js";
@@ -10,6 +10,8 @@ import ModalHeader from "../ModalHeader/ModalHeader.js";
 import SettingsMenuItem from "./SettingsMenuItem.js";
 import SettingsProfileCard from "./SettingsProfileCard.js";
 const SettingsContent = ({ partnerId, onLogout, 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);
@@ -45,7 +47,7 @@ const SettingsContent = ({ partnerId, onLogout, chain, }) => {
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsxs("div", { className: "space-y-3 px-5", children: [_jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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" }) }), title: "Stay signed in", subtitle: SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), _jsx("div", { className: "mt-auto px-5 pb-5", children: _jsxs("button", { type: "button", className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
+    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [!isBetterAuth && _jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsxs("div", { className: "space-y-3 px-5", children: [!isBetterAuth && (_jsx(SettingsMenuItem, { icon: _jsx(Link, { size: 18, className: "text-[#51525c]" }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") })), _jsx(SettingsMenuItem, { icon: _jsx(Bell, { size: 18, className: "text-[#51525c]" }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") }), _jsx(SettingsMenuItem, { icon: _jsx(Clock, { size: 18, className: "text-[#51525c]" }), title: "Stay signed in", subtitle: SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), _jsx("div", { className: "mt-auto px-5 pb-5", children: _jsxs("button", { type: "button", className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
                         boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05)",
                     }, children: [logoutLoading ? (_jsx(Loader2, { className: "text-b3-grey animate-spin", size: 20 })) : (_jsx(SignOutIcon, { size: 20, className: "text-b3-grey", color: "currentColor" })), _jsx("p", { className: "text-b3-grey dark:text-b3-foreground-muted font-neue-montreal-semibold text-base", children: "Sign out" })] }) })] }));
 };

package/dist/esm/global-account/react/components/ManageAccount/SettingsProfileCard.js

@@ -16,7 +16,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);
@@ -66,19 +67,29 @@ 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;
+            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 }, {}));
+            }
+            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 }, {}));
             }
-            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 }, {}));
             // Update user state - registerUsername returns an array with single user
             setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
             // Refresh profile to get updated data
@@ -107,6 +118,6 @@ const SettingsProfileCard = () => {
                 /* Edit mode - inline input */
                 _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { ref: inputRef, type: "text", value: editedUsername, onChange: e => setEditedUsername(e.target.value), onKeyDown: handleKeyDown, disabled: isSaving, className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-medium focus:border-b3-primary-blue text-md w-full rounded-md border px-2 py-1 leading-none transition-colors focus:outline-none disabled:opacity-50", placeholder: "Enter username" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: handleSaveUsername, disabled: isSaving, className: "text-b3-primary-blue hover:text-b3-primary-blue/80 flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Save username", children: isSaving ? _jsx(Loader2, { size: 18, className: "animate-spin" }) : _jsx(Check, { size: 18, strokeWidth: 2.5 }) }), _jsx("button", { onClick: handleCancelEdit, disabled: isSaving, className: "text-b3-foreground-muted hover:text-b3-grey flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Cancel editing", children: _jsx(X, { size: 18, strokeWidth: 2.5 }) })] })] })) : (
                 /* Display mode */
-                _jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), _jsx("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: _jsx("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C] dark:text-white", children: "Edit Username" }) })] })) })] }));
+                _jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername || user?.email }) }), _jsx("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: _jsx("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C] dark:text-white", children: "Edit Username" }) })] })) })] }));
 };
 export default SettingsProfileCard;

package/dist/esm/global-account/react/components/SignInWithB3/SignIn.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IPFSMediaRenderer, SignInWithB3, StyleRoot, useAccountWallet, useAuthentication, useB3Config, useIsMobile, } from "../../../../global-account/react/index.js";
+import { IPFSMediaRenderer, SignInWithB3, StyleRoot, useAccountWallet, useAuthStore, useAuthentication, useB3Config, useIsMobile, } from "../../../../global-account/react/index.js";
 import Icon from "../../../../global-account/react/components/custom/Icon.js";
 import { ecosystemWalletId } from "../../../../shared/constants/index.js";
 import { cn, truncateAddress } from "../../../../shared/utils/index.js";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { useEffect } from "react";
 import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { useUser } from "../../hooks/useUser.js";
+import { UserAvatar } from "../UserAvatar/UserAvatar.js";
 import { ManageAccountButton } from "../custom/ManageAccountButton.js";
 export function SignIn(props) {
     const { className } = props;
-    const { automaticallySetFirstEoa, partnerId } = useB3Config();
+    const { automaticallySetFirstEoa, partnerId, authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
     const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = useAccountWallet();
     const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
     const isMobile = useIsMobile();
@@ -19,6 +22,10 @@ export function SignIn(props) {
     };
     const connectedWallets = useConnectedWallets();
     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) => {
         if (!selectedWalletId ||
             !connectedWallets ||
@@ -34,12 +41,15 @@ export function SignIn(props) {
             setActiveWallet(connectedEOAWallet);
         }
     }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
+    const isLoggedIn = isBetterAuth ? isAuthenticated : !!globalAddress;
     // Desktop version - original dropdown menu
-    return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), _jsx("div", { className: "text-as-primary", children: ensName ? ensName : truncateAddress(globalAddress) })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
+    return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: isLoggedIn ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [isBetterAuth ? (_jsx(UserAvatar, { avatarUrl: user?.avatar, name: userDisplayName, size: 24 })) : (!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" }))), _jsx("div", { className: "text-as-primary", children: isBetterAuth ? userDisplayName : ensName ? ensName : truncateAddress(globalAddress ?? "") })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
                             // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
-                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
+                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [isBetterAuth ? (
+                                    /* Better Auth: show user info instead of wallet switching */
+                                    _jsxs("div", { className: "flex items-center gap-3 rounded-xl p-3", children: [_jsx(UserAvatar, { avatarUrl: user?.avatar, name: userDisplayName, size: 48 }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [user?.username && _jsx("div", { className: "text-b3-react-primary font-semibold", children: user.username }), user?.email && _jsx("div", { className: "text-b3-react-secondary text-sm", children: user.email })] })] })) : connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress ?? "") })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
                                             ? "bg-b3-react-background"
-                                            : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
+                                            : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress ?? "") }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: isBetterAuth ? "Sign out" : "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
                     console.log("User authenticated with Global Account!", globalAccount);
                 }, ...props })) }) }));
 }

package/dist/esm/global-account/react/components/UserAvatar/UserAvatar.d.ts

@@ -0,0 +1,18 @@
+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 declare function UserAvatar({ avatarUrl, name, size, className }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/UserAvatar/UserAvatar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
+import { AVATAR_COLORS } from "../../../../shared/constants/index.js";
+import Avatar from "boring-avatars";
+import { useCallback, useEffect, useState } from "react";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
+/**
+ * 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 }) {
+    const resolvedSrc = validateImageUrl(avatarUrl);
+    const [imgError, setImgError] = useState(false);
+    useEffect(() => {
+        setImgError(false);
+    }, [avatarUrl]);
+    const handleImgError = useCallback(() => setImgError(true), []);
+    return (_jsx("div", { className: className, style: { width: size, height: size, minWidth: size, minHeight: size }, children: resolvedSrc && !imgError ? (_jsx("div", { onErrorCapture: handleImgError, className: "h-full w-full overflow-hidden rounded-full", children: _jsx(IPFSMediaRenderer, { src: resolvedSrc, alt: name, className: "h-full w-full object-cover" }) })) : (_jsx(Avatar, { name: name, variant: "beam", size: size, colors: AVATAR_COLORS })) }));
+}

package/dist/esm/global-account/react/components/index.d.ts

@@ -18,6 +18,7 @@ export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
+export { UserAvatar } from "./UserAvatar/UserAvatar";
 export { Deposit } from "./Deposit/Deposit";
 export { Send } from "./Send/Send";
 export { IPFSMediaRenderer } from "./IPFSMediaRenderer/IPFSMediaRenderer";

package/dist/esm/global-account/react/components/index.js

@@ -21,6 +21,8 @@ export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep.js";
 export { getConnectOptionsFromStrategy, isWalletType } from "./SignInWithB3/utils/signInUtils.js";
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount.js";
+// UserAvatar
+export { UserAvatar } from "./UserAvatar/UserAvatar.js";
 // Deposit Components
 export { Deposit } from "./Deposit/Deposit.js";
 // Send Components

package/dist/esm/shared/constants/index.d.ts

@@ -16,3 +16,4 @@ export declare const CLIENT_APP_BUNDLE_ID: string;
 export declare const B3_AUTH_COOKIE_NAME = "b3-auth";
 export declare const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
 export declare const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
+export declare const AVATAR_COLORS: string[];

package/dist/esm/shared/constants/index.js

@@ -21,3 +21,4 @@ export const CLIENT_APP_BUNDLE_ID = process.env.EXPO_PUBLIC_B3_BUNDLE_ID || "";
 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"];

package/dist/types/global-account/react/components/UserAvatar/UserAvatar.d.ts

@@ -0,0 +1,18 @@
+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 declare function UserAvatar({ avatarUrl, name, size, className }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/global-account/react/components/index.d.ts

@@ -18,6 +18,7 @@ export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
+export { UserAvatar } from "./UserAvatar/UserAvatar";
 export { Deposit } from "./Deposit/Deposit";
 export { Send } from "./Send/Send";
 export { IPFSMediaRenderer } from "./IPFSMediaRenderer/IPFSMediaRenderer";

package/dist/types/shared/constants/index.d.ts

@@ -16,3 +16,4 @@ export declare const CLIENT_APP_BUNDLE_ID: string;
 export declare const B3_AUTH_COOKIE_NAME = "b3-auth";
 export declare const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
 export declare const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
+export declare const AVATAR_COLORS: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.24",
+  "version": "0.1.69-alpha.26",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -62,6 +62,8 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const contentType = useModalStore(state => state.contentType);
 
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const account = useActiveAccount();
   const { data: profile, refetch: refreshProfile } = useProfile({
     address: account?.address,
@@ -162,7 +164,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   };
 
   const handleSaveChanges = async () => {
-    if (!account?.address) {
+    if (!isBetterAuth && !account?.address) {
       toast.error("No account connected");
       return;
     }

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

@@ -1,4 +1,4 @@
-import { TabsListPrimitive, TabTriggerPrimitive, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { TabsListPrimitive, TabTriggerPrimitive, useB3Config, useModalStore } from "@b3dotfun/sdk/global-account/react";
 
 const HomeIcon = () => {
   return (
@@ -42,6 +42,8 @@ const SettingsIcon = () => {
 
 const BottomNavigation = () => {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
 
   return (
     <div className="b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]">
@@ -54,19 +56,21 @@ const BottomNavigation = () => {
           <span className="text-b3-grey font-neue-montreal-semibold text-xs">Home</span>
         </TabTriggerPrimitive>
 
-        <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] dark:data-[state=active]:text-white"
-          onClick={() => {
-            setB3ModalContentType({
-              type: "anySpend",
-              showBackButton: true,
-            });
-          }}
-        >
-          <SwapIcon />
-          <span className="text-b3-grey font-neue-montreal-semibold text-xs">Swap</span>
-        </TabTriggerPrimitive>
+        {!isBetterAuth && (
+          <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] dark:data-[state=active]:text-white"
+            onClick={() => {
+              setB3ModalContentType({
+                type: "anySpend",
+                showBackButton: true,
+              });
+            }}
+          >
+            <SwapIcon />
+            <span className="text-b3-grey font-neue-montreal-semibold text-xs">Swap</span>
+          </TabTriggerPrimitive>
+        )}
 
         <TabTriggerPrimitive
           value="settings"

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

@@ -2,6 +2,7 @@ import {
   CopyToClipboard,
   ManageAccountModalProps,
   useAuthentication,
+  useB3Config,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
@@ -10,6 +11,7 @@ import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useActiveWallet, useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
 import { Wallet } from "thirdweb/wallets";
+import { UserAvatar } from "../UserAvatar/UserAvatar";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon";
 import LinkIcon from "../icons/LinkIcon";
 import SignOutIcon from "../icons/SignOutIcon";
@@ -89,7 +91,69 @@ function WalletItem({ wallet, isActive, onClick }: { wallet: Wallet; isActive: b
   );
 }
 
+function BetterAuthHeader({ onLogout }: { onLogout?: () => void }) {
+  const contentType = useModalStore(state => state.contentType) as ManageAccountModalProps;
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+  const partnerId = contentType?.partnerId;
+  const { logout, user } = useAuthentication(partnerId);
+  const [logoutLoading, setLogoutLoading] = useState(false);
+
+  const displayName = user?.username || user?.email || "Account";
+
+  const onLogoutEnhanced = async () => {
+    setLogoutLoading(true);
+    try {
+      await logout();
+      onLogout?.();
+    } finally {
+      setB3ModalOpen(false);
+      setLogoutLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-b3-background border-b3-line flex items-center justify-between border-b px-5 py-3">
+      <div className="flex items-center gap-2">
+        <UserAvatar avatarUrl={user?.avatar} name={displayName} size={40} className="shrink-0" />
+        <div className="flex flex-col gap-0.5">
+          {user?.username && (
+            <p className="text-b3-grey font-neue-montreal-semibold text-left text-sm">{user.username}</p>
+          )}
+          {user?.email && (
+            <div className="flex items-center gap-1">
+              <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">{user.email}</p>
+              <CopyToClipboard text={user.email} />
+            </div>
+          )}
+        </div>
+      </div>
+      <button
+        className="border-b3-line hover:bg-b3-line flex items-center justify-center gap-1.5 rounded-xl border border-solid px-3 py-2 transition-colors"
+        onClick={onLogoutEnhanced}
+        disabled={logoutLoading}
+      >
+        {logoutLoading ? (
+          <Loader2 className="animate-spin" size={16} />
+        ) : (
+          <SignOutIcon size={16} className="text-b3-grey" />
+        )}
+        <p className="text-b3-grey font-neue-montreal-semibold text-sm">Sign out</p>
+      </button>
+    </div>
+  );
+}
+
 export function Header({ onLogout }: { onLogout?: () => void }) {
+  const { authStrategy } = useB3Config();
+
+  if (authStrategy === "better-auth") {
+    return <BetterAuthHeader onLogout={onLogout} />;
+  }
+
+  return <WalletHeader onLogout={onLogout} />;
+}
+
+function WalletHeader({ onLogout }: { onLogout?: () => void }) {
   const activeWallet = useActiveWallet();
 
   const connectedWallets = useConnectedWallets();
@@ -110,10 +174,13 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
 
   const onLogoutEnhanced = async () => {
     setLogoutLoading(true);
-    await logout();
-    onLogout?.();
-    setB3ModalOpen(false);
-    setLogoutLoading(false);
+    try {
+      await logout();
+      onLogout?.();
+    } finally {
+      setB3ModalOpen(false);
+      setLogoutLoading(false);
+    }
   };
 
   const handleWalletSwitch = (wallet: Wallet) => {

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

@@ -1,3 +1,4 @@
+import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { Tabs, TabsContent, TabsList, TabTrigger } from "../ui/Tabs";
 import { Header } from "./Header";
 import HomeActions from "./HomeActions";
@@ -11,31 +12,36 @@ interface HomeContentProps {
 }
 
 export function HomeContent({ showDeposit = false, showSwap = true }: HomeContentProps) {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
+
   return (
     <div className="flex flex-col">
       <Header />
       <div className="flex flex-col">
         <ProfileSection />
 
-        <HomeActions showDeposit={showDeposit} showSwap={showSwap} />
-        <div className="b3-modal-balance-content space-y-2 p-5">
-          <Tabs defaultValue={"balance"}>
-            <TabsList className="b3-modal-balance-tabs-list">
-              <TabTrigger value="balance" className="font-neue-montreal-semibold p-0 pr-3">
-                Balance
-              </TabTrigger>
-              <TabTrigger value="nfts" className="font-neue-montreal-semibold p-0 pr-3">
-                NFTs
-              </TabTrigger>
-            </TabsList>
-            <TabsContent value="balance" className="px-0 pb-4 pt-2">
-              <TokenContent />
-            </TabsContent>
-            <TabsContent value="nfts" className="px-0 pb-4 pt-2">
-              <NFTContent />
-            </TabsContent>
-          </Tabs>
-        </div>
+        {!isBetterAuth && <HomeActions showDeposit={showDeposit} showSwap={showSwap} />}
+        {!isBetterAuth && (
+          <div className="b3-modal-balance-content space-y-2 p-5">
+            <Tabs defaultValue={"balance"}>
+              <TabsList className="b3-modal-balance-tabs-list">
+                <TabTrigger value="balance" className="font-neue-montreal-semibold p-0 pr-3">
+                  Balance
+                </TabTrigger>
+                <TabTrigger value="nfts" className="font-neue-montreal-semibold p-0 pr-3">
+                  NFTs
+                </TabTrigger>
+              </TabsList>
+              <TabsContent value="balance" className="px-0 pb-4 pt-2">
+                <TokenContent />
+              </TabsContent>
+              <TabsContent value="nfts" className="px-0 pb-4 pt-2">
+                <NFTContent />
+              </TabsContent>
+            </Tabs>
+          </div>
+        )}
       </div>
     </div>
   );

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

@@ -2,6 +2,7 @@ import {
   ManageAccountModalProps,
   TabsContentPrimitive,
   TabsPrimitive,
+  useB3Config,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
 import { Chain } from "thirdweb";
@@ -74,9 +75,21 @@ export function ManageAccount({
   showSwap,
   showDeposit,
 }: ManageAccountProps) {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const contentType = useModalStore(state => state.contentType);
   const { activeTab = "home", setActiveTab } = contentType as ManageAccountModalProps;
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+
+  // Better Auth: single-view layout — no Home/Swap tabs, just settings content
+  if (isBetterAuth) {
+    return (
+      <div className="b3-manage-account flex-1">
+        <SettingsContent partnerId={partnerId} onLogout={onLogout} chain={chain} />
+      </div>
+    );
+  }
+
   return (
     <div className="b3-manage-account flex-1">
       <TabsPrimitive