From 8bffd3bd4c9e53339e93cd787700556239574e9a Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Fri, 13 Jan 2023 16:25:58 +0100 Subject: [PATCH] refactor: put gradients on css --- src/element/Nip05.css | 12 ++++----- src/element/Nip05.js | 51 +++++++++++++++++++++++---------------- src/index.css | 5 ++++ src/pages/ProfilePage.css | 9 +++++++ src/pages/ProfilePage.js | 22 +++++------------ 5 files changed, 56 insertions(+), 43 deletions(-) diff --git a/src/element/Nip05.css b/src/element/Nip05.css index 5152149d..7e04b863 100644 --- a/src/element/Nip05.css +++ b/src/element/Nip05.css @@ -17,7 +17,7 @@ } .nip05 .domain[data-domain="snort.social"] { - background: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--success)); + background: var(--snort-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -25,7 +25,7 @@ } .nip05 .domain[data-domain="nostrplebs.com"] { - background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5); + background: var(--nostrplebs-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -33,7 +33,7 @@ } .nip05 .domain[data-domain="nostrpurple.com"] { - background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5); + background: var(--nostrplebs-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -41,7 +41,7 @@ } .nip05 .domain[data-domain="nostr.fan"] { - background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5); + background: var(--nostrplebs-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -49,7 +49,7 @@ } .nip05 .domain[data-domain="nostrich.zone"] { - background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5); + background: var(--nostrplebs-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -57,7 +57,7 @@ } .nip05 .domain[data-domain="nostriches.net"] { - background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5); + background: var(--nostrplebs-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; diff --git a/src/element/Nip05.js b/src/element/Nip05.js index 20f46bbc..7da33c25 100644 --- a/src/element/Nip05.js +++ b/src/element/Nip05.js @@ -5,32 +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=${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, isVerified, couldNotVerify } +} + +const Nip05 = ({ name, domain, isVerified, couldNotVerify }) => { + const isDefaultUser = name === '_' return (
ev.stopPropagation()}> {!isDefaultUser &&
{name}
} -
+
{domain}
diff --git a/src/index.css b/src/index.css index 665fa47a..94dfaa54 100644 --- a/src/index.css +++ b/src/index.css @@ -12,8 +12,12 @@ --gray-tertiary: #444; --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) { @@ -22,6 +26,7 @@ --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 2f88db9c..b2ca33eb 100644 --- a/src/pages/ProfilePage.css +++ b/src/pages/ProfilePage.css @@ -26,6 +26,7 @@ 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; @@ -33,6 +34,14 @@ 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 { margin-top: auto; margin-bottom: auto; diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 7d137977..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"; @@ -26,15 +26,6 @@ const ProfileTab = { Follows: 3 }; -const gradients = { - "snort.social": "linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--success))", - "nostrplebs.com": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)", - "nostrpurple.com": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)", - "nostr.fan": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)", - "nostrich.zone": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)", - "nostriches.net": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)", -} - export default function ProfilePage() { const params = useParams(); const navigate = useNavigate(); @@ -46,10 +37,9 @@ export default function ProfilePage() { const [showLnQr, setShowLnQr] = useState(false); const [tab, setTab] = useState(ProfileTab.Notes); const about = extractHashtags(extractLinks([user?.about])) - const nip05domain = user?.nip05 && user?.nip05.split('@').slice(-1) - const gradient = nip05domain && gradients[nip05domain] - const avatarUrl = `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` - const backgroundImage = gradient ? `${avatarUrl}, ${gradient}` : avatarUrl + 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); @@ -63,7 +53,7 @@ export default function ProfilePage() {

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

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