2023-01-31 18:56:31 +00:00
|
|
|
import "./WalletPage.css";
|
|
|
|
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { RouteObject } from "react-router-dom";
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
import { faCheck, faClock, faXmark } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
|
|
|
|
import NoteTime from "Element/NoteTime";
|
2023-02-24 10:25:14 +00:00
|
|
|
import { WalletInvoice, Sats, WalletInfo, WalletInvoiceState, useWallet, LNWallet } from "Wallet";
|
2023-01-31 18:56:31 +00:00
|
|
|
|
|
|
|
export const WalletRoutes: RouteObject[] = [
|
|
|
|
{
|
|
|
|
path: "/wallet",
|
|
|
|
element: <WalletPage />,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
export default function WalletPage() {
|
|
|
|
const [info, setInfo] = useState<WalletInfo>();
|
|
|
|
const [balance, setBalance] = useState<Sats>();
|
|
|
|
const [history, setHistory] = useState<WalletInvoice[]>();
|
2023-02-13 15:29:25 +00:00
|
|
|
const wallet = useWallet();
|
2023-01-31 18:56:31 +00:00
|
|
|
|
2023-02-13 15:29:25 +00:00
|
|
|
async function loadWallet(wallet: LNWallet) {
|
|
|
|
const i = await wallet.getInfo();
|
|
|
|
if ("error" in i) {
|
|
|
|
return;
|
2023-01-31 18:56:31 +00:00
|
|
|
}
|
2023-02-13 15:29:25 +00:00
|
|
|
setInfo(i as WalletInfo);
|
|
|
|
const b = await wallet.getBalance();
|
|
|
|
setBalance(b as Sats);
|
|
|
|
const h = await wallet.getInvoices();
|
|
|
|
setHistory((h as WalletInvoice[]).sort((a, b) => b.timestamp - a.timestamp));
|
2023-01-31 18:56:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
2023-02-13 15:29:25 +00:00
|
|
|
if (wallet) {
|
|
|
|
loadWallet(wallet).catch(console.warn);
|
|
|
|
}
|
|
|
|
}, [wallet]);
|
2023-01-31 18:56:31 +00:00
|
|
|
|
|
|
|
function stateIcon(s: WalletInvoiceState) {
|
|
|
|
switch (s) {
|
|
|
|
case WalletInvoiceState.Pending:
|
|
|
|
return <FontAwesomeIcon icon={faClock} className="mr5" />;
|
|
|
|
case WalletInvoiceState.Paid:
|
|
|
|
return <FontAwesomeIcon icon={faCheck} className="mr5" />;
|
|
|
|
case WalletInvoiceState.Expired:
|
|
|
|
return <FontAwesomeIcon icon={faXmark} className="mr5" />;
|
|
|
|
}
|
|
|
|
}
|
2023-02-13 15:29:25 +00:00
|
|
|
|
|
|
|
async function createInvoice() {
|
2023-02-24 10:25:14 +00:00
|
|
|
if (wallet) {
|
2023-02-13 15:29:25 +00:00
|
|
|
const rsp = await wallet.createInvoice({
|
|
|
|
memo: "test",
|
|
|
|
amount: 100,
|
|
|
|
});
|
|
|
|
console.debug(rsp);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-01-31 18:56:31 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<h3>{info?.alias}</h3>
|
|
|
|
<b>Balance: {(balance ?? 0).toLocaleString()} sats</b>
|
|
|
|
<div className="flex wallet-buttons">
|
|
|
|
<button>Send</button>
|
2023-02-13 15:29:25 +00:00
|
|
|
<button onClick={() => createInvoice()}>Receive</button>
|
2023-01-31 18:56:31 +00:00
|
|
|
</div>
|
|
|
|
<h3>History</h3>
|
2023-02-13 15:29:25 +00:00
|
|
|
{history?.map(a => (
|
2023-01-31 18:56:31 +00:00
|
|
|
<div className="card flex wallet-history-item" key={a.timestamp}>
|
|
|
|
<div className="f-grow f-col">
|
|
|
|
<NoteTime from={a.timestamp * 1000} />
|
|
|
|
<div>{(a.memo ?? "").length === 0 ? <> </> : a.memo}</div>
|
|
|
|
</div>
|
2023-02-13 15:29:25 +00:00
|
|
|
<div className={`${a.state === WalletInvoiceState.Paid ? "success" : "pending"}`}>
|
2023-01-31 18:56:31 +00:00
|
|
|
{stateIcon(a.state)}
|
|
|
|
{a.amount.toLocaleString()} sats
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|