From b000ef8dd337e8fcf8f2d79bbee0a2c9048c511f Mon Sep 17 00:00:00 2001
From: Alejandro <alejandrogomez@bitrefill.com>
Date: Mon, 19 Jan 2026 09:58:19 +0100
Subject: [PATCH] feat: display zap recipient username in all contexts (#147)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: display zap recipient username in all contexts

- Add recipient username display for profile zaps
- Show recipient after amount in compact preview
- Show recipient with arrow (→) in full zap receipt renderer
- Fixes missing context when zaps don't target specific events

* refactor: remove arrow from zap recipient display

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../nostr/compact/ZapCompactPreview.tsx       | 22 +++++++++----------
 .../nostr/kinds/ZapReceiptRenderer.tsx        |  4 ++++
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/nostr/compact/ZapCompactPreview.tsx b/src/components/nostr/compact/ZapCompactPreview.tsx
index 81f6628..be4f398 100644
--- a/src/components/nostr/compact/ZapCompactPreview.tsx
+++ b/src/components/nostr/compact/ZapCompactPreview.tsx
@@ -6,6 +6,7 @@ import {
   getZapEventPointer,
   getZapAddressPointer,
   getZapRequest,
+  getZapRecipient,
 } from "applesauce-common/helpers/zap";
 import { useNostrEvent } from "@/hooks/useNostrEvent";
 import { UserName } from "../UserName";
@@ -13,11 +14,12 @@ import { RichText } from "../RichText";
 
 /**
  * Compact preview for Kind 9735 (Zap Receipt)
- * Layout: [amount] [zap message] [target pubkey] [preview]
+ * Layout: [amount] [recipient] [zap message] [preview]
  */
 export function ZapCompactPreview({ event }: { event: NostrEvent }) {
   const zapAmount = useMemo(() => getZapAmount(event), [event]);
   const zapRequest = useMemo(() => getZapRequest(event), [event]);
+  const zapRecipient = useMemo(() => getZapRecipient(event), [event]);
 
   // Get zap comment from request
   const zapMessage = useMemo(() => {
@@ -46,6 +48,7 @@ export function ZapCompactPreview({ event }: { event: NostrEvent }) {
       <span className="text-yellow-500 font-medium shrink-0">
         {amountInSats.toLocaleString("en", { notation: "compact" })}
       </span>
+      {zapRecipient && <UserName pubkey={zapRecipient} />}
       {zapMessage && (
         <span className="truncate line-clamp-1 flex-shrink-0">
           <RichText
@@ -56,16 +59,13 @@ export function ZapCompactPreview({ event }: { event: NostrEvent }) {
         </span>
       )}
       {zappedEvent && (
-        <>
-          <UserName pubkey={zappedEvent.pubkey} />
-          <span className="text-muted-foreground truncate line-clamp-1">
-            <RichText
-              event={zappedEvent}
-              className="inline text-sm leading-none"
-              options={{ showMedia: false, showEventEmbeds: false }}
-            />
-          </span>
-        </>
+        <span className="text-muted-foreground truncate line-clamp-1">
+          <RichText
+            event={zappedEvent}
+            className="inline text-sm leading-none"
+            options={{ showMedia: false, showEventEmbeds: false }}
+          />
+        </span>
       )}
     </span>
   );
diff --git a/src/components/nostr/kinds/ZapReceiptRenderer.tsx b/src/components/nostr/kinds/ZapReceiptRenderer.tsx
index 5e6bbbb..de22a99 100644
--- a/src/components/nostr/kinds/ZapReceiptRenderer.tsx
+++ b/src/components/nostr/kinds/ZapReceiptRenderer.tsx
@@ -8,12 +8,14 @@ import {
   getZapEventPointer,
   getZapAddressPointer,
   getZapSender,
+  getZapRecipient,
   isValidZap,
 } from "applesauce-common/helpers/zap";
 import { useNostrEvent } from "@/hooks/useNostrEvent";
 import { KindRenderer } from "./index";
 import { RichText } from "../RichText";
 import { EventCardSkeleton } from "@/components/ui/skeleton";
+import { UserName } from "../UserName";
 
 /**
  * Renderer for Kind 9735 - Zap Receipts
@@ -25,6 +27,7 @@ export function Kind9735Renderer({ event }: BaseEventProps) {
 
   // Get zap details using applesauce helpers
   const zapSender = useMemo(() => getZapSender(event), [event]);
+  const zapRecipient = useMemo(() => getZapRecipient(event), [event]);
   const zapAmount = useMemo(() => getZapAmount(event), [event]);
   const zapRequest = useMemo(() => getZapRequest(event), [event]);
 
@@ -67,6 +70,7 @@ export function Kind9735Renderer({ event }: BaseEventProps) {
             })}
           </span>
           <span className="text-xs text-muted-foreground">sats</span>
+          {zapRecipient && <UserName pubkey={zapRecipient} />}
         </div>
 
         {/* Zap comment */}