pay inline invoices with webln if enabled

src/Element/Invoice.tsx

@@ -5,12 +5,14 @@ import { decode as invoiceDecode } from "light-bolt11-decoder";
 import { useMemo } from "react";
 import NoteTime from "Element/NoteTime";
 import LNURLTip from "Element/LNURLTip";
+import useWebln from "Hooks/useWebln";
 
 export interface InvoiceProps {
     invoice: string
 }
 export default function Invoice(props: InvoiceProps) {
     const invoice = props.invoice;
+    const webln = useWebln();
     const [showInvoice, setShowInvoice] = useState(false);
 
     const info = useMemo(() => {
@@ -55,6 +57,19 @@ export default function Invoice(props: InvoiceProps) {
         }
     }
 
+    function payInvoice(e: any) {
+      e.stopPropagation();
+      if (webln?.enabled) {
+        try {
+          webln.sendPayment(invoice);
+        } catch (error) {
+          setShowInvoice(true);
+        }
+      } else {
+        setShowInvoice(true);
+      }
+    }
+
     return (
         <>
             <div className="note-invoice flex">
@@ -63,7 +78,11 @@ export default function Invoice(props: InvoiceProps) {
                     {info?.expire ? <small>{info?.expired ? "Expired" : "Expires"} <NoteTime from={info.expire * 1000} /></small> : null}
                 </div>
 
-                {info?.expired ? <div className="btn">Expired</div> : <div className="btn" onClick={(e) => { e.stopPropagation(); setShowInvoice(true); }}>Pay</div>}
+                {info?.expired ? <div className="btn">Expired</div> : (
+                  <div className="btn" onClick={payInvoice}>
+                    Pay
+                  </div>
+                )}
             </div>
 
         </>

src/Element/LNURLTip.tsx

@@ -4,30 +4,7 @@ import { bech32ToText } from "Util";
 import Modal from "Element/Modal";
 import QrCode from "Element/QrCode";
 import Copy from "Element/Copy";
-
+import useWebln from "Hooks/useWebln";
-const useWebLn = (enable = true) => {
-  const maybeWebLn = "webln" in window ? window.webln : null
-
-  useEffect(() => {
-    if (maybeWebLn && !maybeWebLn.enabled && enable) {
-      maybeWebLn.enable().catch((error) => {
-        console.debug("Couldn't enable WebLN")
-      })
-    }
-  }, [maybeWebLn, enable])
-
-  return maybeWebLn
-}
-
-declare global {
-    interface Window {
-        webln?: {
-            enabled: boolean,
-            enable: () => Promise<void>,
-            sendPayment: (pr: string) => Promise<any>
-        }
-    }
-}
 
 interface LNURLService {
     minSendable?: number,
@@ -68,7 +45,7 @@ export default function LNURLTip(props: LNURLTipProps) {
     const [comment, setComment] = useState<string>();
     const [error, setError] = useState<string>();
     const [success, setSuccess] = useState<LNURLSuccessAction>();
-    const webln = useWebLn(show);
+    const webln = useWebln(show);
 
     useEffect(() => {
         if (show && !props.invoice) {

src/Hooks/useWebln.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+declare global {
+    interface Window {
+        webln?: {
+            enabled: boolean,
+            enable: () => Promise<void>,
+            sendPayment: (pr: string) => Promise<any>
+        }
+    }
+}
+
+export default function useWebln(enable = true) {
+  const maybeWebLn = "webln" in window ? window.webln : null
+
+  useEffect(() => {
+    if (maybeWebLn && !maybeWebLn.enabled && enable) {
+      maybeWebLn.enable().catch((error) => {
+        console.debug("Couldn't enable WebLN")
+      })
+    }
+  }, [maybeWebLn, enable])
+
+  return maybeWebLn
+}