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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/global-account/react/components/LinkAccount/LinkedAccountItem.js +2 -1
  2. package/dist/cjs/global-account/react/components/ManageAccount/SettingsProfileCard.js +2 -2
  3. package/dist/cjs/global-account/react/components/Send/Send.js +5 -2
  4. package/dist/cjs/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.js +2 -1
  5. package/dist/esm/global-account/react/components/LinkAccount/LinkedAccountItem.js +2 -1
  6. package/dist/esm/global-account/react/components/ManageAccount/SettingsProfileCard.js +2 -2
  7. package/dist/esm/global-account/react/components/Send/Send.js +5 -2
  8. package/dist/esm/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.js +2 -1
  9. package/package.json +1 -1
  10. package/src/global-account/react/components/LinkAccount/LinkedAccountItem.tsx +2 -1
  11. package/src/global-account/react/components/ManageAccount/SettingsProfileCard.tsx +2 -2
  12. package/src/global-account/react/components/Send/Send.tsx +8 -5
  13. package/src/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.tsx +2 -1
package/dist/cjs/global-account/react/components/LinkAccount/LinkedAccountItem.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
4
  const react_1 = require("../../../../global-account/react");
5
+ const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
5
6
  const truncateAddress_1 = require("../../../../shared/utils/truncateAddress");
6
7
  const lucide_react_1 = require("lucide-react");
7
8
  // Helper function to check if a string is a wallet address and format it
@@ -32,7 +33,7 @@ const LinkedAccountItem = ({ profile, profileToUnlink, unlinkingAccountId, isUnl
32
33
  react_1.toast.error("Failed to copy address");
33
34
  }
34
35
  };
35
- const displayImageUrl = profileData?.avatar || profile.imageUrl;
36
+ const displayImageUrl = (0, profileDisplay_1.validateImageUrl)(profileData?.avatar) || (0, profileDisplay_1.validateImageUrl)(profile.imageUrl);
36
37
  const displayName = profileData?.name || displayTitle;
37
38
  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
38
39
  ? "font-mono text-sm" // Use monospace font for addresses
package/dist/cjs/global-account/react/components/ManageAccount/SettingsProfileCard.js CHANGED
@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
7
7
  const ens_normalize_1 = require("@adraffy/ens-normalize");
8
8
  const app_1 = __importDefault(require("../../../../global-account/app"));
9
9
  const react_1 = require("../../../../global-account/react");
10
+ const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
10
11
  const utils_1 = require("../../../../shared/utils");
11
12
  const lucide_react_1 = require("lucide-react");
12
13
  const react_2 = require("react");
@@ -30,8 +31,7 @@ const SettingsProfileCard = () => {
30
31
  const [editedUsername, setEditedUsername] = (0, react_2.useState)("");
31
32
  const [isSaving, setIsSaving] = (0, react_2.useState)(false);
32
33
  const inputRef = (0, react_2.useRef)(null);
33
- // IPFSMediaRenderer will handle IPFS URL conversion and validation
34
- const avatarSrc = user?.avatar || profile?.avatar;
34
+ const avatarSrc = (0, profileDisplay_1.validateImageUrl)(user?.avatar) || (0, profileDisplay_1.validateImageUrl)(profile?.avatar);
35
35
  // Get current username - prioritize user.username, fallback to profile data
36
36
  const currentUsername = user?.username || profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "");
37
37
  // Focus input when entering edit mode
package/dist/cjs/global-account/react/components/Send/Send.js CHANGED
@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const anyspend_1 = require("../../../../anyspend");
9
9
  const ChainTokenIcon_1 = require("../../../../anyspend/react/components/common/ChainTokenIcon");
10
10
  const react_1 = require("../../../../global-account/react");
11
+ const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
11
12
  const number_1 = require("../../../../shared/utils/number");
12
13
  const invariant_1 = __importDefault(require("invariant"));
13
14
  const lucide_react_1 = require("lucide-react");
@@ -20,7 +21,8 @@ const button_1 = require("../ui/button");
20
21
  // Component for displaying a recent address with profile data
21
22
  function RecentAddressItem({ address, onClick }) {
22
23
  const { data: profileData } = (0, react_1.useProfile)({ address });
23
- 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})`] }) })] }));
24
+ const validatedAvatar = (0, profileDisplay_1.validateImageUrl)(profileData?.avatar);
25
+ 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})`] }) })] }));
24
26
  }
25
27
  function Send({ recipientAddress: initialRecipient, onSuccess }) {
26
28
  const { address } = (0, react_1.useAccountWallet)();
@@ -45,6 +47,7 @@ function Send({ recipientAddress: initialRecipient, onSuccess }) {
45
47
  const { data: validatedProfileData } = (0, react_1.useProfile)({
46
48
  address: showValidatedResult && recipientAddress && (0, viem_1.isAddress)(recipientAddress) ? recipientAddress : undefined,
47
49
  });
50
+ const validatedRecipientAvatar = (0, profileDisplay_1.validateImageUrl)(validatedProfileData?.avatar);
48
51
  // Address validation
49
52
  const handleRecipientAddressChange = (value) => {
50
53
  setRecipientAddress(value);
@@ -185,7 +188,7 @@ function Send({ recipientAddress: initialRecipient, onSuccess }) {
185
188
  return "Send";
186
189
  }
187
190
  };
188
- 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: () => {
191
+ 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: () => {
189
192
  // Just fill the input and show validation - don't auto-proceed
190
193
  handleRecipientAddressChange(recent.address);
191
194
  } }, 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 CHANGED
@@ -7,6 +7,7 @@ const utils_1 = require("../../../../shared/utils");
7
7
  const lucide_react_1 = require("lucide-react");
8
8
  const react_1 = require("react");
9
9
  const profileApi_1 = require("../../utils/profileApi");
10
+ const profileDisplay_1 = require("../../utils/profileDisplay");
10
11
  const IPFSMediaRenderer_1 = require("../IPFSMediaRenderer/IPFSMediaRenderer");
11
12
  const input_1 = require("../ui/input");
12
13
  /**
@@ -159,5 +160,5 @@ function SingleUserSearchSelector({ onSelectUser, profileTypeFilter, placeholder
159
160
  const getProfileTypeBadges = (profiles) => {
160
161
  return profiles.map(p => p.type);
161
162
  };
162
- 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}`))) }))] })] }) }) }))] }));
163
+ 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}`))) }))] })] }) }) }))] }));
163
164
  }
package/dist/esm/global-account/react/components/LinkAccount/LinkedAccountItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Button, toast, useProfile } from "../../../../global-account/react/index.js";
3
+ import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
3
4
  import { truncateAddress } from "../../../../shared/utils/truncateAddress.js";
4
5
  import { Copy, Loader2, UnlinkIcon } from "lucide-react";
5
6
  // Helper function to check if a string is a wallet address and format it
@@ -30,7 +31,7 @@ const LinkedAccountItem = ({ profile, profileToUnlink, unlinkingAccountId, isUnl
30
31
  toast.error("Failed to copy address");
31
32
  }
32
33
  };
33
- const displayImageUrl = profileData?.avatar || profile.imageUrl;
34
+ const displayImageUrl = validateImageUrl(profileData?.avatar) || validateImageUrl(profile.imageUrl);
34
35
  const displayName = profileData?.name || displayTitle;
35
36
  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
36
37
  ? "font-mono text-sm" // Use monospace font for addresses
package/dist/esm/global-account/react/components/ManageAccount/SettingsProfileCard.js CHANGED
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import { ens_normalize } from "@adraffy/ens-normalize";
3
3
  import app from "../../../../global-account/app.js";
4
4
  import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "../../../../global-account/react/index.js";
5
+ import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
5
6
  import { formatUsername } from "../../../../shared/utils/index.js";
6
7
  import { Check, Loader2, Pencil, X } from "lucide-react";
7
8
  import { useEffect, useRef, useState } from "react";
@@ -25,8 +26,7 @@ const SettingsProfileCard = () => {
25
26
  const [editedUsername, setEditedUsername] = useState("");
26
27
  const [isSaving, setIsSaving] = useState(false);
27
28
  const inputRef = useRef(null);
28
- // IPFSMediaRenderer will handle IPFS URL conversion and validation
29
- const avatarSrc = user?.avatar || profile?.avatar;
29
+ const avatarSrc = validateImageUrl(user?.avatar) || validateImageUrl(profile?.avatar);
30
30
  // Get current username - prioritize user.username, fallback to profile data
31
31
  const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
32
32
  // Focus input when entering edit mode
package/dist/esm/global-account/react/components/Send/Send.js CHANGED
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import { ALL_CHAINS, getExplorerTxUrl } from "../../../../anyspend/index.js";
3
3
  import { ChainTokenIcon } from "../../../../anyspend/react/components/common/ChainTokenIcon.js";
4
4
  import { toast, useAccountWallet, useAnalytics, useModalStore, useProfile, useSimBalance, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
5
+ import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
5
6
  import { formatDisplayNumber, formatTokenAmount } from "../../../../shared/utils/number.js";
6
7
  import invariant from "invariant";
7
8
  import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
@@ -14,7 +15,8 @@ import { Button } from "../ui/button.js";
14
15
  // Component for displaying a recent address with profile data
15
16
  function RecentAddressItem({ address, onClick }) {
16
17
  const { data: profileData } = useProfile({ address });
17
- 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})`] }) })] }));
18
+ const validatedAvatar = validateImageUrl(profileData?.avatar);
19
+ 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})`] }) })] }));
18
20
  }
19
21
  export function Send({ recipientAddress: initialRecipient, onSuccess }) {
20
22
  const { address } = useAccountWallet();
@@ -39,6 +41,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }) {
39
41
  const { data: validatedProfileData } = useProfile({
40
42
  address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
41
43
  });
44
+ const validatedRecipientAvatar = validateImageUrl(validatedProfileData?.avatar);
42
45
  // Address validation
43
46
  const handleRecipientAddressChange = (value) => {
44
47
  setRecipientAddress(value);
@@ -179,7 +182,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }) {
179
182
  return "Send";
180
183
  }
181
184
  };
182
- 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: () => {
185
+ 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: () => {
183
186
  // Just fill the input and show validation - don't auto-proceed
184
187
  handleRecipientAddressChange(recent.address);
185
188
  } }, 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 CHANGED
@@ -4,6 +4,7 @@ import { cn } from "../../../../shared/utils/index.js";
4
4
  import { Search, X } from "lucide-react";
5
5
  import { useCallback, useEffect, useRef, useState } from "react";
6
6
  import { fetchProfile as fetchProfileApi } from "../../utils/profileApi.js";
7
+ import { validateImageUrl } from "../../utils/profileDisplay.js";
7
8
  import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
8
9
  import { Input } from "../ui/input.js";
9
10
  /**
@@ -156,5 +157,5 @@ export function SingleUserSearchSelector({ onSelectUser, profileTypeFilter, plac
156
157
  const getProfileTypeBadges = (profiles) => {
157
158
  return profiles.map(p => p.type);
158
159
  };
159
- 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}`))) }))] })] }) }) }))] }));
160
+ 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}`))) }))] })] }) }) }))] }));
160
161
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@b3dotfun/sdk",
3
- "version": "0.1.69-alpha.14",
3
+ "version": "0.1.69-alpha.15",
4
4
  "source": "src/index.ts",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "react-native": "./dist/cjs/index.native.js",
package/src/global-account/react/components/LinkAccount/LinkedAccountItem.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Button, toast, useProfile } from "@b3dotfun/sdk/global-account/react";
2
+ import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
2
3
  import { truncateAddress } from "@b3dotfun/sdk/shared/utils/truncateAddress";
3
4
  import { Copy, Loader2, UnlinkIcon } from "lucide-react";
4
5
 
@@ -55,7 +56,7 @@ const LinkedAccountItem = ({
55
56
  }
56
57
  };
57
58
 
58
- const displayImageUrl = profileData?.avatar || profile.imageUrl;
59
+ const displayImageUrl = validateImageUrl(profileData?.avatar) || validateImageUrl(profile.imageUrl);
59
60
  const displayName = profileData?.name || displayTitle;
60
61
 
61
62
  return (
package/src/global-account/react/components/ManageAccount/SettingsProfileCard.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ens_normalize } from "@adraffy/ens-normalize";
2
2
  import app from "@b3dotfun/sdk/global-account/app";
3
3
  import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
4
+ import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
4
5
  import { formatUsername } from "@b3dotfun/sdk/shared/utils";
5
6
  import { Check, Loader2, Pencil, X } from "lucide-react";
6
7
  import { useEffect, useRef, useState } from "react";
@@ -29,8 +30,7 @@ const SettingsProfileCard = () => {
29
30
  const [isSaving, setIsSaving] = useState(false);
30
31
  const inputRef = useRef<HTMLInputElement>(null);
31
32
 
32
- // IPFSMediaRenderer will handle IPFS URL conversion and validation
33
- const avatarSrc = user?.avatar || profile?.avatar;
33
+ const avatarSrc = validateImageUrl(user?.avatar) || validateImageUrl(profile?.avatar);
34
34
 
35
35
  // Get current username - prioritize user.username, fallback to profile data
36
36
  const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
package/src/global-account/react/components/Send/Send.tsx CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  useSimBalance,
10
10
  useUnifiedChainSwitchAndExecute,
11
11
  } from "@b3dotfun/sdk/global-account/react";
12
+ import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
12
13
  import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
13
14
  import invariant from "invariant";
14
15
  import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
@@ -32,6 +33,7 @@ type SendStep = "recipient" | "token" | "amount" | "confirm" | "success";
32
33
  // Component for displaying a recent address with profile data
33
34
  function RecentAddressItem({ address, onClick }: { address: string; onClick: () => void }) {
34
35
  const { data: profileData } = useProfile({ address });
36
+ const validatedAvatar = validateImageUrl(profileData?.avatar);
35
37
 
36
38
  return (
37
39
  <button
@@ -39,8 +41,8 @@ function RecentAddressItem({ address, onClick }: { address: string; onClick: ()
39
41
  className="flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]"
40
42
  >
41
43
  {/* Avatar */}
42
- {profileData?.avatar ? (
43
- <img src={profileData.avatar} alt={profileData.name || address} className="h-10 w-10 rounded-full" />
44
+ {validatedAvatar ? (
45
+ <img src={validatedAvatar} alt={profileData?.name || address} className="h-10 w-10 rounded-full" />
44
46
  ) : (
45
47
  <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]">
46
48
  <Wallet className="h-5 w-5 text-[#a0a0ab]" />
@@ -84,6 +86,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
84
86
  const { data: validatedProfileData } = useProfile({
85
87
  address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
86
88
  });
89
+ const validatedRecipientAvatar = validateImageUrl(validatedProfileData?.avatar);
87
90
 
88
91
  // Address validation
89
92
  const handleRecipientAddressChange = (value: string) => {
@@ -290,10 +293,10 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
290
293
  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]"
291
294
  >
292
295
  {/* Avatar */}
293
- {validatedProfileData?.avatar ? (
296
+ {validatedRecipientAvatar ? (
294
297
  <img
295
- src={validatedProfileData.avatar}
296
- alt={validatedProfileData.name || recipientAddress}
298
+ src={validatedRecipientAvatar}
299
+ alt={validatedProfileData?.name || recipientAddress}
297
300
  className="h-10 w-10 rounded-full"
298
301
  />
299
302
  ) : (
package/src/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.tsx CHANGED
@@ -5,6 +5,7 @@ import { Search, X } from "lucide-react";
5
5
  import { useCallback, useEffect, useRef, useState } from "react";
6
6
  import type { CombinedProfile, Profile } from "../../hooks/useProfile";
7
7
  import { fetchProfile as fetchProfileApi } from "../../utils/profileApi";
8
+ import { validateImageUrl } from "../../utils/profileDisplay";
8
9
  import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
9
10
  import { Input } from "../ui/input";
10
11
 
@@ -283,7 +284,7 @@ export function SingleUserSearchSelector({
283
284
  {/* Avatar */}
284
285
  <div className="single-user-search-result-avatar h-11 w-11 shrink-0">
285
286
  <IPFSMediaRenderer
286
- src={searchResult.avatar}
287
+ src={validateImageUrl(searchResult.avatar) ?? undefined}
287
288
  alt={getDisplayName(searchResult)}
288
289
  className="h-full w-full rounded-full object-cover"
289
290
  />