From 9ef56223d49c1d8caa3c934e148780d075360692 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 22 Jul 2026 02:53:45 +0200
Subject: [PATCH] feat: zap explainer slide

Break a zap into its two layers: the plain Lightning payment and the
NIP-57 zap receipt (kind 9735) that makes it publicly visible.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/slides/ZapSlide.vue | 56 ++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/slides/ZapSlide.vue

diff --git a/src/components/slides/ZapSlide.vue b/src/components/slides/ZapSlide.vue
new file mode 100644
index 0000000..ba72b33
--- /dev/null
+++ b/src/components/slides/ZapSlide.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Wallet, BadgeCheck, ArrowRight, Zap } from '@lucide/vue'
+import SlideShell from './SlideShell.vue'
+</script>
+
+<template>
+  <SlideShell kicker="Lightning + a receipt" title="How a zap works ⚡">
+    <div class="flex flex-col items-stretch gap-4 lg:flex-row lg:items-stretch">
+      <!-- Step 1: plain Lightning payment (not Nostr) -->
+      <div class="flex-1 rounded-xl border border-amber-500/40 bg-amber-950/10 p-6">
+        <div class="mb-3 flex items-center gap-3">
+          <span class="flex h-8 w-8 flex-none items-center justify-center rounded-full bg-amber-500/20 text-sm font-bold text-amber-300">1</span>
+          <Wallet class="h-6 w-6 text-amber-400" />
+          <span class="text-sm font-semibold uppercase tracking-wider text-amber-400">Plain Lightning · not Nostr</span>
+        </div>
+        <p class="text-white">You pay a Bitcoin <span class="font-semibold">Lightning invoice</span>.</p>
+        <p class="mt-2 text-base text-zinc-400">
+          Their profile lists a Lightning address. Your app fetches an invoice and pays it — instant,
+          cheap, and on its own <em>invisible</em>. This step is 100% Lightning; Nostr isn’t involved yet.
+        </p>
+      </div>
+
+      <ArrowRight class="mx-auto h-6 w-6 rotate-90 flex-none self-center text-zinc-500 lg:rotate-0" />
+
+      <!-- Step 2: the signed receipt (the Nostr part) -->
+      <div class="flex-1 rounded-xl border border-violet-600/50 bg-violet-950/20 p-6">
+        <div class="mb-3 flex items-center gap-3">
+          <span class="flex h-8 w-8 flex-none items-center justify-center rounded-full bg-violet-500/20 text-sm font-bold text-violet-300">2</span>
+          <BadgeCheck class="h-6 w-6 text-violet-400" />
+          <span class="text-sm font-semibold uppercase tracking-wider text-violet-400">The receipt · the Nostr part</span>
+        </div>
+        <p class="text-white">Their Lightning server publishes a signed <span class="font-semibold">zap receipt</span>.</p>
+        <p class="mt-2 text-base text-zinc-400">
+          Once the invoice clears, the server signs a receipt proving payment and posts it to relays.
+          Now the zap shows up <span class="text-zinc-200">publicly under the note</span> — amount, sender, comment.
+        </p>
+      </div>
+    </div>
+
+    <!-- Takeaway -->
+    <div class="mt-6 flex items-start gap-3 rounded-lg border-l-2 border-violet-500 bg-zinc-900/50 py-3 pl-4 pr-4">
+      <Zap class="mt-0.5 h-5 w-5 flex-none text-violet-400" />
+      <p class="text-zinc-300">
+        Same sats either way — the <span class="font-semibold text-white">public, signed receipt</span> is what turns a
+        private Lightning tip into a visible <em>zap</em>.
+      </p>
+    </div>
+
+    <p class="mt-4 text-sm text-zinc-500">
+      Under the hood (NIP-57): your client attaches a signed
+      <code class="text-zinc-300">zap request (kind 9734)</code>; the recipient’s server returns a
+      <code class="text-zinc-300">zap receipt (kind 9735)</code>. The server must opt in via
+      <code class="text-zinc-300">allowsNostr</code>.
+    </p>
+  </SlideShell>
+</template>