From 1483fa6bb257b5949df37dd18c5c2f7a85641298 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 16 Jan 2023 22:22:21 +0000
Subject: [PATCH] tweaks: Load mentions Nip5 cleanup

---
 src/element/Mention.tsx      | 21 +++++++++++++++++++++
 src/element/Nip05.css        |  4 ++++
 src/element/Nip05.tsx        |  9 +--------
 src/element/ProfileImage.tsx |  5 ++---
 src/element/Text.tsx         |  4 ++--
 5 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 src/element/Mention.tsx

diff --git a/src/element/Mention.tsx b/src/element/Mention.tsx
new file mode 100644
index 00000000..45a0cbf3
--- /dev/null
+++ b/src/element/Mention.tsx
@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+import { Link } from "react-router-dom";
+import useProfile from "../feed/ProfileFeed";
+import { HexKey } from "../nostr";
+import { hexToBech32, profileLink } from "../Util";
+
+export default function Mention({ pubkey }: { pubkey: HexKey }) {
+    const user = useProfile(pubkey)?.get(pubkey);
+
+    const name = useMemo(() => {
+        let name = hexToBech32("npub", pubkey).substring(0, 12);
+        if ((user?.display_name?.length ?? 0) > 0) {
+            name = user!.display_name!;
+        } else if ((user?.name?.length ?? 0) > 0) {
+            name = user!.name!;
+        }
+        return name;
+    }, [user]);
+
+    return <Link to={profileLink(pubkey)} onClick={(e) => e.stopPropagation()}>@{name}</Link>
+}
\ No newline at end of file
diff --git a/src/element/Nip05.css b/src/element/Nip05.css
index 6a9250f6..c71ebe0f 100644
--- a/src/element/Nip05.css
+++ b/src/element/Nip05.css
@@ -5,6 +5,10 @@
     margin: .2em;
 }
 
+.nip05.failed {
+    text-decoration: line-through;
+}
+
 .nip05 .nick {
     color: var(--gray-light);
     font-weight: bold;
diff --git a/src/element/Nip05.tsx b/src/element/Nip05.tsx
index 2adb34ac..ff1e3428 100644
--- a/src/element/Nip05.tsx
+++ b/src/element/Nip05.tsx
@@ -53,7 +53,7 @@ const Nip05 = (props: Nip05Params) => {
   const { isVerified, couldNotVerify } = useIsVerified(props.pubkey, props.nip05)
 
   return (
-    <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
+    <div className={`flex nip05${couldNotVerify ? " failed" : ""}`} onClick={(ev) => ev.stopPropagation()}>
       <div className="nick">
         {!isDefaultUser && name}
       </div>
@@ -68,13 +68,6 @@ const Nip05 = (props: Nip05Params) => {
             size="xs"
           />
         )}
-        {isVerified && (
-          <FontAwesomeIcon
-            color={"var(--success)"}
-            icon={faCheck}
-            size="xs"
-          />
-        )}
         {couldNotVerify && (
           <FontAwesomeIcon
             color={"var(--error)"}
diff --git a/src/element/ProfileImage.tsx b/src/element/ProfileImage.tsx
index ce12ab30..069317c1 100644
--- a/src/element/ProfileImage.tsx
+++ b/src/element/ProfileImage.tsx
@@ -19,8 +19,7 @@ export interface ProfileImageProps {
 export default function ProfileImage({ pubkey, subHeader, showUsername = true, className, link }: ProfileImageProps) {
     const navigate = useNavigate();
     const user = useProfile(pubkey)?.get(pubkey);
-    
-    const hasImage = (user?.picture?.length ?? 0) > 0;
+
     const name = useMemo(() => {
         let name = hexToBech32("npub", pubkey).substring(0, 12);
         if ((user?.display_name?.length ?? 0) > 0) {
@@ -34,7 +33,7 @@ export default function ProfileImage({ pubkey, subHeader, showUsername = true, c
     return (
         <div className={`pfp${className ? ` ${className}` : ""}`}>
             <div className="avatar-wrapper">
-               <Avatar user={user} onClick={() => navigate(link ?? profileLink(pubkey))} />
+                <Avatar user={user} onClick={() => navigate(link ?? profileLink(pubkey))} />
             </div>
             {showUsername && (<div className="f-grow">
                 <Link key={pubkey} to={link ?? profileLink(pubkey)}>
diff --git a/src/element/Text.tsx b/src/element/Text.tsx
index 0f6339d1..bb3c76fa 100644
--- a/src/element/Text.tsx
+++ b/src/element/Text.tsx
@@ -12,6 +12,7 @@ import './Text.css'
 import { useMemo } from "react";
 import Tag from "../nostr/Tag";
 import { MetadataCache } from "../db/User";
+import Mention from "./Mention";
 
 function transformHttpLink(a: string) {
     try {
@@ -94,8 +95,7 @@ function extractMentions(fragments: Fragment[], tags: Tag[], users: Map<string,
                     if (ref) {
                         switch (ref.Key) {
                             case "p": {
-                                let pUser = users.get(ref.PubKey!)?.name ?? hexToBech32("npub", ref.PubKey!).substring(0, 12);
-                                return <Link key={ref.PubKey} to={profileLink(ref.PubKey!)} onClick={(e) => e.stopPropagation()}>@{pUser}</Link>;
+                                return <Mention pubkey={ref.PubKey!} />
                             }
                             case "e": {
                                 let eText = hexToBech32("note", ref.Event!).substring(0, 12);