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>
+  );
+}