progress

packages/app/src/Pages/WalletPage.tsx

@@ -6,13 +6,7 @@ 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";
+import { openWallet, WalletInvoice, Sats, WalletInfo, WalletInvoiceState, useWallet, LNWallet } from "Wallet";
 
 export const WalletRoutes: RouteObject[] = [
   {
@@ -25,28 +19,25 @@ export default function WalletPage() {
   const [info, setInfo] = useState<WalletInfo>();
   const [balance, setBalance] = useState<Sats>();
   const [history, setHistory] = useState<WalletInvoice[]>();
+  const wallet = useWallet();
 
-  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)
-      );
+  async function loadWallet(wallet: LNWallet) {
+    const i = await wallet.getInfo();
+    if ("error" in i) {
+      return;
     }
+    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));
   }
 
   useEffect(() => {
-    loadWallet().catch(console.warn);
-  }, []);
+    if (wallet) {
+      loadWallet(wallet).catch(console.warn);
+    }
+  }, [wallet]);
 
   function stateIcon(s: WalletInvoiceState) {
     switch (s) {
@@ -58,26 +49,35 @@ export default function WalletPage() {
         return <FontAwesomeIcon icon={faXmark} className="mr5" />;
     }
   }
+
+  async function createInvoice() {
+    const cfg = window.localStorage.getItem("wallet-lndhub");
+    if (cfg) {
+      const wallet = await openWallet(cfg);
+      const rsp = await wallet.createInvoice({
+        memo: "test",
+        amount: 100,
+      });
+      console.debug(rsp);
+    }
+  }
+
   return (
     <>
       <h3>{info?.alias}</h3>
       <b>Balance: {(balance ?? 0).toLocaleString()} sats</b>
       <div className="flex wallet-buttons">
         <button>Send</button>
-        <button>Receive</button>
+        <button onClick={() => createInvoice()}>Receive</button>
       </div>
       <h3>History</h3>
-      {history?.map((a) => (
+      {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 ? <>&nbsp;</> : a.memo}</div>
           </div>
-          <div
-            className={`${
-              a.state === WalletInvoiceState.Paid ? "success" : "pending"
-            }`}
-          >
+          <div className={`${a.state === WalletInvoiceState.Paid ? "success" : "pending"}`}>
             {stateIcon(a.state)}
             {a.amount.toLocaleString()} sats
           </div>