Merge pull request #199 from v0l/zaps

Zaps fixes

src/Element/FollowListBase.tsx

@@ -16,7 +16,7 @@ export default function FollowListBase({ pubkeys, title }: FollowListBaseProps)
 
     return (
         <div className="main-content">
-            <div className="flex mt10">
+            <div className="flex mt10 mb10">
                 <div className="f-grow bold">{title}</div>
                 <button className="transparent" type="button" onClick={() => followAll()}>Follow All</button>
             </div>

src/Element/NoteFooter.tsx

@@ -51,7 +51,10 @@ export default function NoteFooter(props: NoteFooterProps) {
   const langNames = new Intl.DisplayNames([...window.navigator.languages], { type: "language" });
   const reactions = useMemo(() => getReactions(related, ev.Id, EventKind.Reaction), [related, ev]);
   const reposts = useMemo(() => getReactions(related, ev.Id, EventKind.Repost), [related, ev]);
-  const zaps = useMemo(() => getReactions(related, ev.Id, EventKind.ZapReceipt).map(parseZap).filter(z => z.valid), [related]);
+  const zaps = useMemo(() =>
+    getReactions(related, ev.Id, EventKind.ZapReceipt).map(parseZap).filter(z => z.valid && z.zapper !== ev.PubKey),
+    [related]
+  );
   const zapTotal = zaps.reduce((acc, z) => acc + z.amount, 0)
   const didZap = zaps.some(a => a.zapper === login);
   const groupReactions = useMemo(() => {

src/Element/Zap.css

@@ -2,17 +2,26 @@
   min-height: unset;
 }
 
+.zap .header .pfp {
+  overflow: hidden;
+}
+
+.zap .header {
+  flex-direction: row;
+}
+
+.zap .header .amount {
+  font-size: 32px;
+}
+
+.zap .header .pfp {
+  max-width: 72%;
+}
+
 @media (max-width: 520px) {
-  .zap .header {
-    flex-direction: column;
-  }
   .zap .header .pfp {
-    width: 100%;
     padding: 4px;
   }
-  .zap .header .amount {
-    font-size: 32px;
-  }
 }
 
 .zap .summary {
@@ -76,10 +85,6 @@
   content: ", ";
 }
 
-.note.zap > .header {
-  align-items: center;
-}
-
 .note.zap > .body {
   margin-bottom: 0;
 }

src/Feed/LoginFeed.ts

@@ -20,7 +20,7 @@ import useModeration from "Hooks/useModeration";
  */
 export default function useLoginFeed() {
   const dispatch = useDispatch();
-  const { publicKey: pubKey, privateKey: privKey } = useSelector((s: RootState) => s.login);
+  const { publicKey: pubKey, privateKey: privKey, latestMuted } = useSelector((s: RootState) => s.login);
   const { isMuted } = useModeration();
   const db = useDb();
 
@@ -132,7 +132,7 @@ export default function useLoginFeed() {
     dispatch(setMuted(muted))
 
     const newest = getNewest(mutedFeed.store.notes)
-    if (newest && newest.content.length > 0 && pubKey) {
+    if (newest && newest.content.length > 0 && pubKey && newest.created_at > latestMuted) {
       decryptBlocked(newest, pubKey, privKey).then((plaintext) => {
         try {
           const blocked = JSON.parse(plaintext)

src/Pages/ProfilePage.tsx

@@ -123,6 +123,7 @@ export default function ProfilePage() {
       case ProfileTab.Zaps: {
         return (
           <div className="main-content">
+            <h4 className="zaps-total">{formatShort(zapsTotal)} sats</h4>
             {zaps.map(z => <ZapElement showZapped={false} zap={z} />)}
           </div>
         )
@@ -180,12 +181,11 @@ export default function ProfilePage() {
           </>
         ) : (
           <>
-            <IconButton onClick={() => setShowLnQr(true)}>
-              <Zap width={14} height={16} />
-              <span className="zap-amount">
-                {zapsTotal > 0 && formatShort(zapsTotal)}
-               </span>
-            </IconButton>
+            {lnurl && (
+              <IconButton onClick={() => setShowLnQr(true)}>
+                <Zap width={14} height={16} />
+              </IconButton>
+            )}
             {!loggedOut && (
               <>
                 <IconButton onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}>

src/index.css

@@ -539,3 +539,11 @@ body.scroll-lock {
 .bold {
   font-weight: 700;
 }
+
+.main-content .h4 {
+  margin-bottom: 25px;
+}
+
+.main-content .profile-preview {
+  margin-bottom: 16px;
+}