2023-01-02 13:40:42 +00:00
|
|
|
|
import "./Invoice.css";
|
2023-01-09 22:26:41 +00:00
|
|
|
|
import { useState } from "react";
|
2023-01-16 17:48:25 +00:00
|
|
|
|
// @ts-expect-error
|
2023-01-02 13:40:42 +00:00
|
|
|
|
import { decode as invoiceDecode } from "light-bolt11-decoder";
|
|
|
|
|
import { useMemo } from "react";
|
2023-01-20 11:11:50 +00:00
|
|
|
|
import NoteTime from "Element/NoteTime";
|
|
|
|
|
import LNURLTip from "Element/LNURLTip";
|
2023-01-02 13:40:42 +00:00
|
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
|
export interface InvoiceProps {
|
|
|
|
|
invoice: string
|
|
|
|
|
}
|
|
|
|
|
export default function Invoice(props: InvoiceProps) {
|
2023-01-02 13:40:42 +00:00
|
|
|
|
const invoice = props.invoice;
|
2023-01-12 06:07:48 +00:00
|
|
|
|
const [showInvoice, setShowInvoice] = useState(false);
|
2023-01-02 13:40:42 +00:00
|
|
|
|
|
|
|
|
|
const info = useMemo(() => {
|
2023-01-04 20:09:35 +00:00
|
|
|
|
try {
|
|
|
|
|
let parsed = invoiceDecode(invoice);
|
2023-01-09 22:26:41 +00:00
|
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
|
let amount = parseInt(parsed.sections.find((a: any) => a.name === "amount")?.value);
|
|
|
|
|
let timestamp = parseInt(parsed.sections.find((a: any) => a.name === "timestamp")?.value);
|
|
|
|
|
let expire = parseInt(parsed.sections.find((a: any) => a.name === "expiry")?.value);
|
|
|
|
|
let description = parsed.sections.find((a: any) => a.name === "description")?.value;
|
2023-01-06 19:57:26 +00:00
|
|
|
|
let ret = {
|
|
|
|
|
amount: !isNaN(amount) ? (amount / 1000) : 0,
|
|
|
|
|
expire: !isNaN(timestamp) && !isNaN(expire) ? timestamp + expire : null,
|
2023-01-12 12:00:44 +00:00
|
|
|
|
description,
|
|
|
|
|
expired: false
|
2023-01-06 19:57:26 +00:00
|
|
|
|
};
|
|
|
|
|
if (ret.expire) {
|
|
|
|
|
ret.expired = ret.expire < (new Date().getTime() / 1000);
|
2023-01-04 20:09:35 +00:00
|
|
|
|
}
|
2023-01-06 19:57:26 +00:00
|
|
|
|
return ret;
|
2023-01-04 20:09:35 +00:00
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
2023-01-02 13:40:42 +00:00
|
|
|
|
}
|
|
|
|
|
}, [invoice]);
|
|
|
|
|
|
2023-01-06 19:57:26 +00:00
|
|
|
|
function header() {
|
|
|
|
|
if (info?.description?.length > 0) {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
|
|
|
|
|
<p>{info?.description}</p>
|
2023-01-12 09:57:35 +00:00
|
|
|
|
<LNURLTip invoice={invoice} show={showInvoice} onClose={() => setShowInvoice(false)} />
|
2023-01-06 19:57:26 +00:00
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
} else {
|
|
|
|
|
return (
|
2023-01-09 22:26:41 +00:00
|
|
|
|
<>
|
2023-01-12 09:57:35 +00:00
|
|
|
|
<h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
|
|
|
|
|
<LNURLTip invoice={invoice} show={showInvoice} onClose={() => setShowInvoice(false)} />
|
2023-01-09 22:26:41 +00:00
|
|
|
|
</>
|
2023-01-06 19:57:26 +00:00
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-02 13:40:42 +00:00
|
|
|
|
return (
|
2023-01-12 06:07:48 +00:00
|
|
|
|
<>
|
2023-01-12 09:57:35 +00:00
|
|
|
|
<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>
|
2023-01-06 19:57:26 +00:00
|
|
|
|
|
2023-01-12 09:57:35 +00:00
|
|
|
|
{info?.expired ? <div className="btn">Expired</div> : <div className="btn" onClick={(e) => { e.stopPropagation(); setShowInvoice(true); }}>Pay</div>}
|
|
|
|
|
</div>
|
2023-01-12 06:07:48 +00:00
|
|
|
|
|
|
|
|
|
</>
|
2023-01-02 13:40:42 +00:00
|
|
|
|
)
|
|
|
|
|
}
|