@b3dotfun/sdk 0.1.69-alpha.8 → 0.1.69-test.0

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

@@ -3,23 +3,22 @@ import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspen
 import { RelayKitProviderWrapper, TooltipProvider } from "@b3dotfun/sdk/global-account/react";
 import { createWagmiConfig } from "@b3dotfun/sdk/global-account/react/utils/createWagmiConfig";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
+import type { AuthStrategy } from "./B3ConfigProvider";
 import { loadGA4Script } from "@b3dotfun/sdk/global-account/utils/analytics";
+import { WalletProvider } from "@b3dotfun/sdk/wallet/react";
 import "@relayprotocol/relay-kit-ui/styles.css";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo } from "react";
-import { ThirdwebProvider } from "thirdweb/react";
 import { Account, EIP1193, Wallet } from "thirdweb/wallets";
-import { CreateConnectorFn, WagmiProvider } from "wagmi";
+import { CreateConnectorFn } from "wagmi";
 import { ClientType, setClientType } from "../../../client-manager";
 import { StyleRoot } from "../StyleRoot";
 import { setToastContext, ToastProvider, useToastContext } from "../Toast/index";
 import AuthenticationProvider from "./AuthenticationProvider";
 import { B3ConfigProvider } from "./B3ConfigProvider";
+import BetterAuthProvider from "./BetterAuthProvider";
 import { LocalSDKProvider } from "./LocalSDKProvider";
 
-// Create queryClient instance
-const queryClient = new QueryClient();
-
 /**
  * Main B3Provider component
  */
@@ -43,6 +42,9 @@ export function B3Provider({
   overrideDefaultConnectors = false,
   createClientReferenceId,
   defaultPermissions,
+  disableBSMNTAuthentication = false,
+  queryClient,
+  authStrategy = "thirdweb",
 }: {
   theme: "light" | "dark";
   children: React.ReactNode;
@@ -67,6 +69,11 @@ export function B3Provider({
   overrideDefaultConnectors?: boolean;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
   defaultPermissions?: PermissionsConfig;
+  disableBSMNTAuthentication?: boolean;
+  /** Provide your own QueryClient for React Query. If omitted, WalletProvider creates one internally. */
+  queryClient?: QueryClient;
+  /** Auth strategy: "thirdweb" (default, ecosystem wallet) or "better-auth" (email/password via Better Auth) */
+  authStrategy?: AuthStrategy;
 }) {
   // Initialize Google Analytics on mount
   useEffect(() => {
@@ -84,41 +91,46 @@ export function B3Provider({
   );
 
   return (
-    <ThirdwebProvider>
-      <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
-        <QueryClientProvider client={queryClient}>
-          <TooltipProvider>
-            <ToastProvider>
-              <LocalSDKProvider onConnectCallback={onConnect} onLogoutCallback={onLogout}>
-                <B3ConfigProvider
-                  accountOverride={accountOverride}
-                  environment={environment}
-                  automaticallySetFirstEoa={!!automaticallySetFirstEoa}
-                  theme={theme}
-                  clientType={clientType}
+    <WalletProvider wagmiConfig={wagmiConfig} queryClient={queryClient}>
+      <TooltipProvider>
+        <ToastProvider>
+          <LocalSDKProvider
+            onConnectCallback={onConnect}
+            onLogoutCallback={onLogout}
+            disableBSMNTAuthentication={disableBSMNTAuthentication}
+          >
+            <B3ConfigProvider
+              accountOverride={accountOverride}
+              environment={environment}
+              automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+              theme={theme}
+              clientType={clientType}
+              partnerId={partnerId}
+              stripePublishableKey={stripePublishableKey}
+              createClientReferenceId={createClientReferenceId}
+              defaultPermissions={defaultPermissions}
+              authStrategy={authStrategy}
+            >
+              <ToastContextConnector />
+              <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
+                {children}
+                {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
+                <StyleRoot id="b3-root" />
+              </RelayKitProviderWrapper>
+              {authStrategy === "better-auth" ? (
+                <BetterAuthProvider partnerId={partnerId} />
+              ) : (
+                <AuthenticationProvider
                   partnerId={partnerId}
-                  stripePublishableKey={stripePublishableKey}
-                  createClientReferenceId={createClientReferenceId}
-                  defaultPermissions={defaultPermissions}
-                >
-                  <ToastContextConnector />
-                  <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
-                    {children}
-                    {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
-                    <StyleRoot id="b3-root" />
-                  </RelayKitProviderWrapper>
-                  <AuthenticationProvider
-                    partnerId={partnerId}
-                    automaticallySetFirstEoa={!!automaticallySetFirstEoa}
-                    defaultEoaProvider={defaultEoaProvider}
-                  />
-                </B3ConfigProvider>
-              </LocalSDKProvider>
-            </ToastProvider>
-          </TooltipProvider>
-        </QueryClientProvider>
-      </WagmiProvider>
-    </ThirdwebProvider>
+                  automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+                  defaultEoaProvider={defaultEoaProvider}
+                />
+              )}
+            </B3ConfigProvider>
+          </LocalSDKProvider>
+        </ToastProvider>
+      </TooltipProvider>
+    </WalletProvider>
   );
 }
 

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

@@ -0,0 +1,127 @@
+import app from "@b3dotfun/sdk/global-account/app";
+import { useAuthStore } from "@b3dotfun/sdk/global-account/react";
+import { B3_AUTH_COOKIE_NAME } from "@b3dotfun/sdk/shared/constants";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import Cookies from "js-cookie";
+import { useEffect, useRef } from "react";
+import { betterAuthClient } from "../../../better-auth-client";
+import { useUserQuery } from "../../hooks/useUserQuery";
+
+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 }: { partnerId: string }) => {
+  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 as any).logout = async () => {
+      debug("Patched logout: clearing Better Auth session");
+      try {
+        await betterAuthClient.signOut();
+      } catch {
+        debug("Better Auth signOut failed (non-critical)");
+      }
+      return originalLogout();
+    };
+
+    return () => {
+      (app as any).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 a Better Auth session (e.g. after OAuth redirect sets a cookie)
+      try {
+        const session = await betterAuthClient.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,
+          } as any);
+
+          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");
+      }
+
+      // 3. Nothing found — show login UI
+      setIsAuthenticating(false);
+    };
+
+    restoreSession();
+  }, [setIsAuthenticated, setIsAuthenticating, setIsConnected, setUser, partnerId]);
+
+  return null;
+};
+
+export default BetterAuthProvider;

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

@@ -8,11 +8,13 @@ import { Wallet } from "thirdweb/wallets";
 export interface LocalSDKContextType {
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   onLogoutCallback?: () => void | Promise<void>;
+  disableBSMNTAuthentication?: boolean;
 }
 
 export const LocalSDKContext = createContext<LocalSDKContextType>({
   onConnectCallback: undefined,
   onLogoutCallback: undefined,
+  disableBSMNTAuthentication: false,
 });
 
 /**
@@ -22,16 +24,19 @@ export function LocalSDKProvider({
   children,
   onConnectCallback,
   onLogoutCallback,
+  disableBSMNTAuthentication,
 }: {
   children: React.ReactNode;
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   onLogoutCallback?: () => void | Promise<void>;
+  disableBSMNTAuthentication?: boolean;
 }) {
   return (
     <LocalSDKContext.Provider
       value={{
         onConnectCallback,
         onLogoutCallback,
+        disableBSMNTAuthentication,
       }}
     >
       {children}

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

@@ -22,6 +22,8 @@ interface IPFSMediaRendererProps {
   controls?: boolean;
   /** Style object */
   style?: React.CSSProperties;
+  /** Callback when media fails to load */
+  onError?: () => void;
 }
 
 /**
@@ -51,6 +53,7 @@ export function IPFSMediaRenderer({
   height,
   controls,
   style,
+  onError,
 }: IPFSMediaRendererProps) {
   // If no source, render fallback
   if (!src) {
@@ -67,16 +70,20 @@ export function IPFSMediaRenderer({
   // This avoids Thirdweb's default cloudflare-ipfs.com which can be unreliable
   const resolvedSrc = src.startsWith("ipfs://") ? getIpfsUrl(src) : src;
 
+  // Wrap in a span with onErrorCapture to catch img/video load errors from
+  // MediaRenderer, which doesn't expose an onError prop itself.
   return (
-    <MediaRenderer
-      src={resolvedSrc}
-      client={client}
-      alt={alt}
-      className={className}
-      width={width ? width.toString() : undefined}
-      height={height ? height.toString() : undefined}
-      controls={controls}
-      style={style}
-    />
+    <span onErrorCapture={onError} className="contents">
+      <MediaRenderer
+        src={resolvedSrc}
+        client={client}
+        alt={alt}
+        className={className}
+        width={width ? width.toString() : undefined}
+        height={height ? height.toString() : undefined}
+        controls={controls}
+        style={style}
+      />
+    </span>
   );
 }

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

@@ -1,4 +1,5 @@
 import { Button, toast, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { truncateAddress } from "@b3dotfun/sdk/shared/utils/truncateAddress";
 import { Copy, Loader2, UnlinkIcon } from "lucide-react";
 
@@ -55,7 +56,7 @@ const LinkedAccountItem = ({
     }
   };
 
-  const displayImageUrl = profileData?.avatar || profile.imageUrl;
+  const displayImageUrl = validateImageUrl(profileData?.avatar) || validateImageUrl(profile.imageUrl);
   const displayName = profileData?.name || displayTitle;
 
   return (

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

@@ -5,14 +5,18 @@ import {
   useSimBalance,
   useUser,
 } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
+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";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 
+const AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];
+
 const ProfileSection = () => {
   const account = useActiveAccount();
   const { address: eoaAddress } = useFirstEOA();
@@ -27,8 +31,9 @@ const ProfileSection = () => {
   const navigateBack = useModalStore(state => state.navigateBack);
 
   const { data: simBalance } = useSimBalance(smartWalletAddress);
+  const [imgError, setImgError] = useState(false);
+  const handleImgError = useCallback(() => setImgError(true), []);
 
-  // Calculate total balance in USD
   const totalBalanceUsd = useMemo(() => {
     if (!simBalance?.balances) return 0;
     return simBalance.balances.reduce((sum, token) => sum + (token.value_usd || 0), 0);
@@ -39,27 +44,40 @@ 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;
+  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]);
 
-  // Get current username - prioritize user.username, fallback to profile data
   const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
+  const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || "user";
 
   return (
     <div className="flex items-center justify-between px-5 py-6">
       <div className="global-account-profile flex items-center gap-4">
         <div className="global-account-profile-avatar relative">
-          <IPFSMediaRenderer
-            src={avatarSrc}
-            alt="Profile Avatar"
-            className="border-b3-line border-1 bg-b3-primary-wash size-14 rounded-full border"
-          />
+          <div className="border-b3-line border-1 bg-b3-primary-wash size-14 overflow-hidden rounded-full border">
+            {avatarSrc && !imgError ? (
+              <IPFSMediaRenderer
+                src={avatarSrc}
+                alt="Profile Avatar"
+                className="h-full w-full object-cover"
+                onError={handleImgError}
+              />
+            ) : (
+              <Avatar name={avatarSeed} variant="beam" size={56} colors={AVATAR_COLORS} />
+            )}
+          </div>
 
           <button
             onClick={handleEditAvatar}

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

@@ -0,0 +1,107 @@
+import app from "@b3dotfun/sdk/global-account/app";
+import { useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import {
+  getSessionDurationDays,
+  SESSION_DURATION_LABELS,
+  SESSION_DURATION_OPTIONS,
+  SessionDurationDays,
+  setSessionDurationDays,
+} from "@b3dotfun/sdk/shared/utils/session-duration";
+import { useState } from "react";
+import ModalHeader from "../ModalHeader/ModalHeader";
+
+interface SessionDurationContentProps {
+  partnerId: string;
+}
+
+const DESCRIPTIONS: Record<SessionDurationDays, string> = {
+  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 }: SessionDurationContentProps) => {
+  const { user, setUser } = useAuthentication(partnerId);
+  const navigateBack = useModalStore(state => state.navigateBack);
+  const [sessionDays, setSessionDays] = useState<SessionDurationDays>(() =>
+    getSessionDurationDays(user?.preferences, partnerId),
+  );
+  const [saving, setSaving] = useState(false);
+
+  const handleSelect = async (days: SessionDurationDays) => {
+    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 as Record<string, unknown>) ?? {})[partnerId] as Record<string, unknown>) ?? {}),
+              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 (
+    <div className="flex h-[470px] flex-col">
+      <ModalHeader showBackButton={true} showCloseButton={false} title="Stay signed in" handleBack={navigateBack} />
+
+      <div className="flex flex-col gap-2 p-5">
+        {SESSION_DURATION_OPTIONS.map(days => (
+          <button
+            type="button"
+            key={days}
+            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"
+            }`}
+          >
+            <div className="flex flex-col items-start gap-0.5">
+              <span className="font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46] dark:text-white">
+                {SESSION_DURATION_LABELS[days]}
+              </span>
+              <span className="font-neue-montreal-medium text-[13px] leading-none tracking-[-0.26px] text-[#70707b] dark:text-white/50">
+                {DESCRIPTIONS[days]}
+              </span>
+            </div>
+            {sessionDays === days && (
+              <div className="flex size-5 items-center justify-center rounded-full bg-[#3f3f46] dark:bg-white">
+                <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
+                  <path
+                    d="M1 4L3.5 6.5L9 1"
+                    stroke="white"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="dark:stroke-[#3f3f46]"
+                  />
+                </svg>
+              </div>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SessionDurationContent;

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

@@ -1,5 +1,6 @@
 import { useAuthentication, 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 { useState } from "react";
 import { Chain } from "thirdweb";
@@ -20,46 +21,29 @@ const SettingsContent = ({
 }) => {
   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 { data: profilesRaw = [] } = useProfiles({ client });
+  const sessionDays = getSessionDurationDays(user?.preferences, partnerId);
 
+  const { data: profilesRaw = [] } = useProfiles({ client });
   const profiles = profilesRaw.filter((profile: any) => !["custom_auth_endpoint"].includes(profile.type));
 
-  const handleNavigate = (type: "home" | "swap" | "linkAccount" | "avatarEditor" | "notifications") => {
+  const handleNavigate = (
+    type: "home" | "swap" | "linkAccount" | "avatarEditor" | "notifications" | "sessionDuration",
+  ) => {
     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);
   };
@@ -111,11 +95,25 @@ const SettingsContent = ({
           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>
+          }
+          title="Stay signed in"
+          subtitle={SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`}
+          onClick={() => handleNavigate("sessionDuration")}
+        />
       </div>
 
       {/* Logout Section */}
       <div className="mt-auto px-5 pb-5">
         <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}

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

@@ -1,6 +1,7 @@
 import { ens_normalize } from "@adraffy/ens-normalize";
 import app from "@b3dotfun/sdk/global-account/app";
 import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { Check, Loader2, Pencil, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -29,8 +30,7 @@ const SettingsProfileCard = () => {
   const [isSaving, setIsSaving] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // IPFSMediaRenderer will handle IPFS URL conversion and validation
-  const avatarSrc = user?.avatar || profile?.avatar;
+  const avatarSrc = validateImageUrl(user?.avatar) || validateImageUrl(profile?.avatar);
 
   // Get current username - prioritize user.username, fallback to profile data
   const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");