Parse zaps

src/element/live-chat.css

@@ -8,14 +8,14 @@
   gap: 16px;
 }
 
-.live-chat > .header {
+.live-chat>.header {
   font-weight: 600;
   font-size: 24px;
   line-height: 30px;
   padding: 0px 0px 16px;
 }
 
-.live-chat > .messages {
+.live-chat>.messages {
   flex-grow: 1;
   display: flex;
   gap: 12px;
@@ -24,12 +24,12 @@
   overflow-x: hidden;
 }
 
-.live-chat > .write-message {
+.live-chat>.write-message {
   display: flex;
   gap: 8px;
 }
 
-.live-chat > .write-message > div:nth-child(1) {
+.live-chat>.write-message>div:nth-child(1) {
   background: #171717;
   border-radius: 16px;
   padding: 8px 16px;
@@ -49,13 +49,17 @@
   flex-grow: 1;
 }
 
-.live-chat .profile {
+.live-chat .message .profile {
   gap: 8px;
   font-weight: 600;
   font-size: 15px;
   float: left;
 }
 
+.live-chat .message.streamer .profile {
+  color: #F838D9;
+}
+
 .live-chat .profile img {
   width: 24px;
   height: 24px;
@@ -66,4 +70,11 @@
   font-size: 15px;
   line-height: 24px;
   margin-left: 8px;
+}
+
+.live-chat .zap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: inherit;
 }

src/element/live-chat.tsx

@@ -1,5 +1,5 @@
 import "./live-chat.css";
-import { EventKind, NostrLink, TaggedRawEvent, EventPublisher } from "@snort/system";
+import { EventKind, NostrLink, TaggedRawEvent, EventPublisher, parseZap } from "@snort/system";
 import { useState } from "react";
 
 import { System } from "index";
@@ -27,7 +27,7 @@ export function LiveChat({ link, options }: { link: NostrLink, options?: LiveCha
         return eb
           .kind(1311 as EventKind)
           .content(chat)
-          .tag(["a", `${link.kind}:${link.author}:${link.id}`])
+          .tag(["a", `${link.kind}:${link.author}:${link.id}`, "", "root"])
           .processContent();
       });
       if (reply) {
@@ -70,21 +70,28 @@ export function LiveChat({ link, options }: { link: NostrLink, options?: LiveCha
       <div className="messages">
         {[...(messages.data ?? [])]
           .sort((a, b) => b.created_at - a.created_at)
-          .map(a => (
-            <ChatMessage ev={a} key={a.id} />
-          ))}
+          .map(a => {
+            switch (a.kind) {
+              case 1311: {
+                return <ChatMessage ev={a} link={link} key={a.id} />;
+              }
+              case EventKind.ZapReceipt: {
+                return <ChatZap ev={a} key={a.id} />
+              }
+            }
+          })}
         {messages.data === undefined && <Spinner />}
       </div>
       {(options?.canWrite ?? true) && <div className="write-message">
-        {login ? writeMessage() : <p>Please login to write messages!</p>}        
+        {login ? writeMessage() : <p>Please login to write messages!</p>}
       </div>}
     </div>
   );
 }
 
-function ChatMessage({ ev }: { ev: TaggedRawEvent }) {
+function ChatMessage({ ev, link }: { ev: TaggedRawEvent, link: NostrLink }) {
   return (
-    <div className="message">
+    <div className={`message${link.author === ev.pubkey ? " streamer" : ""}`}>
       <Profile pubkey={ev.pubkey} />
       <span>
         {ev.content}
@@ -92,3 +99,22 @@ function ChatMessage({ ev }: { ev: TaggedRawEvent }) {
     </div>
   );
 }
+
+function ChatZap({ ev }: { ev: TaggedRawEvent }) {
+  const parsed = parseZap(ev, System.ProfileLoader.Cache);
+  if(!parsed.valid) {
+    console.debug(parsed);
+    return null;
+  }
+  return (
+    <div className="zap pill">
+      <Icon name="zap" />
+      <Profile pubkey={parsed.sender ?? ""} />
+      zapped
+      &nbsp;
+      {parsed.amount}
+      &nbsp;
+      sats
+    </div>
+  );
+}

src/index.css

@@ -32,7 +32,6 @@ a {
   font-weight: 700;
   font-size: 14px;
   line-height: 18px;
-  text-transform: capitalize;
 }
 
 .pill.live {