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

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

@@ -0,0 +1,39 @@
+import type { ThirdwebClient } from "thirdweb";
+interface IPFSMediaRendererProps {
+    /** The source URL - can be IPFS URL (ipfs://...) or HTTP URL */
+    src: string | null | undefined;
+    /** Alt text for the media */
+    alt?: string;
+    /** CSS class name */
+    className?: string;
+    /** Thirdweb client instance (optional, uses default if not provided) */
+    client?: ThirdwebClient;
+    /** Width of the media */
+    width?: string | number;
+    /** Height of the media */
+    height?: string | number;
+    /** Controls property for video/audio */
+    controls?: boolean;
+    /** Style object */
+    style?: React.CSSProperties;
+}
+/**
+ * IPFSMediaRenderer - A wrapper around Thirdweb's MediaRenderer that configures
+ * the IPFS gateway URL to use our validated gateway.
+ *
+ * Features:
+ * - Configures MediaRenderer to use cloudflare-ipfs.com gateway
+ * - Gateway matches our allowed list in profileDisplay.ts
+ * - Provides fallback for missing sources
+ *
+ * @example
+ * ```tsx
+ * <IPFSMediaRenderer
+ *   src="ipfs://QmX..."
+ *   alt="Profile Avatar"
+ *   className="size-14 rounded-full"
+ * />
+ * ```
+ */
+export declare function IPFSMediaRenderer({ src, alt, className, client, width, height, controls, style, }: IPFSMediaRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.65-test.1",
+  "version": "0.0.65-test.3",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpend.tsx

@@ -25,6 +25,7 @@ import {
   useTokenFromUrl,
 } from "@b3dotfun/sdk/global-account/react";
 import BottomNavigation from "@b3dotfun/sdk/global-account/react/components/ManageAccount/BottomNavigation";
+import { useAccountWalletImage } from "@b3dotfun/sdk/global-account/react/hooks/useAccountWallet";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
@@ -474,6 +475,8 @@ function AnySpendInner({
   const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
   const recipientName = recipientProfile.data?.name;
 
+  const globalWalletImage = useAccountWalletImage();
+
   // Auto-set active wallet from wagmi
   useAutoSetActiveWalletFromWagmi();
 
@@ -1248,7 +1251,7 @@ function AnySpendInner({
       }}
       onBack={navigateBack}
       recipientEnsName={globalWallet?.ensName}
-      recipientImageUrl={globalWallet?.meta?.icon}
+      recipientImageUrl={globalWalletImage}
     />
   );
 
@@ -1265,8 +1268,6 @@ function AnySpendInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
-      globalAddress={globalAddress}
-      globalWallet={globalWallet}
       selectedPaymentMethod={selectedCryptoPaymentMethod}
       setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
       isCreatingOrder={isCreatingOrder}

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -1237,8 +1237,6 @@ function AnySpendCustomInner({
   const cryptoPaymentMethodView = (
     <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
       <CryptoPaymentMethod
-        globalAddress={currentWallet?.wallet?.address}
-        globalWallet={currentWallet?.wallet}
         selectedPaymentMethod={selectedCryptoPaymentMethod}
         setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
         isCreatingOrder={isCreatingOrder}

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -499,8 +499,6 @@ function AnySpendCustomExactInInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
-      globalAddress={globalAddress}
-      globalWallet={undefined}
       selectedPaymentMethod={selectedCryptoPaymentMethod}
       setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
       isCreatingOrder={isCreatingOrder}

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -464,8 +464,6 @@ function AnySpendDepositHypeInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
-      globalAddress={globalAddress}
-      globalWallet={undefined}
       selectedPaymentMethod={selectedCryptoPaymentMethod}
       setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
       isCreatingOrder={isCreatingOrder}

package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import { useAccountWalletImage } from "@b3dotfun/sdk/global-account/react/hooks/useAccountWallet";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
@@ -22,12 +23,6 @@ export enum CryptoPaymentMethodType {
 }
 
 interface CryptoPaymentMethodProps {
-  globalAddress?: string;
-  globalWallet?: {
-    meta?: {
-      icon?: string;
-    };
-  };
   selectedPaymentMethod: CryptoPaymentMethodType;
   setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
   isCreatingOrder: boolean;
@@ -42,11 +37,7 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const {
-    wallet: globalWallet,
-    connectedEOAWallet: connectedEOAWallet,
-    connectedSmartWallet: connectedSmartWallet,
-  } = useAccountWallet();
+  const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
   const { connector, address } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
@@ -58,6 +49,8 @@ export function CryptoPaymentMethod({
   const isConnected = !!connectedEOAWallet;
   const globalAddress = connectedSmartWallet?.getAccount()?.address;
 
+  const walletImage = useAccountWalletImage();
+
   // Use custom hook to determine wallet display logic
   const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
 
@@ -341,8 +334,8 @@ export function CryptoPaymentMethod({
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-3">
-                        {globalWallet?.meta?.icon ? (
-                          <img src={globalWallet.meta.icon} alt="Global Account" className="h-10 w-10 rounded-full" />
+                        {walletImage ? (
+                          <img src={walletImage} alt="Global Account" className="h-10 w-10 rounded-full" />
                         ) : (
                           <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
                             <Wallet className="h-5 w-5 text-purple-600" />

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

@@ -1,10 +1,10 @@
 "use client";
 
 import app from "@b3dotfun/sdk/global-account/app";
-import { Button, useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { Button, IPFSMediaRenderer, 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 { Loader2, Upload, X } from "lucide-react";
 import { useRef, useState } from "react";
@@ -27,16 +27,15 @@ type ViewStep = "select" | "upload";
 export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   const [viewStep, setViewStep] = useState<ViewStep>("select");
   const [selectedAvatar, setSelectedAvatar] = useState<string | null>(null);
+  const [selectedProfileType, setSelectedProfileType] = useState<string | null>(null); // Track which profile was selected
   const [hoveredProfile, setHoveredProfile] = useState<string | null>(null);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [isUploading, setIsUploading] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { setUser, user, partnerId } = useB3();
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const contentType = useModalStore(state => state.contentType);
   const { setPreference } = useProfileSettings();
 
@@ -46,11 +45,10 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
     fresh: true,
   });
 
-  const currentAvatar = user?.avatar
-    ? getIpfsUrl(user?.avatar)
-    : profile?.avatar
-      ? getIpfsUrl(profile.avatar)
-      : undefined;
+  // Get raw avatar URLs, convert IPFS URLs, and validate them
+  const rawCurrentAvatar = user?.avatar || profile?.avatar;
+  const currentAvatar = validateImageUrl(rawCurrentAvatar);
+  const safePreviewUrl = validateImageUrl(previewUrl);
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -68,6 +66,8 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
       }
 
       setSelectedFile(file);
+      // Clear profile type selection when uploading a new file
+      setSelectedProfileType(null);
 
       // Create preview URL
       const url = URL.createObjectURL(file);
@@ -78,6 +78,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
 
   const handleRemovePreview = () => {
     setSelectedAvatar(currentAvatar || null);
+    setSelectedProfileType(null);
     setSelectedFile(null);
     if (previewUrl) {
       URL.revokeObjectURL(previewUrl);
@@ -96,14 +97,58 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
 
     setIsSaving(true);
     try {
+      let fileToUpload: File | null = null;
+
       // If user uploaded a new file
       if (selectedFile) {
-        debug("Starting upload to IPFS", selectedFile);
+        fileToUpload = selectedFile;
+      } else if (selectedProfileType && selectedAvatar) {
+        // User selected from existing profile avatars
+        // Fetch the image from the URL and convert to blob
+        debug("Fetching image from social profile:", selectedAvatar);
+
+        try {
+          const response = await fetch(selectedAvatar);
+          if (!response.ok) {
+            throw new Error("Failed to fetch image");
+          }
+
+          const blob = await response.blob();
+          debug("Fetched blob with type:", blob.type);
+
+          // Determine the correct extension from the blob's MIME type
+          // This handles URLs without extensions (like Farcaster images)
+          const mimeToExtension: Record<string, string> = {
+            "image/jpeg": "jpg",
+            "image/jpg": "jpg",
+            "image/png": "png",
+            "image/gif": "gif",
+            "image/webp": "webp",
+            "image/svg+xml": "svg",
+          };
+
+          const extension = blob.type ? mimeToExtension[blob.type.toLowerCase()] || "jpg" : "jpg";
+          const mimeType = blob.type || `image/${extension}`;
+
+          fileToUpload = new File([blob], `avatar-${selectedProfileType}.${extension}`, { type: mimeType });
+
+          debug("Successfully converted social profile image to file with extension:", extension);
+        } catch (fetchError) {
+          debug("Error fetching social profile image:", fetchError);
+          toast.error("Failed to fetch profile image. Please try uploading manually.");
+          setIsSaving(false);
+          return;
+        }
+      }
+
+      // Upload to IPFS if we have a file
+      if (fileToUpload) {
+        debug("Starting upload to IPFS", fileToUpload);
 
         // Upload to IPFS using Thirdweb
         const ipfsUrl = await upload({
           client,
-          files: [selectedFile],
+          files: [fileToUpload],
         });
 
         debug("Upload successful", ipfsUrl);
@@ -121,23 +166,6 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
         setUser(user);
 
         toast.success("Looks great! Your avatar has been saved!");
-      } else if (selectedAvatar && selectedAvatar !== currentAvatar) {
-        // User selected from existing profile avatars
-        // Find the profile that matches the selected avatar
-        const selectedProfile = profile?.profiles?.find(p => p.avatar === selectedAvatar);
-
-        if (selectedProfile && selectedProfile.type) {
-          debug("Setting profile preference to:", selectedProfile.type);
-
-          // Set preference for this profile type
-          await setPreference(account.address, selectedProfile.type, account.address, async (message: string) => {
-            // Sign the message using the active account
-            const signature = await account.signMessage({ message });
-            return signature;
-          });
-
-          toast.success("Avatar updated successfully!");
-        }
       }
 
       // Refresh profile to get updated avatar
@@ -165,8 +193,15 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
     }
   };
 
-  const handleProfileAvatarSelect = (avatarUrl: string) => {
+  const handleProfileAvatarSelect = (avatarUrl: string, profileType: string) => {
     setSelectedAvatar(avatarUrl);
+    setSelectedProfileType(profileType);
+    // Clear any selected file since we're selecting from profile
+    setSelectedFile(null);
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+      setPreviewUrl(null);
+    }
   };
 
   const handleUploadImageClick = () => {
@@ -214,6 +249,8 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
       }
 
       setSelectedFile(file);
+      // Clear profile type selection when uploading a new file
+      setSelectedProfileType(null);
 
       // Create preview URL
       const url = URL.createObjectURL(file);
@@ -230,17 +267,22 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
     });
   };
 
-  const isLoading = isUploading || isSaving;
+  const isLoading = isSaving;
 
-  // Get profile avatars
+  // Get profile avatars with validated URLs
   const profileAvatars =
     profile?.profiles
       ?.filter(p => p.avatar)
-      .map(p => ({
-        type: p.type,
-        avatar: getIpfsUrl(p?.avatar || ""),
-        name: p.name || p.type,
-      })) || [];
+      .map(p => {
+        const rawAvatarUrl = p?.avatar || "";
+        const validatedUrl = validateImageUrl(rawAvatarUrl);
+        return {
+          type: p.type,
+          avatar: validatedUrl,
+          name: p.name || p.type,
+        };
+      })
+      .filter(p => p.avatar !== null) || []; // Filter out profiles with invalid avatars
 
   return (
     <div className={cn("flex w-full max-w-md flex-col bg-white", className)}>
@@ -254,13 +296,17 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
             {/* Avatar Preview */}
             <div className="relative mb-6">
               <div className="h-32 w-32 overflow-hidden rounded-full">
-                <img
-                  src={selectedAvatar || currentAvatar || "https://via.placeholder.com/128"}
-                  alt="Avatar preview"
-                  className="h-full w-full object-cover"
-                />
+                {safePreviewUrl || selectedAvatar || currentAvatar ? (
+                  <IPFSMediaRenderer
+                    src={safePreviewUrl || selectedAvatar || currentAvatar || ""}
+                    alt="Avatar preview"
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <div className="bg-b3-primary-wash h-full w-full" />
+                )}
               </div>
-              {selectedAvatar && (
+              {(selectedAvatar !== currentAvatar || selectedFile) && (
                 <button
                   onClick={handleRemovePreview}
                   className="absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]"
@@ -288,37 +334,42 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
 
               {/* Profile Avatars */}
               <div className="mb-4 flex gap-3">
-                {profileAvatars.map((profileAvatar, index) => (
-                  <div
-                    key={index}
-                    className="relative"
-                    onMouseEnter={() => setHoveredProfile(profileAvatar.type)}
-                    onMouseLeave={() => setHoveredProfile(null)}
-                  >
-                    <button
-                      onClick={() => handleProfileAvatarSelect(profileAvatar.avatar)}
-                      className={cn(
-                        "h-16 w-16 overflow-hidden rounded-full border-2 transition-all",
-                        selectedAvatar === profileAvatar.avatar
-                          ? "border-[#3368ef] ring-2 ring-[#3368ef]/20"
-                          : "border-transparent hover:border-[#e4e4e7]",
-                      )}
+                {profileAvatars.map((profileAvatar, index) => {
+                  // Skip if avatar is null (should not happen due to filter, but TypeScript doesn't know that)
+                  if (!profileAvatar.avatar) return null;
+
+                  return (
+                    <div
+                      key={index}
+                      className="relative"
+                      onMouseEnter={() => setHoveredProfile(profileAvatar.type)}
+                      onMouseLeave={() => setHoveredProfile(null)}
                     >
-                      <img
-                        src={profileAvatar.avatar}
-                        alt={`${profileAvatar.type} avatar`}
-                        className="h-full w-full object-cover"
-                      />
-                    </button>
-
-                    {/* Tooltip */}
-                    {hoveredProfile === profileAvatar.type && (
-                      <div className="absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-[#18181b] px-3 py-1.5 text-xs text-white">
-                        {profileAvatar.name}
-                      </div>
-                    )}
-                  </div>
-                ))}
+                      <button
+                        onClick={() => handleProfileAvatarSelect(profileAvatar.avatar || "", profileAvatar.type || "")}
+                        className={cn(
+                          "h-16 w-16 overflow-hidden rounded-full border-2 transition-all",
+                          selectedProfileType === profileAvatar.type
+                            ? "border-[#3368ef] ring-2 ring-[#3368ef]/20"
+                            : "border-transparent hover:border-[#e4e4e7]",
+                        )}
+                      >
+                        <img
+                          src={profileAvatar.avatar}
+                          alt={`${profileAvatar.type} avatar`}
+                          className="h-full w-full object-cover"
+                        />
+                      </button>
+
+                      {/* Tooltip */}
+                      {hoveredProfile === profileAvatar.type && (
+                        <div className="absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-[#18181b] px-3 py-1.5 text-xs text-white">
+                          {profileAvatar.name}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
 
               {/* Link More Account */}
@@ -369,7 +420,11 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
             ) : (
               <div className="mb-6 w-full">
                 <div className="aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]">
-                  <img src={previewUrl || ""} alt="Preview" className="h-full w-full object-cover" />
+                  {safePreviewUrl ? (
+                    <img src={safePreviewUrl} alt="Preview" className="h-full w-full object-cover" />
+                  ) : (
+                    <div className="bg-b3-primary-wash h-full w-full" />
+                  )}
                 </div>
               </div>
             )}
@@ -392,7 +447,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
         </Button>
         <Button
           onClick={handleSaveChanges}
-          disabled={isLoading || !selectedAvatar}
+          disabled={isLoading || (!selectedFile && !selectedProfileType)}
           className="flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]"
         >
           {isLoading ? (

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

@@ -23,7 +23,6 @@ import { Deposit } from "./Deposit/Deposit";
 import { LinkAccount } from "./LinkAccount/LinkAccount";
 import { LinkNewAccount } from "./LinkAccount/LinkNewAccount";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
-import { ProfileEditor } from "./ProfileEditor/ProfileEditor";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { Send } from "./Send/Send";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
@@ -74,7 +73,6 @@ export function B3DynamicModal() {
     "avatarEditor",
     "deposit",
     "send",
-    "profileEditor",
   ];
 
   const freestyleTypes = [
@@ -157,8 +155,6 @@ export function B3DynamicModal() {
         return <Deposit />;
       case "send":
         return <Send {...contentType} />;
-      case "profileEditor":
-        return <ProfileEditor onSuccess={contentType.onSuccess} />;
       // Add other modal types here
       default:
         return null;
@@ -182,11 +178,7 @@ export function B3DynamicModal() {
             contentType?.type === "send" ||
             contentType?.type === "avatarEditor") &&
             "p-0",
-          "mx-auto w-full max-w-md sm:max-w-lg", // TODO CHECK THIS
-          // 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",
+          "mx-auto w-full max-w-md sm:max-w-lg",
         )}
         hideCloseButton={hideCloseButton}
       >
@@ -221,7 +213,7 @@ export function B3DynamicModal() {
           {renderContent()}
         </div>
       </ModalContent>
-      {(contentType?.type === "avatarEditor" || contentType?.type === "profileEditor") && (
+      {contentType?.type === "avatarEditor" && (
         <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"