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

package/dist/cjs/global-account/react/components/ManageAccount/Header.js

@@ -39,13 +39,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = Header;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
-const constants_1 = require("../../../../shared/constants");
 const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
 const framer_motion_1 = require("framer-motion");
-const boring_avatars_1 = __importDefault(require("boring-avatars"));
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
+const UserAvatar_1 = require("../UserAvatar/UserAvatar");
 const ChevronDownIcon_1 = require("../icons/ChevronDownIcon");
 const LinkIcon_1 = __importDefault(require("../icons/LinkIcon"));
 const SignOutIcon_1 = __importDefault(require("../icons/SignOutIcon"));
@@ -98,7 +97,7 @@ function BetterAuthHeader({ onLogout }) {
             setLogoutLoading(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-background border-b3-line flex items-center justify-between border-b px-5 py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "size-10 shrink-0 overflow-hidden rounded-full", children: (0, jsx_runtime_1.jsx)(boring_avatars_1.default, { name: displayName, variant: "beam", size: 40, colors: constants_1.AVATAR_COLORS }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5", children: [user?.username && ((0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-left text-sm", children: user.username })), user?.email && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: user.email }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: user.email })] }))] })] }), (0, jsx_runtime_1.jsxs)("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, children: [logoutLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(SignOutIcon_1.default, { size: 16, className: "text-b3-grey" })), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Sign out" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-background border-b3-line flex items-center justify-between border-b px-5 py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(UserAvatar_1.UserAvatar, { avatarUrl: user?.avatar, name: displayName, size: 40, className: "shrink-0" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5", children: [user?.username && ((0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-left text-sm", children: user.username })), user?.email && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: user.email }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: user.email })] }))] })] }), (0, jsx_runtime_1.jsxs)("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, children: [logoutLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(SignOutIcon_1.default, { size: 16, className: "text-b3-grey" })), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Sign out" })] })] }));
 }
 function Header({ onLogout }) {
     const { authStrategy } = (0, react_1.useB3Config)();

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

@@ -10,9 +10,15 @@ const BottomNavigation_1 = __importDefault(require("./BottomNavigation"));
 const HomeContent_1 = require("./HomeContent");
 const SettingsContent_1 = __importDefault(require("./SettingsContent"));
 function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }) {
+    const { authStrategy } = (0, react_1.useB3Config)();
+    const isBetterAuth = authStrategy === "better-auth";
     const contentType = (0, react_1.useModalStore)(state => state.contentType);
     const { activeTab = "home", setActiveTab } = contentType;
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    // Better Auth: single-view layout — no Home/Swap tabs, just settings content
+    if (isBetterAuth) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "b3-manage-account flex-1", children: (0, jsx_runtime_1.jsx)(SettingsContent_1.default, { partnerId: partnerId, onLogout: onLogout, chain: chain }) }));
+    }
     return ((0, jsx_runtime_1.jsx)("div", { className: "b3-manage-account flex-1", children: (0, jsx_runtime_1.jsxs)(react_1.TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
                 const tab = value;
                 if (tab === "swap") {

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

@@ -52,7 +52,7 @@ const SettingsContent = ({ partnerId, onLogout, chain, }) => {
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[470px] flex-col", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { showBackButton: false, showCloseButton: false, title: "Settings" }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(SettingsProfileCard_1.default, {}) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 px-5", children: [!isBetterAuth && ((0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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") })), (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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") }), (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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_1.SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-auto px-5 pb-5", children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[470px] flex-col", children: [!isBetterAuth && (0, jsx_runtime_1.jsx)(ModalHeader_1.default, { showBackButton: false, showCloseButton: false, title: "Settings" }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(SettingsProfileCard_1.default, {}) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 px-5", children: [!isBetterAuth && ((0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Link, { size: 18, className: "text-[#51525c]" }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") })), (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 18, className: "text-[#51525c]" }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") }), (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { size: 18, className: "text-[#51525c]" }), title: "Stay signed in", subtitle: session_duration_1.SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-auto px-5 pb-5", children: (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-grey animate-spin", size: 20 })) : ((0, jsx_runtime_1.jsx)(SignOutIcon_1.default, { size: 20, className: "text-b3-grey", color: "currentColor" })), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey dark:text-b3-foreground-muted font-neue-montreal-semibold text-base", children: "Sign out" })] }) })] }));
 };

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

@@ -10,10 +10,10 @@ const Icon_1 = __importDefault(require("../../../../global-account/react/compone
 const constants_1 = require("../../../../shared/constants");
 const utils_1 = require("../../../../shared/utils");
 const react_2 = require("@headlessui/react");
-const boring_avatars_1 = __importDefault(require("boring-avatars"));
 const react_3 = require("react");
 const react_4 = require("thirdweb/react");
 const useUser_1 = require("../../hooks/useUser");
+const UserAvatar_1 = require("../UserAvatar/UserAvatar");
 const ManageAccountButton_1 = require("../custom/ManageAccountButton");
 function SignIn(props) {
     const { className } = props;
@@ -49,11 +49,11 @@ function SignIn(props) {
     }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
     const isLoggedIn = isBetterAuth ? isAuthenticated : !!globalAddress;
     // Desktop version - original dropdown menu
-    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: isLoggedIn ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [isBetterAuth ? ((0, jsx_runtime_1.jsx)(boring_avatars_1.default, { name: userDisplayName, variant: "beam", size: 24, colors: constants_1.AVATAR_COLORS })) : (!!walletImage && ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" }))), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: isBetterAuth ? userDisplayName : ensName ? ensName : (0, utils_1.truncateAddress)(globalAddress ?? "") })] }), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
+    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: isLoggedIn ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [isBetterAuth ? ((0, jsx_runtime_1.jsx)(UserAvatar_1.UserAvatar, { avatarUrl: user?.avatar, name: userDisplayName, size: 24 })) : (!!walletImage && ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" }))), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: isBetterAuth ? userDisplayName : ensName ? ensName : (0, utils_1.truncateAddress)(globalAddress ?? "") })] }), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background", children: [isBetterAuth ? (
                                     /* Better Auth: show user info instead of wallet switching */
-                                    (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 rounded-xl p-3", children: [(0, jsx_runtime_1.jsx)(boring_avatars_1.default, { name: userDisplayName, variant: "beam", size: 48, colors: constants_1.AVATAR_COLORS }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5", children: [user?.username && (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-primary font-semibold", children: user.username }), user?.email && (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-secondary text-sm", children: user.email })] })] })) : connectedEOAWallet ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-4 grow", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress ?? "") })] })] }), isActiveEOAWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
+                                    (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 rounded-xl p-3", children: [(0, jsx_runtime_1.jsx)(UserAvatar_1.UserAvatar, { avatarUrl: user?.avatar, name: userDisplayName, size: 48 }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5", children: [user?.username && (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-primary font-semibold", children: user.username }), user?.email && (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-secondary text-sm", children: user.email })] })] })) : connectedEOAWallet ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-4 grow", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress ?? "") })] })] }), isActiveEOAWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "grow pl-4", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress ?? "") }), (0, jsx_runtime_1.jsx)("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] }))), (0, jsx_runtime_1.jsx)("div", { className: "ml-3", children: (0, jsx_runtime_1.jsx)(ManageAccountButton_1.ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), (0, jsx_runtime_1.jsx)("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: (0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-primary mr-auto transition-colors", children: isBetterAuth ? "Sign out" : "Disconnect" })] }) })] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
                     console.log("User authenticated with Global Account!", globalAccount);

package/dist/cjs/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/cjs/global-account/react/components/UserAvatar/UserAvatar.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserAvatar = UserAvatar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
+const constants_1 = require("../../../../shared/constants");
+const boring_avatars_1 = __importDefault(require("boring-avatars"));
+const react_1 = require("react");
+const IPFSMediaRenderer_1 = require("../IPFSMediaRenderer/IPFSMediaRenderer");
+/**
+ * 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.
+ */
+function UserAvatar({ avatarUrl, name = "user", size = 40, className }) {
+    const resolvedSrc = (0, profileDisplay_1.validateImageUrl)(avatarUrl);
+    const [imgError, setImgError] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setImgError(false);
+    }, [avatarUrl]);
+    const handleImgError = (0, react_1.useCallback)(() => setImgError(true), []);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { width: size, height: size, minWidth: size, minHeight: size }, children: resolvedSrc && !imgError ? ((0, jsx_runtime_1.jsx)("div", { onErrorCapture: handleImgError, className: "h-full w-full overflow-hidden rounded-full", children: (0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: resolvedSrc, alt: name, className: "h-full w-full object-cover" }) })) : ((0, jsx_runtime_1.jsx)(boring_avatars_1.default, { name: name, variant: "beam", size: size, colors: constants_1.AVATAR_COLORS })) }));
+}

package/dist/cjs/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/cjs/global-account/react/components/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = exports.CommandShortcut = exports.CommandSeparator = exports.CommandList = exports.CommandItem = exports.CommandInput = exports.CommandGroup = exports.CommandEmpty = exports.CommandDialog = exports.Command = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.WalletConnectorIcon = exports.StaggeredFadeLoader = exports.CopyToClipboard = exports.ClientOnly = exports.customButtonVariants = exports.CustomButton = exports.SingleUserSearchSelector = exports.SendERC20Button = exports.SendETHButton = exports.MintButton = exports.AccountAssets = exports.RequestPermissionsButton = exports.RequestPermissions = exports.IPFSMediaRenderer = exports.Send = exports.Deposit = exports.ManageAccount = exports.isWalletType = exports.getConnectOptionsFromStrategy = exports.LoginStepContainer = exports.SignInWithB3Privy = exports.SignInWithB3Flow = exports.SignInWithB3 = exports.WalletRow = exports.PermissionItem = exports.AuthButton = exports.BetterAuthVerifyEmail = exports.BetterAuthSignIn = exports.BetterAuthResetPassword = exports.StyleRoot = exports.useB3Config = exports.useB3Account = exports.useB3 = exports.RelayKitProviderWrapper = exports.B3Provider = exports.B3DynamicModal = void 0;
-exports.TooltipTrigger = exports.TooltipProvider = exports.TooltipContent = exports.Tooltip = exports.TextShimmer = exports.TextLoop = exports.TabTrigger = exports.TabsTransitionWrapper = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TabTriggerPrimitive = exports.TabsPrimitive = exports.TabsListPrimitive = exports.TabsContentPrimitive = exports.Skeleton = exports.ShinyButton = exports.ScrollBar = exports.ScrollArea = exports.PopoverTrigger = exports.PopoverContent = exports.Popover = exports.Loading = exports.Input = exports.GlareCardRounded = exports.GlareCard = exports.DropdownMenuTrigger = exports.DropdownMenuSeparator = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenu = exports.DrawerTrigger = exports.DrawerTitle = exports.DrawerPortal = exports.DrawerOverlay = exports.DrawerHeader = exports.DrawerFooter = exports.DrawerDescription = exports.DrawerContent = exports.DrawerClose = exports.Drawer = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = void 0;
-exports.WalletImage = exports.useToastContext = exports.ToastProvider = exports.ToastContainer = exports.Toast = exports.toast = exports.AnimatedLottie = exports.TransitionPanel = void 0;
+exports.CommandShortcut = exports.CommandSeparator = exports.CommandList = exports.CommandItem = exports.CommandInput = exports.CommandGroup = exports.CommandEmpty = exports.CommandDialog = exports.Command = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.WalletConnectorIcon = exports.StaggeredFadeLoader = exports.CopyToClipboard = exports.ClientOnly = exports.customButtonVariants = exports.CustomButton = exports.SingleUserSearchSelector = exports.SendERC20Button = exports.SendETHButton = exports.MintButton = exports.AccountAssets = exports.RequestPermissionsButton = exports.RequestPermissions = exports.IPFSMediaRenderer = exports.Send = exports.Deposit = exports.UserAvatar = exports.ManageAccount = exports.isWalletType = exports.getConnectOptionsFromStrategy = exports.LoginStepContainer = exports.SignInWithB3Privy = exports.SignInWithB3Flow = exports.SignInWithB3 = exports.WalletRow = exports.PermissionItem = exports.AuthButton = exports.BetterAuthVerifyEmail = exports.BetterAuthSignIn = exports.BetterAuthResetPassword = exports.StyleRoot = exports.useB3Config = exports.useB3Account = exports.useB3 = exports.RelayKitProviderWrapper = exports.B3Provider = exports.B3DynamicModal = void 0;
+exports.TooltipProvider = exports.TooltipContent = exports.Tooltip = exports.TextShimmer = exports.TextLoop = exports.TabTrigger = exports.TabsTransitionWrapper = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TabTriggerPrimitive = exports.TabsPrimitive = exports.TabsListPrimitive = exports.TabsContentPrimitive = exports.Skeleton = exports.ShinyButton = exports.ScrollBar = exports.ScrollArea = exports.PopoverTrigger = exports.PopoverContent = exports.Popover = exports.Loading = exports.Input = exports.GlareCardRounded = exports.GlareCard = exports.DropdownMenuTrigger = exports.DropdownMenuSeparator = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenu = exports.DrawerTrigger = exports.DrawerTitle = exports.DrawerPortal = exports.DrawerOverlay = exports.DrawerHeader = exports.DrawerFooter = exports.DrawerDescription = exports.DrawerContent = exports.DrawerClose = exports.Drawer = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = void 0;
+exports.WalletImage = exports.useToastContext = exports.ToastProvider = exports.ToastContainer = exports.Toast = exports.toast = exports.AnimatedLottie = exports.TransitionPanel = exports.TooltipTrigger = void 0;
 // TODO woj: Barrel file for all components, this might be reason of bundle size issues
 // Core Components
 var B3DynamicModal_1 = require("./B3DynamicModal");
@@ -49,6 +49,9 @@ Object.defineProperty(exports, "isWalletType", { enumerable: true, get: function
 // ManageAccount Components
 var ManageAccount_1 = require("./ManageAccount/ManageAccount");
 Object.defineProperty(exports, "ManageAccount", { enumerable: true, get: function () { return ManageAccount_1.ManageAccount; } });
+// UserAvatar
+var UserAvatar_1 = require("./UserAvatar/UserAvatar");
+Object.defineProperty(exports, "UserAvatar", { enumerable: true, get: function () { return UserAvatar_1.UserAvatar; } });
 // Deposit Components
 var Deposit_1 = require("./Deposit/Deposit");
 Object.defineProperty(exports, "Deposit", { enumerable: true, get: function () { return Deposit_1.Deposit; } });

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CopyToClipboard, useAuthentication, useB3Config, useModalStore, } from "../../../../global-account/react/index.js";
-import { AVATAR_COLORS } from "../../../../shared/constants/index.js";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { AnimatePresence, motion } from "framer-motion";
-import Avatar from "boring-avatars";
 import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useActiveWallet, useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { UserAvatar } from "../UserAvatar/UserAvatar.js";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
 import LinkIcon from "../icons/LinkIcon.js";
 import SignOutIcon from "../icons/SignOutIcon.js";
@@ -59,7 +58,7 @@ function BetterAuthHeader({ onLogout }) {
             setLogoutLoading(false);
         }
     };
-    return (_jsxs("div", { className: "bg-b3-background border-b3-line flex items-center justify-between border-b px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "size-10 shrink-0 overflow-hidden rounded-full", children: _jsx(Avatar, { name: displayName, variant: "beam", size: 40, colors: AVATAR_COLORS }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [user?.username && (_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-left text-sm", children: user.username })), user?.email && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: user.email }), _jsx(CopyToClipboard, { text: user.email })] }))] })] }), _jsxs("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, children: [logoutLoading ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(SignOutIcon, { size: 16, className: "text-b3-grey" })), _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Sign out" })] })] }));
+    return (_jsxs("div", { className: "bg-b3-background border-b3-line flex items-center justify-between border-b px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(UserAvatar, { avatarUrl: user?.avatar, name: displayName, size: 40, className: "shrink-0" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [user?.username && (_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-left text-sm", children: user.username })), user?.email && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: user.email }), _jsx(CopyToClipboard, { text: user.email })] }))] })] }), _jsxs("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, children: [logoutLoading ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(SignOutIcon, { size: 16, className: "text-b3-grey" })), _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Sign out" })] })] }));
 }
 export function Header({ onLogout }) {
     const { authStrategy } = useB3Config();

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/SettingsContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";
@@ -47,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: [!isBetterAuth && (_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/SignInWithB3/SignIn.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 { AVATAR_COLORS, ecosystemWalletId } from "../../../../shared/constants/index.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 Avatar from "boring-avatars";
 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;
@@ -43,11 +43,11 @@ export function SignIn(props) {
     }, [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: 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(Avatar, { name: userDisplayName, variant: "beam", size: 24, colors: AVATAR_COLORS })) : (!!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, 
+    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: [isBetterAuth ? (
                                     /* Better Auth: show user info instead of wallet switching */
-                                    _jsxs("div", { className: "flex items-center gap-3 rounded-xl p-3", children: [_jsx(Avatar, { name: userDisplayName, variant: "beam", size: 48, colors: AVATAR_COLORS }), _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
+                                    _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: isBetterAuth ? "Sign out" : "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
                     console.log("User authenticated with Global Account!", globalAccount);

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.25",
+  "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/ManageAccount/Header.tsx

@@ -5,14 +5,13 @@ import {
   useB3Config,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
-import { AVATAR_COLORS } from "@b3dotfun/sdk/shared/constants";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { AnimatePresence, motion } from "framer-motion";
-import Avatar from "boring-avatars";
 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";
@@ -115,9 +114,7 @@ function BetterAuthHeader({ onLogout }: { onLogout?: () => void }) {
   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">
-        <div className="size-10 shrink-0 overflow-hidden rounded-full">
-          <Avatar name={displayName} variant="beam" size={40} colors={AVATAR_COLORS} />
-        </div>
+        <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>

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

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

@@ -1,7 +1,7 @@
 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";
@@ -60,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">
@@ -73,41 +73,20 @@ const SettingsContent = ({
       <div className="space-y-3 px-5">
         {!isBetterAuth && (
           <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={<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>
-          }
+          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/SignInWithB3/SignIn.tsx

@@ -10,13 +10,13 @@ import {
   useIsMobile,
 } from "@b3dotfun/sdk/global-account/react";
 import Icon from "@b3dotfun/sdk/global-account/react/components/custom/Icon";
-import { AVATAR_COLORS, ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
-import Avatar from "boring-avatars";
 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 = {
@@ -92,7 +92,7 @@ export function SignIn(props: SignInWithB3Props) {
           <>
             <MenuButton className="bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none">
               {isBetterAuth ? (
-                <Avatar name={userDisplayName} variant="beam" size={24} colors={AVATAR_COLORS} />
+                <UserAvatar avatarUrl={user?.avatar} name={userDisplayName} size={24} />
               ) : (
                 !!walletImage && (
                   <IPFSMediaRenderer
@@ -124,7 +124,7 @@ export function SignIn(props: SignInWithB3Props) {
                   {isBetterAuth ? (
                     /* Better Auth: show user info instead of wallet switching */
                     <div className="flex items-center gap-3 rounded-xl p-3">
-                      <Avatar name={userDisplayName} variant="beam" size={48} colors={AVATAR_COLORS} />
+                      <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>}

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";