src/element/Nip05.css

@@ -0,0 +1,23 @@
+.nip05 {
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 14px;
+    margin: .2em 0;
+}
+
+.nip05 .nick {
+    color: #999;
+}
+
+.nip05 .domain {
+    color: #DDD;
+}
+
+.nip05 .badge {
+     margin-left: .2em;
+}
+
+.nip05 .error {
+     margin-top: .2em;
+     margin-left: .2em;
+}

src/element/Nip05.js

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+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 [name, domain] = nip05.split('@')
+    const isDefaultUser = name === '_'
+
+    useEffect(() => {
+        setCouldNotVerify(false)
+        fetch(`https://${domain}/.well-known/nostr.json?name=${name}`)
+          .then((res) => res.json())
+          .then(({ names }) => {
+            if (names && names[name]) {
+              setNip05pubkey(names[name])
+            }
+          })
+          .catch((err) => {
+            setCouldNotVerify(true)
+            console.error("Couldn't verifiy nip05")
+          })
+    }, [nip05, name, domain])
+
+    return (
+       <div className="flex nip05">
+         {!isDefaultUser && <div className="nick">{name}</div>}
+         <div className="domain">
+             {!isDefaultUser && '@'}
+             {domain}
+         </div>
+         {isVerified && (
+           <span className="badge">
+             <FontAwesomeIcon
+               color={"green"}
+               icon={faCheck}
+               size="xs"
+             />
+           </span>
+         )}
+         {couldNotVerify && (
+           <span className="error">
+             <FontAwesomeIcon
+               color={"red"}
+               icon={faTriangleExclamation}
+               size="xs"
+             />
+           </span>
+         )}
+       </div>
+    )
+}
+
+export default Nip05

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}