@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.2

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/BottomNavigation.tsx

@@ -1,4 +1,4 @@
-import { TabsListPrimitive, TabTriggerPrimitive, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { TabsListPrimitive, TabTriggerPrimitive, useB3Config, useModalStore } from "@b3dotfun/sdk/global-account/react";
 
 const HomeIcon = () => {
   return (
@@ -42,6 +42,8 @@ const SettingsIcon = () => {
 
 const BottomNavigation = () => {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
 
   return (
     <div className="b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]">
@@ -54,19 +56,21 @@ const BottomNavigation = () => {
           <span className="text-b3-grey font-neue-montreal-semibold text-xs">Home</span>
         </TabTriggerPrimitive>
 
-        <TabTriggerPrimitive
-          value="swap"
-          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white"
-          onClick={() => {
-            setB3ModalContentType({
-              type: "anySpend",
-              showBackButton: true,
-            });
-          }}
-        >
-          <SwapIcon />
-          <span className="text-b3-grey font-neue-montreal-semibold text-xs">Swap</span>
-        </TabTriggerPrimitive>
+        {!isBetterAuth && (
+          <TabTriggerPrimitive
+            value="swap"
+            className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white"
+            onClick={() => {
+              setB3ModalContentType({
+                type: "anySpend",
+                showBackButton: true,
+              });
+            }}
+          >
+            <SwapIcon />
+            <span className="text-b3-grey font-neue-montreal-semibold text-xs">Swap</span>
+          </TabTriggerPrimitive>
+        )}
 
         <TabTriggerPrimitive
           value="settings"

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

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

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

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

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

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

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

@@ -1,19 +1,25 @@
 import {
   useAccountWallet,
+  useB3Config,
   useModalStore,
   useProfile,
   useSimBalance,
   useUser,
 } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
+import { AVATAR_COLORS } from "@b3dotfun/sdk/shared/constants";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
+import Avatar from "boring-avatars";
 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 ProfileSection = () => {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const account = useActiveAccount();
   const { address: eoaAddress } = useFirstEOA();
   const { address: smartWalletAddress } = useAccountWallet();
@@ -27,8 +33,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 +46,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?.email || "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}
@@ -69,13 +89,18 @@ const ProfileSection = () => {
           </button>
         </div>
         <div className="global-account-profile-info flex flex-col gap-1">
-          <h2 className="text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl">
-            <div className="text-b3-foreground-muted"> $</div>
-            <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
-          </h2>
+          {!isBetterAuth && (
+            <h2 className="text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl">
+              <div className="text-b3-foreground-muted"> $</div>
+              <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
+            </h2>
+          )}
           <div className="b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">
             {currentUsername}
           </div>
+          {isBetterAuth && user?.email && (
+            <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">{user.email}</div>
+          )}
         </div>
       </div>
     </div>

package/src/global-account/react/components/ManageAccount/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,6 +1,7 @@
-import { useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { useAuthentication, useB3Config, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { Loader2 } from "lucide-react";
+import { getSessionDurationDays, SESSION_DURATION_LABELS } from "@b3dotfun/sdk/shared/utils/session-duration";
+import { Bell, Clock, Link, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { Chain } from "thirdweb";
 import { useProfiles } from "thirdweb/react";
@@ -18,48 +19,33 @@ const SettingsContent = ({
   onLogout?: () => void;
   chain: Chain;
 }) => {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-  const { logout } = 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);
   };
@@ -74,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">
@@ -85,37 +71,32 @@ const SettingsContent = ({
 
       {/* Menu Items */}
       <div className="space-y-3 px-5">
+        {!isBetterAuth && (
+          <SettingsMenuItem
+            icon={<Link size={18} className="text-[#51525c]" />}
+            title="Linked Accounts"
+            subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
+            onClick={() => handleNavigate("linkAccount")}
+          />
+        )}
         <SettingsMenuItem
-          icon={
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z"
-                fill="#F4F4F5"
-              />
-            </svg>
-          }
-          title="Linked Accounts"
-          subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
-          onClick={() => handleNavigate("linkAccount")}
-        />
-        <SettingsMenuItem
-          icon={
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z"
-                fill="#F4F4F5"
-              />
-            </svg>
-          }
+          icon={<Bell size={18} className="text-[#51525c]" />}
           title="Notifications"
           subtitle="Manage your notifications"
           onClick={() => handleNavigate("notifications")}
         />
+        <SettingsMenuItem
+          icon={<Clock size={18} className="text-[#51525c]" />}
+          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}