complete basic wallet

packages/app/src/Element/Invoice.tsx

@@ -1,11 +1,12 @@
 import "./Invoice.css";
 import { useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { decode as invoiceDecode } from "light-bolt11-decoder";
 import { useMemo } from "react";
+
 import SendSats from "Element/SendSats";
 import ZapCircle from "Icons/ZapCircle";
-import useWebln from "Hooks/useWebln";
+import { useWallet } from "Wallet";
+import { decodeInvoice } from "Util";
 
 import messages from "./messages";
 
@@ -15,38 +16,12 @@ export interface InvoiceProps {
 
 export default function Invoice(props: InvoiceProps) {
   const invoice = props.invoice;
-  const webln = useWebln();
-  const [showInvoice, setShowInvoice] = useState(false);
   const { formatMessage } = useIntl();
+  const [showInvoice, setShowInvoice] = useState(false);
+  const walletState = useWallet();
+  const wallet = walletState.wallet;
 
-  const info = useMemo(() => {
-    try {
-      const parsed = invoiceDecode(invoice);
-
-      const amountSection = parsed.sections.find(a => a.name === "amount");
-      const amount = amountSection ? (amountSection.value as number) : NaN;
-
-      const timestampSection = parsed.sections.find(a => a.name === "timestamp");
-      const timestamp = timestampSection ? (timestampSection.value as number) : NaN;
-
-      const expirySection = parsed.sections.find(a => a.name === "expiry");
-      const expire = expirySection ? (expirySection.value as number) : NaN;
-      const descriptionSection = parsed.sections.find(a => a.name === "description")?.value;
-      const ret = {
-        amount: !isNaN(amount) ? amount / 1000 : 0,
-        expire: !isNaN(timestamp) && !isNaN(expire) ? timestamp + expire : null,
-        description: descriptionSection as string | undefined,
-        expired: false,
-      };
-      if (ret.expire) {
-        ret.expired = ret.expire < new Date().getTime() / 1000;
-      }
-      return ret;
-    } catch (e) {
-      console.error(e);
-    }
-  }, [invoice]);
-
+  const info = useMemo(() => decodeInvoice(invoice), [invoice]);
   const [isPaid, setIsPaid] = useState(false);
   const isExpired = info?.expired;
   const amount = info?.amount ?? 0;
@@ -71,9 +46,9 @@ export default function Invoice(props: InvoiceProps) {
 
   async function payInvoice(e: React.MouseEvent<HTMLButtonElement>) {
     e.stopPropagation();
-    if (webln?.enabled) {
+    if (wallet?.isReady) {
       try {
-        await webln.sendPayment(invoice);
+        await wallet.payInvoice(invoice);
         setIsPaid(true);
       } catch (error) {
         setShowInvoice(true);