@b3dotfun/sdk 0.1.69-alpha.13 → 0.1.69-alpha.14

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

@@ -24,7 +24,7 @@ const react_1 = require("thirdweb/react");
  * />
  * ```
  */
-function IPFSMediaRenderer({ src, alt = "Media", className, client = thirdweb_1.client, width, height, controls, style, }) {
+function IPFSMediaRenderer({ src, alt = "Media", className, client = thirdweb_1.client, width, height, controls, style, onError, }) {
     // If no source, render fallback
     if (!src) {
         return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, "aria-label": alt, children: (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: alt.charAt(0).toUpperCase() }) }) }));
@@ -32,5 +32,7 @@ function IPFSMediaRenderer({ src, alt = "Media", className, client = thirdweb_1.
     // 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://") ? (0, ipfs_1.getIpfsUrl)(src) : src;
-    return ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)("span", { onErrorCapture: onError, className: "contents", children: (0, jsx_runtime_1.jsx)(react_1.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/cjs/global-account/react/components/ManageAccount/ProfileSection.js

@@ -1,14 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
+const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
 const utils_1 = require("../../../../shared/utils");
 const number_1 = require("../../../../shared/utils/number");
+const boring_avatars_1 = __importDefault(require("boring-avatars"));
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
 const useFirstEOA_1 = require("../../hooks/useFirstEOA");
 const IPFSMediaRenderer_1 = require("../IPFSMediaRenderer/IPFSMediaRenderer");
+const AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];
 const ProfileSection = () => {
     const account = (0, react_3.useActiveAccount)();
     const { address: eoaAddress } = (0, useFirstEOA_1.useFirstEOA)();
@@ -22,7 +28,8 @@ const ProfileSection = () => {
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
     const navigateBack = (0, react_1.useModalStore)(state => state.navigateBack);
     const { data: simBalance } = (0, react_1.useSimBalance)(smartWalletAddress);
-    // Calculate total balance in USD
+    const [imgError, setImgError] = (0, react_2.useState)(false);
+    const handleImgError = (0, react_2.useCallback)(() => setImgError(true), []);
     const totalBalanceUsd = (0, react_2.useMemo)(() => {
         if (!simBalance?.balances)
             return 0;
@@ -33,15 +40,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 = (0, react_2.useMemo)(() => (0, profileDisplay_1.validateImageUrl)(user?.avatar) || (0, profileDisplay_1.validateImageUrl)(profile?.avatar), [user?.avatar, profile?.avatar]);
+    // Reset error state when avatar source changes (e.g. user uploads a new avatar)
+    (0, react_2.useEffect)(() => {
+        setImgError(false);
+    }, [avatarSrc]);
     const currentUsername = user?.username || profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "");
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between px-5 py-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [(0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "border-b3-line border-1 bg-b3-primary-wash size-14 rounded-full border" }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 10, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted", children: " $" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[30px]", children: (0, number_1.formatDisplayNumber)(totalBalanceUsd, { fractionDigits: 2 }) })] }), (0, jsx_runtime_1.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";
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between px-5 py-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b3-line border-1 bg-b3-primary-wash size-14 overflow-hidden rounded-full border", children: avatarSrc && !imgError ? ((0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "h-full w-full object-cover", onError: handleImgError })) : ((0, jsx_runtime_1.jsx)(boring_avatars_1.default, { name: avatarSeed, variant: "beam", size: 56, colors: AVATAR_COLORS })) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 10, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted", children: " $" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[30px]", children: (0, number_1.formatDisplayNumber)(totalBalanceUsd, { fractionDigits: 2 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername })] })] }) }));
 };
 exports.default = ProfileSection;

package/dist/cjs/global-account/react/utils/profileDisplay.js

@@ -4,6 +4,18 @@ exports.validateImageUrl = validateImageUrl;
 exports.getProfileDisplayInfo = getProfileDisplayInfo;
 const debug_1 = require("../../../shared/utils/debug");
 const debug = (0, debug_1.debugB3React)("profileDisplay");
+const ALLOWED_IPFS_GATEWAYS = [
+    "ipfs.io",
+    "gateway.pinata.cloud",
+    "cloudflare-ipfs.com",
+    "dweb.link",
+    "nftstorage.link",
+    "w3s.link",
+];
+const BLOCKED_HOSTNAMES = ["models.readyplayer.me", "readyplayer.me"];
+function isHostnameInList(hostname, list) {
+    return list.some(entry => hostname === entry || hostname.endsWith(`.${entry}`));
+}
 /**
  * Validates that an image URL uses an allowed schema
  * @param url - The URL to validate
@@ -28,27 +40,14 @@ function validateImageUrl(url) {
             debug("Rejected unsafe protocol:", parsedUrl.protocol, url);
             return null;
         }
-        // Whitelist of allowed IPFS gateway hostnames
-        const allowedIpfsGateways = [
-            "ipfs.io",
-            "gateway.pinata.cloud",
-            "cloudflare-ipfs.com",
-            "dweb.link",
-            "nftstorage.link",
-            "w3s.link",
-        ];
-        // Check if hostname matches allowed IPFS gateways
         const hostname = parsedUrl.hostname.toLowerCase();
-        const isAllowedIpfsGateway = allowedIpfsGateways.some(gateway => {
-            // Exact match or subdomain of the gateway
-            return hostname === gateway || hostname.endsWith(`.${gateway}`);
-        });
-        if (isAllowedIpfsGateway) {
+        if (isHostnameInList(hostname, ALLOWED_IPFS_GATEWAYS)) {
             return url;
         }
-        // For standard HTTP(S) URLs from trusted sources
-        // Add additional hostname validation here if needed
-        // For now, allow all HTTP(S) URLs (can be restricted further if needed)
+        if (isHostnameInList(hostname, BLOCKED_HOSTNAMES)) {
+            debug("Rejected deprecated avatar service:", hostname, url);
+            return null;
+        }
         return url;
     }
     catch (error) {

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/ManageAccount/ProfileSection.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAccountWallet, useModalStore, useProfile, useSimBalance, useUser, } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.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 AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];
 const ProfileSection = () => {
     const account = useActiveAccount();
     const { address: eoaAddress } = useFirstEOA();
@@ -20,7 +23,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 +35,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";
+    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: [_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 })] })] }) }));
 };
 export default ProfileSection;

package/dist/esm/global-account/react/utils/profileDisplay.js

@@ -1,5 +1,17 @@
 import { debugB3React } from "../../../shared/utils/debug.js";
 const debug = debugB3React("profileDisplay");
+const ALLOWED_IPFS_GATEWAYS = [
+    "ipfs.io",
+    "gateway.pinata.cloud",
+    "cloudflare-ipfs.com",
+    "dweb.link",
+    "nftstorage.link",
+    "w3s.link",
+];
+const BLOCKED_HOSTNAMES = ["models.readyplayer.me", "readyplayer.me"];
+function isHostnameInList(hostname, list) {
+    return list.some(entry => hostname === entry || hostname.endsWith(`.${entry}`));
+}
 /**
  * Validates that an image URL uses an allowed schema
  * @param url - The URL to validate
@@ -24,27 +36,14 @@ export function validateImageUrl(url) {
             debug("Rejected unsafe protocol:", parsedUrl.protocol, url);
             return null;
         }
-        // Whitelist of allowed IPFS gateway hostnames
-        const allowedIpfsGateways = [
-            "ipfs.io",
-            "gateway.pinata.cloud",
-            "cloudflare-ipfs.com",
-            "dweb.link",
-            "nftstorage.link",
-            "w3s.link",
-        ];
-        // Check if hostname matches allowed IPFS gateways
         const hostname = parsedUrl.hostname.toLowerCase();
-        const isAllowedIpfsGateway = allowedIpfsGateways.some(gateway => {
-            // Exact match or subdomain of the gateway
-            return hostname === gateway || hostname.endsWith(`.${gateway}`);
-        });
-        if (isAllowedIpfsGateway) {
+        if (isHostnameInList(hostname, ALLOWED_IPFS_GATEWAYS)) {
             return url;
         }
-        // For standard HTTP(S) URLs from trusted sources
-        // Add additional hostname validation here if needed
-        // For now, allow all HTTP(S) URLs (can be restricted further if needed)
+        if (isHostnameInList(hostname, BLOCKED_HOSTNAMES)) {
+            debug("Rejected deprecated avatar service:", hostname, url);
+            return null;
+        }
         return url;
     }
     catch (error) {

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

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.13",
+  "version": "0.1.69-alpha.14",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -330,6 +330,7 @@
     "@thirdweb-dev/wagmi-adapter": "0.2.165",
     "@web3icons/react": "3.16.0",
     "big.js": "^7.0.1",
+    "boring-avatars": "^2.0.4",
     "class-variance-authority": "0.7.0",
     "clsx": "2.0.0",
     "cmdk": "1.0.0",

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/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/utils/profileDisplay.ts

@@ -3,6 +3,21 @@ import { type Profile } from "thirdweb/wallets";
 
 const debug = debugB3React("profileDisplay");
 
+const ALLOWED_IPFS_GATEWAYS = [
+  "ipfs.io",
+  "gateway.pinata.cloud",
+  "cloudflare-ipfs.com",
+  "dweb.link",
+  "nftstorage.link",
+  "w3s.link",
+];
+
+const BLOCKED_HOSTNAMES = ["models.readyplayer.me", "readyplayer.me"];
+
+function isHostnameInList(hostname: string, list: string[]): boolean {
+  return list.some(entry => hostname === entry || hostname.endsWith(`.${entry}`));
+}
+
 /**
  * Validates that an image URL uses an allowed schema
  * @param url - The URL to validate
@@ -31,30 +46,17 @@ export function validateImageUrl(url: string | null | undefined): string | null
       return null;
     }
 
-    // Whitelist of allowed IPFS gateway hostnames
-    const allowedIpfsGateways = [
-      "ipfs.io",
-      "gateway.pinata.cloud",
-      "cloudflare-ipfs.com",
-      "dweb.link",
-      "nftstorage.link",
-      "w3s.link",
-    ];
-
-    // Check if hostname matches allowed IPFS gateways
     const hostname = parsedUrl.hostname.toLowerCase();
-    const isAllowedIpfsGateway = allowedIpfsGateways.some(gateway => {
-      // Exact match or subdomain of the gateway
-      return hostname === gateway || hostname.endsWith(`.${gateway}`);
-    });
 
-    if (isAllowedIpfsGateway) {
+    if (isHostnameInList(hostname, ALLOWED_IPFS_GATEWAYS)) {
       return url;
     }
 
-    // For standard HTTP(S) URLs from trusted sources
-    // Add additional hostname validation here if needed
-    // For now, allow all HTTP(S) URLs (can be restricted further if needed)
+    if (isHostnameInList(hostname, BLOCKED_HOSTNAMES)) {
+      debug("Rejected deprecated avatar service:", hostname, url);
+      return null;
+    }
+
     return url;
   } catch (error) {
     // Invalid URL format