animal name placeholder in all getDisplayName calls

packages/app/src/Element/Embed/Mention.tsx

@@ -1,21 +1,16 @@
-import { useMemo } from "react";
 import { Link } from "react-router-dom";
 import { HexKey } from "@snort/system";
 
 import { useUserProfile } from "@snort/system-react";
 import { profileLink } from "SnortUtils";
-import { getDisplayName } from "Element/User/ProfileImage";
+import DisplayName from "../User/DisplayName";
 
 export default function Mention({ pubkey, relays }: { pubkey: HexKey; relays?: Array<string> | string }) {
   const user = useUserProfile(pubkey);
 
-  const name = useMemo(() => {
-    return getDisplayName(user, pubkey);
-  }, [user, pubkey]);
-
   return (
     <Link to={profileLink(pubkey, relays)} onClick={e => e.stopPropagation()}>
-      @{name}
+      @<DisplayName user={user} pubkey={pubkey} />
     </Link>
   );
 }

packages/app/src/Element/Embed/PubkeyList.tsx

@@ -7,7 +7,7 @@ import FollowListBase from "Element/User/FollowListBase";
 import AsyncButton from "Element/AsyncButton";
 import { useWallet } from "Wallet";
 import { Toastore } from "Toaster";
-import { getDisplayName } from "Element/User/ProfileImage";
+import { getDisplayName } from "Element/User/DisplayName";
 import { UserCache } from "Cache";
 import useLogin from "Hooks/useLogin";
 import useEventPublisher from "Hooks/useEventPublisher";

packages/app/src/Element/Event/NoteFooter.tsx

@@ -18,7 +18,7 @@ import { useInteractionCache } from "Hooks/useInteractionCache";
 import { ZapPoolController } from "ZapPoolController";
 import { System } from "index";
 import { Zapper, ZapTarget } from "Zapper";
-import { getDisplayName } from "../User/ProfileImage";
+import { getDisplayName } from "Element/User/DisplayName";
 import { useNoteCreator } from "State/NoteCreator";
 
 import messages from "../messages";

packages/app/src/Element/Event/NoteReaction.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { EventKind, NostrEvent, TaggedNostrEvent, NostrPrefix, EventExt } from "@snort/system";
 
 import Note from "Element/Event/Note";
-import { getDisplayName } from "Element/User/ProfileImage";
+import { getDisplayName } from "Element/User/DisplayName";
 import { eventLink, hexToBech32 } from "SnortUtils";
 import useModeration from "Hooks/useModeration";
 import FormattedMessage from "Element/FormattedMessage";

packages/app/src/Element/User/Avatar.tsx

@@ -4,7 +4,7 @@ import { CSSProperties, ReactNode, useEffect, useState } from "react";
 import type { UserMetadata } from "@snort/system";
 
 import useImgProxy from "Hooks/useImgProxy";
-import { getDisplayName } from "Element/User/ProfileImage";
+import { getDisplayName } from "Element/User/DisplayName";
 import { defaultAvatar } from "SnortUtils";
 
 interface AvatarProps {

packages/app/src/Element/User/DisplayName.css

@@ -0,0 +1,3 @@
+.placeholder {
+  color: var(--gray-light);
+}

packages/app/src/Element/User/DisplayName.tsx

@@ -0,0 +1,39 @@
+import "./DisplayName.css";
+
+import React, { useMemo } from "react";
+import { HexKey, UserMetadata, NostrPrefix } from "@snort/system";
+import AnimalName from "Element/User/AnimalName";
+import { hexToBech32 } from "SnortUtils";
+
+interface DisplayNameProps {
+  pubkey: HexKey;
+  user: UserMetadata | undefined;
+}
+
+export function getDisplayName(user: UserMetadata | undefined, pubkey: HexKey): string {
+  return getDisplayNameOrPlaceHolder(user, pubkey)[0];
+}
+
+export function getDisplayNameOrPlaceHolder(user: UserMetadata | undefined, pubkey: HexKey): [string, boolean] {
+  let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
+  let isPlaceHolder = false;
+
+  if (user?.display_name) {
+    name = user.display_name;
+  } else if (user?.name) {
+    name = user.name;
+  } else if (pubkey && process.env.ANIMAL_NAME_PLACEHOLDERS) {
+    name = AnimalName(pubkey);
+    isPlaceHolder = true;
+  }
+
+  return [name.trim(), isPlaceHolder];
+}
+
+const DisplayName = ({ pubkey, user }: DisplayNameProps) => {
+  const [name, isPlaceHolder] = useMemo(() => getDisplayNameOrPlaceHolder(user, pubkey), [user, pubkey]);
+
+  return <span className={isPlaceHolder ? "placeholder" : ""}>{name}</span>;
+};
+
+export default DisplayName;

packages/app/src/Element/User/ProfileImage.css

@@ -32,7 +32,3 @@ a.pfp {
 .pfp a {
   text-decoration: none;
 }
-
-.placeholder {
-  color: var(--gray-medium);
-}

packages/app/src/Element/User/ProfileImage.tsx

@@ -1,16 +1,16 @@
 import "./ProfileImage.css";
 
-import React, { ReactNode, useMemo } from "react";
+import React, { ReactNode } from "react";
 import { Link } from "react-router-dom";
-import { HexKey, NostrPrefix, UserMetadata } from "@snort/system";
+import { HexKey, UserMetadata } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";
 
-import { hexToBech32, profileLink } from "SnortUtils";
+import { profileLink } from "SnortUtils";
 import Avatar from "Element/User/Avatar";
 import Nip05 from "Element/User/Nip05";
 import useLogin from "Hooks/useLogin";
 import Icon from "Icons/Icon";
-import AnimalName from "./AnimalName";
+import DisplayName from "./DisplayName";
 
 export interface ProfileImageProps {
   pubkey: HexKey;
@@ -50,10 +50,6 @@ export default function ProfileImage({
   const { follows } = useLogin();
   const doesFollow = follows.item.includes(pubkey);
 
-  const [name, isPlaceHolder] = useMemo(() => {
-    return overrideUsername ? [overrideUsername, false] : getDisplayNameOrPlaceHolder(user, pubkey);
-  }, [user, pubkey, overrideUsername]);
-
   function handleClick(e: React.MouseEvent) {
     if (link === "") {
       e.preventDefault();
@@ -87,7 +83,7 @@ export default function ProfileImage({
         {showUsername && (
           <div className="f-ellipsis">
             <div className="flex g4 username">
-              <div className={isPlaceHolder ? "placeholder" : ""}>{name.trim()}</div>
+              {overrideUsername ? overrideUsername : <DisplayName pubkey={pubkey} user={user} />}
               {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
             </div>
             <div className="subheader">{subHeader}</div>
@@ -114,27 +110,3 @@ export default function ProfileImage({
     );
   }
 }
-
-export function getDisplayNameOrPlaceHolder(user: UserMetadata | undefined, pubkey: HexKey): [string, boolean] {
-  let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
-  let isPlaceHolder = false;
-  if (typeof user?.display_name === "string" && user.display_name.length > 0) {
-    name = user.display_name;
-  } else if (typeof user?.name === "string" && user.name.length > 0) {
-    name = user.name;
-  } else if (pubkey && process.env.ANIMAL_NAME_PLACEHOLDERS) {
-    name = AnimalName(pubkey);
-    isPlaceHolder = true;
-  }
-  return [name, isPlaceHolder];
-}
-
-export function getDisplayName(user: UserMetadata | undefined, pubkey: HexKey): string {
-  let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
-  if (typeof user?.display_name === "string" && user.display_name.length > 0) {
-    name = user.display_name;
-  } else if (typeof user?.name === "string" && user.name.length > 0) {
-    name = user.name;
-  }
-  return name;
-}

packages/app/src/Notifications.ts

@@ -1,5 +1,5 @@
 import { TaggedNostrEvent, EventKind, MetadataCache } from "@snort/system";
-import { getDisplayName } from "Element/User/ProfileImage";
+import { getDisplayName } from "Element/User/DisplayName";
 import { MentionRegex } from "Const";
 import { defaultAvatar, tagFilterOfTextRepost, unwrap } from "SnortUtils";
 import { UserCache } from "Cache";

packages/app/src/Pages/MessagesPage.tsx

@@ -7,7 +7,7 @@ import { NostrLink, NostrPrefix, TLVEntryType, UserMetadata, decodeTLV } from "@
 import { useUserProfile, useUserSearch } from "@snort/system-react";
 
 import UnreadCount from "Element/UnreadCount";
-import ProfileImage, { getDisplayName } from "Element/User/ProfileImage";
+import ProfileImage from "Element/User/ProfileImage";
 import { appendDedupe, debounce, parseId } from "SnortUtils";
 import NoteToSelf from "Element/User/NoteToSelf";
 import useModeration from "Hooks/useModeration";
@@ -25,6 +25,7 @@ import { useEventFeed } from "Feed/EventFeed";
 import { LoginSession, LoginStore } from "Login";
 import { Nip28ChatSystem } from "chat/nip28";
 import { ChatParticipantProfile } from "Element/Chat/ChatParticipant";
+import { getDisplayName } from "../Element/User/DisplayName";
 
 const TwoCol = 768;
 const ThreeCol = 1500;

packages/app/src/Pages/Notifications.tsx

@@ -12,13 +12,14 @@ import { markNotificationsRead } from "Login";
 import { Notifications, UserCache } from "Cache";
 import { dedupe, findTag, orderDescending } from "SnortUtils";
 import Icon from "Icons/Icon";
-import ProfileImage, { getDisplayName } from "Element/User/ProfileImage";
+import ProfileImage from "Element/User/ProfileImage";
 import useModeration from "Hooks/useModeration";
 import { useEventFeed } from "Feed/EventFeed";
 import Text from "Element/Text";
 import { formatShort } from "Number";
 import { LiveEvent } from "Element/LiveEvent";
 import ProfilePreview from "Element/User/ProfilePreview";
+import { getDisplayName } from "../Element/User/DisplayName";
 
 function notificationContext(ev: TaggedNostrEvent) {
   switch (ev.kind) {

packages/app/src/ZapPoolController.ts

@@ -1,5 +1,5 @@
 import { UserCache } from "Cache";
-import { getDisplayName } from "Element/User/ProfileImage";
+import { getDisplayName } from "Element/User/DisplayName";
 import { LNURL, ExternalStore, unixNow } from "@snort/shared";
 import { Toastore } from "Toaster";
 import { LNWallet, WalletInvoiceState, Wallets } from "Wallet";