@b3dotfun/sdk 0.1.69-alpha.2 → 0.1.69-alpha.20

package/src/app.shared.ts

@@ -2,12 +2,11 @@ import { ClientApplication } from "@b3dotfun/b3-api";
 import { AuthenticationClient } from "@feathersjs/authentication-client";
 import Cookies from "js-cookie";
 import { B3_AUTH_COOKIE_NAME } from "./shared/constants";
+import { getSessionDurationDays } from "./shared/utils/session-duration";
 
 export const B3_API_URL =
   process.env.EXPO_PUBLIC_B3_API || process.env.NEXT_PUBLIC_B3_API || process.env.PUBLIC_B3_API || "https://api.b3.fun";
 
-const DEV_USER_GROUP = 4;
-
 export const authenticate = async (
   app: ClientApplication,
   accessToken: string,
@@ -33,12 +32,14 @@ export const authenticate = async (
       },
     );
 
-    // Extend cookie expiration to 30 days for dev users
-    if (response?.user?.userGroups?.includes(DEV_USER_GROUP)) {
-      const token = Cookies.get(B3_AUTH_COOKIE_NAME);
-      if (token) {
-        Cookies.set(B3_AUTH_COOKIE_NAME, token, { expires: 30 });
-      }
+    const token = Cookies.get(B3_AUTH_COOKIE_NAME);
+    if (token) {
+      const days = getSessionDurationDays(response?.user?.preferences, params?.partnerId);
+      Cookies.set(B3_AUTH_COOKIE_NAME, token, {
+        ...(days > 0 ? { expires: days } : {}),
+        secure: true,
+        sameSite: "Lax",
+      });
     }
 
     return response;

package/src/global-account/better-auth-client.ts

@@ -0,0 +1,17 @@
+import { createAuthClient } from "better-auth/client";
+import { B3_API_URL } from "../app.shared";
+
+export type B3BetterAuthClient = ReturnType<typeof createB3BetterAuthClient>;
+
+export function createB3BetterAuthClient(baseURL: string = B3_API_URL) {
+  return createAuthClient({
+    baseURL,
+    basePath: "/auth",
+    fetchOptions: {
+      credentials: "include",
+    },
+  });
+}
+
+// Default singleton for standard usage
+export const betterAuthClient = createB3BetterAuthClient();

package/src/global-account/bsmnt.ts

@@ -73,12 +73,6 @@ export const resetSocket = () => {
   // reset the socket connection
 };
 
-export function extractAvatarIdFromUrl(url: string): string | null {
-  const regex = /https:\/\/models\.readyplayer\.me\/([a-f0-9]{24})\.[a-zA-Z0-9]+/;
-  const match = url.match(regex);
-  return match ? match[1] : null;
-}
-
 export const authenticateWithB3JWT = async (fullToken: string, params?: Record<string, any>) => {
   // Do not authenticate if there is no token
   if (!fullToken) {

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

@@ -27,6 +27,7 @@ import { LinkAccount } from "./LinkAccount/LinkAccount";
 import { LinkNewAccount } from "./LinkAccount/LinkNewAccount";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
 import NotificationsContent from "./ManageAccount/NotificationsContent";
+import SessionDurationContent from "./ManageAccount/SessionDurationContent";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { Send } from "./Send/Send";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
@@ -43,7 +44,7 @@ export function B3DynamicModal() {
   const navigateBack = useModalStore(state => state.navigateBack);
   const { theme } = useB3Config();
   const isMobile = useIsMobile();
-  const { toasts, removeToast } = useToastContext();
+  const { toasts, removeToast, headerMode } = useToastContext();
 
   // Define arrays for different modal type groups
   const fullWidthTypes = [
@@ -172,6 +173,8 @@ export function B3DynamicModal() {
         return <Send {...contentType} />;
       case "notifications":
         return <NotificationsContent {...contentType} />;
+      case "sessionDuration":
+        return <SessionDurationContent partnerId={contentType.partnerId} />;
       // Add other modal types here
       default:
         return null;
@@ -247,7 +250,7 @@ export function B3DynamicModal() {
 
           {/* Toast Container - Part of modal-inner-content layer */}
           <AnimatePresence>
-            {toasts.length > 0 && (
+            {!headerMode && toasts.length > 0 && (
               <motion.div
                 initial={{ height: 0 }}
                 animate={{ height: "auto" }}

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

@@ -15,6 +15,8 @@ const DEFAULT_PERMISSIONS: PermissionsConfig = {
   endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
 };
 
+export type AuthStrategy = "thirdweb" | "better-auth";
+
 export interface B3ConfigContextType {
   accountOverride?: Account;
   automaticallySetFirstEoa: boolean;
@@ -25,6 +27,7 @@ export interface B3ConfigContextType {
   partnerId: string;
   stripePublishableKey?: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  authStrategy: AuthStrategy;
 }
 
 const B3ConfigContext = createContext<B3ConfigContextType | null>(null);
@@ -40,6 +43,7 @@ export function B3ConfigProvider({
   partnerId,
   stripePublishableKey,
   createClientReferenceId,
+  authStrategy = "thirdweb",
 }: {
   children: React.ReactNode;
   accountOverride?: Account;
@@ -51,6 +55,7 @@ export function B3ConfigProvider({
   partnerId: string;
   stripePublishableKey?: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  authStrategy?: AuthStrategy;
 }) {
   return (
     <B3ConfigContext.Provider
@@ -64,6 +69,7 @@ export function B3ConfigProvider({
         partnerId,
         stripePublishableKey,
         createClientReferenceId,
+        authStrategy,
       }}
     >
       {children}

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

@@ -1,19 +1,16 @@
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WalletProvider } from "@b3dotfun/sdk/wallet/react";
 import { ThirdwebProvider } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
 
 import { ClientType } from "../../../client-manager";
 
-import { WagmiProvider } from "wagmi";
+import { useMemo } from "react";
 import { createWagmiConfig } from "../../utils/createWagmiConfig";
 import AuthenticationProvider from "./AuthenticationProvider";
 import { B3ConfigProvider } from "./B3ConfigProvider";
 import { LocalSDKProvider } from "./LocalSDKProvider";
 
-// Create queryClient instance
-const queryClient = new QueryClient();
-
 /**
  * Main B3Provider component
  */
@@ -82,23 +79,21 @@ export function InnerProvider({
   partnerId: string;
   rpcUrls?: Record<number, string>;
 }) {
-  const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls });
+  const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId, rpcUrls }), [partnerId, rpcUrls]);
 
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <B3ConfigProvider
-          accountOverride={accountOverride}
-          environment={environment}
-          automaticallySetFirstEoa={false}
-          theme={theme}
-          clientType={clientType}
-          partnerId={partnerId}
-          defaultPermissions={defaultPermissions}
-        >
-          {children}
-        </B3ConfigProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <WalletProvider wagmiConfig={wagmiConfig}>
+      <B3ConfigProvider
+        accountOverride={accountOverride}
+        environment={environment}
+        automaticallySetFirstEoa={false}
+        theme={theme}
+        clientType={clientType}
+        partnerId={partnerId}
+        defaultPermissions={defaultPermissions}
+      >
+        {children}
+      </B3ConfigProvider>
+    </WalletProvider>
   );
 }

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}