89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
|
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";
|
||
|
import {
|
||
|
openWallet,
|
||
|
WalletInvoice,
|
||
|
Sats,
|
||
|
WalletInfo,
|
||
|
WalletInvoiceState,
|
||
|
} from "Wallet";
|
||
|
|
||
|
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[]>();
|
||
|
|
||
|
async function loadWallet() {
|
||
|
let cfg = window.localStorage.getItem("wallet-lndhub");
|
||
|
if (cfg) {
|
||
|
let wallet = await openWallet(cfg);
|
||
|
let i = await wallet.getInfo();
|
||
|
if ("error" in i) {
|
||
|
return;
|
||
|
}
|
||
|
setInfo(i as WalletInfo);
|
||
|
let b = await wallet.getBalance();
|
||
|
setBalance(b as Sats);
|
||
|
let h = await wallet.getInvoices();
|
||
|
setHistory(
|
||
|
(h as WalletInvoice[]).sort((a, b) => b.timestamp - a.timestamp)
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
useEffect(() => {
|
||
|
loadWallet().catch(console.warn);
|
||
|
}, []);
|
||
|
|
||
|
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" />;
|
||
|
}
|
||
|
}
|
||
|
return (
|
||
|
<>
|
||
|
<h3>{info?.alias}</h3>
|
||
|
<b>Balance: {(balance ?? 0).toLocaleString()} sats</b>
|
||
|
<div className="flex wallet-buttons">
|
||
|
<button>Send</button>
|
||
|
<button>Receive</button>
|
||
|
</div>
|
||
|
<h3>History</h3>
|
||
|
{history?.map((a) => (
|
||
|
<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>
|
||
|
<div
|
||
|
className={`${
|
||
|
a.state === WalletInvoiceState.Paid ? "success" : "pending"
|
||
|
}`}
|
||
|
>
|
||
|
{stateIcon(a.state)}
|
||
|
{a.amount.toLocaleString()} sats
|
||
|
</div>
|
||
|
</div>
|
||
|
))}
|
||
|
</>
|
||
|
);
|
||
|
}
|