67 lines
2.4 KiB
JavaScript
67 lines
2.4 KiB
JavaScript
import "./Invoice.css";
|
||
import { useState } from "react";
|
||
import { decode as invoiceDecode } from "light-bolt11-decoder";
|
||
import { useMemo } from "react";
|
||
import NoteTime from "./NoteTime";
|
||
import LNURLTip from "./LNURLTip";
|
||
|
||
export default function Invoice(props) {
|
||
const invoice = props.invoice;
|
||
const [showInvoice, setShowInvoice] = 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);
|
||
let description = parsed.sections.find(a => a.name === "description")?.value;
|
||
let ret = {
|
||
amount: !isNaN(amount) ? (amount / 1000) : 0,
|
||
expire: !isNaN(timestamp) && !isNaN(expire) ? timestamp + expire : null,
|
||
description,
|
||
expired: false
|
||
};
|
||
if (ret.expire) {
|
||
ret.expired = ret.expire < (new Date().getTime() / 1000);
|
||
}
|
||
return ret;
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
}, [invoice]);
|
||
|
||
function header() {
|
||
if (info?.description?.length > 0) {
|
||
return (
|
||
<>
|
||
<h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
|
||
<p>{info?.description}</p>
|
||
<LNURLTip invoice={invoice} show={showInvoice} onClose={() => setShowInvoice(false)} />
|
||
</>
|
||
)
|
||
} else {
|
||
return (
|
||
<>
|
||
<h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
|
||
<LNURLTip invoice={invoice} show={showInvoice} onClose={() => setShowInvoice(false)} />
|
||
</>
|
||
)
|
||
}
|
||
}
|
||
|
||
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> : <div className="btn" onClick={(e) => { e.stopPropagation(); setShowInvoice(true); }}>Pay</div>}
|
||
</div>
|
||
|
||
</>
|
||
)
|
||
} |