From 130d41209bede76a0c595028d6a3f27ed3f6c73e Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Wed, 4 Jan 2023 11:29:00 +0000
Subject: [PATCH] Use `display_name` over `name`

---
 src/element/ProfileImage.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/element/ProfileImage.js b/src/element/ProfileImage.js
index 4688af1..6ad6000 100644
--- a/src/element/ProfileImage.js
+++ b/src/element/ProfileImage.js
@@ -2,6 +2,7 @@ import "./ProfileImage.css";
 import { useNavigate } from "react-router-dom";
 import useProfile from "../feed/ProfileFeed";
 import Nostrich from "../nostrich.jpg";
+import { useMemo } from "react";
 
 export default function ProfileImage(props) {
     const pubkey = props.pubkey;
@@ -10,11 +11,20 @@ export default function ProfileImage(props) {
     const user = useProfile(pubkey);
 
     const hasImage = (user?.picture?.length ?? 0) > 0;
+    const name = useMemo(() => {
+        let name = pubkey.substring(0, 8);
+        if (user?.display_name?.length > 0) {
+            name = user.display_name;
+        } else if (user?.name?.length > 0) {
+            name = user.name;
+        }
+        return name;
+    }, [user]);
     return (
         <div className="pfp">
             <img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(`/p/${pubkey}`)} />
             <div>
-                {user?.name ?? pubkey.substring(0, 8)}
+                {name}
                 {subHeader ? <div>{subHeader}</div> : null}
             </div>
         </div>