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

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/LinkAccount/LinkedAccountItem.js

@@ -2,6 +2,7 @@
 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 truncateAddress_1 = require("../../../../shared/utils/truncateAddress");
 const lucide_react_1 = require("lucide-react");
 // Helper function to check if a string is a wallet address and format it
@@ -32,7 +33,7 @@ const LinkedAccountItem = ({ profile, profileToUnlink, unlinkingAccountId, isUnl
             react_1.toast.error("Failed to copy address");
         }
     };
-    const displayImageUrl = profileData?.avatar || profile.imageUrl;
+    const displayImageUrl = (0, profileDisplay_1.validateImageUrl)(profileData?.avatar) || (0, profileDisplay_1.validateImageUrl)(profile.imageUrl);
     const displayName = profileData?.name || displayTitle;
     return ((0, jsx_runtime_1.jsxs)("div", { className: "linked-account-item hover:bg-b3-line group flex cursor-pointer items-center justify-between rounded-xl p-4 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-info flex items-center gap-3", children: [displayImageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: displayImageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), (0, jsx_runtime_1.jsxs)("div", { className: "linked-account-details", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-title-row flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: `linked-account-title text-b3-grey font-neue-montreal-semibold ${isAddress
                                                     ? "font-mono text-sm" // Use monospace font for addresses

package/dist/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/components/ManageAccount/SettingsProfileCard.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ens_normalize_1 = require("@adraffy/ens-normalize");
 const app_1 = __importDefault(require("../../../../global-account/app"));
 const react_1 = require("../../../../global-account/react");
+const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
 const utils_1 = require("../../../../shared/utils");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
@@ -30,8 +31,7 @@ const SettingsProfileCard = () => {
     const [editedUsername, setEditedUsername] = (0, react_2.useState)("");
     const [isSaving, setIsSaving] = (0, react_2.useState)(false);
     const inputRef = (0, react_2.useRef)(null);
-    // IPFSMediaRenderer will handle IPFS URL conversion and validation
-    const avatarSrc = user?.avatar || profile?.avatar;
+    const avatarSrc = (0, profileDisplay_1.validateImageUrl)(user?.avatar) || (0, profileDisplay_1.validateImageUrl)(profile?.avatar);
     // Get current username - prioritize user.username, fallback to profile data
     const currentUsername = user?.username || profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "");
     // Focus input when entering edit mode

package/dist/cjs/global-account/react/components/Send/Send.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
 const ChainTokenIcon_1 = require("../../../../anyspend/react/components/common/ChainTokenIcon");
 const react_1 = require("../../../../global-account/react");
+const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
 const number_1 = require("../../../../shared/utils/number");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
@@ -20,7 +21,8 @@ const button_1 = require("../ui/button");
 // Component for displaying a recent address with profile data
 function RecentAddressItem({ address, onClick }) {
     const { data: profileData } = (0, react_1.useProfile)({ address });
-    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [profileData?.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: profileData.avatar, alt: profileData.name || address, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start", children: (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
+    const validatedAvatar = (0, profileDisplay_1.validateImageUrl)(profileData?.avatar);
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [validatedAvatar ? ((0, jsx_runtime_1.jsx)("img", { src: validatedAvatar, alt: profileData?.name || address, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start", children: (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
 }
 function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { address } = (0, react_1.useAccountWallet)();
@@ -45,6 +47,7 @@ function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { data: validatedProfileData } = (0, react_1.useProfile)({
         address: showValidatedResult && recipientAddress && (0, viem_1.isAddress)(recipientAddress) ? recipientAddress : undefined,
     });
+    const validatedRecipientAvatar = (0, profileDisplay_1.validateImageUrl)(validatedProfileData?.avatar);
     // Address validation
     const handleRecipientAddressChange = (value) => {
         setRecipientAddress(value);
@@ -185,7 +188,7 @@ function Send({ recipientAddress: initialRecipient, onSuccess }) {
                 return "Send";
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { handleBack: handleBack, title: getStepTitle() }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && (0, viem_1.isAddress)(recipientAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedProfileData?.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: validatedProfileData.avatar, alt: validatedProfileData.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => ((0, jsx_runtime_1.jsx)(RecentAddressItem, { address: recent.address, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { handleBack: handleBack, title: getStepTitle() }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && (0, viem_1.isAddress)(recipientAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedRecipientAvatar ? ((0, jsx_runtime_1.jsx)("img", { src: validatedRecipientAvatar, alt: validatedProfileData?.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => ((0, jsx_runtime_1.jsx)(RecentAddressItem, { address: recent.address, onClick: () => {
                                                 // Just fill the input and show validation - don't auto-proceed
                                                 handleRecipientAddressChange(recent.address);
                                             } }, index))) })] }))] })), step === "token" && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col p-5", children: isLoadingBalance ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: [...Array(3)].map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between rounded-xl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-10 w-10 animate-pulse rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line mb-1 h-4 w-16 animate-pulse rounded" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-3 w-24 animate-pulse rounded" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line mb-1 h-4 w-20 animate-pulse rounded" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-3 w-16 animate-pulse rounded" })] })] }, index))) }) })) : simBalance?.balances && simBalance.balances.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: simBalance.balances.map(token => ((0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-b3-line/60 dark:hover:bg-b3-primary-wash/40 group flex cursor-pointer items-center justify-between rounded-xl p-3 transition-all duration-200", onClick: () => {

package/dist/cjs/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../../../shared/utils");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
 const profileApi_1 = require("../../utils/profileApi");
+const profileDisplay_1 = require("../../utils/profileDisplay");
 const IPFSMediaRenderer_1 = require("../IPFSMediaRenderer/IPFSMediaRenderer");
 const input_1 = require("../ui/input");
 /**
@@ -159,5 +160,5 @@ function SingleUserSearchSelector({ onSelectUser, profileTypeFilter, placeholder
     const getProfileTypeBadges = (profiles) => {
         return profiles.map(p => p.type);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), (0, jsx_runtime_1.jsx)(input_1.Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: (0, utils_1.cn)("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && ((0, jsx_runtime_1.jsx)("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: (0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: searchResult.avatar, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && ((0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => ((0, jsx_runtime_1.jsx)("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), (0, jsx_runtime_1.jsx)(input_1.Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: (0, utils_1.cn)("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && ((0, jsx_runtime_1.jsx)("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: (0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: (0, profileDisplay_1.validateImageUrl)(searchResult.avatar) ?? undefined, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && ((0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => ((0, jsx_runtime_1.jsx)("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
 }

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/LinkAccount/LinkedAccountItem.js

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

package/dist/esm/global-account/react/components/ManageAccount/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/components/ManageAccount/SettingsProfileCard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ens_normalize } from "@adraffy/ens-normalize";
 import app from "../../../../global-account/app.js";
 import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
 import { formatUsername } from "../../../../shared/utils/index.js";
 import { Check, Loader2, Pencil, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -25,8 +26,7 @@ const SettingsProfileCard = () => {
     const [editedUsername, setEditedUsername] = useState("");
     const [isSaving, setIsSaving] = useState(false);
     const inputRef = useRef(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 || "");
     // Focus input when entering edit mode

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ALL_CHAINS, getExplorerTxUrl } from "../../../../anyspend/index.js";
 import { ChainTokenIcon } from "../../../../anyspend/react/components/common/ChainTokenIcon.js";
 import { toast, useAccountWallet, useAnalytics, useModalStore, useProfile, useSimBalance, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
 import { formatDisplayNumber, formatTokenAmount } from "../../../../shared/utils/number.js";
 import invariant from "invariant";
 import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
@@ -14,7 +15,8 @@ import { Button } from "../ui/button.js";
 // Component for displaying a recent address with profile data
 function RecentAddressItem({ address, onClick }) {
     const { data: profileData } = useProfile({ address });
-    return (_jsxs("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [profileData?.avatar ? (_jsx("img", { src: profileData.avatar, alt: profileData.name || address, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), _jsx("div", { className: "flex flex-col items-start", children: _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
+    const validatedAvatar = validateImageUrl(profileData?.avatar);
+    return (_jsxs("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [validatedAvatar ? (_jsx("img", { src: validatedAvatar, alt: profileData?.name || address, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), _jsx("div", { className: "flex flex-col items-start", children: _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
 }
 export function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { address } = useAccountWallet();
@@ -39,6 +41,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { data: validatedProfileData } = useProfile({
         address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
     });
+    const validatedRecipientAvatar = validateImageUrl(validatedProfileData?.avatar);
     // Address validation
     const handleRecipientAddressChange = (value) => {
         setRecipientAddress(value);
@@ -179,7 +182,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }) {
                 return "Send";
         }
     };
-    return (_jsxs("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [_jsx(ModalHeader, { handleBack: handleBack, title: getStepTitle() }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && (_jsxs("div", { className: "flex flex-col gap-6 p-5", children: [_jsxs("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [_jsx("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: _jsx("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), _jsxs("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [_jsx("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), _jsx("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && _jsx("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && isAddress(recipientAddress) && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), _jsxs("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedProfileData?.avatar ? (_jsx("img", { src: validatedProfileData.avatar, alt: validatedProfileData.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), _jsx("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => (_jsx(RecentAddressItem, { address: recent.address, onClick: () => {
+    return (_jsxs("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [_jsx(ModalHeader, { handleBack: handleBack, title: getStepTitle() }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && (_jsxs("div", { className: "flex flex-col gap-6 p-5", children: [_jsxs("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [_jsx("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: _jsx("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), _jsxs("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [_jsx("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), _jsx("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && _jsx("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && isAddress(recipientAddress) && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), _jsxs("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedRecipientAvatar ? (_jsx("img", { src: validatedRecipientAvatar, alt: validatedProfileData?.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), _jsx("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => (_jsx(RecentAddressItem, { address: recent.address, onClick: () => {
                                                 // Just fill the input and show validation - don't auto-proceed
                                                 handleRecipientAddressChange(recent.address);
                                             } }, index))) })] }))] })), step === "token" && (_jsx("div", { className: "flex flex-col p-5", children: isLoadingBalance ? (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-1", children: [...Array(3)].map((_, index) => (_jsxs("div", { className: "flex items-center justify-between rounded-xl p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-b3-line h-10 w-10 animate-pulse rounded-full" }), _jsxs("div", { children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-16 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-24 animate-pulse rounded" })] })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-20 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-16 animate-pulse rounded" })] })] }, index))) }) })) : simBalance?.balances && simBalance.balances.length > 0 ? (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-1", children: simBalance.balances.map(token => (_jsxs("div", { className: "hover:bg-b3-line/60 dark:hover:bg-b3-primary-wash/40 group flex cursor-pointer items-center justify-between rounded-xl p-3 transition-all duration-200", onClick: () => {

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

@@ -4,6 +4,7 @@ import { cn } from "../../../../shared/utils/index.js";
 import { Search, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { fetchProfile as fetchProfileApi } from "../../utils/profileApi.js";
+import { validateImageUrl } from "../../utils/profileDisplay.js";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
 import { Input } from "../ui/input.js";
 /**
@@ -156,5 +157,5 @@ export function SingleUserSearchSelector({ onSelectUser, profileTypeFilter, plac
     const getProfileTypeBadges = (profiles) => {
         return profiles.map(p => p.type);
     };
-    return (_jsxs("div", { className: cn("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [_jsxs("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [_jsx(Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), _jsx(Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: cn("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && (_jsx("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: _jsx(X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && _jsx("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && _jsx("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && (_jsx("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: _jsx("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: _jsx(IPFSMediaRenderer, { src: searchResult.avatar, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), _jsxs("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [_jsx("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && (_jsxs("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && (_jsx("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && (_jsx("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => (_jsx("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
+    return (_jsxs("div", { className: cn("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [_jsxs("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [_jsx(Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), _jsx(Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: cn("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && (_jsx("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: _jsx(X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && _jsx("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && _jsx("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && (_jsx("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: _jsx("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: _jsx(IPFSMediaRenderer, { src: validateImageUrl(searchResult.avatar) ?? undefined, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), _jsxs("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [_jsx("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && (_jsxs("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && (_jsx("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && (_jsx("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => (_jsx("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
 }

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.15",
   "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/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/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 || "");

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

@@ -9,6 +9,7 @@ import {
   useSimBalance,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
 import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
@@ -32,6 +33,7 @@ type SendStep = "recipient" | "token" | "amount" | "confirm" | "success";
 // Component for displaying a recent address with profile data
 function RecentAddressItem({ address, onClick }: { address: string; onClick: () => void }) {
   const { data: profileData } = useProfile({ address });
+  const validatedAvatar = validateImageUrl(profileData?.avatar);
 
   return (
     <button
@@ -39,8 +41,8 @@ function RecentAddressItem({ address, onClick }: { address: string; onClick: ()
       className="flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]"
     >
       {/* Avatar */}
-      {profileData?.avatar ? (
-        <img src={profileData.avatar} alt={profileData.name || address} className="h-10 w-10 rounded-full" />
+      {validatedAvatar ? (
+        <img src={validatedAvatar} alt={profileData?.name || address} className="h-10 w-10 rounded-full" />
       ) : (
         <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]">
           <Wallet className="h-5 w-5 text-[#a0a0ab]" />
@@ -84,6 +86,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
   const { data: validatedProfileData } = useProfile({
     address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
   });
+  const validatedRecipientAvatar = validateImageUrl(validatedProfileData?.avatar);
 
   // Address validation
   const handleRecipientAddressChange = (value: string) => {
@@ -290,10 +293,10 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                   className="dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]"
                 >
                   {/* Avatar */}
-                  {validatedProfileData?.avatar ? (
+                  {validatedRecipientAvatar ? (
                     <img
-                      src={validatedProfileData.avatar}
-                      alt={validatedProfileData.name || recipientAddress}
+                      src={validatedRecipientAvatar}
+                      alt={validatedProfileData?.name || recipientAddress}
                       className="h-10 w-10 rounded-full"
                     />
                   ) : (

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

@@ -5,6 +5,7 @@ import { Search, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { CombinedProfile, Profile } from "../../hooks/useProfile";
 import { fetchProfile as fetchProfileApi } from "../../utils/profileApi";
+import { validateImageUrl } from "../../utils/profileDisplay";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 import { Input } from "../ui/input";
 
@@ -283,7 +284,7 @@ export function SingleUserSearchSelector({
               {/* Avatar */}
               <div className="single-user-search-result-avatar h-11 w-11 shrink-0">
                 <IPFSMediaRenderer
-                  src={searchResult.avatar}
+                  src={validateImageUrl(searchResult.avatar) ?? undefined}
                   alt={getDisplayName(searchResult)}
                   className="h-full w-full rounded-full object-cover"
                 />

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