From 5624e6560cf9e95dd2918ce47d75f28f5ea907f0 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 13:16:01 +0100
Subject: [PATCH 1/6] feat: add avatar borders with color gradients to partner
 nip05 providers

---
 src/element/Nip05.css     | 54 +++++++++++++++++++++++++++++++++++++--
 src/element/Nip05.js      |  3 +--
 src/index.css             |  4 ++-
 src/pages/ProfilePage.css |  8 ++++--
 src/pages/ProfilePage.js  | 15 ++++++++++-
 5 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/src/element/Nip05.css b/src/element/Nip05.css
index f80f464b..5152149d 100644
--- a/src/element/Nip05.css
+++ b/src/element/Nip05.css
@@ -7,13 +7,63 @@
 
 .nip05 .nick {
     color: var(--gray-light);
+    font-weight: bold;
+    margin-right: .2em;
 }
 
 .nip05 .domain {
     color: var(--gray-superlight);
+    font-weight: bold;
+}
+
+.nip05 .domain[data-domain="snort.social"] {
+    background: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--success));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostrplebs.com"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostrpurple.com"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostr.fan"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostrich.zone"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostriches.net"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
 }
 
 .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..20f46bbc 100644
--- a/src/element/Nip05.js
+++ b/src/element/Nip05.js
@@ -30,8 +30,7 @@ const Nip05 = ({ nip05, pubkey }) => {
     return (
        <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
          {!isDefaultUser && <div className="nick">{name}</div>}
-         <div className="domain">
-             {!isDefaultUser && '@'}
+         <div className="domain" data-domain={domain}>
              {domain}
          </div>
          <span className="badge">
diff --git a/src/index.css b/src/index.css
index 9161c163..665fa47a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,7 +10,8 @@
     --gray: #333;
     --gray-secondary: #222;
     --gray-tertiary: #444;
-    --highlight: #A9E000;
+    --highlight-light: #E8FF52;
+    --highlight: #CCFF00;
     --error: #FF6053;
     --success: #2AD544;
 }
@@ -19,6 +20,7 @@
   :root {
      --font-color: #000;
      --bg-color: #FFF;
+     --highlight-light: #FFC852;
      --highlight: #FF9B00;
      --modal-bg-color: rgba(240, 240, 240, 0.8);
      --gray: #CCC;
diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index 46638702..2f88db9c 100644
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@@ -23,10 +23,14 @@
 }
 
 .profile .avatar {
-    width: 256px;
+    border-radius: 50%;
     height: 256px;
+    width: 256px;
+    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 .details {
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 1182043f..7d137977 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -26,6 +26,15 @@ 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();
@@ -37,6 +46,10 @@ 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
 
     useEffect(() => {
         setTab(ProfileTab.Notes);
@@ -106,7 +119,7 @@ export default function ProfilePage() {
         <>
             <div className="profile flex">
                 <div className="avatar-wrapper">
-                    <div style={{ backgroundImage: `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` }} className="avatar">
+                    <div style={{ backgroundImage }} className="avatar" data-domain={nip05domain}>
                     </div>
                 </div>
                 <div className="f-grow details">
-- 
2.45.2


From 8bffd3bd4c9e53339e93cd787700556239574e9a Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 16:25:58 +0100
Subject: [PATCH 2/6] 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 (
        <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">
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() {
                     <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">
-- 
2.45.2


From fa3088a3317ee608fd131b9bd11d58e1f1b6035b Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 17:24:20 +0100
Subject: [PATCH 3/6] add space before 'Reposted'

---
 src/element/NoteReaction.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 <small>Reacted with {mapReaction(ev.Content)}</small>;
-            case EventKind.Repost: return <small>Reposted</small>
+            case EventKind.Repost: return <small> Reposted</small>
         }
     }
 
-- 
2.45.2


From 08cae73e75b0d472b740a416ed2398d37928a404 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 18:25:01 +0100
Subject: [PATCH 4/6] lowercase domain

---
 src/element/Nip05.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/element/Nip05.js b/src/element/Nip05.js
index 7da33c25..f7700474 100644
--- a/src/element/Nip05.js
+++ b/src/element/Nip05.js
@@ -30,7 +30,7 @@ export function useIsVerified(nip05, pubkey) {
         })
   }, [nip05, pubkey])
 
-  return { name, domain, isVerified, couldNotVerify }
+  return { name, domain: domain?.toLowerCase(), isVerified, couldNotVerify }
 }
 
 const Nip05 = ({ name, domain, isVerified, couldNotVerify }) => {
-- 
2.45.2


From f1cd244cb7aaaef72a512ea066a18491638d5f72 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 18:38:10 +0100
Subject: [PATCH 5/6] refactor: extract gradient into common class

---
 src/element/Nip05.css | 38 +++++++++++---------------------------
 src/element/Nip05.js  |  2 +-
 2 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/src/element/Nip05.css b/src/element/Nip05.css
index 7e04b863..6a9250f6 100644
--- a/src/element/Nip05.css
+++ b/src/element/Nip05.css
@@ -16,52 +16,36 @@
     font-weight: bold;
 }
 
-.nip05 .domain[data-domain="snort.social"] {
-    background: var(--snort-gradient);
+.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: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .domain[data-domain="nostrpurple.com"] {
-    background: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .domain[data-domain="nostr.fan"] {
-    background: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .domain[data-domain="nostrich.zone"] {
-    background: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .domain[data-domain="nostriches.net"] {
-    background: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .badge {
diff --git a/src/element/Nip05.js b/src/element/Nip05.js
index f7700474..65245dec 100644
--- a/src/element/Nip05.js
+++ b/src/element/Nip05.js
@@ -39,7 +39,7 @@ const Nip05 = ({ name, domain, isVerified, couldNotVerify }) => {
     return (
        <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
          {!isDefaultUser && <div className="nick">{name}</div>}
-         <div className="domain" data-domain={isVerified ? domain : ''}>
+         <div className={`domain ${isVerified ? 'text-gradient' : ''}`} data-domain={isVerified ? domain : ''}>
              {domain}
          </div>
          <span className="badge">
-- 
2.45.2


From 284b6c5de68e918c49c1739a156938205115fe53 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 18:39:46 +0100
Subject: [PATCH 6/6] fix: URL encode name

---
 src/element/Nip05.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/element/Nip05.js b/src/element/Nip05.js
index 65245dec..94f2bb95 100644
--- a/src/element/Nip05.js
+++ b/src/element/Nip05.js
@@ -17,7 +17,7 @@ export function useIsVerified(nip05, pubkey) {
       setCouldNotVerify(false)
       setIsVerified(false)
 
-      fetch(`https://${domain}/.well-known/nostr.json?name=${name}`)
+      fetch(`https://${domain}/.well-known/nostr.json?name=${encodeURIComponent(name)}`)
         .then((res) => res.json())
         .then(({ names }) => {
           if (names && names[name]) {
-- 
2.45.2