Expose WebLN interface via React Context

.gitignore

@@ -20,6 +20,7 @@ node_modules/
 .DS_Store
 *.pem
 /*.sql
+lnbits/
 
 # debug
 npm-debug.log*

components/banners.js

@@ -88,3 +88,20 @@ export function WalletLimitBanner () {
     </Alert>
   )
 }
+
+export function WalletSecurityBanner () {
+  return (
+    <Alert className={styles.banner} key='info' variant='warning'>
+      <Alert.Heading>
+        Wallet Security Disclaimer
+      </Alert.Heading>
+      <p className='mb-1'>
+        Your wallet's credentials are stored in the browser and never go to the server.<br />
+        However, you should definitely <strong>set a budget in your wallet</strong>.
+      </p>
+      <p>
+        Also, for the time being, you will have to reenter your credentials on other devices.
+      </p>
+    </Alert>
+  )
+}

components/form.js

@@ -961,3 +961,22 @@ export function DatePicker ({ fromName, toName, noForm, onChange, when, from, to
     />
   )
 }
+
+function Client (Component) {
+  return ({ initialValue, ...props }) => {
+    // This component can be used for Formik fields
+    // where the initial value is not available on first render.
+    // Example: value is stored in localStorage which is fetched
+    // after first render using an useEffect hook.
+    const [,, helpers] = useField(props)
+
+    useEffect(() => {
+      helpers.setValue(initialValue)
+    }, [initialValue])
+
+    return <Component {...props} />
+  }
+}
+
+export const ClientInput = Client(Input)
+export const ClientCheckbox = Client(Checkbox)

components/invoice.js

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react'
-import { useMutation, useQuery } from '@apollo/client'
+import { useApolloClient, useMutation, useQuery } from '@apollo/client'
 import { Button } from 'react-bootstrap'
 import { gql } from 'graphql-tag'
 import { numWithUnits } from '../lib/format'
@@ -12,13 +12,17 @@ import { useShowModal } from './modal'
 import Countdown from './countdown'
 import PayerData from './payer-data'
 import Bolt11Info from './bolt11-info'
+import { useWebLN } from './webln'
 
-export function Invoice ({ invoice, modal, onPayment, info, successVerb }) {
+export function Invoice ({ invoice, modal, onPayment, info, successVerb, webLn }) {
   const [expired, setExpired] = useState(new Date(invoice.expiredAt) <= new Date())
 
+  // if webLn was not passed, use true by default
+  if (webLn === undefined) webLn = true
+
   let variant = 'default'
   let status = 'waiting for you'
-  let webLn = true
+
   if (invoice.cancelled) {
     variant = 'failed'
     status = 'cancelled'
@@ -118,7 +122,7 @@ const JITInvoice = ({ invoice: { id, hash, hmac, expiresAt }, onPayment, onCance
 
   return (
     <>
-      <Invoice invoice={data.invoice} modal onPayment={onPayment} successVerb='received' />
+      <Invoice invoice={data.invoice} modal onPayment={onPayment} successVerb='received' webLn={false} />
       {retry
         ? (
           <>
@@ -161,6 +165,7 @@ export const useInvoiceable = (onSubmit, options = defaultOptions) => {
     mutation createInvoice($amount: Int!) {
       createInvoice(amount: $amount, hodlInvoice: true, expireSecs: 180) {
         id
+        bolt11
         hash
         hmac
         expiresAt
@@ -175,8 +180,13 @@ export const useInvoiceable = (onSubmit, options = defaultOptions) => {
   `)
 
   const showModal = useShowModal()
+  const provider = useWebLN()
+  const client = useApolloClient()
+  const pollInvoice = (id) => client.query({ query: INVOICE, fetchPolicy: 'no-cache', variables: { id } })
 
-  const onSubmitWrapper = useCallback(async ({ cost, ...formValues }, ...submitArgs) => {
+  const onSubmitWrapper = useCallback(async (
+    { cost, ...formValues },
+    { variables, optimisticResponse, update, ...submitArgs }) => {
     // some actions require a session
     if (!me && options.requireSession) {
       throw new Error('you must be logged in')
@@ -189,7 +199,9 @@ export const useInvoiceable = (onSubmit, options = defaultOptions) => {
     // attempt action for the first time
     if (!cost || (me && !options.forceInvoice)) {
       try {
-        return await onSubmit(formValues, ...submitArgs)
+        const insufficientFunds = me?.privates.sats < cost
+        return await onSubmit(formValues,
+          { ...submitArgs, variables, optimisticsResponse: insufficientFunds ? null : optimisticResponse })
       } catch (error) {
         if (!payOrLoginError(error) || !cost) {
           // can't handle error here - bail
@@ -205,27 +217,52 @@ export const useInvoiceable = (onSubmit, options = defaultOptions) => {
     }
     const inv = data.createInvoice
 
+    // If this is a zap, we need to manually be optimistic to have a consistent
+    // UX across custodial and WebLN zaps since WebLN zaps don't call GraphQL
+    // mutations which implement optimistic responses natively.
+    // Therefore, we check if this is a zap and then wrap the WebLN payment logic
+    // with manual cache update calls.
+    const itemId = optimisticResponse?.act?.id
+    const isZap = !!itemId
+    let _update
+    if (isZap && update) {
+      _update = () => {
+        const fragment = {
+          id: `Item:${itemId}`,
+          fragment: gql`
+          fragment ItemMeSats on Item {
+            sats
+            meSats
+          }
+        `
+        }
+        const item = client.cache.readFragment(fragment)
+        update(client.cache, { data: optimisticResponse })
+        // undo function
+        return () => client.cache.writeFragment({ ...fragment, data: item })
+      }
+    }
+
     // wait until invoice is paid or modal is closed
-    let modalClose
-    await new Promise((resolve, reject) => {
-      showModal(onClose => {
-        modalClose = onClose
-        return (
-          <JITInvoice
-            invoice={inv}
-            onPayment={resolve}
-          />
-        )
-      }, { keepOpen: true, onClose: reject })
+    const { modalOnClose, webLn, gqlCacheUpdateUndo } = await waitForPayment({
+      invoice: inv,
+      showModal,
+      provider,
+      pollInvoice,
+      gqlCacheUpdate: _update
     })
 
-    const retry = () => onSubmit({ hash: inv.hash, hmac: inv.hmac, ...formValues }, ...submitArgs)
+    const retry = () => onSubmit(
+      { hash: inv.hash, hmac: inv.hmac, ...formValues },
+      // unset update function since we already ran an cache update if we paid using WebLN
+      { ...submitArgs, variables, update: webLn ? null : undefined })
     // first retry
     try {
       const ret = await retry()
-      modalClose()
+      modalOnClose?.()
       return ret
     } catch (error) {
+      gqlCacheUpdateUndo?.()
       console.error('retry error:', error)
     }
 
@@ -245,16 +282,91 @@ export const useInvoiceable = (onSubmit, options = defaultOptions) => {
             }}
             onRetry={async () => {
               resolve(await retry())
+              onClose()
             }}
           />
         )
       }, { keepOpen: true, onClose: cancelAndReject })
     })
-  }, [onSubmit, createInvoice, !!me])
+  }, [onSubmit, provider, createInvoice, !!me])
 
   return onSubmitWrapper
 }
 
+const INVOICE_CANCELED_ERROR = 'invoice was canceled'
+const waitForPayment = async ({ invoice, showModal, provider, pollInvoice, gqlCacheUpdate }) => {
+  if (provider.enabled) {
+    try {
+      return await waitForWebLNPayment({ provider, invoice, pollInvoice, gqlCacheUpdate })
+    } catch (err) {
+      const INVOICE_CANCELED_ERROR = 'invoice was canceled'
+      // check for errors which mean that QR code will also fail
+      if (err.message === INVOICE_CANCELED_ERROR) {
+        throw err
+      }
+    }
+  }
+
+  // QR code as fallback
+  return await new Promise((resolve, reject) => {
+    showModal(onClose => {
+      return (
+        <JITInvoice
+          invoice={invoice}
+          onPayment={() => resolve({ modalOnClose: onClose })}
+        />
+      )
+    }, { keepOpen: true, onClose: reject })
+  })
+}
+
+const waitForWebLNPayment = async ({ provider, invoice, pollInvoice, gqlCacheUpdate }) => {
+  let undoUpdate
+  try {
+    // try WebLN provider first
+    return await new Promise((resolve, reject) => {
+      // be optimistic and pretend zap was already successful for consistent zapping UX
+      undoUpdate = gqlCacheUpdate?.()
+      // can't use await here since we might be paying HODL invoices
+      // and sendPaymentAsync is not supported yet.
+      // see https://www.webln.guide/building-lightning-apps/webln-reference/webln.sendpaymentasync
+      provider.sendPayment(invoice)
+        // WebLN payment will never resolve here for HODL invoices
+        // since they only get resolved after settlement which can't happen here
+        .then(() => resolve({ webLn: true, gqlCacheUpdateUndo: undoUpdate }))
+        .catch(err => {
+          clearInterval(interval)
+          reject(err)
+        })
+      const interval = setInterval(async () => {
+        try {
+          const { data, error } = await pollInvoice(invoice.id)
+          if (error) {
+            clearInterval(interval)
+            return reject(error)
+          }
+          const { invoice: inv } = data
+          if (inv.isHeld && inv.satsReceived) {
+            clearInterval(interval)
+            resolve({ webLn: true, gqlCacheUpdateUndo: undoUpdate })
+          }
+          if (inv.cancelled) {
+            clearInterval(interval)
+            reject(new Error(INVOICE_CANCELED_ERROR))
+          }
+        } catch (err) {
+          clearInterval(interval)
+          reject(err)
+        }
+      }, 1000)
+    })
+  } catch (err) {
+    undoUpdate?.()
+    console.error('WebLN payment failed:', err)
+    throw err
+  }
+}
+
 export const useInvoiceModal = (onPayment, deps) => {
   const onPaymentMemo = useCallback(onPayment, deps)
   return useInvoiceable(onPaymentMemo, { replaceModal: true })

components/item-act.js

@@ -234,9 +234,9 @@ export function useZap () {
   const strike = useLightning()
   const [act] = useAct()
 
-  const showInvoiceModal = useInvoiceModal(
-    async ({ hash, hmac }, { variables }) => {
-      await act({ variables: { ...variables, hash, hmac } })
+  const invoiceableAct = useInvoiceModal(
+    async ({ hash, hmac }, { variables, ...apolloArgs }) => {
+      await act({ variables: { ...variables, hash, hmac }, ...apolloArgs })
       strike()
     }, [act, strike])
 
@@ -254,22 +254,22 @@ export function useZap () {
     }
 
     const variables = { id: item.id, sats, act: 'TIP' }
+    const insufficientFunds = me?.privates.sats < sats
+    const optimisticResponse = { act: { path: item.path, ...variables } }
     try {
-      await zap({
-        variables,
-        optimisticResponse: {
-          act: {
-            path: item.path,
-            ...variables
-          }
-        }
-      })
+      if (!insufficientFunds) strike()
+      await zap({ variables, optimisticResponse: insufficientFunds ? null : optimisticResponse })
     } catch (error) {
       if (payOrLoginError(error)) {
         // call non-idempotent version
         const amount = sats - meSats
+        optimisticResponse.act.amount = amount
         try {
-          await showInvoiceModal({ amount }, { variables: { ...variables, sats: amount } })
+          await invoiceableAct({ amount }, {
+            variables: { ...variables, sats: amount },
+            optimisticResponse,
+            update
+          })
         } catch (error) {}
         return
       }

components/qr.js

@@ -1,20 +1,24 @@
 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'
+import { useToast } from './toast'
 
 export default function Qr ({ asIs, value, webLn, statusVariant, description, status }) {
   const qrValue = asIs ? value : 'lightning:' + value.toUpperCase()
 
+  const provider = useWebLN()
+  const toaster = useToast()
+
   useEffect(() => {
     async function effect () {
       if (webLn) {
         try {
-          const provider = await requestProvider()
           await provider.sendPayment(value)
         } catch (e) {
-          console.log(e.message)
+          console.log(e?.message)
+          toaster.danger(`${provider.name}: ${e?.message}`)
         }
       }
     }

components/upvote.js

@@ -10,7 +10,6 @@ import LongPressable from 'react-longpressable'
 import Overlay from 'react-bootstrap/Overlay'
 import Popover from 'react-bootstrap/Popover'
 import { useShowModal } from './modal'
-import { useLightning } from './lightning'
 import { numWithUnits } from '../lib/format'
 import { Dropdown } from 'react-bootstrap'
 
@@ -111,7 +110,6 @@ export default function UpVote ({ item, className }) {
 
   const [act] = useAct()
   const zap = useZap()
-  const strike = useLightning()
 
   const disabled = useMemo(() => item?.mine || item?.meForward || item?.deletedAt,
     [item?.mine, item?.meForward, item?.deletedAt])
@@ -168,8 +166,6 @@ export default function UpVote ({ item, className }) {
                   setTipShow(true)
                 }
 
-                strike()
-
                 zap({ item, me })
               }
               : () => showModal(onClose => <ItemAct onClose={onClose} itemId={item.id} act={act} />)