diff --git a/src/element/Nip05.css b/src/element/Nip05.css new file mode 100644 index 000000000..ead258dc4 --- /dev/null +++ b/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; +} diff --git a/src/element/Nip05.js b/src/element/Nip05.js new file mode 100644 index 000000000..8097609b4 --- /dev/null +++ b/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 ( +
+ {!isDefaultUser &&
{name}
} +
+ {!isDefaultUser && '@'} + {domain} +
+ {isVerified && ( + + + + )} + {couldNotVerify && ( + + + + )} +
+ ) +} + +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() { <>
-

{user?.name}

+

{user?.display_name || user?.name}

{isMe ?
navigate("/settings")}>Settings
: }
+ {user?.nip05 && }

{extractLinks([user?.about])}

{user?.website ? {user?.website} : null}