diff --git a/src/components/ZapWindow.tsx b/src/components/ZapWindow.tsx
new file mode 100644
index 0000000..bdf7787
--- /dev/null
+++ b/src/components/ZapWindow.tsx
@@ -0,0 +1,428 @@
+/**
+ * ZapWindow Component
+ *
+ * UI for sending Lightning zaps to Nostr users and events (NIP-57)
+ *
+ * Features:
+ * - Send zaps to profiles or events
+ * - Preset and custom amounts
+ * - Remembers most-used amounts
+ * - NWC wallet payment or QR code fallback
+ * - Shows feed render of zapped event
+ */
+
+import { useState, useEffect, useMemo } from "react";
+import { toast } from "sonner";
+import {
+ Zap,
+ Wallet,
+ QrCode,
+ Copy,
+ ExternalLink,
+ Loader2,
+ CheckCircle2,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import QRCode from "qrcode";
+import { useProfile } from "applesauce-react/hooks";
+import { use$ } from "applesauce-react/hooks";
+import eventStore from "@/services/event-store";
+import { useWallet } from "@/hooks/useWallet";
+import { getProfileContent } from "applesauce-core/helpers";
+import { getDisplayName } from "@/lib/nostr-utils";
+import { KindRenderer } from "./nostr/kinds";
+import type { EventPointer, AddressPointer } from "@/lib/open-parser";
+import { isAddressableKind } from "applesauce-core/helpers";
+import type { NostrEvent } from "@/types/nostr";
+
+export interface ZapWindowProps {
+ /** Recipient pubkey (who receives the zap) */
+ recipientPubkey: string;
+ /** Optional event being zapped (adds context) */
+ eventPointer?: EventPointer | AddressPointer;
+}
+
+// Default preset amounts in sats
+const DEFAULT_PRESETS = [21, 100, 500, 1000, 5000, 10000];
+
+// LocalStorage keys
+const STORAGE_KEY_CUSTOM_AMOUNTS = "grimoire_zap_custom_amounts";
+const STORAGE_KEY_AMOUNT_USAGE = "grimoire_zap_amount_usage";
+
+export function ZapWindow({
+ recipientPubkey: initialRecipientPubkey,
+ eventPointer,
+}: ZapWindowProps) {
+ // Load event if we have a pointer and no recipient pubkey (derive from event author)
+ const event = use$(() => {
+ if (!eventPointer) return undefined;
+ if ("id" in eventPointer) {
+ return eventStore.event(eventPointer.id);
+ }
+ // AddressPointer
+ return eventStore.replaceable(
+ eventPointer.kind,
+ eventPointer.pubkey,
+ eventPointer.identifier,
+ );
+ }, [eventPointer]);
+
+ // Resolve recipient: use provided pubkey or derive from event author
+ const recipientPubkey = initialRecipientPubkey || event?.pubkey || "";
+
+ const recipientProfile = useProfile(recipientPubkey, eventStore);
+
+ const { wallet, walletInfo, payInvoice, refreshBalance } = useWallet();
+
+ const [selectedAmount, setSelectedAmount] = useState
(null);
+ const [customAmount, setCustomAmount] = useState("");
+ const [comment, setComment] = useState("");
+ const [isProcessing, setIsProcessing] = useState(false);
+ const [isPaid, setIsPaid] = useState(false);
+ const [qrCodeUrl, setQrCodeUrl] = useState("");
+ const [invoice, setInvoice] = useState("");
+ const [showQrDialog, setShowQrDialog] = useState(false);
+
+ // Load custom amounts and usage stats from localStorage
+ const [customAmounts, setCustomAmounts] = useState(() => {
+ const stored = localStorage.getItem(STORAGE_KEY_CUSTOM_AMOUNTS);
+ return stored ? JSON.parse(stored) : [];
+ });
+
+ const [amountUsage, setAmountUsage] = useState>(() => {
+ const stored = localStorage.getItem(STORAGE_KEY_AMOUNT_USAGE);
+ return stored ? JSON.parse(stored) : {};
+ });
+
+ // Combine preset and custom amounts, sort by usage
+ const availableAmounts = useMemo(() => {
+ const all = [...DEFAULT_PRESETS, ...customAmounts];
+ const unique = Array.from(new Set(all));
+ // Sort by usage count (descending), then by amount
+ return unique.sort((a, b) => {
+ const usageA = amountUsage[a] || 0;
+ const usageB = amountUsage[b] || 0;
+ if (usageA !== usageB) return usageB - usageA;
+ return a - b;
+ });
+ }, [customAmounts, amountUsage]);
+
+ // Get recipient name for display
+ const recipientName = useMemo(() => {
+ const content = recipientProfile
+ ? getProfileContent(recipientProfile)
+ : null;
+ return content
+ ? getDisplayName(recipientPubkey, content)
+ : recipientPubkey.slice(0, 8);
+ }, [recipientPubkey, recipientProfile]);
+
+ // Get event author name if zapping an event
+ const eventAuthorName = useMemo(() => {
+ if (!event) return null;
+ const authorProfile = eventStore.getReplaceable(0, event.pubkey);
+ const content = authorProfile ? getProfileContent(authorProfile) : null;
+ return content
+ ? getDisplayName(event.pubkey, content)
+ : event.pubkey.slice(0, 8);
+ }, [event]);
+
+ // Track amount usage
+ const trackAmountUsage = (amount: number) => {
+ const newUsage = {
+ ...amountUsage,
+ [amount]: (amountUsage[amount] || 0) + 1,
+ };
+ setAmountUsage(newUsage);
+ localStorage.setItem(STORAGE_KEY_AMOUNT_USAGE, JSON.stringify(newUsage));
+
+ // If it's a custom amount not in our list, add it
+ if (!DEFAULT_PRESETS.includes(amount) && !customAmounts.includes(amount)) {
+ const newCustomAmounts = [...customAmounts, amount];
+ setCustomAmounts(newCustomAmounts);
+ localStorage.setItem(
+ STORAGE_KEY_CUSTOM_AMOUNTS,
+ JSON.stringify(newCustomAmounts),
+ );
+ }
+ };
+
+ // Handle zap payment flow
+ const handleZap = async (useWallet: boolean) => {
+ const amount = selectedAmount || parseInt(customAmount);
+ if (!amount || amount <= 0) {
+ toast.error("Please enter a valid amount");
+ return;
+ }
+
+ setIsProcessing(true);
+ try {
+ // Track usage
+ trackAmountUsage(amount);
+
+ // Step 1: Get Lightning address from recipient profile
+ const content = recipientProfile
+ ? getProfileContent(recipientProfile)
+ : null;
+ const lud16 = content?.lud16;
+ const lud06 = content?.lud06;
+
+ if (!lud16 && !lud06) {
+ throw new Error("Recipient has no Lightning address configured");
+ }
+
+ // Step 2: Resolve LNURL to get callback URL
+ // TODO: Implement full LNURL resolution and zap request creation
+ // For now, show a placeholder message
+ toast.error(
+ "Zap functionality coming soon! Need to implement LNURL resolution and zap request creation.",
+ );
+
+ // Placeholder for full implementation:
+ // 1. Resolve LNURL (lud16 or lud06) to get callback URL and nostrPubkey
+ // 2. Create kind 9734 zap request event
+ // 3. Sign zap request with user's key
+ // 4. Send GET request to callback with zap request and amount
+ // 5. Get invoice from callback
+ // 6. If useWallet: pay invoice with NWC
+ // Else: show QR code
+ // 7. Listen for kind 9735 receipt (optional)
+ } catch (error) {
+ console.error("Zap error:", error);
+ toast.error(
+ error instanceof Error ? error.message : "Failed to send zap",
+ );
+ } finally {
+ setIsProcessing(false);
+ }
+ };
+
+ // Copy to clipboard
+ const copyToClipboard = async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ toast.success("Copied to clipboard");
+ } catch {
+ toast.error("Failed to copy");
+ }
+ };
+
+ // Open in wallet
+ const openInWallet = (invoice: string) => {
+ window.open(`lightning:${invoice}`, "_blank");
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+ Zap {eventAuthorName || recipientName}
+
+ {event && (
+
+ For their{" "}
+ {event.kind === 1 ? "note" : `kind ${event.kind} event`}
+
+ )}
+
+
+
+
+
+
+ {/* Show event preview if zapping an event */}
+ {event && (
+
+
+
+ Zapping Event
+
+
+
+
+
+
+ )}
+
+ {/* Amount Selection */}
+
+
+ Amount (sats)
+
+
+ {/* Preset amounts */}
+
+ {availableAmounts.map((amount) => (
+
+ ))}
+
+
+ {/* Custom amount */}
+
+
+ {
+ setCustomAmount(e.target.value);
+ setSelectedAmount(null);
+ }}
+ min="1"
+ />
+
+
+ {/* Comment */}
+
+
+ setComment(e.target.value)}
+ maxLength={200}
+ />
+
+
+
+
+ {/* Payment Methods */}
+
+
+ Payment Method
+
+
+ {wallet && walletInfo?.methods.includes("pay_invoice") ? (
+
+ ) : (
+
+ Connect a wallet to pay directly
+
+ )}
+
+
+
+
+
+
+
+ {/* QR Code Dialog */}
+
+