From 2eaaa01f9793a6e5c869bce980bfa596c5f2bc83 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 20 Jan 2026 09:41:00 +0000
Subject: [PATCH] refactor: add invoice expiration handling and simplify UI
 feedback

Improves the zap QR payment verification experience by tracking invoice
expiration and providing subtle visual feedback instead of text.

Changes:
- Import light-bolt11-decoder to parse invoice expiration
- Decode invoice on generation to extract timestamp and expiry
- Store invoiceExpiry state (Unix timestamp when invoice expires)
- Check expiration in polling loop and stop if expired
- Add isInvoiceExpired memoized check for UI state
- Apply grayscale filter and 50% opacity to expired QR codes
- Remove verbose "Checking for payment..." status text to prevent UI jumping
- Keep verification logic internal and silent

Visual feedback now shows expired state clearly without text, preventing
layout shifts while still giving users visual indication that the invoice
is no longer valid.
---
 src/components/ZapWindow.tsx | 59 +++++++++++++++++++++++++++---------
 1 file changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/components/ZapWindow.tsx b/src/components/ZapWindow.tsx
index 41200f3..c7219a0 100644
--- a/src/components/ZapWindow.tsx
+++ b/src/components/ZapWindow.tsx
@@ -23,6 +23,7 @@ import {
   LogIn,
   EyeOff,
 } from "lucide-react";
+import { decode as decodeBolt11 } from "light-bolt11-decoder";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -135,6 +136,15 @@ export function ZapWindow({
     if (!verifyUrl || !showQrDialog || isPaid) return;
 
     const checkPayment = async () => {
+      // Check if invoice has expired
+      if (invoiceExpiry) {
+        const nowSeconds = Math.floor(Date.now() / 1000);
+        if (nowSeconds > invoiceExpiry) {
+          console.debug("Invoice expired, stopping payment verification");
+          return; // Stop polling if expired
+        }
+      }
+
       setCheckingPayment(true);
       try {
         const result = await verifyPayment(verifyUrl);
@@ -165,6 +175,7 @@ export function ZapWindow({
     verifyUrl,
     showQrDialog,
     isPaid,
+    invoiceExpiry,
     selectedAmount,
     customAmount,
     recipientName,
@@ -186,6 +197,7 @@ export function ZapWindow({
   const [zapAnonymously, setZapAnonymously] = useState(false);
   const [verifyUrl, setVerifyUrl] = useState<string>("");
   const [checkingPayment, setCheckingPayment] = useState(false);
+  const [invoiceExpiry, setInvoiceExpiry] = useState<number | null>(null); // Unix timestamp when invoice expires
 
   // Editor ref and search functions
   const editorRef = useRef<MentionEditorHandle>(null);
@@ -223,6 +235,13 @@ export function ZapWindow({
       : recipientPubkey.slice(0, 8);
   }, [recipientPubkey, recipientProfile]);
 
+  // Check if invoice has expired
+  const isInvoiceExpired = useMemo(() => {
+    if (!invoiceExpiry) return false;
+    const nowSeconds = Math.floor(Date.now() / 1000);
+    return nowSeconds > invoiceExpiry;
+  }, [invoiceExpiry]);
+
   // Check if recipient has a lightning address
   const hasLightningAddress = !!(
     recipientProfile?.lud16 || recipientProfile?.lud06
@@ -441,6 +460,26 @@ export function ZapWindow({
       setQrCodeUrl(qrUrl);
       setInvoice(invoiceText);
 
+      // Decode invoice to extract expiration time
+      try {
+        const decoded = decodeBolt11(invoiceText);
+        const timestampSection = decoded.sections.find(
+          (s) => s.name === "timestamp",
+        );
+        const timestamp =
+          timestampSection && "value" in timestampSection
+            ? Number(timestampSection.value)
+            : undefined;
+        const expiry = decoded.expiry;
+
+        if (timestamp && expiry) {
+          const expiresAt = timestamp + expiry;
+          setInvoiceExpiry(expiresAt);
+        }
+      } catch (error) {
+        console.error("Failed to decode invoice for expiry:", error);
+      }
+
       // Store verify URL if available for payment polling
       if (invoiceResponse.verify) {
         setVerifyUrl(invoiceResponse.verify);
@@ -572,7 +611,11 @@ export function ZapWindow({
 
               {/* QR Code */}
               {qrCodeUrl && (
-                <div className="flex justify-center p-4 bg-white rounded-lg">
+                <div
+                  className={`flex justify-center p-4 bg-white rounded-lg transition-all ${
+                    isInvoiceExpired ? "grayscale opacity-50" : ""
+                  }`}
+                >
                   <img
                     src={qrCodeUrl}
                     alt="Lightning Invoice QR Code"
@@ -581,20 +624,6 @@ export function ZapWindow({
                 </div>
               )}
 
-              {/* Payment Verification Status */}
-              {verifyUrl && (
-                <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
-                  {checkingPayment && (
-                    <Loader2 className="size-3 animate-spin" />
-                  )}
-                  <span>
-                    {checkingPayment
-                      ? "Checking for payment..."
-                      : "Waiting for payment (auto-checking every 30s)"}
-                  </span>
-                </div>
-              )}
-
               {/* Amount Preview */}
               {(selectedAmount || customAmount) && (
                 <div className="text-center">