feat: add useSendLightning() hook

packages/react/lib/hooks/index.ts

@@ -2,5 +2,12 @@ import { useBalance } from './useBalance'
 import { useOpenWallet } from './useOpenWallet'
 import { useFedimintWallet } from './useFedimintWallet'
 import { useReceiveLightning } from './useReceiveLightning'
+import { useSendLightning } from './useSendLightning'
 
-export { useBalance, useOpenWallet, useFedimintWallet, useReceiveLightning }
+export {
+  useBalance,
+  useOpenWallet,
+  useFedimintWallet,
+  useReceiveLightning,
+  useSendLightning,
+}

packages/react/lib/hooks/useSendLightning.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useFedimintWallet, useOpenWallet } from '.'
+import {
+  type LnPayState,
+  type OutgoingLightningPayment,
+} from '@fedimint/core-web'
+
+export const useSendLightning = () => {
+  const wallet = useFedimintWallet()
+  const { walletStatus } = useOpenWallet()
+  const [payment, setPayment] = useState<OutgoingLightningPayment>()
+  const [paymentState, setPaymentState] = useState<LnPayState>()
+  const [error, setError] = useState<string>()
+
+  const payInvoice = useCallback(
+    async (bolt11: string) => {
+      if (walletStatus !== 'open') throw new Error('Wallet is not open')
+      const response = await wallet.lightning.payInvoice(bolt11)
+      setPayment(response)
+      return response
+    },
+    [wallet, walletStatus],
+  )
+
+  useEffect(() => {
+    if (walletStatus !== 'open' || !payment) return
+    const unsubscribe = wallet.lightning.subscribeLnPay(
+      // @ts-ignore
+      payment.payment_type.lightning,
+      (state) => {
+        setPaymentState(state)
+      },
+      (error) => {
+        setError(error)
+      },
+    )
+
+    return () => {
+      unsubscribe()
+    }
+  }, [walletStatus, payment])
+
+  return {
+    payInvoice,
+    payment,
+    paymentStatus: paymentState,
+    paymentError: error,
+  }
+}

packages/react/src/components/HooksDemo.tsx

@@ -1,15 +1,23 @@
-import React from 'react'
-import { useBalance, useReceiveLightning, useOpenWallet } from '../../lib'
+import React, { useState } from 'react'
+import {
+  useBalance,
+  useReceiveLightning,
+  useOpenWallet,
+  useSendLightning,
+} from '../../lib'
 
 const TEST_FEDERATION_INVITE =
   'fed11qgqzc2nhwden5te0vejkg6tdd9h8gepwvejkg6tdd9h8garhduhx6at5d9h8jmn9wshxxmmd9uqqzgxg6s3evnr6m9zdxr6hxkdkukexpcs3mn7mj3g5pc5dfh63l4tj6g9zk4er'
 
 function HooksDemo() {
   const balance = useBalance()
   const { walletStatus, openWallet, joinFederation } = useOpenWallet()
+  const [bolt11Input, setBolt11Input] = useState<string>()
   const isOpen = walletStatus === 'open'
   const { generateInvoice, bolt11, invoiceStatus, error } =
     useReceiveLightning()
+  const { payInvoice, payment, paymentStatus, paymentError } =
+    useSendLightning()
 
   return (
     <>
@@ -75,6 +83,44 @@ function HooksDemo() {
           <b>error:</b>
           <p>{error}</p>
         </div>
+        <div className="section">
+          <b>useSendLightning()</b>
+          <div className="row">
+            <b>bolt11:</b>
+            <input
+              type="text"
+              value={bolt11Input}
+              onChange={(e) => setBolt11Input(e.target.value)}
+            />
+          </div>
+          <div className="row">
+            <b>payInvoice(bolt11)</b>
+            <button
+              disabled={!isOpen || !bolt11Input}
+              onClick={() => bolt11Input && payInvoice(bolt11Input)}
+            >
+              Pay Invoice
+            </button>
+          </div>
+          <div className="row">
+            <b>payment:</b>
+            <p>{payment ? JSON.stringify(payment) : 'no payment'}</p>
+          </div>
+          <div className="row">
+            <b>paymentStatus:</b>
+            <p>
+              {typeof paymentStatus === 'string'
+                ? paymentStatus
+                : typeof paymentStatus === 'object'
+                  ? Object.keys(paymentStatus)[0]
+                  : 'no payment status'}
+            </p>
+          </div>
+          <div className="row">
+            <b>paymentError:</b>
+            <p>{paymentError}</p>
+          </div>
+        </div>
       </div>
     </>
   )