diff --git a/src/element/Nip05.css b/src/element/Nip05.css index f80f464b..6a9250f6 100644 --- a/src/element/Nip05.css +++ b/src/element/Nip05.css @@ -7,13 +7,47 @@ .nip05 .nick { color: var(--gray-light); + font-weight: bold; + margin-right: .2em; } .nip05 .domain { color: var(--gray-superlight); + font-weight: bold; +} + +.nip05 .text-gradient { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + background-color: var(--gray-superlight); +} + +.nip05 .domain[data-domain="snort.social"] { + background-image: var(--snort-gradient); +} + +.nip05 .domain[data-domain="nostrplebs.com"] { + background-image: var(--nostrplebs-gradient); +} + +.nip05 .domain[data-domain="nostrpurple.com"] { + background-image: var(--nostrplebs-gradient); +} + +.nip05 .domain[data-domain="nostr.fan"] { + background-image: var(--nostrplebs-gradient); +} + +.nip05 .domain[data-domain="nostrich.zone"] { + background-image: var(--nostrplebs-gradient); +} + +.nip05 .domain[data-domain="nostriches.net"] { + background-image: var(--nostrplebs-gradient); } .nip05 .badge { - margin-left: .2em; - margin-top: .1em; + margin: .1em .2em; } diff --git a/src/element/Nip05.js b/src/element/Nip05.js index 84347031..94f2bb95 100644 --- a/src/element/Nip05.js +++ b/src/element/Nip05.js @@ -5,33 +5,41 @@ import { faCheck, faSpinner, faTriangleExclamation } from "@fortawesome/free-sol 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 === '_' +export function useIsVerified(nip05, pubkey) { + const [isVerified, setIsVerified] = useState(false) + const [couldNotVerify, setCouldNotVerify] = useState(false) + const [name, domain] = nip05 ? nip05.split('@') : [] - 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]) + useEffect(() => { + if (!nip05 || !pubkey) { + return + } + setCouldNotVerify(false) + setIsVerified(false) + + fetch(`https://${domain}/.well-known/nostr.json?name=${encodeURIComponent(name)}`) + .then((res) => res.json()) + .then(({ names }) => { + if (names && names[name]) { + setIsVerified(names[name] === pubkey) + } + }) + .catch((err) => { + setCouldNotVerify(true) + console.error("Couldn't verifiy nip05") + }) + }, [nip05, pubkey]) + + return { name, domain: domain?.toLowerCase(), isVerified, couldNotVerify } +} + +const Nip05 = ({ name, domain, isVerified, couldNotVerify }) => { + const isDefaultUser = name === '_' return (
ev.stopPropagation()}> {!isDefaultUser &&
{name}
} -
- {!isDefaultUser && '@'} +
{domain}
diff --git a/src/element/NoteReaction.js b/src/element/NoteReaction.js index 38a4dd9d..be6d96b8 100644 --- a/src/element/NoteReaction.js +++ b/src/element/NoteReaction.js @@ -39,7 +39,7 @@ export default function NoteReaction(props) { function tagLine() { switch (ev.Kind) { case EventKind.Reaction: return Reacted with {mapReaction(ev.Content)}; - case EventKind.Repost: return Reposted + case EventKind.Repost: return Reposted } } diff --git a/src/index.css b/src/index.css index 9161c163..94dfaa54 100644 --- a/src/index.css +++ b/src/index.css @@ -10,16 +10,23 @@ --gray: #333; --gray-secondary: #222; --gray-tertiary: #444; - --highlight: #A9E000; + --highlight-light: #E8FF52; + --highlight: #CCFF00; + --highlight-dark: #709900; --error: #FF6053; --success: #2AD544; + --gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light)); + --snort-gradient: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--highlight-dark)); + --nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5); } @media (prefers-color-scheme: light) { :root { --font-color: #000; --bg-color: #FFF; + --highlight-light: #FFC852; --highlight: #FF9B00; + --highlight-dark: #944F05; --modal-bg-color: rgba(240, 240, 240, 0.8); --gray: #CCC; --gray-secondary: #DDD; diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css index 46638702..b2ca33eb 100644 --- a/src/pages/ProfilePage.css +++ b/src/pages/ProfilePage.css @@ -23,10 +23,23 @@ } .profile .avatar { - width: 256px; + border-radius: 50%; height: 256px; + width: 256px; + background-image: var(--img-url), var(--gray-gradient); + border: 4px solid transparent; + background-origin: border-box; + background-clip: content-box, border-box; background-size: cover; - border-radius: 100%; + box-sizing: border-box; +} + +.profile .avatar[data-domain="snort.social"] { + background-image: var(--img-url), var(--snort-gradient); +} + +.profile .avatar[data-domain="nostrplebs.com"] { + background-image: var(--img-url), var(--nostrplebs-gradient); } .profile .details { diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 1182043f..8bc303fe 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -13,7 +13,7 @@ import { extractLnAddress, parseId } from "../Util"; import Timeline from "../element/Timeline"; import { extractLinks, extractHashtags } from '../Text' import LNURLTip from "../element/LNURLTip"; -import Nip05 from "../element/Nip05"; +import Nip05, { useIsVerified } from "../element/Nip05"; import Copy from "../element/Copy"; import ProfilePreview from "../element/ProfilePreview"; import FollowersList from "../element/FollowersList"; @@ -37,6 +37,9 @@ export default function ProfilePage() { const [showLnQr, setShowLnQr] = useState(false); const [tab, setTab] = useState(ProfileTab.Notes); const about = extractHashtags(extractLinks([user?.about])) + const { name, domain, isVerified, couldNotVerify } = useIsVerified(user?.nip05, user?.pubkey) + const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture + const backgroundImage = `url(${avatarUrl})` useEffect(() => { setTab(ProfileTab.Notes); @@ -50,7 +53,7 @@ export default function ProfilePage() {

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

- {user?.nip05 && } + {user?.nip05 && }
{isMe ? ( @@ -106,7 +109,7 @@ export default function ProfilePage() { <>
-
+