Use bitcoin-connect for self-custodial zaps

components/qr.js

@@ -1,18 +1,23 @@
 import QRCode from 'qrcode.react'
 import { CopyInput, InputSkeleton } from './form'
 import InvoiceStatus from './invoice-status'
-import { requestProvider } from 'webln'
 import { useEffect } from 'react'
+import { useWebLN } from './webln'
 
 export default function Qr ({ asIs, value, webLn, statusVariant, description, status }) {
   const qrValue = asIs ? value : 'lightning:' + value.toUpperCase()
+  const { provider } = useWebLN()
 
   useEffect(() => {
     async function effect () {
       if (webLn) {
         try {
-          const provider = await requestProvider()
-          await provider.sendPayment(value)
+          if (provider) {
+            // TODO in strict mode, this tries to pay the invoice twice
+            //   so an error is logged to the console for the second attempt.
+            //   but the payment still succeeds. (only tested with LNbits so far)
+            await provider.sendPayment(value)
+          }
         } catch (e) {
           console.log(e.message)
         }

components/webln.js

@@ -0,0 +1,59 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+const WebLNContext = createContext({})
+
+export function WebLNProvider ({ children }) {
+  const [provider, setProvider] = useState(null)
+  const [info, setInfo] = useState(null)
+  // NOTE these functions are undefined initially - can this be a problem?
+  const [launchModal, setLaunchModal] = useState()
+  const [launchPaymentModal, setLaunchPaymentModal] = useState()
+  const [closeModal, setCloseModal] = useState()
+  const [isConnected, setIsConnected] = useState()
+
+  useEffect(() => {
+    const unsub = []
+    async function effect () {
+      const [isConnected, onConnected, onDisconnected, requestProvider, launchModal, launchPaymentModal, closeModal] = await import('@getalby/bitcoin-connect-react').then(
+        (mod) => [mod.isConnected, mod.onConnected, mod.onDisconnected, mod.requestProvider, mod.launchModal, mod.launchPaymentModal, mod.closeModal]
+      )
+
+      // if you want to store a function, you need to wrap it with another function because of updater functions
+      // see https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state
+      setLaunchModal(() => launchModal)
+      setLaunchPaymentModal(() => launchPaymentModal)
+      setCloseModal(() => closeModal)
+      setIsConnected(() => isConnected)
+
+      if (isConnected()) {
+        // requestProvider will not launch a modal because a provider is already available.
+        // TODO but it might for wallets that must be unlocked?
+        const provider = await requestProvider()
+        setProvider(provider)
+      }
+      unsub.push(onConnected(async (provider) => {
+        setProvider(provider)
+        const info = await provider.getInfo()
+        setInfo(info)
+      }))
+      unsub.push(onDisconnected(() => {
+        setProvider(null)
+        setInfo(null)
+      }))
+    }
+    effect()
+
+    return () => unsub.forEach(fn => fn())
+  }, [setProvider])
+
+  const value = { provider, info, launchModal, launchPaymentModal, closeModal, isConnected }
+  return (
+    <WebLNContext.Provider value={value}>
+      {children}
+    </WebLNContext.Provider>
+  )
+}
+
+export function useWebLN () {
+  return useContext(WebLNContext)
+}