From c5fc4742400857796cd0b43b43ab17072ad2182d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 18 Jan 2026 23:00:49 +0000
Subject: [PATCH] feat: add amount preview above invoice in zap QR view

Display the zap amount prominently above the invoice when showing
the QR code. This provides clear visual confirmation of what the
user is paying before they scan or copy the invoice.

Format:
- Large bold amount with k/m notation (e.g., "420", "2.1k", "100m")
- Smaller "sats" label underneath
- Positioned between QR code and invoice field
---
 src/components/ZapWindow.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/ZapWindow.tsx b/src/components/ZapWindow.tsx
index e670b01..2580eff 100644
--- a/src/components/ZapWindow.tsx
+++ b/src/components/ZapWindow.tsx
@@ -510,6 +510,16 @@ export function ZapWindow({
                 </div>
               )}
 
+              {/* Amount Preview */}
+              {(selectedAmount || customAmount) && (
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-foreground">
+                    {formatAmount(selectedAmount || parseInt(customAmount))}
+                  </div>
+                  <div className="text-sm text-muted-foreground">sats</div>
+                </div>
+              )}
+
               {/* Invoice */}
               <div className="space-y-2">
                 <Label>Invoice</Label>