From cb475495fb45f1030d0ebee3e33345d261b99b53 Mon Sep 17 00:00:00 2001
From: highperfocused <highperfocused@pm.me>
Date: Mon, 21 Apr 2025 13:30:17 +0200
Subject: [PATCH] feat: add QR code link for direct payment and improve invoice
 display logic

---
 components/ZapButton.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/ZapButton.tsx b/components/ZapButton.tsx
index 432644a..a26a9b1 100644
--- a/components/ZapButton.tsx
+++ b/components/ZapButton.tsx
@@ -18,6 +18,7 @@ import { Input } from "./ui/input";
 import { useNostr, useNostrEvents, useProfile } from "nostr-react";
 import { useEffect, useState, useRef } from "react";
 import QRCode from "react-qr-code";
+import Link from "next/link";
 
 export default function ZapButton({ event }: { event: any }) {
 
@@ -300,7 +301,9 @@ export default function ZapButton({ event }: { event: any }) {
                             </div>
                         ) : (
                             <div className="mb-4 p-2 bg-white rounded-lg">
-                                <QRCode value={invoice} size={200} />
+                                <Link href={`lightning:${invoice}`} target="_blank" rel="noopener noreferrer">
+                                    <QRCode value={invoice} size={200} />
+                                </Link>
                             </div>
                         )}
                         
@@ -310,15 +313,16 @@ export default function ZapButton({ event }: { event: any }) {
                                 : "Scan this QR code with a Lightning wallet to pay the invoice"}
                         </p>
                         
-                        <div className="w-full overflow-auto p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs mb-4">
-                            <code className="break-all">{invoice}</code>
-                        </div>
                         
-                        {paymentComplete && (
+                        {paymentComplete ? (
                             <div className="flex items-center text-green-500 mb-4">
                                 <CheckCircledIcon className="mr-2 h-4 w-4" />
                                 Zap sent successfully!
                             </div>
+                        ) : (
+                            <div className="w-full overflow-auto p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs mb-4">
+                                <code className="break-all">{invoice}</code>
+                            </div>
                         )}
                         
                         <Button variant="outline" onClick={() => setInvoice("")}>