From 1524609a430db467fd817b84bdfb8331b710fcae Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Sat, 4 Feb 2023 00:35:57 +0100
Subject: [PATCH] feat: zaps in timeline

---
 src/Element/Zap.css      | 21 +++++++++------------
 src/Element/Zap.tsx      |  7 ++++---
 src/Feed/TimelineFeed.ts |  2 +-
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/Element/Zap.css b/src/Element/Zap.css
index 3b006c3a..7bb74dc3 100644
--- a/src/Element/Zap.css
+++ b/src/Element/Zap.css
@@ -1,12 +1,5 @@
 .zap {
-  background-color: var(--note-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 10px;
-  border-radius: 16px;
-  margin-bottom: 12px;
+  min-height: unset;
 }
 
 .zap .summary {
@@ -15,10 +8,6 @@
   justify-content: space-between;
 }
 
-.zap .body a {
-  color: var(--highlight);
-}
-
 .zap .amount {
   font-size: 18px;
 }
@@ -72,3 +61,11 @@
 .rest-zaps:before {
   content: ", ";
 }
+
+.note.zap > .header {
+  align-items: center;
+}
+
+.note.zap > .body {
+  margin-bottom: 0;
+}
diff --git a/src/Element/Zap.tsx b/src/Element/Zap.tsx
index 23f6e558..896f2244 100644
--- a/src/Element/Zap.tsx
+++ b/src/Element/Zap.tsx
@@ -79,12 +79,13 @@ export function parseZap(zap: TaggedRawEvent): ParsedZap {
 }
 
 const Zap = ({ zap }: { zap: ParsedZap }) => {
-  const { amount, content, zapper, valid } = zap
+  const { amount, content, zapper, valid, p } = zap
 
   return valid ? (
-    <div className="zap">
-      <div className="summary">
+    <div className="zap note card">
+      <div className="header">
         {zapper && <ProfileImage pubkey={zapper} />}
+        <ProfileImage pubkey={p} />
         <div className="amount">
           <span className="amount-number">{formatShort(amount)}</span> sats
         </div>
diff --git a/src/Feed/TimelineFeed.ts b/src/Feed/TimelineFeed.ts
index 958cf278..f37e8007 100644
--- a/src/Feed/TimelineFeed.ts
+++ b/src/Feed/TimelineFeed.ts
@@ -35,7 +35,7 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
 
         let sub = new Subscriptions();
         sub.Id = `timeline:${subject.type}:${subject.discriminator}`;
-        sub.Kinds = new Set([EventKind.TextNote, EventKind.Repost]);
+        sub.Kinds = new Set([EventKind.TextNote, EventKind.Repost, EventKind.ZapReceipt]);
         switch (subject.type) {
             case "pubkey": {
                 sub.Authors = new Set(subject.items);