@b3dotfun/sdk 0.0.63-test.0-alpha.0 → 0.0.64-alpha.0

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

@@ -15,6 +15,7 @@ const react_4 = require("thirdweb/react");
 const AvatarEditor_1 = require("./AvatarEditor/AvatarEditor");
 const useB3_1 = require("./B3Provider/useB3");
 const LinkAccount_1 = require("./LinkAccount/LinkAccount");
+const ProfileEditor_1 = require("./ProfileEditor/ProfileEditor");
 const ManageAccount_1 = require("./ManageAccount/ManageAccount");
 const RequestPermissions_1 = require("./RequestPermissions/RequestPermissions");
 const SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
@@ -56,6 +57,7 @@ function B3DynamicModal() {
         "anySpendBondKit",
         "linkAccount",
         "avatarEditor",
+        "profileEditor",
     ];
     const freestyleTypes = [
         "anySpendNft",
@@ -118,6 +120,8 @@ function B3DynamicModal() {
                 return (0, jsx_runtime_1.jsx)(AnyspendDepositHype_1.AnySpendDepositHype, { ...contentType, mode: "modal" });
             case "avatarEditor":
                 return (0, jsx_runtime_1.jsx)(AvatarEditor_1.AvatarEditor, { onSetAvatar: contentType.onSuccess });
+            case "profileEditor":
+                return (0, jsx_runtime_1.jsx)(ProfileEditor_1.ProfileEditor, { onSuccess: contentType.onSuccess });
             // Add other modal types here
             default:
                 return null;
@@ -128,8 +132,8 @@ function B3DynamicModal() {
     const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
     const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
     return ((0, jsx_runtime_1.jsxs)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [(0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", 
-                // Remove default width classes for avatar editor
-                contentType?.type === "avatarEditor"
+                // Remove default width classes for avatar editor and profile editor
+                contentType?.type === "avatarEditor" || contentType?.type === "profileEditor"
                     ? "!w-[90vw] !max-w-none" // Use !important to override default styles
-                    : "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && ((0, jsx_runtime_1.jsx)("button", { onClick: () => setB3ModalOpen(false), className: "fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: (0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
+                    : "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), (contentType?.type === "avatarEditor" || contentType?.type === "profileEditor") && ((0, jsx_runtime_1.jsx)("button", { onClick: () => setB3ModalOpen(false), className: "fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: (0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 }

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

@@ -35,10 +35,10 @@ function BalanceContent({ onLogout, showDeposit = true, showSwap = true }) {
     const [openAccordions, setOpenAccordions] = (0, react_2.useState)([]);
     const hasExpandedRef = (0, react_2.useRef)(false);
     const avatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profile?.avatar;
-    const handleEditAvatar = () => {
+    const handleEditProfile = () => {
         setB3ModalOpen(true);
         setB3ModalContentType({
-            type: "avatarEditor",
+            type: "profileEditor",
             showBackButton: true,
             onSuccess: () => {
                 // navigate back on success
@@ -90,7 +90,7 @@ function BalanceContent({ onLogout, showDeposit = true, showSwap = true }) {
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [avatarUrl ? ((0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: "Profile", className: "size-24 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditAvatar, className: "bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 16, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "") }), (0, jsx_runtime_1.jsxs)("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && ((0, jsx_runtime_1.jsxs)(react_1.Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [avatarUrl ? ((0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: "Profile", className: "size-24 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditProfile, className: "bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 16, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-b3-grey text-xl font-semibold", children: user?.username || profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "") }), (0, jsx_runtime_1.jsxs)("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && ((0, jsx_runtime_1.jsxs)(react_1.Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
                             setB3ModalOpen(true);
                             setB3ModalContentType({
                                 type: "anySpend",

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

@@ -0,0 +1,6 @@
+interface ProfileEditorProps {
+    onSuccess?: () => void;
+    className?: string;
+}
+export declare function ProfileEditor({ onSuccess, className }: ProfileEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,141 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileEditor = ProfileEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const app_1 = __importDefault(require("../../../../global-account/app"));
+const react_1 = require("../../../../global-account/react");
+const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
+const cn_1 = require("../../../../shared/utils/cn");
+const debug_1 = require("../../../../shared/utils/debug");
+const ipfs_1 = require("../../../../shared/utils/ipfs");
+const thirdweb_1 = require("../../../../shared/utils/thirdweb");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const sonner_1 = require("sonner");
+const react_3 = require("thirdweb/react");
+const storage_1 = require("thirdweb/storage");
+const debug = (0, debug_1.debugB3React)("ProfileEditor");
+function ProfileEditor({ onSuccess, className }) {
+    const [selectedFile, setSelectedFile] = (0, react_2.useState)(null);
+    const [previewUrl, setPreviewUrl] = (0, react_2.useState)(null);
+    const [username, setUsername] = (0, react_2.useState)("");
+    const [isUploading, setIsUploading] = (0, react_2.useState)(false);
+    const [isSaving, setIsSaving] = (0, react_2.useState)(false);
+    const fileInputRef = (0, react_2.useRef)(null);
+    const { user, setUser } = (0, react_1.useB3)();
+    const account = (0, react_3.useActiveAccount)();
+    const { data: profile, refetch: refreshProfile } = (0, react_1.useProfile)({
+        address: account?.address,
+        fresh: true,
+    });
+    const rawAvatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profile?.avatar;
+    const avatarUrl = (0, profileDisplay_1.validateImageUrl)(rawAvatarUrl);
+    const safePreviewUrl = (0, profileDisplay_1.validateImageUrl)(previewUrl);
+    const hasAvatar = !!avatarUrl;
+    const currentUsername = user?.username || "";
+    const handleFileSelect = (event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            // Validate file type
+            if (!file.type.startsWith("image/")) {
+                sonner_1.toast.error("Please select an image file");
+                return;
+            }
+            // Validate file size (max 5MB)
+            if (file.size > 5 * 1024 * 1024) {
+                sonner_1.toast.error("File size must be less than 5MB");
+                return;
+            }
+            setSelectedFile(file);
+            // Create preview URL
+            const url = URL.createObjectURL(file);
+            setPreviewUrl(url);
+        }
+    };
+    const handleRemoveFile = () => {
+        setSelectedFile(null);
+        if (previewUrl) {
+            URL.revokeObjectURL(previewUrl);
+            setPreviewUrl(null);
+        }
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    const handleSave = async () => {
+        // Check if there are any changes
+        const hasAvatarChange = selectedFile !== null;
+        const hasUsernameChange = username.trim() !== "" && username !== currentUsername;
+        if (!hasAvatarChange && !hasUsernameChange) {
+            sonner_1.toast.error("Please make at least one change");
+            return;
+        }
+        setIsSaving(true);
+        try {
+            let ipfsUrl;
+            // Upload avatar if selected
+            if (hasAvatarChange && selectedFile) {
+                debug("Starting upload to IPFS", selectedFile);
+                setIsUploading(true);
+                ipfsUrl = await (0, storage_1.upload)({
+                    client: thirdweb_1.client,
+                    files: [selectedFile],
+                });
+                debug("Upload successful", ipfsUrl);
+                setIsUploading(false);
+            }
+            // Update user profile
+            let updatedUser = user;
+            // If both avatar and username need updating, do them sequentially
+            // Update avatar first if uploaded
+            if (ipfsUrl) {
+                // @ts-expect-error this resolved fine, look into why expect-error needed
+                updatedUser = await app_1.default.service("users").setAvatar({
+                    avatar: ipfsUrl,
+                }, 
+                // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+                {});
+            }
+            // Update username if changed (this will use the updated user from avatar change if both were updated)
+            if (hasUsernameChange && user?._id) {
+                // @ts-expect-error this resolved fine, look into why expect-error needed
+                updatedUser = await app_1.default.service("users").registerUsername({ username: username }, 
+                // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+                {});
+            }
+            // Update user state
+            setUser(updatedUser);
+            // Refresh profile to get updated data
+            await refreshProfile();
+            // Show success message
+            const changes = [];
+            if (hasAvatarChange)
+                changes.push("avatar");
+            if (hasUsernameChange)
+                changes.push("username");
+            sonner_1.toast.success(`Successfully updated ${changes.join(" and ")}!`);
+            onSuccess?.();
+            // Clean up
+            handleRemoveFile();
+            setUsername("");
+        }
+        catch (error) {
+            debug("Error updating profile:", error);
+            sonner_1.toast.error("Failed to update profile. Please try again.");
+        }
+        finally {
+            setIsUploading(false);
+            setIsSaving(false);
+        }
+    };
+    const handleFileInputClick = () => {
+        fileInputRef.current?.click();
+    };
+    const isLoading = isUploading || isSaving;
+    const hasChanges = selectedFile !== null || (username.trim() !== "" && username !== currentUsername);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col items-center justify-center space-y-6 p-8", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-neue-montreal-semibold text-b3-grey text-2xl", children: "Edit Your Profile" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium", children: "Update your avatar and username" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full max-w-md space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Avatar" }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: safePreviewUrl || avatarUrl ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4", children: (0, jsx_runtime_1.jsx)("img", { src: safePreviewUrl || avatarUrl || "", alt: safePreviewUrl ? "Preview" : "Current avatar", className: "h-full w-full object-cover" }) }), safePreviewUrl && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRemoveFile, className: "bg-b3-negative absolute -right-2 -top-2 flex h-8 w-8 items-center justify-center rounded-full text-white transition-colors hover:bg-red-600", disabled: isLoading, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-32 w-32 rounded-full" })) }), !selectedFile && ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", onClick: handleFileInputClick, disabled: isLoading, className: "w-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "mr-2 h-4 w-4" }), hasAvatar ? "Change Avatar" : "Upload Avatar"] })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "username", className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Username" }), (0, jsx_runtime_1.jsx)("input", { id: "username", type: "text", value: username, onChange: e => setUsername(e.target.value), placeholder: currentUsername || "Enter username", className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-medium focus:border-b3-primary-blue w-full rounded-lg border px-4 py-3 transition-colors focus:outline-none", disabled: isLoading }), currentUsername && ((0, jsx_runtime_1.jsxs)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-xs", children: ["Current: ", currentUsername] }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full max-w-md gap-3", children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleSave, disabled: isLoading || !hasChanges, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white disabled:opacity-50", children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isUploading ? "Uploading..." : "Saving..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "mr-2 h-4 w-4" }), "Save Changes"] })) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs", children: (0, jsx_runtime_1.jsx)("p", { children: "Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image." }) })] }));
+}

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

@@ -13,6 +13,8 @@ export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
+export { AvatarEditor } from "./AvatarEditor/AvatarEditor";
+export { ProfileEditor } from "./ProfileEditor/ProfileEditor";
 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,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = 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.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.TabsTransitionWrapper = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TabTrigger = exports.TabsPrimitive = exports.TabsListPrimitive = exports.TabsContentPrimitive = exports.TabTriggerPrimitive = 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 = void 0;
+exports.DialogHeader = 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.ProfileEditor = exports.AvatarEditor = 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.TabsTransitionWrapper = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TabTrigger = exports.TabsPrimitive = exports.TabsListPrimitive = exports.TabsContentPrimitive = exports.TabTriggerPrimitive = 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 = void 0;
 // Core Components
 var B3DynamicModal_1 = require("./B3DynamicModal");
 Object.defineProperty(exports, "B3DynamicModal", { enumerable: true, get: function () { return B3DynamicModal_1.B3DynamicModal; } });
@@ -37,6 +37,11 @@ Object.defineProperty(exports, "isWalletType", { enumerable: true, get: function
 // ManageAccount Components
 var ManageAccount_1 = require("./ManageAccount/ManageAccount");
 Object.defineProperty(exports, "ManageAccount", { enumerable: true, get: function () { return ManageAccount_1.ManageAccount; } });
+// 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; } });
 // 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/stores/useModalStore.d.ts

@@ -351,10 +351,16 @@ 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;
+}
 /**
  * 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 | AnySpendDepositHypeProps | AvatarEditorModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | ProfileEditorModalProps;
 /**
  * State interface for the modal store
  */

package/dist/cjs/global-account/react/utils/profileDisplay.d.ts

@@ -1,4 +1,10 @@
 import { type Profile } from "thirdweb/wallets";
+/**
+ * Validates that an image URL uses an allowed schema
+ * @param url - The URL to validate
+ * @returns The URL if valid, null otherwise
+ */
+export declare function validateImageUrl(url: string | null | undefined): string | null;
 export interface ExtendedProfileDetails {
     id?: string;
     email?: string;

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

@@ -1,6 +1,62 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateImageUrl = validateImageUrl;
 exports.getProfileDisplayInfo = getProfileDisplayInfo;
+const debug_1 = require("../../../shared/utils/debug");
+const debug = (0, debug_1.debugB3React)("profileDisplay");
+/**
+ * Validates that an image URL uses an allowed schema
+ * @param url - The URL to validate
+ * @returns The URL if valid, null otherwise
+ */
+function validateImageUrl(url) {
+    if (!url)
+        return null;
+    try {
+        // For blob URLs (from createObjectURL)
+        if (url.startsWith("blob:")) {
+            return url;
+        }
+        // For IPFS protocol URLs
+        if (url.startsWith("ipfs://")) {
+            return url;
+        }
+        // Parse URL to validate protocol and hostname
+        const parsedUrl = new URL(url);
+        // Only allow http and https protocols
+        if (parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:") {
+            debug("Rejected unsafe protocol:", parsedUrl.protocol, url);
+            return null;
+        }
+        // Whitelist of allowed IPFS gateway hostnames
+        const allowedIpfsGateways = [
+            "ipfs.io",
+            "gateway.pinata.cloud",
+            "cloudflare-ipfs.com",
+            "dweb.link",
+            "nftstorage.link",
+            "w3s.link",
+        ];
+        // Check if hostname matches allowed IPFS gateways
+        const hostname = parsedUrl.hostname.toLowerCase();
+        const isAllowedIpfsGateway = allowedIpfsGateways.some(gateway => {
+            // Exact match or subdomain of the gateway
+            return hostname === gateway || hostname.endsWith(`.${gateway}`);
+        });
+        if (isAllowedIpfsGateway) {
+            return url;
+        }
+        // For standard HTTP(S) URLs from trusted sources
+        // Add additional hostname validation here if needed
+        // For now, allow all HTTP(S) URLs (can be restricted further if needed)
+        return url;
+    }
+    catch (error) {
+        // Invalid URL format
+        debug("Invalid image URL format:", url, error);
+        return null;
+    }
+}
 function getProfileDisplayInfo(profile) {
     const { type, details } = profile;
     // Default display info
@@ -17,7 +73,7 @@ function getProfileDisplayInfo(profile) {
             displayInfo = {
                 title: details.name || details.username || "Unknown",
                 subtitle: details.username ? `@${details.username}` : "X Account",
-                imageUrl: details.profileImageUrl || null,
+                imageUrl: validateImageUrl(details.profileImageUrl),
                 initial: "X",
                 type,
             };
@@ -26,7 +82,7 @@ function getProfileDisplayInfo(profile) {
             displayInfo = {
                 title: details.name || details.username || "Unknown",
                 subtitle: details.username ? `@${details.username}` : "Farcaster Account",
-                imageUrl: details.profileImageUrl || null,
+                imageUrl: validateImageUrl(details.profileImageUrl),
                 initial: "F",
                 type,
             };
@@ -35,7 +91,7 @@ function getProfileDisplayInfo(profile) {
             displayInfo = {
                 title: details.name || details.email || "Unknown",
                 subtitle: details.email || "Google Account",
-                imageUrl: details.profileImageUrl || null,
+                imageUrl: validateImageUrl(details.profileImageUrl),
                 initial: "G",
                 type,
             };
@@ -44,7 +100,7 @@ function getProfileDisplayInfo(profile) {
             displayInfo = {
                 title: details.username || details.name || "Unknown",
                 subtitle: "Discord Account",
-                imageUrl: details.profileImageUrl || null,
+                imageUrl: validateImageUrl(details.profileImageUrl),
                 initial: "D",
                 type,
             };

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

@@ -12,6 +12,7 @@ import { useSetActiveWallet } from "thirdweb/react";
 import { AvatarEditor } from "./AvatarEditor/AvatarEditor.js";
 import { useB3 } from "./B3Provider/useB3.js";
 import { LinkAccount } from "./LinkAccount/LinkAccount.js";
+import { ProfileEditor } from "./ProfileEditor/ProfileEditor.js";
 import { ManageAccount } from "./ManageAccount/ManageAccount.js";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions.js";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
@@ -53,6 +54,7 @@ export function B3DynamicModal() {
         "anySpendBondKit",
         "linkAccount",
         "avatarEditor",
+        "profileEditor",
     ];
     const freestyleTypes = [
         "anySpendNft",
@@ -115,6 +117,8 @@ export function B3DynamicModal() {
                 return _jsx(AnySpendDepositHype, { ...contentType, mode: "modal" });
             case "avatarEditor":
                 return _jsx(AvatarEditor, { onSetAvatar: contentType.onSuccess });
+            case "profileEditor":
+                return _jsx(ProfileEditor, { onSuccess: contentType.onSuccess });
             // Add other modal types here
             default:
                 return null;
@@ -125,8 +129,8 @@ export function B3DynamicModal() {
     const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
     const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
     return (_jsxs(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [_jsxs(ModalContent, { className: cn(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", 
-                // Remove default width classes for avatar editor
-                contentType?.type === "avatarEditor"
+                // Remove default width classes for avatar editor and profile editor
+                contentType?.type === "avatarEditor" || contentType?.type === "profileEditor"
                     ? "!w-[90vw] !max-w-none" // Use !important to override default styles
-                    : "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && (_jsx("button", { onClick: () => setB3ModalOpen(false), className: "fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
+                    : "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), (contentType?.type === "avatarEditor" || contentType?.type === "profileEditor") && (_jsx("button", { onClick: () => setB3ModalOpen(false), className: "fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 }

package/dist/esm/global-account/react/components/ManageAccount/BalanceContent.js

@@ -32,10 +32,10 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
     const [openAccordions, setOpenAccordions] = useState([]);
     const hasExpandedRef = useRef(false);
     const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
-    const handleEditAvatar = () => {
+    const handleEditProfile = () => {
         setB3ModalOpen(true);
         setB3ModalContentType({
-            type: "avatarEditor",
+            type: "profileEditor",
             showBackButton: true,
             onSuccess: () => {
                 // navigate back on success
@@ -87,7 +87,7 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "Profile", className: "size-24 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), _jsx("button", { onClick: handleEditAvatar, className: "bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors", children: _jsx(Pencil, { size: 16, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info", children: [_jsx("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || formatUsername(profile?.name || "") }), _jsxs("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), _jsx(CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && (_jsxs(Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "Profile", className: "size-24 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), _jsx("button", { onClick: handleEditProfile, className: "bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors", children: _jsx(Pencil, { size: 16, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info", children: [_jsx("h2", { className: "text-b3-grey text-xl font-semibold", children: user?.username || profile?.displayName || formatUsername(profile?.name || "") }), _jsxs("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), _jsx(CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && (_jsxs(Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
                             setB3ModalOpen(true);
                             setB3ModalContentType({
                                 type: "anySpend",

package/dist/esm/global-account/react/components/ProfileEditor/ProfileEditor.d.ts

@@ -0,0 +1,6 @@
+interface ProfileEditorProps {
+    onSuccess?: () => void;
+    className?: string;
+}
+export declare function ProfileEditor({ onSuccess, className }: ProfileEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,135 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import app from "../../../../global-account/app.js";
+import { Button, useB3, useProfile } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { debugB3React } from "../../../../shared/utils/debug.js";
+import { getIpfsUrl } from "../../../../shared/utils/ipfs.js";
+import { client } from "../../../../shared/utils/thirdweb.js";
+import { Check, Loader2, Upload, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+import { upload } from "thirdweb/storage";
+const debug = debugB3React("ProfileEditor");
+export function ProfileEditor({ onSuccess, className }) {
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const [username, setUsername] = useState("");
+    const [isUploading, setIsUploading] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const fileInputRef = useRef(null);
+    const { user, setUser } = useB3();
+    const account = useActiveAccount();
+    const { data: profile, refetch: refreshProfile } = useProfile({
+        address: account?.address,
+        fresh: true,
+    });
+    const rawAvatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
+    const avatarUrl = validateImageUrl(rawAvatarUrl);
+    const safePreviewUrl = validateImageUrl(previewUrl);
+    const hasAvatar = !!avatarUrl;
+    const currentUsername = user?.username || "";
+    const handleFileSelect = (event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            // Validate file type
+            if (!file.type.startsWith("image/")) {
+                toast.error("Please select an image file");
+                return;
+            }
+            // Validate file size (max 5MB)
+            if (file.size > 5 * 1024 * 1024) {
+                toast.error("File size must be less than 5MB");
+                return;
+            }
+            setSelectedFile(file);
+            // Create preview URL
+            const url = URL.createObjectURL(file);
+            setPreviewUrl(url);
+        }
+    };
+    const handleRemoveFile = () => {
+        setSelectedFile(null);
+        if (previewUrl) {
+            URL.revokeObjectURL(previewUrl);
+            setPreviewUrl(null);
+        }
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    const handleSave = async () => {
+        // Check if there are any changes
+        const hasAvatarChange = selectedFile !== null;
+        const hasUsernameChange = username.trim() !== "" && username !== currentUsername;
+        if (!hasAvatarChange && !hasUsernameChange) {
+            toast.error("Please make at least one change");
+            return;
+        }
+        setIsSaving(true);
+        try {
+            let ipfsUrl;
+            // Upload avatar if selected
+            if (hasAvatarChange && selectedFile) {
+                debug("Starting upload to IPFS", selectedFile);
+                setIsUploading(true);
+                ipfsUrl = await upload({
+                    client,
+                    files: [selectedFile],
+                });
+                debug("Upload successful", ipfsUrl);
+                setIsUploading(false);
+            }
+            // Update user profile
+            let updatedUser = user;
+            // If both avatar and username need updating, do them sequentially
+            // Update avatar first if uploaded
+            if (ipfsUrl) {
+                // @ts-expect-error this resolved fine, look into why expect-error needed
+                updatedUser = await app.service("users").setAvatar({
+                    avatar: ipfsUrl,
+                }, 
+                // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+                {});
+            }
+            // Update username if changed (this will use the updated user from avatar change if both were updated)
+            if (hasUsernameChange && user?._id) {
+                // @ts-expect-error this resolved fine, look into why expect-error needed
+                updatedUser = await app.service("users").registerUsername({ username: username }, 
+                // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+                {});
+            }
+            // Update user state
+            setUser(updatedUser);
+            // Refresh profile to get updated data
+            await refreshProfile();
+            // Show success message
+            const changes = [];
+            if (hasAvatarChange)
+                changes.push("avatar");
+            if (hasUsernameChange)
+                changes.push("username");
+            toast.success(`Successfully updated ${changes.join(" and ")}!`);
+            onSuccess?.();
+            // Clean up
+            handleRemoveFile();
+            setUsername("");
+        }
+        catch (error) {
+            debug("Error updating profile:", error);
+            toast.error("Failed to update profile. Please try again.");
+        }
+        finally {
+            setIsUploading(false);
+            setIsSaving(false);
+        }
+    };
+    const handleFileInputClick = () => {
+        fileInputRef.current?.click();
+    };
+    const isLoading = isUploading || isSaving;
+    const hasChanges = selectedFile !== null || (username.trim() !== "" && username !== currentUsername);
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center space-y-6 p-8", className), children: [_jsxs("div", { className: "space-y-2 text-center", children: [_jsx("h2", { className: "font-neue-montreal-semibold text-b3-grey text-2xl", children: "Edit Your Profile" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium", children: "Update your avatar and username" })] }), _jsxs("div", { className: "w-full max-w-md space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Avatar" }), _jsx("div", { className: "flex justify-center", children: safePreviewUrl || avatarUrl ? (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4", children: _jsx("img", { src: safePreviewUrl || avatarUrl || "", alt: safePreviewUrl ? "Preview" : "Current avatar", className: "h-full w-full object-cover" }) }), safePreviewUrl && (_jsx("button", { onClick: handleRemoveFile, className: "bg-b3-negative absolute -right-2 -top-2 flex h-8 w-8 items-center justify-center rounded-full text-white transition-colors hover:bg-red-600", disabled: isLoading, children: _jsx(X, { size: 16 }) }))] })) : (_jsx("div", { className: "bg-b3-primary-wash h-32 w-32 rounded-full" })) }), !selectedFile && (_jsxs(Button, { variant: "outline", onClick: handleFileInputClick, disabled: isLoading, className: "w-full", children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), hasAvatar ? "Change Avatar" : "Upload Avatar"] })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "username", className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Username" }), _jsx("input", { id: "username", type: "text", value: username, onChange: e => setUsername(e.target.value), placeholder: currentUsername || "Enter username", className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-medium focus:border-b3-primary-blue w-full rounded-lg border px-4 py-3 transition-colors focus:outline-none", disabled: isLoading }), currentUsername && (_jsxs("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-xs", children: ["Current: ", currentUsername] }))] })] }), _jsx("div", { className: "flex w-full max-w-md gap-3", children: _jsx(Button, { onClick: handleSave, disabled: isLoading || !hasChanges, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white disabled:opacity-50", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isUploading ? "Uploading..." : "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "mr-2 h-4 w-4" }), "Save Changes"] })) }) }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs", children: _jsx("p", { children: "Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image." }) })] }));
+}