refactor: put gradients on css

2023-01-13 16:25:58 +01:00 · 2023-01-13 16:25:58 +01:00 · 8bffd3bd4c
commit 8bffd3bd4c
parent 5624e6560c
5 changed files with 56 additions and 43 deletions
--- 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;
--- 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 (
       <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
         {!isDefaultUser && <div className="nick">{name}</div>}
-         <div className="domain" data-domain={domain}>
+         <div className="domain" data-domain={isVerified ? domain : ''}>
             {domain}
         </div>
         <span className="badge">
--- 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;
--- 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;
--- 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() {
                    <div className="f-grow">
                        <h2>{user?.display_name || user?.name}</h2>
                        <Copy text={params.id} />
-                        {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
+                        {user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
                    </div>
                    <div>
                        {isMe ? (
@ -119,7 +109,7 @@ export default function ProfilePage() {
        <>
            <div className="profile flex">
                <div className="avatar-wrapper">
-                    <div style={{ backgroundImage }} className="avatar" data-domain={nip05domain}>
+                    <div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
                    </div>
                </div>
                <div className="f-grow details">