@b3dotfun/sdk 0.0.63 → 0.0.64-alpha.1

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

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

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/hooks/useAuthentication.js

@@ -38,17 +38,6 @@ export function useAuthentication(partnerId) {
     const activeWagmiAccount = useAccount();
     const { switchAccount } = useSwitchAccount();
     debug("@@activeWagmiAccount", activeWagmiAccount);
-    // Check localStorage version and clear if not found or mismatched
-    useEffect(() => {
-        if (typeof localStorage !== "undefined") {
-            const version = localStorage.getItem("version");
-            if (version !== "1") {
-                debug("@@localStorage:clearing due to version mismatch", { version });
-                localStorage.clear();
-                localStorage.setItem("version", "1");
-            }
-        }
-    }, []);
     const wallet = ecosystemWallet(ecosystemWalletId, {
         partnerId: partnerId,
     });

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.1",
   "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">