diff --git a/src/element/Nip05.css b/src/element/Nip05.css index b51e795e..ead258dc 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 b24a9206..8097609b 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 (
-
{nick}
-
@{domain}
+ {!isDefaultUser &&
{name}
} +
+ {!isDefaultUser && '@'} + {domain} +
{isVerified && ( { /> )} + {couldNotVerify && ( + + + + )}
) }