Bug fix pay invoice flow

This commit is contained in:
Kieran 2023-01-12 09:57:35 +00:00
parent eaab2e3e5d
commit 8230c99c80
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
3 changed files with 29 additions and 30 deletions

View File

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

View File

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

View File

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