Bug fix pay invoice flow

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} /> }
+                    <LNURLTip invoice={invoice} show={showInvoice} onClose={() => setShowInvoice(false)} />
                 </>
             )
         }
@@ -58,7 +58,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={(e) => setShowInvoice(true)}>Pay</div> }
+                {info?.expired ? <div className="btn">Expired</div> : <div className="btn" onClick={(e) => { e.stopPropagation(); setShowInvoice(true); }}>Pay</div>}
             </div>
 
         </>

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);
     };
 
@@ -166,7 +165,7 @@ export default function LNURLTip(props) {
 
     function payInvoice() {
         if (success) return null;
-        const pr = lnInvoice ? lnInvoice : invoice.pr;
+        const pr = invoice?.pr;
         return (
             <>
                 <div className="invoice">

src/element/Modal.js

@@ -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>
     )