diff --git a/src/Element/Invoice.tsx b/src/Element/Invoice.tsx
index 7f90d1cd..ffeae1f4 100644
--- a/src/Element/Invoice.tsx
+++ b/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 (
<>
@@ -63,7 +78,11 @@ export default function Invoice(props: InvoiceProps) {
{info?.expire ? {info?.expired ? "Expired" : "Expires"} : null}
- {info?.expired ? Expired
: { e.stopPropagation(); setShowInvoice(true); }}>Pay
}
+ {info?.expired ? Expired
: (
+
+ Pay
+
+ )}
>
diff --git a/src/Element/LNURLTip.tsx b/src/Element/LNURLTip.tsx
index 9d197644..3770e405 100644
--- a/src/Element/LNURLTip.tsx
+++ b/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";
-
-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,
- sendPayment: (pr: string) => Promise
- }
- }
-}
+import useWebln from "Hooks/useWebln";
interface LNURLService {
minSendable?: number,
@@ -68,7 +45,7 @@ export default function LNURLTip(props: LNURLTipProps) {
const [comment, setComment] = useState();
const [error, setError] = useState();
const [success, setSuccess] = useState();
- const webln = useWebLn(show);
+ const webln = useWebln(show);
useEffect(() => {
if (show && !props.invoice) {
diff --git a/src/Hooks/useWebln.ts b/src/Hooks/useWebln.ts
new file mode 100644
index 00000000..f348092c
--- /dev/null
+++ b/src/Hooks/useWebln.ts
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+declare global {
+ interface Window {
+ webln?: {
+ enabled: boolean,
+ enable: () => Promise,
+ sendPayment: (pr: string) => Promise
+ }
+ }
+}
+
+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
+}