From 8230c99c8060f39fc7cf8212bcda009d1d2a9894 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Thu, 12 Jan 2023 09:57:35 +0000
Subject: [PATCH] Bug fix pay invoice flow

---
 src/element/Invoice.js  | 20 ++++++++++----------
 src/element/LNURLTip.js | 35 +++++++++++++++++------------------
 src/element/Modal.js    |  4 ++--
 3 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/element/Invoice.js b/src/element/Invoice.js
index 60c1be22..10157236 100644
--- a/src/element/Invoice.js
+++ b/src/element/Invoice.js
@@ -37,14 +37,14 @@ export default function Invoice(props) {
                 <>
                     <h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
                     <p>{info?.description}</p>
-                    {showInvoice && <LNURLTip lnInvoice={invoice} show={true} /> }
+                    <LNURLTip invoice={invoice} show={showInvoice} onClose={() => setShowInvoice(false)} />
                 </>
             )
         } else {
             return (
                 <>
-                <h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
-                {showInvoice && <LNURLTip lnInvoice={invoice} show={true} /> }
+                    <h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
+                    <LNURLTip invoice={invoice} show={showInvoice} onClose={() => setShowInvoice(false)} />
                 </>
             )
         }
@@ -52,14 +52,14 @@ export default function Invoice(props) {
 
     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>
+            <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>  : <div className="btn" onClick={(e) => setShowInvoice(true)}>Pay</div> }
-        </div>
+                {info?.expired ? <div className="btn">Expired</div> : <div className="btn" onClick={(e) => { e.stopPropagation(); setShowInvoice(true); }}>Pay</div>}
+            </div>
 
         </>
     )
diff --git a/src/element/LNURLTip.js b/src/element/LNURLTip.js
index e94711cc..e5bf3ae5 100644
--- a/src/element/LNURLTip.js
+++ b/src/element/LNURLTip.js
@@ -9,25 +9,24 @@ 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);
     const [customAmount, setCustomAmount] = useState(0);
-    const [invoice, setInvoice] = useState("");
+    const [invoice, setInvoice] = useState(null);
     const [comment, setComment] = useState("");
     const [error, setError] = useState("");
     const [success, setSuccess] = useState(null);
 
     useEffect(() => {
-        if (show && !lnInvoice) {
+        if (show && invoice === null) {
             loadService()
                 .then(a => setPayService(a))
                 .catch(() => setError("Failed to load LNURL service"));
         } else {
             setPayService("");
             setError("");
-            setInvoice("");
+            setInvoice(props.invoice ? { pr: props.invoice } : null);
             setAmount(0);
             setComment("");
             setSuccess(null);
@@ -58,7 +57,7 @@ export default function LNURLTip(props) {
 
     const selectAmount = (a) => {
         setError("");
-        setInvoice("");
+        setInvoice(null);
         setAmount(a);
     };
 
@@ -165,25 +164,25 @@ export default function LNURLTip(props) {
     }
 
     function payInvoice() {
-        if(success) return null;
-        const pr = lnInvoice ? lnInvoice : invoice.pr;
+        if (success) return null;
+        const pr = invoice?.pr;
         return (
             <>
                 <div className="invoice">
                     <QrCode data={pr} link={`lightning:${pr}`} />
                     <div className="actions">
                         {pr && (
-                          <>
-                            <div className="copy-action">
-                                <Copy text={pr} maxSize={26} />
-                            </div>
-                            <div className="pay-actions">
-                                <div className="btn" onClick={() => window.open(`lightning:${pr}`)}>
-                                    Open Wallet
+                            <>
+                                <div className="copy-action">
+                                    <Copy text={pr} maxSize={26} />
                                 </div>
-                                <div>{webLn()}</div>
-                            </div>
-                          </>
+                                <div className="pay-actions">
+                                    <div className="btn" onClick={() => window.open(`lightning:${pr}`)}>
+                                        Open Wallet
+                                    </div>
+                                    <div>{webLn()}</div>
+                                </div>
+                            </>
                         )}
                     </div>
                 </div>
@@ -192,7 +191,7 @@ export default function LNURLTip(props) {
     }
 
     function successAction() {
-        if(!success) return null;
+        if (!success) return null;
         return (
             <>
                 <p>{success?.description ?? "Paid!"}</p>
diff --git a/src/element/Modal.js b/src/element/Modal.js
index 034e6ece..7a3baf1b 100644
--- a/src/element/Modal.js
+++ b/src/element/Modal.js
@@ -2,7 +2,7 @@ import "./Modal.css";
 import { useEffect } from "react"
 
 export default function Modal(props) {
-    const onClose = props.onClose || (() => {});
+    const onClose = props.onClose || (() => { });
 
     useEffect(() => {
         document.body.classList.add("scroll-lock");
@@ -10,7 +10,7 @@ export default function Modal(props) {
     }, []);
 
     return (
-        <div className="modal" onClick={(e) => onClose(e)}>
+        <div className="modal" onClick={(e) => { e.stopPropagation(); onClose(e); }}>
             {props.children}
         </div>
     )