Zaps

Features

• Shows total zapped amount
• Opens a modal with recipient information
• Allows custom zap amounts with presets (21, 210, 2100, 21k, 210k sats)
• Supports adding comments to zaps
• Generates QR codes for Lightning payment
• Handles multiple recipients via zap tags

Usage

<ZapButton event={event} />

Basic usage with default settings. Shows the total amount of sats zapped to the event.

<ZapButton event={event} showAmount={false} />

Hide the zap amount and only show the zap icon.

How it works

The ZapButton component fetches both traditional zaps (kind 9735) and nutzaps (kind 9774) for an event. It parses the zap invoices to calculate the total amount zapped in sats.

When a user clicks the button, a modal opens allowing them to select an amount, add a comment, and see the recipients. The component uses NDKZapper to generate a Lightning invoice and displays a QR code for payment.

The component also identifies recipients by parsing zap tags, falling back to the event author if no zap tags are present.