address review comments

This commit is contained in:
Alejandro Gomez 2023-01-10 07:18:20 +01:00
parent 81d00975a0
commit a9f474fb9b
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
2 changed files with 30 additions and 9 deletions

View File

@ -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;
}

View File

@ -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>
)
}