@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.10

package/dist/esm/global-account/react/components/B3Provider/BetterAuthProvider.js

@@ -0,0 +1,156 @@
+import app from "../../../../global-account/app.js";
+import { useAuthStore } from "../../../../global-account/react/index.js";
+import { B3_AUTH_COOKIE_NAME } from "../../../../shared/constants/index.js";
+import { debugB3React } from "../../../../shared/utils/debug.js";
+import Cookies from "js-cookie";
+import { useEffect, useRef } from "react";
+import { getBetterAuthClient } from "../../../better-auth-client.js";
+import { useUserQuery } from "../../hooks/useUserQuery.js";
+const debug = debugB3React("BetterAuthProvider");
+/**
+ * Parallel to AuthenticationProvider for Better Auth strategy.
+ *
+ * Manages the isAuthenticating lifecycle for Better Auth:
+ * 1. On mount, try to restore an existing Feathers JWT (from a previous login)
+ * 2. If no Feathers JWT, check for a Better Auth session (e.g. after OAuth redirect)
+ *    and exchange it for a Feathers JWT
+ * 3. If neither exists, set isAuthenticating: false so the login UI renders
+ *
+ * Also patches app.logout() so any code path that calls it (useAuthentication,
+ * useAuth, SignIn component, etc.) automatically clears the Better Auth session.
+ */
+const BetterAuthProvider = ({ partnerId }) => {
+    const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
+    const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+    const setIsConnected = useAuthStore(state => state.setIsConnected);
+    const { setUser } = useUserQuery();
+    const hasAttemptedRestore = useRef(false);
+    const hasPatched = useRef(false);
+    // Patch app.logout() to also clear the Better Auth session.
+    // This ensures any existing logout path (useAuthentication, useAuth, SignIn
+    // dropdown, etc.) clears both the Feathers JWT and the Better Auth session.
+    // Patch app.logout() to also clear the Better Auth session.
+    // Only handles Better Auth signOut — state cleanup (isAuthenticated, isConnected,
+    // setUser, localStorage) is handled by useAuthentication/useAuth's own logout.
+    useEffect(() => {
+        if (hasPatched.current)
+            return;
+        hasPatched.current = true;
+        const originalLogout = app.logout.bind(app);
+        app.logout = async () => {
+            debug("Patched logout: clearing Better Auth session");
+            try {
+                await getBetterAuthClient().signOut();
+            }
+            catch {
+                debug("Better Auth signOut failed (non-critical)");
+            }
+            return originalLogout();
+        };
+        return () => {
+            app.logout = originalLogout;
+            hasPatched.current = false;
+        };
+    }, []);
+    // Session restore on mount
+    useEffect(() => {
+        if (hasAttemptedRestore.current)
+            return;
+        hasAttemptedRestore.current = true;
+        const restoreSession = async () => {
+            debug("Attempting session restore");
+            // 1. Try existing Feathers JWT first (fastest — no network call to Better Auth)
+            try {
+                const response = await app.reAuthenticate();
+                if (response?.user) {
+                    debug("Feathers JWT restored", { userId: response.user.userId });
+                    setUser(response.user);
+                    setIsAuthenticated(true);
+                    setIsConnected(true);
+                    setIsAuthenticating(false);
+                    return;
+                }
+            }
+            catch {
+                debug("No existing Feathers JWT");
+            }
+            // 2. Check for _ba_token in URL (OAuth callback with third-party cookie bypass).
+            //    When the API and frontend are on different domains, browsers with third-party
+            //    cookie blocking (Firefox TCP, Safari ITP, Chrome Privacy Sandbox) prevent the
+            //    better-auth.session_token cookie from being sent on cross-origin requests.
+            //    The B3 API injects the session token into the redirect URL as _ba_token,
+            //    allowing direct exchange without relying on cookies.
+            const params = new URLSearchParams(window.location.search);
+            const baToken = params.get("_ba_token");
+            if (baToken) {
+                debug("Found _ba_token in URL, exchanging for Feathers JWT");
+                // Clean the token from the URL immediately (security)
+                params.delete("_ba_token");
+                const cleanSearch = params.toString();
+                const cleanUrl = window.location.pathname + (cleanSearch ? `?${cleanSearch}` : "") + window.location.hash;
+                window.history.replaceState({}, "", cleanUrl);
+                try {
+                    const response = await app.authenticate({
+                        strategy: "better-auth",
+                        accessToken: baToken,
+                        partnerId,
+                    });
+                    if (response.accessToken) {
+                        Cookies.set(B3_AUTH_COOKIE_NAME, response.accessToken, {
+                            secure: true,
+                            sameSite: "Lax",
+                        });
+                    }
+                    if (response.user) {
+                        setUser(response.user);
+                        setIsAuthenticated(true);
+                        setIsConnected(true);
+                    }
+                    debug("_ba_token exchanged for Feathers JWT", { userId: response.user?.userId });
+                    setIsAuthenticating(false);
+                    return;
+                }
+                catch (err) {
+                    debug("_ba_token exchange failed", err);
+                }
+            }
+            // 3. Check for a Better Auth session via cookie (works when API and frontend
+            //    share a domain or when cookies aren't partitioned)
+            try {
+                const session = await getBetterAuthClient().getSession();
+                if (session.data?.session?.token) {
+                    debug("Better Auth session found, exchanging for Feathers JWT", {
+                        betterAuthUserId: session.data.user?.id,
+                    });
+                    const response = await app.authenticate({
+                        strategy: "better-auth",
+                        accessToken: session.data.session.token,
+                        partnerId,
+                    });
+                    if (response.accessToken) {
+                        Cookies.set(B3_AUTH_COOKIE_NAME, response.accessToken, {
+                            secure: true,
+                            sameSite: "Lax",
+                        });
+                    }
+                    if (response.user) {
+                        setUser(response.user);
+                        setIsAuthenticated(true);
+                        setIsConnected(true);
+                    }
+                    debug("OAuth session exchanged for Feathers JWT", { userId: response.user?.userId });
+                    setIsAuthenticating(false);
+                    return;
+                }
+            }
+            catch {
+                debug("No Better Auth session to restore");
+            }
+            // 4. Nothing found — show login UI
+            setIsAuthenticating(false);
+        };
+        restoreSession();
+    }, [setIsAuthenticated, setIsAuthenticating, setIsConnected, setUser, partnerId]);
+    return null;
+};
+export default BetterAuthProvider;

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

@@ -6,13 +6,15 @@ import { Wallet } from "thirdweb/wallets";
 export interface LocalSDKContextType {
     onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     onLogoutCallback?: () => void | Promise<void>;
+    disableBSMNTAuthentication?: boolean;
 }
 export declare const LocalSDKContext: import("react").Context<LocalSDKContextType>;
 /**
  * Local SDK Provider that wraps the app and provides internal SDK state
  */
-export declare function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, }: {
+export declare function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, disableBSMNTAuthentication, }: {
     children: React.ReactNode;
     onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     onLogoutCallback?: () => void | Promise<void>;
+    disableBSMNTAuthentication?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/B3Provider/LocalSDKProvider.js

@@ -3,13 +3,15 @@ import { createContext } from "react";
 export const LocalSDKContext = createContext({
     onConnectCallback: undefined,
     onLogoutCallback: undefined,
+    disableBSMNTAuthentication: false,
 });
 /**
  * Local SDK Provider that wraps the app and provides internal SDK state
  */
-export function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, }) {
+export function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, disableBSMNTAuthentication, }) {
     return (_jsx(LocalSDKContext.Provider, { value: {
             onConnectCallback,
             onLogoutCallback,
+            disableBSMNTAuthentication,
         }, children: children }));
 }

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

@@ -16,6 +16,8 @@ interface IPFSMediaRendererProps {
     controls?: boolean;
     /** Style object */
     style?: React.CSSProperties;
+    /** Callback when media fails to load */
+    onError?: () => void;
 }
 /**
  * IPFSMediaRenderer - A wrapper around Thirdweb's MediaRenderer that configures
@@ -35,5 +37,5 @@ interface IPFSMediaRendererProps {
  * />
  * ```
  */
-export declare function IPFSMediaRenderer({ src, alt, className, client, width, height, controls, style, }: IPFSMediaRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function IPFSMediaRenderer({ src, alt, className, client, width, height, controls, style, onError, }: IPFSMediaRendererProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -21,7 +21,7 @@ import { MediaRenderer } from "thirdweb/react";
  * />
  * ```
  */
-export function IPFSMediaRenderer({ src, alt = "Media", className, client = defaultClient, width, height, controls, style, }) {
+export function IPFSMediaRenderer({ src, alt = "Media", className, client = defaultClient, width, height, controls, style, onError, }) {
     // If no source, render fallback
     if (!src) {
         return (_jsx("div", { className: className, style: style, "aria-label": alt, children: _jsx("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: alt.charAt(0).toUpperCase() }) }) }));
@@ -29,5 +29,7 @@ export function IPFSMediaRenderer({ src, alt = "Media", className, client = defa
     // Convert IPFS URLs to HTTP gateway URLs using our preferred gateway
     // This avoids Thirdweb's default cloudflare-ipfs.com which can be unreliable
     const resolvedSrc = src.startsWith("ipfs://") ? getIpfsUrl(src) : src;
-    return (_jsx(MediaRenderer, { src: resolvedSrc, client: client, alt: alt, className: className, width: width ? width.toString() : undefined, height: height ? height.toString() : undefined, controls: controls, style: style }));
+    // Wrap in a span with onErrorCapture to catch img/video load errors from
+    // MediaRenderer, which doesn't expose an onError prop itself.
+    return (_jsx("span", { onErrorCapture: onError, className: "contents", children: _jsx(MediaRenderer, { src: resolvedSrc, client: client, alt: alt, className: className, width: width ? width.toString() : undefined, height: height ? height.toString() : undefined, controls: controls, style: style }) }));
 }

package/dist/esm/global-account/react/components/LinkAccount/LinkedAccountItem.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, toast, useProfile } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
 import { truncateAddress } from "../../../../shared/utils/truncateAddress.js";
 import { Copy, Loader2, UnlinkIcon } from "lucide-react";
 // Helper function to check if a string is a wallet address and format it
@@ -30,7 +31,7 @@ const LinkedAccountItem = ({ profile, profileToUnlink, unlinkingAccountId, isUnl
             toast.error("Failed to copy address");
         }
     };
-    const displayImageUrl = profileData?.avatar || profile.imageUrl;
+    const displayImageUrl = validateImageUrl(profileData?.avatar) || validateImageUrl(profile.imageUrl);
     const displayName = profileData?.name || displayTitle;
     return (_jsxs("div", { className: "linked-account-item hover:bg-b3-line group flex cursor-pointer items-center justify-between rounded-xl p-4 transition-colors", children: [_jsxs("div", { className: "linked-account-info flex items-center gap-3", children: [displayImageUrl ? (_jsx("img", { src: displayImageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : (_jsx("div", { className: "linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { className: "linked-account-details", children: [_jsxs("div", { className: "linked-account-title-row flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: `linked-account-title text-b3-grey font-neue-montreal-semibold ${isAddress
                                                     ? "font-mono text-sm" // Use monospace font for addresses

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TabsListPrimitive, TabTriggerPrimitive, useModalStore } from "../../../../global-account/react/index.js";
+import { TabsListPrimitive, TabTriggerPrimitive, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
 const HomeIcon = () => {
     return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.5227 1.33636C12.1804 1.24368 11.8196 1.24368 11.4773 1.33636C11.08 1.44395 10.7454 1.7066 10.4784 1.91623L10.4038 1.97465L3.54376 7.31012C3.16713 7.6024 2.83532 7.85991 2.58806 8.19421C2.37107 8.48759 2.20942 8.8181 2.11106 9.1695C1.99898 9.56992 1.99943 9.98993 1.99995 10.4667L2.00002 17.8385C2 18.3657 1.99998 18.8204 2.03059 19.195C2.06289 19.5904 2.1342 19.9836 2.327 20.362C2.61462 20.9264 3.07356 21.3854 3.63805 21.673C4.01643 21.8658 4.40964 21.9371 4.80499 21.9694C5.17956 22 5.63431 22 6.16145 22H17.8386C18.3657 22 18.8205 22 19.195 21.9694C19.5904 21.9371 19.9836 21.8658 20.362 21.673C20.9265 21.3854 21.3854 20.9264 21.673 20.362C21.8658 19.9836 21.9371 19.5904 21.9694 19.195C22.0001 18.8204 22 18.3657 22 17.8386L22.0001 10.4667C22.0006 9.98993 22.0011 9.56992 21.889 9.1695C21.7906 8.8181 21.629 8.48759 21.412 8.19421C21.1647 7.8599 20.8329 7.6024 20.4563 7.31011L13.5963 1.97465L13.5216 1.91623C13.2546 1.7066 12.9201 1.44395 12.5227 1.33636ZM8.00003 16C7.44775 16 7.00003 16.4477 7.00003 17C7.00003 17.5523 7.44775 18 8.00003 18H16C16.5523 18 17 17.5523 17 17C17 16.4477 16.5523 16 16 16H8.00003Z", fill: "currentColor" }) }));
 };
@@ -11,11 +11,13 @@ const SettingsIcon = () => {
 };
 const BottomNavigation = () => {
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-    return (_jsx("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", 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", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), _jsxs(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: () => {
+    const { authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
+    return (_jsx("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", 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", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), !isBetterAuth && (_jsxs(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,
                         });
-                    }, children: [_jsx(SwapIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] }), _jsxs(TabTriggerPrimitive, { value: "settings", 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", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
+                    }, children: [_jsx(SwapIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] })), _jsxs(TabTriggerPrimitive, { value: "settings", 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", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
 };
 export default BottomNavigation;

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CopyToClipboard, useAuthentication, useModalStore, } from "../../../../global-account/react/index.js";
+import { CopyToClipboard, useAuthentication, useB3Config, useModalStore, } from "../../../../global-account/react/index.js";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { AnimatePresence, motion } from "framer-motion";
 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";
@@ -39,7 +40,34 @@ function WalletItem({ wallet, isActive, onClick }) {
                         : "Wallet";
     return (_jsxs("div", { className: `b3-modal-wallet-item ${isActive ? "b3-modal-wallet-item-active dark:bg-b3-line bg-[#F4F4F5]" : "hover:bg-b3-line/50"} box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors`, onClick: onClick, children: [_jsx("div", { className: "relative size-10 shrink-0 text-clip rounded-full", children: isGlobalAccount ? (_jsx("div", { className: "flex size-full items-center justify-center p-1", children: _jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : walletImage ? (_jsx("img", { src: walletImage, alt: walletName, className: "size-full object-contain p-1" })) : (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(WalletIcon, {}) })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold truncate text-sm", children: walletName }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) })] }), isActive && (_jsx("div", { className: "shrink-0", children: _jsx(CheckIcon, {}) }))] }));
 }
+function BetterAuthHeader({ onLogout }) {
+    const contentType = useModalStore(state => state.contentType);
+    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 (_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();
+    if (authStrategy === "better-auth") {
+        return _jsx(BetterAuthHeader, { onLogout: onLogout });
+    }
+    return _jsx(WalletHeader, { onLogout: onLogout });
+}
+function WalletHeader({ onLogout }) {
     const activeWallet = useActiveWallet();
     const connectedWallets = useConnectedWallets();
     const setActiveWallet = useSetActiveWallet();
@@ -56,10 +84,14 @@ export function Header({ onLogout }) {
     const isActiveGlobalAccount = activeWallet?.id.includes("ecosystem");
     const onLogoutEnhanced = async () => {
         setLogoutLoading(true);
-        await logout();
-        onLogout?.();
-        setB3ModalOpen(false);
-        setLogoutLoading(false);
+        try {
+            await logout();
+            onLogout?.();
+        }
+        finally {
+            setB3ModalOpen(false);
+            setLogoutLoading(false);
+        }
     };
     const handleWalletSwitch = (wallet) => {
         setActiveWallet(wallet);

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useB3Config } from "../../../../global-account/react/index.js";
 import { Tabs, TabsContent, TabsList, TabTrigger } from "../ui/Tabs.js";
 import { Header } from "./Header.js";
 import HomeActions from "./HomeActions.js";
@@ -6,5 +7,7 @@ import NFTContent from "./NFTContent.js";
 import ProfileSection from "./ProfileSection.js";
 import TokenContent from "./TokenContent.js";
 export function HomeContent({ showDeposit = false, showSwap = true }) {
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-col", children: [_jsx(ProfileSection, {}), _jsx(HomeActions, { showDeposit: showDeposit, showSwap: showSwap }), _jsx("div", { className: "b3-modal-balance-content space-y-2 p-5", children: _jsxs(Tabs, { defaultValue: "balance", children: [_jsxs(TabsList, { className: "b3-modal-balance-tabs-list", children: [_jsx(TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), _jsx(TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), _jsx(TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: _jsx(TokenContent, {}) }), _jsx(TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: _jsx(NFTContent, {}) })] }) })] })] }));
+    const { authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-col", children: [_jsx(ProfileSection, {}), !isBetterAuth && _jsx(HomeActions, { showDeposit: showDeposit, showSwap: showSwap }), !isBetterAuth && (_jsx("div", { className: "b3-modal-balance-content space-y-2 p-5", children: _jsxs(Tabs, { defaultValue: "balance", children: [_jsxs(TabsList, { className: "b3-modal-balance-tabs-list", children: [_jsx(TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), _jsx(TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), _jsx(TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: _jsx(TokenContent, {}) }), _jsx(TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: _jsx(NFTContent, {}) })] }) }))] })] }));
 }

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,13 +1,18 @@
 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";
 import { Pencil } from "lucide-react";
-import { useMemo } from "react";
+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 ProfileSection = () => {
+    const { authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
     const account = useActiveAccount();
     const { address: eoaAddress } = useFirstEOA();
     const { address: smartWalletAddress } = useAccountWallet();
@@ -20,7 +25,8 @@ const ProfileSection = () => {
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
     const navigateBack = useModalStore(state => state.navigateBack);
     const { data: simBalance } = useSimBalance(smartWalletAddress);
-    // Calculate total balance in USD
+    const [imgError, setImgError] = useState(false);
+    const handleImgError = useCallback(() => setImgError(true), []);
     const totalBalanceUsd = useMemo(() => {
         if (!simBalance?.balances)
             return 0;
@@ -31,15 +37,17 @@ const ProfileSection = () => {
         setB3ModalContentType({
             type: "avatarEditor",
             onSuccess: () => {
-                // navigate back on success
                 navigateBack();
             },
         });
     };
-    // IPFSMediaRenderer will handle IPFS URL conversion and validation
-    const avatarSrc = user?.avatar || profile?.avatar;
-    // Get current username - prioritize user.username, fallback to profile data
+    const avatarSrc = useMemo(() => validateImageUrl(user?.avatar) || validateImageUrl(profile?.avatar), [user?.avatar, profile?.avatar]);
+    // Reset error state when avatar source changes (e.g. user uploads a new avatar)
+    useEffect(() => {
+        setImgError(false);
+    }, [avatarSrc]);
     const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
-    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(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "border-b3-line border-1 bg-b3-primary-wash size-14 rounded-full border" }), _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/SessionDurationContent.d.ts

@@ -0,0 +1,5 @@
+interface SessionDurationContentProps {
+    partnerId: string;
+}
+declare const SessionDurationContent: ({ partnerId }: SessionDurationContentProps) => import("react/jsx-runtime").JSX.Element;
+export default SessionDurationContent;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import app from "../../../../global-account/app.js";
+import { useAuthentication, useModalStore } from "../../../../global-account/react/index.js";
+import { getSessionDurationDays, SESSION_DURATION_LABELS, SESSION_DURATION_OPTIONS, setSessionDurationDays, } from "../../../../shared/utils/session-duration.js";
+import { useState } from "react";
+import ModalHeader from "../ModalHeader/ModalHeader.js";
+const DESCRIPTIONS = {
+    0: "Sign out when browser closes",
+    1: "Stay signed in for 1 day",
+    7: "Stay signed in for 7 days",
+    14: "Stay signed in for 2 weeks",
+    30: "Stay signed in for 30 days",
+};
+const SessionDurationContent = ({ partnerId }) => {
+    const { user, setUser } = useAuthentication(partnerId);
+    const navigateBack = useModalStore(state => state.navigateBack);
+    const [sessionDays, setSessionDays] = useState(() => getSessionDurationDays(user?.preferences, partnerId));
+    const [saving, setSaving] = useState(false);
+    const handleSelect = async (days) => {
+        const previous = sessionDays;
+        setSessionDurationDays(days, partnerId);
+        setSessionDays(days);
+        if (user?.userId) {
+            setSaving(true);
+            try {
+                const updated = await app.service("users").patch(user.userId, {
+                    preferences: {
+                        ...user.preferences,
+                        [partnerId]: {
+                            ...((user.preferences ?? {})[partnerId] ?? {}),
+                            sessionDuration: days,
+                        },
+                    },
+                });
+                setUser(updated);
+            }
+            catch (error) {
+                console.error("Failed to save session duration preference:", error);
+                // Revert optimistic update so UI stays consistent with server state
+                setSessionDays(previous);
+                setSessionDurationDays(previous, partnerId);
+            }
+            finally {
+                setSaving(false);
+            }
+        }
+    };
+    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: true, showCloseButton: false, title: "Stay signed in", handleBack: navigateBack }), _jsx("div", { className: "flex flex-col gap-2 p-5", children: SESSION_DURATION_OPTIONS.map(days => (_jsxs("button", { type: "button", onClick: () => handleSelect(days), disabled: saving, className: `flex items-center justify-between rounded-xl border px-4 py-3 transition-colors ${sessionDays === days
+                        ? "border-[#3f3f46] bg-[#f4f4f5] dark:border-white dark:bg-white/10"
+                        : "border-[#e4e4e7] bg-transparent hover:bg-[#f4f4f5] dark:border-white/10 dark:hover:bg-white/5"}`, children: [_jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [_jsx("span", { className: "font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46] dark:text-white", children: SESSION_DURATION_LABELS[days] }), _jsx("span", { className: "font-neue-montreal-medium text-[13px] leading-none tracking-[-0.26px] text-[#70707b] dark:text-white/50", children: DESCRIPTIONS[days] })] }), sessionDays === days && (_jsx("div", { className: "flex size-5 items-center justify-center rounded-full bg-[#3f3f46] dark:bg-white", children: _jsx("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", children: _jsx("path", { d: "M1 4L3.5 6.5L9 1", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "dark:stroke-[#3f3f46]" }) }) }))] }, days))) })] }));
+};
+export default SessionDurationContent;

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

@@ -1,7 +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 { Loader2 } from "lucide-react";
+import { getSessionDurationDays, SESSION_DURATION_LABELS } from "../../../../shared/utils/session-duration.js";
+import { Bell, Clock, Link, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useProfiles } from "thirdweb/react";
 import SignOutIcon from "../icons/SignOutIcon.js";
@@ -9,49 +10,33 @@ 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 } = useAuthentication(partnerId);
+    const { logout, user } = useAuthentication(partnerId);
     const [logoutLoading, setLogoutLoading] = useState(false);
+    const sessionDays = getSessionDurationDays(user?.preferences, partnerId);
     const { data: profilesRaw = [] } = useProfiles({ client });
     const profiles = profilesRaw.filter((profile) => !["custom_auth_endpoint"].includes(profile.type));
     const handleNavigate = (type) => {
         if (type === "home") {
-            setB3ModalContentType({
-                type: "manageAccount",
-                chain,
-                partnerId,
-                onLogout,
-                activeTab: "home",
-            });
+            setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "home" });
         }
         else if (type === "swap") {
-            setB3ModalContentType({
-                type: "manageAccount",
-                chain,
-                partnerId,
-                onLogout,
-                activeTab: "tokens",
-            });
+            setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "tokens" });
         }
         else if (type === "linkAccount") {
-            setB3ModalContentType({
-                type: "linkAccount",
-                chain,
-                partnerId,
-            });
+            setB3ModalContentType({ type: "linkAccount", chain, partnerId });
         }
         else if (type === "notifications") {
-            setB3ModalContentType({
-                type: "notifications",
-                chain,
-                partnerId,
-            });
+            setB3ModalContentType({ type: "notifications", chain, partnerId });
+        }
+        else if (type === "sessionDuration") {
+            setB3ModalContentType({ type: "sessionDuration", chain, partnerId });
         }
         else {
-            setB3ModalContentType({
-                type: "avatarEditor",
-            });
+            setB3ModalContentType({ type: "avatarEditor" });
         }
         setB3ModalOpen(true);
     };
@@ -62,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("div", { className: "mt-auto px-5 pb-5", children: _jsxs("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" })] }) })] }));
 };