aiolabs/nostrintro
9
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: zap explainer slide

Browse source 
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>
This commit is contained in:
padreug 2026-07-22 02:53:45 +02:00
commit 9ef56223d4
1 changed files with 56 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/slides/ZapSlide.vue Normal file
View file

@ -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>