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

package/src/shared/utils/ipfs.ts

@@ -1,7 +1,14 @@
+/**
+ * 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
 ] as const;
 
 /**

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

@@ -1,6 +0,0 @@
-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

@@ -1,141 +0,0 @@
-"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/esm/global-account/react/components/ProfileEditor/ProfileEditor.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,135 +0,0 @@
-"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." }) })] }));
-}

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

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

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

@@ -1,265 +0,0 @@
-"use client";
-
-import { Users } from "@b3dotfun/b3-api";
-import app from "@b3dotfun/sdk/global-account/app";
-import { Button, useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
-import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
-import { cn } from "@b3dotfun/sdk/shared/utils/cn";
-import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
-import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
-import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-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");
-
-interface ProfileEditorProps {
-  onSuccess?: () => void;
-  className?: string;
-}
-
-export function ProfileEditor({ onSuccess, className }: ProfileEditorProps) {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [username, setUsername] = useState<string>("");
-  const [isUploading, setIsUploading] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(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: React.ChangeEvent<HTMLInputElement>) => {
-    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: string | undefined;
-
-      // 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 as Users | undefined;
-
-      // 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 (
-    <div className={cn("flex flex-col items-center justify-center space-y-6 p-8", className)}>
-      <div className="space-y-2 text-center">
-        <h2 className="font-neue-montreal-semibold text-b3-grey text-2xl">Edit Your Profile</h2>
-        <p className="text-b3-foreground-muted font-neue-montreal-medium">Update your avatar and username</p>
-      </div>
-
-      {/* Avatar Section */}
-      <div className="w-full max-w-md space-y-4">
-        <div className="space-y-2">
-          <label className="text-b3-grey font-neue-montreal-semibold text-sm">Avatar</label>
-
-          {/* Current/Preview Avatar */}
-          <div className="flex justify-center">
-            {safePreviewUrl || avatarUrl ? (
-              <div className="relative">
-                <div className="border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4">
-                  <img
-                    src={safePreviewUrl || avatarUrl || ""}
-                    alt={safePreviewUrl ? "Preview" : "Current avatar"}
-                    className="h-full w-full object-cover"
-                  />
-                </div>
-                {safePreviewUrl && (
-                  <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}
-                  >
-                    <X size={16} />
-                  </button>
-                )}
-              </div>
-            ) : (
-              <div className="bg-b3-primary-wash h-32 w-32 rounded-full" />
-            )}
-          </div>
-
-          {/* Upload Button */}
-          {!selectedFile && (
-            <Button variant="outline" onClick={handleFileInputClick} disabled={isLoading} className="w-full">
-              <Upload className="mr-2 h-4 w-4" />
-              {hasAvatar ? "Change Avatar" : "Upload Avatar"}
-            </Button>
-          )}
-
-          {/* Hidden file input */}
-          <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileSelect} className="hidden" />
-        </div>
-
-        {/* Username Section */}
-        <div className="space-y-2">
-          <label htmlFor="username" className="text-b3-grey font-neue-montreal-semibold text-sm">
-            Username
-          </label>
-          <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 && (
-            <p className="text-b3-foreground-muted font-neue-montreal-medium text-xs">Current: {currentUsername}</p>
-          )}
-        </div>
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex w-full max-w-md gap-3">
-        <Button
-          onClick={handleSave}
-          disabled={isLoading || !hasChanges}
-          className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white disabled:opacity-50"
-        >
-          {isLoading ? (
-            <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              {isUploading ? "Uploading..." : "Saving..."}
-            </>
-          ) : (
-            <>
-              <Check className="mr-2 h-4 w-4" />
-              Save Changes
-            </>
-          )}
-        </Button>
-      </div>
-
-      {/* Help Text */}
-      <div className="text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs">
-        <p>
-          Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image.
-        </p>
-      </div>
-    </div>
-  );
-}