@b3dotfun/sdk 0.0.63 → 0.0.64-alpha.0

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

@@ -16,6 +16,9 @@ export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep.js";
 export { getConnectOptionsFromStrategy, isWalletType } from "./SignInWithB3/utils/signInUtils.js";
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount.js";
+// Profile Components
+export { AvatarEditor } from "./AvatarEditor/AvatarEditor.js";
+export { ProfileEditor } from "./ProfileEditor/ProfileEditor.js";
 // RequestPermissions Components
 export { RequestPermissions } from "./RequestPermissions/RequestPermissions.js";
 export { RequestPermissionsButton } from "./RequestPermissions/RequestPermissionsButton.js";

package/dist/esm/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/esm/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/esm/global-account/react/utils/profileDisplay.js

@@ -1,3 +1,58 @@
+import { debugB3React } from "../../../shared/utils/debug.js";
+const debug = debugB3React("profileDisplay");
+/**
+ * Validates that an image URL uses an allowed schema
+ * @param url - The URL to validate
+ * @returns The URL if valid, null otherwise
+ */
+export 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;
+    }
+}
 export function getProfileDisplayInfo(profile) {
     const { type, details } = profile;
     // Default display info
@@ -14,7 +69,7 @@ export 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,
             };
@@ -23,7 +78,7 @@ export 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,
             };
@@ -32,7 +87,7 @@ export 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,
             };
@@ -41,7 +96,7 @@ export 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/types/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/types/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/types/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/types/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.63",
+  "version": "0.0.64-alpha.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -282,7 +282,7 @@
     "constants"
   ],
   "dependencies": {
-    "@b3dotfun/b3-api": "0.0.77",
+    "@b3dotfun/b3-api": "0.0.84",
     "@b3dotfun/basement-api": "0.0.11",
     "@feathersjs/authentication-client": "5.0.33",
     "@feathersjs/feathers": "5.0.33",

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

@@ -21,6 +21,7 @@ import { useSetActiveWallet } from "thirdweb/react";
 import { AvatarEditor } from "./AvatarEditor/AvatarEditor";
 import { useB3 } from "./B3Provider/useB3";
 import { LinkAccount } from "./LinkAccount/LinkAccount";
+import { ProfileEditor } from "./ProfileEditor/ProfileEditor";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
@@ -68,6 +69,7 @@ export function B3DynamicModal() {
     "anySpendBondKit",
     "linkAccount",
     "avatarEditor",
+    "profileEditor",
   ];
 
   const freestyleTypes = [
@@ -144,6 +146,8 @@ export function B3DynamicModal() {
         return <AnySpendDepositHype {...contentType} mode="modal" />;
       case "avatarEditor":
         return <AvatarEditor onSetAvatar={contentType.onSuccess} />;
+      case "profileEditor":
+        return <ProfileEditor onSuccess={contentType.onSuccess} />;
       // Add other modal types here
       default:
         return null;
@@ -162,8 +166,8 @@ export function B3DynamicModal() {
           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",
         )}
@@ -199,7 +203,7 @@ export function B3DynamicModal() {
           {renderContent()}
         </div>
       </ModalContent>
-      {contentType?.type === "avatarEditor" && (
+      {(contentType?.type === "avatarEditor" || contentType?.type === "profileEditor") && (
         <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"

package/src/global-account/react/components/ManageAccount/BalanceContent.tsx

@@ -50,10 +50,10 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
 
   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
@@ -125,7 +125,7 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
               <div className="bg-b3-primary-wash size-24 rounded-full" />
             )}
             <button
-              onClick={handleEditAvatar}
+              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"
             >
               <Pencil size={16} className="text-b3-background" />
@@ -133,7 +133,7 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
           </div>
           <div className="global-account-profile-info">
             <h2 className="text-b3-grey text-xl font-semibold">
-              {profile?.displayName || formatUsername(profile?.name || "")}
+              {user?.username || profile?.displayName || formatUsername(profile?.name || "")}
             </h2>
             <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">
               <span className="text-b3-foreground-muted font-mono text-xs">

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

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

package/src/global-account/react/components/index.ts

@@ -19,6 +19,10 @@ export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } fro
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 
+// Profile Components
+export { AvatarEditor } from "./AvatarEditor/AvatarEditor";
+export { ProfileEditor } from "./ProfileEditor/ProfileEditor";
+
 // RequestPermissions Components
 export { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 export { RequestPermissionsButton } from "./RequestPermissions/RequestPermissionsButton";

package/src/global-account/react/stores/useModalStore.ts

@@ -373,6 +373,13 @@ export interface AvatarEditorModalProps extends BaseModalProps {
   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
  */
@@ -395,7 +402,8 @@ export type ModalContentType =
   | AnySpendBondKitProps
   | LinkAccountModalProps
   | AnySpendDepositHypeProps
-  | AvatarEditorModalProps;
+  | AvatarEditorModalProps
+  | ProfileEditorModalProps;
 // Add other modal types here like: | OtherModalProps | AnotherModalProps
 
 /**