From 81d00975a086432669ea8d5327d6e7b1e22469ae Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 9 Jan 2023 19:33:46 +0100
Subject: [PATCH 1/2] feat: nip05 on profile page

---
 src/element/Nip05.css    | 18 +++++++++++++++++
 src/element/Nip05.js     | 43 ++++++++++++++++++++++++++++++++++++++++
 src/pages/ProfilePage.js |  4 +++-
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/element/Nip05.css
 create mode 100644 src/element/Nip05.js

diff --git a/src/element/Nip05.css b/src/element/Nip05.css
new file mode 100644
index 000000000..b51e795ed
--- /dev/null
+++ b/src/element/Nip05.css
@@ -0,0 +1,18 @@
+.nip05 {
+    align-items: center;
+    font-size: 14px;
+    justify-content: flex-start;
+    margin: .2em 0;
+}
+
+.nip05 .nick {
+    color: #999;
+}
+
+.nip05 .domain {
+    color: #DDD;
+}
+
+.nip05 .badge {
+     margin-left: .2em;
+}
diff --git a/src/element/Nip05.js b/src/element/Nip05.js
new file mode 100644
index 000000000..b24a92067
--- /dev/null
+++ b/src/element/Nip05.js
@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+
+import './Nip05.css'
+
+const Nip05 = ({ nip05, pubkey }) => {
+    const [nip05pubkey, setNip05pubkey] = useState()
+    const isVerified = nip05pubkey === pubkey
+    const [nick, domain] = nip05.split('@')
+
+    useEffect(() => {
+        fetch(`https://${domain}/.well-known/nostr.json`)
+          .then((res) => res.json())
+          .then(({ names }) => {
+            if (names && names[nick]) {
+              setNip05pubkey(names[nick])
+            }
+          })
+          .catch((err) => {
+            console.error("Couldn't verifiy nip05")
+          })
+    }, [nip05, nick, domain])
+
+    return (
+       <div className="flex nip05">
+         <div className="nick">{nick}</div>
+         <div className="domain">@{domain}</div>
+         {isVerified && (
+           <span className="badge">
+             <FontAwesomeIcon
+               color={"green"}
+               icon={faCheck}
+               size="xs"
+             />
+           </span>
+         )}
+       </div>
+    )
+}
+
+export default Nip05
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index b340bf250..c27fae3ba 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -13,6 +13,7 @@ import { extractLnAddress, parseId } from "../Util";
 import Timeline from "../element/Timeline";
 import { extractLinks } from '../Text'
 import LNURLTip from "../element/LNURLTip";
+import Nip05 from "../element/Nip05";
 import Copy from "../element/Copy";
 
 export default function ProfilePage() {
@@ -30,13 +31,14 @@ export default function ProfilePage() {
             <>
                 <div className="flex name">
                     <div className="f-grow">
-                        <h2>{user?.name}</h2>
+                        <h2>{user?.display_name || user?.name}</h2>
                         <Copy text={params.id} />
                     </div>
                     <div>
                         {isMe ? <div className="btn" onClick={() => navigate("/settings")}>Settings</div> : <FollowButton pubkey={id} />}
                     </div>
                 </div>
+                {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
                 <p>{extractLinks([user?.about])}</p>
                 {user?.website ? <a href={user?.website} target="_blank" rel="noreferrer">{user?.website}</a> : null}
 

From a9f474fb9bcf80d82a27e4269ff7f14430e87d57 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Tue, 10 Jan 2023 07:18:20 +0100
Subject: [PATCH 2/2] address review comments

---
 src/element/Nip05.css |  7 ++++++-
 src/element/Nip05.js  | 32 ++++++++++++++++++++++++--------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/element/Nip05.css b/src/element/Nip05.css
index b51e795ed..ead258dc4 100644
--- a/src/element/Nip05.css
+++ b/src/element/Nip05.css
@@ -1,7 +1,7 @@
 .nip05 {
+    justify-content: flex-start;
     align-items: center;
     font-size: 14px;
-    justify-content: flex-start;
     margin: .2em 0;
 }
 
@@ -16,3 +16,8 @@
 .nip05 .badge {
      margin-left: .2em;
 }
+
+.nip05 .error {
+     margin-top: .2em;
+     margin-left: .2em;
+}
diff --git a/src/element/Nip05.js b/src/element/Nip05.js
index b24a92067..8097609b4 100644
--- a/src/element/Nip05.js
+++ b/src/element/Nip05.js
@@ -1,32 +1,39 @@
 import { useState, useEffect } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
 
 import './Nip05.css'
 
 const Nip05 = ({ nip05, pubkey }) => {
     const [nip05pubkey, setNip05pubkey] = useState()
+    const [couldNotVerify, setCouldNotVerify] = useState(false)
     const isVerified = nip05pubkey === pubkey
-    const [nick, domain] = nip05.split('@')
+    const [name, domain] = nip05.split('@')
+    const isDefaultUser = name === '_'
 
     useEffect(() => {
-        fetch(`https://${domain}/.well-known/nostr.json`)
+        setCouldNotVerify(false)
+        fetch(`https://${domain}/.well-known/nostr.json?name=${name}`)
           .then((res) => res.json())
           .then(({ names }) => {
-            if (names && names[nick]) {
-              setNip05pubkey(names[nick])
+            if (names && names[name]) {
+              setNip05pubkey(names[name])
             }
           })
           .catch((err) => {
+            setCouldNotVerify(true)
             console.error("Couldn't verifiy nip05")
           })
-    }, [nip05, nick, domain])
+    }, [nip05, name, domain])
 
     return (
        <div className="flex nip05">
-         <div className="nick">{nick}</div>
-         <div className="domain">@{domain}</div>
+         {!isDefaultUser && <div className="nick">{name}</div>}
+         <div className="domain">
+             {!isDefaultUser && '@'}
+             {domain}
+         </div>
          {isVerified && (
            <span className="badge">
              <FontAwesomeIcon
@@ -36,6 +43,15 @@ const Nip05 = ({ nip05, pubkey }) => {
              />
            </span>
          )}
+         {couldNotVerify && (
+           <span className="error">
+             <FontAwesomeIcon
+               color={"red"}
+               icon={faTriangleExclamation}
+               size="xs"
+             />
+           </span>
+         )}
        </div>
     )
 }