feat: render zap goals

packages/app/src/Element/Note.tsx

@@ -34,6 +34,7 @@ import PubkeyList from "Element/PubkeyList";
 import { LiveEvent } from "Element/LiveEvent";
 import { NoteContextMenu, NoteTranslation } from "Element/NoteContextMenu";
 import Reactions from "Element/Reactions";
+import { ZapGoal } from "Element/ZapGoal";
 
 import messages from "./messages";
 
@@ -91,6 +92,9 @@ export default function Note(props: NoteProps) {
   if (ev.kind === EventKind.LiveEvent) {
     return <LiveEvent ev={ev} />;
   }
+  if (ev.kind === (9041 as EventKind)) {
+    return <ZapGoal ev={ev} />;
+  }
 
   const baseClassName = `note card${className ? ` ${className}` : ""}`;
   const navigate = useNavigate();

packages/app/src/Element/ZapButton.tsx

@@ -7,7 +7,17 @@ import SendSats from "Element/SendSats";
 import Icon from "Icons/Icon";
 import { System } from "index";
 
-const ZapButton = ({ pubkey, lnurl, children }: { pubkey: HexKey; lnurl?: string; children?: React.ReactNode }) => {
+const ZapButton = ({
+  pubkey,
+  lnurl,
+  children,
+  event,
+}: {
+  pubkey: HexKey;
+  lnurl?: string;
+  children?: React.ReactNode;
+  event?: string;
+}) => {
   const profile = useUserProfile(System, pubkey);
   const [zap, setZap] = useState(false);
   const service = lnurl ?? (profile?.lud16 || profile?.lud06);
@@ -25,6 +35,7 @@ const ZapButton = ({ pubkey, lnurl, children }: { pubkey: HexKey; lnurl?: string
         show={zap}
         onClose={() => setZap(false)}
         author={pubkey}
+        note={event}
       />
     </>
   );

packages/app/src/Element/ZapGoal.css

@@ -0,0 +1,21 @@
+.zap-goal {
+}
+
+.zap-goal h1 {
+  line-height: 1em;
+}
+
+.zap-goal .progress {
+  position: relative;
+  height: 1em;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: var(--gray);
+}
+
+.zap-goal .progress > div {
+  position: absolute;
+  background-color: var(--success);
+  width: var(--progress);
+  height: 100%;
+}

packages/app/src/Element/ZapGoal.tsx

@@ -0,0 +1,38 @@
+import "./ZapGoal.css";
+import { NostrEvent, NostrPrefix, createNostrLink } from "@snort/system";
+import useZapsFeed from "Feed/ZapsFeed";
+import { formatShort } from "Number";
+import { findTag } from "SnortUtils";
+import { CSSProperties } from "react";
+import ZapButton from "./ZapButton";
+
+export function ZapGoal({ ev }: { ev: NostrEvent }) {
+  const zaps = useZapsFeed(createNostrLink(NostrPrefix.Note, ev.id));
+  const target = Number(findTag(ev, "amount"));
+  const amount = zaps.reduce((acc, v) => (acc += v.amount * 1000), 0);
+  const progress = Math.min(100, 100 * (amount / target));
+
+  return (
+    <div className="zap-goal card">
+      <div className="flex f-space">
+        <h2>{ev.content}</h2>
+        <ZapButton pubkey={ev.pubkey} event={ev.id} />
+      </div>
+
+      <div className="flex f-space">
+        <div>{progress.toFixed(1)}%</div>
+        <div>
+          {formatShort(amount / 1000)}/{formatShort(target / 1000)}
+        </div>
+      </div>
+      <div className="progress">
+        <div
+          style={
+            {
+              "--progress": `${progress}%`,
+            } as CSSProperties
+          }></div>
+      </div>
+    </div>
+  );
+}

packages/app/src/Feed/ZapsFeed.ts

@@ -1,25 +1,27 @@
 import { useMemo } from "react";
-import { HexKey, EventKind, FlatNoteStore, RequestBuilder, parseZap } from "@snort/system";
+import { EventKind, RequestBuilder, parseZap, NostrLink, NostrPrefix, NoteCollection } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
 
 import { System } from "index";
 import { UserCache } from "Cache";
 
-export default function useZapsFeed(pubkey?: HexKey) {
+export default function useZapsFeed(link?: NostrLink) {
   const sub = useMemo(() => {
-    if (!pubkey) return null;
-    const b = new RequestBuilder(`zaps:${pubkey.slice(0, 12)}`);
-    b.withFilter().tag("p", [pubkey]).kinds([EventKind.ZapReceipt]);
+    if (!link) return null;
+    const b = new RequestBuilder(`zaps:${link.encode()}`);
+    if (link.type === NostrPrefix.PublicKey) {
+      b.withFilter().tag("p", [link.id]).kinds([EventKind.ZapReceipt]);
+    } else if (link.type === NostrPrefix.Event || link.type === NostrPrefix.Note) {
+      b.withFilter().tag("e", [link.id]).kinds([EventKind.ZapReceipt]);
+    }
     return b;
-  }, [pubkey]);
+  }, [link]);
 
-  const zapsFeed = useRequestBuilder<FlatNoteStore>(System, FlatNoteStore, sub);
+  const zapsFeed = useRequestBuilder(System, NoteCollection, sub);
 
   const zaps = useMemo(() => {
     if (zapsFeed.data) {
-      const profileZaps = zapsFeed.data
-        .map(a => parseZap(a, UserCache))
-        .filter(z => z.valid && z.receiver === pubkey && z.sender !== pubkey && !z.event);
+      const profileZaps = zapsFeed.data.map(a => parseZap(a, UserCache)).filter(z => z.valid);
       profileZaps.sort((a, b) => b.amount - a.amount);
       return profileZaps;
     }

packages/app/src/Pages/ProfilePage.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate, useParams } from "react-router-dom";
 import {
+  createNostrLink,
   encodeTLV,
   encodeTLVEntries,
   EventKind,
@@ -68,7 +69,7 @@ const RELAYS = 7;
 const BOOKMARKS = 8;
 
 function ZapsProfileTab({ id }: { id: HexKey }) {
-  const zaps = useZapsFeed(id);
+  const zaps = useZapsFeed(createNostrLink(NostrPrefix.PublicKey, id));
   const zapsTotal = zaps.reduce((acc, z) => acc + z.amount, 0);
   return (
     <div className="main-content">

packages/system/src/event-publisher.ts

@@ -64,7 +64,7 @@ export class EventPublisher {
   /**
    * Apply POW to every event
    */
-  pow(target:number, miner?: PowMiner) {
+  pow(target: number, miner?: PowMiner) {
     this.#pow = target;
     this.#miner = miner;
   }

packages/system/src/query.ts

@@ -180,7 +180,7 @@ export class Query implements QueryBase {
   onEvent(sub: string, e: TaggedNostrEvent) {
     for (const t of this.#tracing) {
       if (t.id === sub) {
-        if(t.filters.some(v => eventMatchesFilter(e, v))) {
+        if (t.filters.some(v => eventMatchesFilter(e, v))) {
           this.feed.add(e);
         } else {
           this.#log("Event did not match filter, rejecting %O", e);

packages/system/src/utils.ts

@@ -49,4 +49,4 @@ export function splitByUrl(str: string) {
     /((?:http|ftp|https|nostr|web\+nostr|magnet):\/?\/?(?:[\w+?.\w+])+(?:[a-zA-Z0-9~!@#$%^&*()_\-=+\\/?.:;',]*)?(?:[-A-Za-z0-9+&@#/%=~()_|]))/i;
 
   return str.split(urlRegex);
-}
+}