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

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { client as defaultClient } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import type { ThirdwebClient } from "thirdweb";
+import { MediaRenderer } from "thirdweb/react";
+
+// Primary IPFS gateway URL - matches our allowed list in profileDisplay.ts
+// Note: MediaRenderer expects the base gateway URL without /ipfs path
+const IPFS_GATEWAY_URL = "https://cloudflare-ipfs.com";
+
+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 function IPFSMediaRenderer({
+  src,
+  alt = "Media",
+  className,
+  client = defaultClient,
+  width,
+  height,
+  controls,
+  style,
+}: IPFSMediaRendererProps) {
+  // If no source, render fallback
+  if (!src) {
+    return (
+      <div className={className} style={style} aria-label={alt}>
+        <div className="bg-b3-primary-wash flex h-full w-full items-center justify-center">
+          <span className="text-b3-grey font-neue-montreal-semibold text-xs">{alt.charAt(0).toUpperCase()}</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Convert IPFS URLs to HTTP gateway URLs if needed
+  // This handles both ipfs:// URLs and existing HTTP gateway URLs
+
+  return (
+    <MediaRenderer
+      src={src}
+      client={client}
+      alt={alt}
+      className={className}
+      width={width ? width.toString() : undefined}
+      height={height ? height.toString() : undefined}
+      controls={controls}
+      style={style}
+    />
+  );
+}

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

@@ -13,11 +13,11 @@ import { BankIcon } from "@b3dotfun/sdk/global-account/react/components/icons/Ba
 import { SignOutIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SignOutIcon";
 import { SwapIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SwapIcon";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
-import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
 import { Loader2, Pencil } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { useFirstEOA } from "../../hooks/useFirstEOA";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 import { B3TokenIcon, EthereumTokenIcon } from "../TokenIcon";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion";
 import { TokenBalanceRow } from "./TokenBalanceRow";
@@ -48,7 +48,8 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
   const [openAccordions, setOpenAccordions] = useState<string[]>([]);
   const hasExpandedRef = useRef(false);
 
-  const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
+  // IPFSMediaRenderer will handle IPFS URL conversion and validation
+  const avatarSrc = user?.avatar || profile?.avatar;
 
   const handleEditProfile = () => {
     setB3ModalOpen(true);
@@ -118,11 +119,7 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
       <div className="flex items-center justify-between">
         <div className="global-account-profile flex items-center gap-4">
           <div className="global-account-profile-avatar relative">
-            {avatarUrl ? (
-              <img src={avatarUrl} alt="Profile" className="size-24 rounded-full" />
-            ) : (
-              <div className="bg-b3-primary-wash size-24 rounded-full" />
-            )}
+            <IPFSMediaRenderer src={avatarSrc} alt="Profile" className="size-24 rounded-full" />
             <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"

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

@@ -41,7 +41,7 @@ const HomeActionButton = ({
   return (
     <Button
       className={cn(
-        "border-b3-line hover:border-b3-primary-blue flex h-[84px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-[1.5px] bg-[#FAFAFA] hover:bg-[#FAFAFA]",
+        "border-b3-line hover:border-b3-primary-blue shadow-xs flex h-[84px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-[1.5px] bg-[#FAFAFA] hover:bg-[#FAFAFA]",
         customClass,
       )}
       onClick={onClick}

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

@@ -93,7 +93,7 @@ export function ManageAccount({
         }}
       >
         <div className="p-0">
-          <TabsContentPrimitive value="home" className="px-0 pb-4 pt-2">
+          <TabsContentPrimitive value="home" className="m-0 p-0 pb-2">
             <HomeContent showDeposit={showDeposit} showSwap={showSwap} />
           </TabsContentPrimitive>
 
@@ -108,7 +108,7 @@ export function ManageAccount({
           {/* Swap tab content is handled by modal, so this is empty */}
           <TabsContentPrimitive value="swap" className="hidden" />
 
-          <TabsContentPrimitive value="settings" className="pb-4 pt-2">
+          <TabsContentPrimitive value="settings" className="m-0 p-0 pb-2">
             <SettingsContent partnerId={partnerId} onLogout={onLogout} chain={chain} />
           </TabsContentPrimitive>
         </div>

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

@@ -1,11 +1,11 @@
 import { useAccountWallet, useB3, useModalStore, useProfile, useSimBalance } from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
-import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { Pencil } from "lucide-react";
 import { useMemo } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { useFirstEOA } from "../../hooks/useFirstEOA";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 
 const ProfileSection = () => {
   const account = useActiveAccount();
@@ -28,8 +28,6 @@ const ProfileSection = () => {
     return simBalance.balances.reduce((sum, token) => sum + (token.value_usd || 0), 0);
   }, [simBalance]);
 
-  const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
-
   const handleEditAvatar = () => {
     setB3ModalOpen(true);
     setB3ModalContentType({
@@ -41,15 +39,17 @@ const ProfileSection = () => {
     });
   };
 
+  // IPFSMediaRenderer will handle IPFS URL conversion and validation
+  const avatarSrc = user?.avatar || profile?.avatar;
+
+  // Get current username - prioritize user.username, fallback to profile data
+  const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
+
   return (
     <div className="flex items-center justify-between px-5 py-6">
       <div className="global-account-profile flex items-center gap-4">
         <div className="global-account-profile-avatar relative">
-          {avatarUrl ? (
-            <img src={avatarUrl} alt="Profile" className="size-14 rounded-full" />
-          ) : (
-            <div className="bg-b3-primary-wash size-14 rounded-full" />
-          )}
+          <IPFSMediaRenderer src={avatarSrc} alt="Profile Avatar" className="size-14 rounded-full" />
           <button
             onClick={handleEditAvatar}
             className="border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors"
@@ -62,9 +62,7 @@ const ProfileSection = () => {
             <div className="text-b3-foreground-muted"> $</div>
             <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
           </h2>
-          <div className="font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">
-            {profile?.displayName || formatUsername(profile?.name || "")}
-          </div>
+          <div className="font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">{currentUsername}</div>
         </div>
       </div>
     </div>

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

@@ -1,23 +1,44 @@
+import app from "@b3dotfun/sdk/global-account/app";
 import { useB3, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
-import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
-import { Pencil } from "lucide-react";
+import { Check, Loader2, Pencil, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
 import { useActiveAccount } from "thirdweb/react";
 import { useFirstEOA } from "../../hooks/useFirstEOA";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 
 const SettingsProfileCard = () => {
   const account = useActiveAccount();
   const { address: eoaAddress } = useFirstEOA();
-  const { data: profile } = useProfile({
+  const { data: profile, refetch: refreshProfile } = useProfile({
     address: eoaAddress || account?.address,
     fresh: true,
   });
-  const { user } = useB3();
+  const { user, setUser } = useB3();
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const navigateBack = useModalStore(state => state.navigateBack);
 
-  const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
+  // State for inline username editing
+  const [isEditingUsername, setIsEditingUsername] = useState(false);
+  const [editedUsername, setEditedUsername] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // IPFSMediaRenderer will handle IPFS URL conversion and validation
+  const avatarSrc = user?.avatar || profile?.avatar;
+
+  // Get current username - prioritize user.username, fallback to profile data
+  const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
+
+  // Focus input when entering edit mode
+  useEffect(() => {
+    if (isEditingUsername && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditingUsername]);
 
   const handleEditAvatar = () => {
     setB3ModalOpen(true);
@@ -31,19 +52,69 @@ const SettingsProfileCard = () => {
   };
 
   const handleEditUsername = () => {
-    // TODO: Implement edit username functionality
-    console.log("Edit username clicked");
+    setEditedUsername(currentUsername || "");
+    setIsEditingUsername(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditingUsername(false);
+    setEditedUsername("");
+  };
+
+  const handleSaveUsername = async () => {
+    if (!editedUsername.trim()) {
+      toast.error("Username cannot be empty");
+      return;
+    }
+
+    if (editedUsername === currentUsername) {
+      // No change, just exit edit mode
+      handleCancelEdit();
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const updatedUser = await app.service("users").registerUsername(
+        { username: editedUsername.trim() },
+        // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+        {},
+      );
+
+      // Update user state - registerUsername returns an array with single user
+      setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
+
+      // Refresh profile to get updated data
+      await refreshProfile();
+
+      toast.success("Username updated successfully!");
+      setIsEditingUsername(false);
+      setEditedUsername("");
+    } catch (error) {
+      console.error("Error updating username:", error);
+      toast.error("Failed to update username. Please try again.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSaveUsername();
+    } else if (e.key === "Escape") {
+      handleCancelEdit();
+    }
   };
 
   return (
     <div className="flex w-full items-center gap-3">
       {/* Avatar with edit badge */}
       <div className="relative shrink-0">
-        {avatarUrl ? (
-          <img src={avatarUrl} alt="Profile" className="border-black/8 size-14 rounded-full border object-cover" />
-        ) : (
-          <div className="bg-b3-primary-wash border-black/8 size-14 rounded-full border" />
-        )}
+        <IPFSMediaRenderer
+          src={avatarSrc}
+          alt="Profile"
+          className="border-black/8 size-14 rounded-full border object-cover"
+        />
         <button
           onClick={handleEditAvatar}
           className="absolute -bottom-0.5 -right-0.5 flex size-[18px] items-center justify-center rounded-full border-[1.5px] border-white bg-[#a0a0ab] transition-colors hover:bg-[#a0a0ab]/80"
@@ -55,17 +126,52 @@ const SettingsProfileCard = () => {
 
       {/* Username and edit link */}
       <div className="flex shrink-0 flex-col gap-1">
-        <div className="flex items-center gap-1">
-          <p className="font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">
-            {profile?.displayName || formatUsername(profile?.name || "")}
-          </p>
-        </div>
-        <button
-          onClick={handleEditUsername}
-          className="flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80"
-        >
-          <p className="font-inter text-sm font-semibold leading-5 text-[#51525C]">Edit Username</p>
-        </button>
+        {isEditingUsername ? (
+          /* Edit mode - inline input */
+          <div className="flex items-center gap-2">
+            <input
+              ref={inputRef}
+              type="text"
+              value={editedUsername}
+              onChange={e => setEditedUsername(e.target.value)}
+              onKeyDown={handleKeyDown}
+              disabled={isSaving}
+              className="border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-semibold focus:border-b3-primary-blue w-full rounded-md border px-2 py-1 text-lg leading-none transition-colors focus:outline-none disabled:opacity-50"
+              placeholder="Enter username"
+            />
+            <div className="flex items-center gap-1">
+              <button
+                onClick={handleSaveUsername}
+                disabled={isSaving}
+                className="text-b3-primary-blue hover:text-b3-primary-blue/80 flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50"
+                aria-label="Save username"
+              >
+                {isSaving ? <Loader2 size={18} className="animate-spin" /> : <Check size={18} strokeWidth={2.5} />}
+              </button>
+              <button
+                onClick={handleCancelEdit}
+                disabled={isSaving}
+                className="text-b3-foreground-muted hover:text-b3-grey flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50"
+                aria-label="Cancel editing"
+              >
+                <X size={18} strokeWidth={2.5} />
+              </button>
+            </div>
+          </div>
+        ) : (
+          /* Display mode */
+          <>
+            <div className="flex items-center gap-1">
+              <p className="font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">{currentUsername}</p>
+            </div>
+            <button
+              onClick={handleEditUsername}
+              className="flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80"
+            >
+              <p className="font-inter text-sm font-semibold leading-5 text-[#51525C]">Edit Username</p>
+            </button>
+          </>
+        )}
       </div>
     </div>
   );

package/src/global-account/react/components/SignInWithB3/SignIn.tsx

@@ -1,4 +1,5 @@
 import {
+  IPFSMediaRenderer,
   SignInWithB3,
   SignInWithB3ModalProps,
   StyleRoot,
@@ -13,6 +14,7 @@ import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { ReactNode, useEffect } from "react";
 import { useConnectedWallets, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { useAccountWalletImage } from "../../hooks/useAccountWallet";
 import { ManageAccountButton } from "../custom/ManageAccountButton";
 
 type SignInProps = {
@@ -44,7 +46,7 @@ export function SignIn(props: SignInWithB3Props) {
 
   const isMobile = useIsMobile();
   const { logout } = useAuthentication(partnerId);
-  const onDisconnect = async () => {
+  const onDisconnect = async (): Promise<void> => {
     await logout();
   };
 
@@ -73,17 +75,19 @@ export function SignIn(props: SignInWithB3Props) {
     }
   }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
 
+  const walletImage = useAccountWalletImage();
+
   // Desktop version - original dropdown menu
   return (
     <StyleRoot>
       <Menu className={`relative flex items-center ${className || ""}`} as="div">
         {globalAddress ? (
           <>
-            <MenuButton className="bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3">
-              {!!wallet.meta?.icon && (
-                <img
-                  src={wallet.meta.icon}
-                  alt={wallet.meta.icon}
+            <MenuButton className="bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none">
+              {!!walletImage && (
+                <IPFSMediaRenderer
+                  src={walletImage}
+                  alt="Wallet Image"
                   className="bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100"
                 />
               )}
@@ -98,7 +102,7 @@ export function SignIn(props: SignInWithB3Props) {
               leaveTo="scale-95 opacity-0"
             >
               <MenuItems
-                className="b3-root absolute -right-4 top-full min-w-64 rounded-2xl border lg:right-0"
+                className="b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0"
                 modal={false}
                 // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
                 anchor={isMobile ? "top end" : undefined}

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

@@ -1,3 +1,4 @@
+// TODO woj: Barrel file for all components, this might be reason of bundle size issues
 // Core Components
 export { B3DynamicModal } from "./B3DynamicModal";
 export { B3Provider, InnerProvider } from "./B3Provider/B3Provider";
@@ -25,10 +26,8 @@ export { Deposit } from "./Deposit/Deposit";
 // Send Components
 export { Send } from "./Send/Send";
 
-// B3 Global Branding Wrapper
-// Profile Components
-export { AvatarEditor } from "./AvatarEditor/AvatarEditor";
-export { ProfileEditor } from "./ProfileEditor/ProfileEditor";
+// Media Components
+export { IPFSMediaRenderer } from "./IPFSMediaRenderer/IPFSMediaRenderer";
 
 // RequestPermissions Components
 export { RequestPermissions } from "./RequestPermissions/RequestPermissions";

package/src/global-account/react/hooks/useAccountWallet.tsx

@@ -112,3 +112,29 @@ export function useAccountWallet(): {
 
   return res;
 }
+
+export function useAccountWalletImage(): string {
+  const { account, user } = useB3();
+
+  const activeWallet = useActiveWallet();
+  const connectedWallets = useConnectedWallets();
+
+  const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === ecosystemWalletId);
+  const connectedEOAWallet = connectedWallets.find(wallet => wallet.id !== ecosystemWalletId);
+  const isActiveSmartWallet = activeWallet?.id === connectedSmartWallet?.id;
+
+  const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
+
+  // If not EOA sign in, then we need to show the smart wallet icon
+  const lastAuthProvider = useLastAuthProvider();
+
+  const smartWalletIcon =
+    lastAuthProvider && !connectedEOAWallet
+      ? socialIcons[lastAuthProvider as keyof typeof socialIcons]
+      : "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
+
+  const { data: profileData } = useProfile({ address: account?.address });
+  const avatarUrl = user?.avatar || profileData?.avatar;
+
+  return avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || "";
+}

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

@@ -383,13 +383,6 @@ 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;
-}
-
 /**
  * Props for the Deposit modal
  * Allows users to deposit tokens into their global account
@@ -439,8 +432,7 @@ export type ModalContentType =
   | AnySpendDepositHypeProps
   | AvatarEditorModalProps
   | DepositModalProps
-  | SendModalProps
-  | ProfileEditorModalProps;
+  | SendModalProps;
 // Add other modal types here like: | OtherModalProps | AnotherModalProps
 
 /**

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 {};