spinner for nip05 verification

This commit is contained in:
Alejandro Gomez 2023-01-10 12:27:48 +01:00
parent e6abbcbc44
commit e93776f824
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
2 changed files with 21 additions and 20 deletions

View File

@ -15,9 +15,5 @@
.nip05 .badge { .nip05 .badge {
margin-left: .2em; margin-left: .2em;
} margin-top: .1em;
.nip05 .error {
margin-top: .2em;
margin-left: .2em;
} }

View File

@ -1,7 +1,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; import { faCheck, faSpinner, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
import './Nip05.css' import './Nip05.css'
@ -28,30 +28,35 @@ const Nip05 = ({ nip05, pubkey }) => {
}, [nip05, name, domain]) }, [nip05, name, domain])
return ( return (
<div className="flex nip05"> <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
{!isDefaultUser && <div className="nick">{name}</div>} {!isDefaultUser && <div className="nick">{name}</div>}
<div className="domain"> <div className="domain">
{!isDefaultUser && '@'} {!isDefaultUser && '@'}
{domain} {domain}
</div> </div>
{isVerified && ( <span className="badge">
<span className="badge"> {!isVerified && !couldNotVerify && (
<FontAwesomeIcon <FontAwesomeIcon
color={"var(--success)"} color={"var(--fg-color)"}
icon={faCheck} icon={faSpinner}
size="xs" size="xs"
/> />
</span> )}
)} {isVerified && (
{couldNotVerify && ( <FontAwesomeIcon
<span className="error"> color={"var(--success)"}
icon={faCheck}
size="xs"
/>
)}
{couldNotVerify && (
<FontAwesomeIcon <FontAwesomeIcon
color={"var(--error)"} color={"var(--error)"}
icon={faTriangleExclamation} icon={faTriangleExclamation}
size="xs" size="xs"
/> />
</span> )}
)} </span>
</div> </div>
) )
} }