@b3dotfun/sdk 0.0.65-test.1 → 0.0.65-test.3

package/dist/cjs/global-account/react/components/ManageAccount/SettingsProfileCard.js

@@ -1,24 +1,45 @@
 "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 app_1 = __importDefault(require("../../../../global-account/app"));
 const react_1 = require("../../../../global-account/react");
 const utils_1 = require("../../../../shared/utils");
-const ipfs_1 = require("../../../../shared/utils/ipfs");
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("thirdweb/react");
+const react_2 = require("react");
+const sonner_1 = require("sonner");
+const react_3 = require("thirdweb/react");
 const useFirstEOA_1 = require("../../hooks/useFirstEOA");
+const IPFSMediaRenderer_1 = require("../IPFSMediaRenderer/IPFSMediaRenderer");
 const SettingsProfileCard = () => {
-    const account = (0, react_2.useActiveAccount)();
+    const account = (0, react_3.useActiveAccount)();
     const { address: eoaAddress } = (0, useFirstEOA_1.useFirstEOA)();
-    const { data: profile } = (0, react_1.useProfile)({
+    const { data: profile, refetch: refreshProfile } = (0, react_1.useProfile)({
         address: eoaAddress || account?.address,
         fresh: true,
     });
-    const { user } = (0, react_1.useB3)();
+    const { user, setUser } = (0, react_1.useB3)();
     const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
     const navigateBack = (0, react_1.useModalStore)(state => state.navigateBack);
-    const avatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profile?.avatar;
+    // State for inline username editing
+    const [isEditingUsername, setIsEditingUsername] = (0, react_2.useState)(false);
+    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;
+    // 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
+    (0, react_2.useEffect)(() => {
+        if (isEditingUsername && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [isEditingUsername]);
     const handleEditAvatar = () => {
         setB3ModalOpen(true);
         setB3ModalContentType({
@@ -30,9 +51,56 @@ const SettingsProfileCard = () => {
         });
     };
     const handleEditUsername = () => {
-        // TODO: Implement edit username functionality
-        console.log("Edit username clicked");
+        setEditedUsername(currentUsername || "");
+        setIsEditingUsername(true);
+    };
+    const handleCancelEdit = () => {
+        setIsEditingUsername(false);
+        setEditedUsername("");
+    };
+    const handleSaveUsername = async () => {
+        if (!editedUsername.trim()) {
+            sonner_1.toast.error("Username cannot be empty");
+            return;
+        }
+        if (editedUsername === currentUsername) {
+            // No change, just exit edit mode
+            handleCancelEdit();
+            return;
+        }
+        setIsSaving(true);
+        try {
+            const updatedUser = await app_1.default.service("users").registerUsername({ username: editedUsername.trim() }, 
+            // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+            {});
+            // Update user state - registerUsername returns an array with single user
+            setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
+            // Refresh profile to get updated data
+            await refreshProfile();
+            sonner_1.toast.success("Username updated successfully!");
+            setIsEditingUsername(false);
+            setEditedUsername("");
+        }
+        catch (error) {
+            console.error("Error updating username:", error);
+            sonner_1.toast.error("Failed to update username. Please try again.");
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            handleSaveUsername();
+        }
+        else if (e.key === "Escape") {
+            handleCancelEdit();
+        }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative shrink-0", children: [avatarUrl ? ((0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: "Profile", className: "border-black/8 size-14 rounded-full border object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash border-black/8 size-14 rounded-full border" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditAvatar, className: "absolute -bottom-0.5 -right-0.5 flex size-[18px] items-center justify-center rounded-full border-[1.5px] border-white bg-[#a0a0ab] transition-colors hover:bg-[#a0a0ab]/80", "aria-label": "Edit avatar", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 10, className: "text-white", strokeWidth: 2.5 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "") }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: (0, jsx_runtime_1.jsx)("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C]", children: "Edit Username" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative shrink-0", children: [(0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: avatarSrc, alt: "Profile", className: "border-black/8 size-14 rounded-full border object-cover" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditAvatar, className: "absolute -bottom-0.5 -right-0.5 flex size-[18px] items-center justify-center rounded-full border-[1.5px] border-white bg-[#a0a0ab] transition-colors hover:bg-[#a0a0ab]/80", "aria-label": "Edit avatar", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 10, className: "text-white", strokeWidth: 2.5 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex shrink-0 flex-col gap-1", children: isEditingUsername ? (
+                /* Edit mode - inline input */
+                (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", value: editedUsername, onChange: e => setEditedUsername(e.target.value), onKeyDown: handleKeyDown, disabled: isSaving, className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-semibold focus:border-b3-primary-blue w-full rounded-md border px-2 py-1 text-lg leading-none transition-colors focus:outline-none disabled:opacity-50", placeholder: "Enter username" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleSaveUsername, disabled: isSaving, className: "text-b3-primary-blue hover:text-b3-primary-blue/80 flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Save username", children: isSaving ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { size: 18, className: "animate-spin" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, strokeWidth: 2.5 }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCancelEdit, disabled: isSaving, className: "text-b3-foreground-muted hover:text-b3-grey flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Cancel editing", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, strokeWidth: 2.5 }) })] })] })) : (
+                /* Display mode */
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: (0, jsx_runtime_1.jsx)("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C]", children: "Edit Username" }) })] })) })] }));
 };
 exports.default = SettingsProfileCard;

package/dist/cjs/global-account/react/components/SignInWithB3/SignIn.js

@@ -12,6 +12,7 @@ const utils_1 = require("../../../../shared/utils");
 const react_2 = require("@headlessui/react");
 const react_3 = require("react");
 const react_4 = require("thirdweb/react");
+const useAccountWallet_1 = require("../../hooks/useAccountWallet");
 const ManageAccountButton_1 = require("../custom/ManageAccountButton");
 function SignIn(props) {
     const { className } = props;
@@ -40,8 +41,9 @@ function SignIn(props) {
             setActiveWallet(connectedEOAWallet);
         }
     }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
+    const walletImage = (0, useAccountWallet_1.useAccountWalletImage)();
     // Desktop version - original dropdown menu
-    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3", children: [!!wallet.meta?.icon && ((0, jsx_runtime_1.jsx)("img", { src: wallet.meta.icon, alt: wallet.meta.icon, className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: ensName ? ensName : (0, utils_1.truncateAddress)(globalAddress) })] }), (0, jsx_runtime_1.jsx)(react_2.Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: (0, jsx_runtime_1.jsx)(react_2.MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border lg:right-0", modal: false, 
+    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: ensName ? ensName : (0, utils_1.truncateAddress)(globalAddress) })] }), (0, jsx_runtime_1.jsx)(react_2.Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: (0, jsx_runtime_1.jsx)(react_2.MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
                             // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
                             anchor: isMobile ? "top end" : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: eoaWalletIcon, alt: connectedEOAWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-4 grow", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress) }), (0, jsx_runtime_1.jsx)("div", { children: walletInfo?.name })] })] }), isActiveEOAWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
                                             ? "bg-b3-react-background"

package/dist/cjs/global-account/react/components/index.d.ts

@@ -15,8 +15,7 @@ export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } fro
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 export { Deposit } from "./Deposit/Deposit";
 export { Send } from "./Send/Send";
-export { AvatarEditor } from "./AvatarEditor/AvatarEditor";
-export { ProfileEditor } from "./ProfileEditor/ProfileEditor";
+export { IPFSMediaRenderer } from "./IPFSMediaRenderer/IPFSMediaRenderer";
 export { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 export { RequestPermissionsButton } from "./RequestPermissions/RequestPermissionsButton";
 export { AccountAssets } from "./AccountAssets/AccountAssets";

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = exports.CommandShortcut = exports.CommandSeparator = exports.CommandList = exports.CommandItem = exports.CommandInput = exports.CommandGroup = exports.CommandEmpty = exports.CommandDialog = exports.Command = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.WalletConnectorIcon = exports.StaggeredFadeLoader = exports.CopyToClipboard = exports.ClientOnly = exports.customButtonVariants = exports.CustomButton = exports.SendERC20Button = exports.SendETHButton = exports.MintButton = exports.AccountAssets = exports.RequestPermissionsButton = exports.RequestPermissions = exports.ProfileEditor = exports.AvatarEditor = exports.Send = exports.Deposit = exports.ManageAccount = exports.isWalletType = exports.getConnectOptionsFromStrategy = exports.LoginStepContainer = exports.SignInWithB3Privy = exports.SignInWithB3Flow = exports.SignInWithB3 = exports.WalletRow = exports.PermissionItem = exports.AuthButton = exports.StyleRoot = exports.useB3 = exports.B3Context = exports.RelayKitProviderWrapper = exports.InnerProvider = exports.B3Provider = exports.B3DynamicModal = void 0;
-exports.AnimatedLottie = exports.TransitionPanel = exports.TooltipTrigger = exports.TooltipProvider = exports.TooltipContent = exports.Tooltip = exports.TextShimmer = exports.TextLoop = exports.TabTrigger = exports.TabsTransitionWrapper = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TabTriggerPrimitive = exports.TabsPrimitive = exports.TabsListPrimitive = exports.TabsContentPrimitive = exports.Skeleton = exports.ShinyButton = exports.ScrollBar = exports.ScrollArea = exports.PopoverTrigger = exports.PopoverContent = exports.Popover = exports.Loading = exports.Input = exports.GlareCardRounded = exports.GlareCard = exports.DropdownMenuTrigger = exports.DropdownMenuSeparator = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenu = exports.DrawerTrigger = exports.DrawerTitle = exports.DrawerPortal = exports.DrawerOverlay = exports.DrawerHeader = exports.DrawerFooter = exports.DrawerDescription = exports.DrawerContent = exports.DrawerClose = exports.Drawer = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = void 0;
+exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = exports.CommandShortcut = exports.CommandSeparator = exports.CommandList = exports.CommandItem = exports.CommandInput = exports.CommandGroup = exports.CommandEmpty = exports.CommandDialog = exports.Command = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.WalletConnectorIcon = exports.StaggeredFadeLoader = exports.CopyToClipboard = exports.ClientOnly = exports.customButtonVariants = exports.CustomButton = exports.SendERC20Button = exports.SendETHButton = exports.MintButton = exports.AccountAssets = exports.RequestPermissionsButton = exports.RequestPermissions = exports.IPFSMediaRenderer = exports.Send = exports.Deposit = exports.ManageAccount = exports.isWalletType = exports.getConnectOptionsFromStrategy = exports.LoginStepContainer = exports.SignInWithB3Privy = exports.SignInWithB3Flow = exports.SignInWithB3 = exports.WalletRow = exports.PermissionItem = exports.AuthButton = exports.StyleRoot = exports.useB3 = exports.B3Context = exports.RelayKitProviderWrapper = exports.InnerProvider = exports.B3Provider = exports.B3DynamicModal = void 0;
+exports.AnimatedLottie = exports.TransitionPanel = exports.TooltipTrigger = exports.TooltipProvider = exports.TooltipContent = exports.Tooltip = exports.TextShimmer = exports.TextLoop = exports.TabTrigger = exports.TabsTransitionWrapper = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TabTriggerPrimitive = exports.TabsPrimitive = exports.TabsListPrimitive = exports.TabsContentPrimitive = exports.Skeleton = exports.ShinyButton = exports.ScrollBar = exports.ScrollArea = exports.PopoverTrigger = exports.PopoverContent = exports.Popover = exports.Loading = exports.Input = exports.GlareCardRounded = exports.GlareCard = exports.DropdownMenuTrigger = exports.DropdownMenuSeparator = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenu = exports.DrawerTrigger = exports.DrawerTitle = exports.DrawerPortal = exports.DrawerOverlay = exports.DrawerHeader = exports.DrawerFooter = exports.DrawerDescription = exports.DrawerContent = exports.DrawerClose = exports.Drawer = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = void 0;
+// TODO woj: Barrel file for all components, this might be reason of bundle size issues
 // Core Components
 var B3DynamicModal_1 = require("./B3DynamicModal");
 Object.defineProperty(exports, "B3DynamicModal", { enumerable: true, get: function () { return B3DynamicModal_1.B3DynamicModal; } });
@@ -43,12 +44,9 @@ Object.defineProperty(exports, "Deposit", { enumerable: true, get: function () {
 // Send Components
 var Send_1 = require("./Send/Send");
 Object.defineProperty(exports, "Send", { enumerable: true, get: function () { return Send_1.Send; } });
-// B3 Global Branding Wrapper
-// Profile Components
-var AvatarEditor_1 = require("./AvatarEditor/AvatarEditor");
-Object.defineProperty(exports, "AvatarEditor", { enumerable: true, get: function () { return AvatarEditor_1.AvatarEditor; } });
-var ProfileEditor_1 = require("./ProfileEditor/ProfileEditor");
-Object.defineProperty(exports, "ProfileEditor", { enumerable: true, get: function () { return ProfileEditor_1.ProfileEditor; } });
+// Media Components
+var IPFSMediaRenderer_1 = require("./IPFSMediaRenderer/IPFSMediaRenderer");
+Object.defineProperty(exports, "IPFSMediaRenderer", { enumerable: true, get: function () { return IPFSMediaRenderer_1.IPFSMediaRenderer; } });
 // RequestPermissions Components
 var RequestPermissions_1 = require("./RequestPermissions/RequestPermissions");
 Object.defineProperty(exports, "RequestPermissions", { enumerable: true, get: function () { return RequestPermissions_1.RequestPermissions; } });

package/dist/cjs/global-account/react/hooks/useAccountWallet.d.ts

@@ -16,3 +16,4 @@ export declare function useAccountWallet(): {
     eoaWalletIcon?: string;
     smartWalletIcon?: string;
 };
+export declare function useAccountWalletImage(): string;

package/dist/cjs/global-account/react/hooks/useAccountWallet.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAccountWallet = useAccountWallet;
+exports.useAccountWalletImage = useAccountWalletImage;
 const react_1 = require("../../../global-account/react");
 const constants_1 = require("../../../shared/constants");
 const debug_1 = require("../../../shared/utils/debug");
@@ -72,3 +73,20 @@ function useAccountWallet() {
     ]);
     return res;
 }
+function useAccountWalletImage() {
+    const { account, user } = (0, react_1.useB3)();
+    const activeWallet = (0, react_3.useActiveWallet)();
+    const connectedWallets = (0, react_3.useConnectedWallets)();
+    const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === constants_1.ecosystemWalletId);
+    const connectedEOAWallet = connectedWallets.find(wallet => wallet.id !== constants_1.ecosystemWalletId);
+    const isActiveSmartWallet = activeWallet?.id === connectedSmartWallet?.id;
+    const { data: walletImage } = (0, react_3.useWalletImage)(connectedEOAWallet?.id);
+    // If not EOA sign in, then we need to show the smart wallet icon
+    const lastAuthProvider = useLastAuthProvider();
+    const smartWalletIcon = lastAuthProvider && !connectedEOAWallet
+        ? in_app_1.socialIcons[lastAuthProvider]
+        : "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
+    const { data: profileData } = (0, react_1.useProfile)({ address: account?.address });
+    const avatarUrl = user?.avatar || profileData?.avatar;
+    return avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || "";
+}

package/dist/cjs/global-account/react/hooks/useAuthentication.d.ts

@@ -13,8 +13,8 @@ export declare function useAuthentication(partnerId: string): {
     onConnect: (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => Promise<void>;
     user: {
         email?: string | undefined;
-        username?: string | undefined;
         telNumber?: string | undefined;
+        username?: string | undefined;
         ens?: string | undefined;
         avatar?: string | undefined;
         preferences?: {} | undefined;
@@ -41,8 +41,8 @@ export declare function useAuthentication(partnerId: string): {
                 name?: string | undefined;
                 address?: string | undefined;
                 email?: string | undefined;
-                phone?: string | undefined;
                 username?: string | undefined;
+                phone?: string | undefined;
                 fid?: string | undefined;
             };
         }[] | undefined;

package/dist/cjs/global-account/react/hooks/useUserQuery.d.ts

@@ -8,8 +8,8 @@ import { Users } from "@b3dotfun/b3-api";
 export declare function useUserQuery(): {
     user: {
         email?: string | undefined;
-        username?: string | undefined;
         telNumber?: string | undefined;
+        username?: string | undefined;
         ens?: string | undefined;
         avatar?: string | undefined;
         preferences?: {} | undefined;
@@ -36,8 +36,8 @@ export declare function useUserQuery(): {
                 name?: string | undefined;
                 address?: string | undefined;
                 email?: string | undefined;
-                phone?: string | undefined;
                 username?: string | undefined;
+                phone?: string | undefined;
                 fid?: string | undefined;
             };
         }[] | undefined;

package/dist/cjs/global-account/react/stores/useModalStore.d.ts

@@ -360,12 +360,6 @@ export interface AvatarEditorModalProps extends BaseModalProps {
     /** Callback function called when avatar is successfully set */
     onSuccess?: () => void;
 }
-export interface ProfileEditorModalProps extends BaseModalProps {
-    /** Modal type identifier */
-    type: "profileEditor";
-    /** Callback function called when profile is successfully updated */
-    onSuccess?: () => void;
-}
 /**
  * Props for the Deposit modal
  * Allows users to deposit tokens into their global account
@@ -391,7 +385,7 @@ export interface SendModalProps extends BaseModalProps {
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | ProfileEditorModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps;
 /**
  * State interface for the modal store
  */

package/dist/cjs/shared/constants/chains/supported.d.ts

@@ -35,13 +35,13 @@ export declare const supportedChainNetworks: {
             uri: string;
         }[];
     };
+    _id: string | {};
     icon: {
         format: string;
         height: number;
         width: number;
         url: string;
     };
-    _id: string | {};
 }[];
 export declare const coingeckoChains: Record<number, {
     coingecko_id: string;

package/dist/cjs/shared/utils/ipfs.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIpfsUrl = getIpfsUrl;
+/**
+ * List of IPFS gateways to use for converting ipfs:// URLs to HTTP URLs
+ * These gateways must match the allowed list in profileDisplay.ts validateImageUrl()
+ */
 const IPFS_GATEWAYS = [
-    "https://cloudflare-ipfs.com/ipfs",
-    "https://ipfs.io/ipfs",
-    // Can add more gateways as needed
+    "https://cloudflare-ipfs.com/ipfs", // Primary gateway - fast and reliable
+    "https://ipfs.io/ipfs", // Fallback gateway
+    "https://gateway.pinata.cloud/ipfs", // Additional option
+    "https://dweb.link/ipfs", // Additional option
+    "https://nftstorage.link/ipfs", // Additional option
+    "https://w3s.link/ipfs", // Additional option
 ];
 /**
  * Converts an IPFS URL to a gateway URL

package/dist/esm/anyspend/react/components/AnySpend.js

@@ -4,6 +4,7 @@ import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { Button, ShinyButton, StyleRoot, TabsPrimitive, TransitionPanel, useAccountWallet, useB3, useModalStore, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import BottomNavigation from "../../../global-account/react/components/ManageAccount/BottomNavigation.js";
+import { useAccountWalletImage } from "../../../global-account/react/hooks/useAccountWallet.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
@@ -330,6 +331,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = useAccountWallet();
     const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
+    const globalWalletImage = useAccountWalletImage();
     // Auto-set active wallet from wagmi
     useAutoSetActiveWalletFromWagmi();
     // Check token balance for crypto payments
@@ -851,12 +853,12 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 params.set("paymentMethod", selectedCryptoPaymentMethod);
             }
             router.push(`${window.location.pathname}?${params.toString()}`);
-        }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
+        }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWalletImage }));
     const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: recipientAddress || "", onBack: navigateBack, onConfirm: address => {
             setRecipientAddress(address);
             navigateBack();
         } }));
-    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: navigateBack, onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: navigateBack, onSelectPaymentMethod: (method) => {
             setSelectedCryptoPaymentMethod(method);
             navigateBack();
         } }));

package/dist/esm/anyspend/react/components/AnySpendCustom.js

@@ -515,7 +515,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
     // Crypto payment method view
-    const cryptoPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(CryptoPaymentMethod, { globalAddress: currentWallet?.wallet?.address, globalWallet: currentWallet?.wallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(CryptoPaymentMethod, { selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
                 setSelectedCryptoPaymentMethod(method);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));

package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.js

@@ -226,7 +226,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             setSelectedRecipientAddress(address);
             setActivePanel(PanelView.MAIN);
         } }));
-    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
             setSelectedCryptoPaymentMethod(method);
             setActivePanel(PanelView.MAIN);
         } }));

package/dist/esm/anyspend/react/components/AnyspendDepositHype.js

@@ -216,7 +216,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             setSelectedRecipientAddress(address);
             setActivePanel(PanelView.MAIN);
         } }));
-    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
             setSelectedCryptoPaymentMethod(method);
             setActivePanel(PanelView.MAIN);
         } }));

package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.d.ts

@@ -5,12 +5,6 @@ export declare enum CryptoPaymentMethodType {
     TRANSFER_CRYPTO = "transfer_crypto"
 }
 interface CryptoPaymentMethodProps {
-    globalAddress?: string;
-    globalWallet?: {
-        meta?: {
-            icon?: string;
-        };
-    };
     selectedPaymentMethod: CryptoPaymentMethodType;
     setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
     isCreatingOrder: boolean;

package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAccountWallet } from "../../../../global-account/react/index.js";
+import { useAccountWalletImage } from "../../../../global-account/react/hooks/useAccountWallet.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
@@ -21,7 +22,7 @@ export var CryptoPaymentMethodType;
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
 export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
-    const { wallet: globalWallet, connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet, } = useAccountWallet();
+    const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
     const { connector, address } = useAccount();
     const { connect, connectors, isPending } = useConnect();
     const { disconnect } = useDisconnect();
@@ -31,6 +32,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
     const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
     const isConnected = !!connectedEOAWallet;
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
+    const walletImage = useAccountWalletImage();
     // Use custom hook to determine wallet display logic
     const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
     // Map wagmi connector names to thirdweb wallet IDs
@@ -198,7 +200,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
                                                     toast.success("Selected B3 Account");
                                                 }, className: cn("crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
                                                     ? "connected-wallet border-as-brand bg-as-brand/5"
-                                                    : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Global Account", className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: _jsx(Wallet, { className: "h-5 w-5 text-purple-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Global Account" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(globalAddress || "") })] })] }), _jsx("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), _jsxs("div", { className: "other-payment-methods", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("button", { onClick: () => {
+                                                    : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [walletImage ? (_jsx("img", { src: walletImage, alt: "Global Account", className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: _jsx(Wallet, { className: "h-5 w-5 text-purple-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Global Account" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(globalAddress || "") })] })] }), _jsx("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), _jsxs("div", { className: "other-payment-methods", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("button", { onClick: () => {
                                                     // Always show wallet selection modal first
                                                     setShowWalletModal(true);
                                                 }, className: "crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), _jsxs("button", { onClick: () => {

package/dist/esm/anyspend/react/hooks/useSigMint.d.ts

@@ -48,8 +48,8 @@ export declare const useGenerateSigMintData: ({ recipientAddress, contractAddres
             creatorMap?: {} | undefined;
             chainId: number;
             address: string;
-            title: string;
             _id: string | {};
+            title: string;
         };
     } | null;
     error: Error | null;