From 6d3614d9536208c555fedd0bbf16cc8794f90de4 Mon Sep 17 00:00:00 2001
From: Ivan <ivan@strike.me>
Date: Mon, 9 Jan 2023 16:26:41 -0600
Subject: [PATCH 1/2] Adds QR code

---
 src/element/Invoice.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/element/Invoice.js b/src/element/Invoice.js
index f96a7b0b..cba16ab8 100644
--- a/src/element/Invoice.js
+++ b/src/element/Invoice.js
@@ -1,15 +1,18 @@
 import "./Invoice.css";
+import { useState } from "react";
 import { decode as invoiceDecode } from "light-bolt11-decoder";
 import { useMemo } from "react";
 import NoteTime from "./NoteTime";
+import QrCode from "./QrCode";
 
 export default function Invoice(props) {
     const invoice = props.invoice;
+    const [showLnQr, setShowLnQr] = useState(false);
 
     const info = useMemo(() => {
         try {
             let parsed = invoiceDecode(invoice);
-            
+
             let amount = parseInt(parsed.sections.find(a => a.name === "amount")?.value);
             let timestamp = parseInt(parsed.sections.find(a => a.name === "timestamp")?.value);
             let expire = parseInt(parsed.sections.find(a => a.name === "expiry")?.value);
@@ -34,15 +37,28 @@ export default function Invoice(props) {
                 <>
                     <h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
                     <p>{info?.description}</p>
+                    { showLnQr ? <p><QrCode data={invoice} link={"lightning:${invoice}"} /></p> : null }
                 </>
             )
         } else {
             return (
+                <>
                 <h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
+                { showLnQr ? <p><QrCode data={invoice} link={"lightning:${invoice}"} /></p> : null }
+                </>
             )
         }
     }
 
+    function pay(){
+        return (
+            <>
+            { showLnQr ? <div className="btn" onClick={() => window.open(`lightning:${invoice}`)}>Pay</div> :
+            <div className="btn" onClick={(e) => setShowLnQr(true)}>Pay</div> }
+            </>
+        )
+    }
+
 
     return (
         <div className="note-invoice flex">
@@ -51,8 +67,7 @@ export default function Invoice(props) {
                 {info?.expire ? <small>{info?.expired ? "Expired" : "Expires"} <NoteTime from={info.expire * 1000} /></small> : null}
             </div>
 
-            {info?.expired ? <div className="btn">Expired</div> :
-                <div className="btn" onClick={() => window.open(`lightning:${invoice}`)}>Pay</div>}
+            {info?.expired ? <div className="btn">Expired</div>  : pay() }
         </div>
     )
 }
\ No newline at end of file
-- 
2.45.2


From 17a6a5ba2315421109d996f9a8ef4444ba3664d5 Mon Sep 17 00:00:00 2001
From: Ivan <ivan@strike.me>
Date: Thu, 12 Jan 2023 00:07:48 -0600
Subject: [PATCH 2/2] Using LNURLTip to show the QR

---
 src/element/Invoice.js  | 23 ++++++++---------------
 src/element/LNURLTip.js |  5 +++--
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/element/Invoice.js b/src/element/Invoice.js
index cba16ab8..60c1be22 100644
--- a/src/element/Invoice.js
+++ b/src/element/Invoice.js
@@ -3,11 +3,11 @@ import { useState } from "react";
 import { decode as invoiceDecode } from "light-bolt11-decoder";
 import { useMemo } from "react";
 import NoteTime from "./NoteTime";
-import QrCode from "./QrCode";
+import LNURLTip from "./LNURLTip";
 
 export default function Invoice(props) {
     const invoice = props.invoice;
-    const [showLnQr, setShowLnQr] = useState(false);
+    const [showInvoice, setShowInvoice] = useState(false);
 
     const info = useMemo(() => {
         try {
@@ -37,37 +37,30 @@ export default function Invoice(props) {
                 <>
                     <h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
                     <p>{info?.description}</p>
-                    { showLnQr ? <p><QrCode data={invoice} link={"lightning:${invoice}"} /></p> : null }
+                    {showInvoice && <LNURLTip lnInvoice={invoice} show={true} /> }
                 </>
             )
         } else {
             return (
                 <>
                 <h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
-                { showLnQr ? <p><QrCode data={invoice} link={"lightning:${invoice}"} /></p> : null }
+                {showInvoice && <LNURLTip lnInvoice={invoice} show={true} /> }
                 </>
             )
         }
     }
 
-    function pay(){
-        return (
-            <>
-            { showLnQr ? <div className="btn" onClick={() => window.open(`lightning:${invoice}`)}>Pay</div> :
-            <div className="btn" onClick={(e) => setShowLnQr(true)}>Pay</div> }
-            </>
-        )
-    }
-
-
     return (
+        <>
         <div className="note-invoice flex">
             <div className="f-grow flex f-col">
                 {header()}
                 {info?.expire ? <small>{info?.expired ? "Expired" : "Expires"} <NoteTime from={info.expire * 1000} /></small> : null}
             </div>
 
-            {info?.expired ? <div className="btn">Expired</div>  : pay() }
+            {info?.expired ? <div className="btn">Expired</div>  : <div className="btn" onClick={(e) => setShowInvoice(true)}>Pay</div> }
         </div>
+
+        </>
     )
 }
\ No newline at end of file
diff --git a/src/element/LNURLTip.js b/src/element/LNURLTip.js
index 3d856b14..d3964815 100644
--- a/src/element/LNURLTip.js
+++ b/src/element/LNURLTip.js
@@ -8,6 +8,7 @@ export default function LNURLTip(props) {
     const onClose = props.onClose || (() => { });
     const service = props.svc;
     const show = props.show || false;
+    const lnInvoice = props.lnInvoice
     const amounts = [50, 100, 500, 1_000, 5_000, 10_000];
     const [payService, setPayService] = useState("");
     const [amount, setAmount] = useState(0);
@@ -18,7 +19,7 @@ export default function LNURLTip(props) {
     const [success, setSuccess] = useState(null);
 
     useEffect(() => {
-        if (show) {
+        if (show && !lnInvoice) {
             loadService()
                 .then(a => setPayService(a))
                 .catch(() => setError("Failed to load LNURL service"));
@@ -164,7 +165,7 @@ export default function LNURLTip(props) {
 
     function payInvoice() {
         if(success) return null;
-        const pr = invoice.pr;
+        const pr = lnInvoice ? lnInvoice : invoice.pr;
         return (
             <>
                 <div className="invoice">
-- 
2.45.2