Fix QR rerender on WebLN payment (#1181)

components/qr.js

@@ -1,7 +1,7 @@
 import QRCode from 'qrcode.react'
 import { CopyInput, InputSkeleton } from './form'
 import InvoiceStatus from './invoice-status'
-import { useEffect, useRef } from 'react'
+import { useEffect } from 'react'
 import { useWebLN } from './webln'
 import SimpleCountdown from './countdown'
 import Bolt11Info from './bolt11-info'
@@ -9,13 +9,10 @@ import Bolt11Info from './bolt11-info'
 export default function Qr ({ asIs, value, webLn, statusVariant, description, status }) {
   const qrValue = asIs ? value : 'lightning:' + value.toUpperCase()
   const provider = useWebLN()
-  // XXX antipattern ... we shouldn't be getting multiple renders
-  const sendPayment = useRef(false)
 
   useEffect(() => {
     async function effect () {
-      if (webLn && provider && !sendPayment.current) {
+      if (webLn && provider) {
-        sendPayment.current = true
         try {
           await provider.sendPayment({ bolt11: value })
         } catch (e) {

components/webln/lnbits.js

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { useWalletLogger } from '../logger'
 import { Status, migrateLocalStorage } from '.'
 import { bolt11Tags } from '@/lib/bolt11'
@@ -72,7 +72,6 @@ export function LNbitsProvider ({ children }) {
   const [status, setStatus] = useState()
   const { logger } = useWalletLogger(Wallet.LNbits)
 
-  const name = 'LNbits'
   let storageKey = 'webln:provider:lnbits'
   if (me) {
     storageKey = `${storageKey}:${me.id}`
@@ -196,7 +195,9 @@ export function LNbitsProvider ({ children }) {
     loadConfig().catch(console.error)
   }, [])
 
-  const value = { name, url, adminKey, status, saveConfig, clearConfig, getInfo, sendPayment }
+  const value = useMemo(
+    () => ({ name: 'LNbits', url, adminKey, status, saveConfig, clearConfig, getInfo, sendPayment }),
+    [url, adminKey, status, saveConfig, clearConfig, getInfo, sendPayment])
   return (
     <LNbitsContext.Provider value={value}>
       {children}

components/webln/lnc.js

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { useWalletLogger } from '../logger'
 import LNC from '@lightninglabs/lnc-web'
 import { Status, migrateLocalStorage } from '.'
@@ -191,8 +191,11 @@ export function LNCProvider ({ children }) {
     })()
   }, [me, setStatus, setConfig, logger])
 
+  const value = useMemo(
+    () => ({ name: 'lnc', status, unlock, getInfo, sendPayment, config, saveConfig, clearConfig }),
+    [status, unlock, getInfo, sendPayment, config, saveConfig, clearConfig])
   return (
-    <LNCContext.Provider value={{ name: 'lnc', status, unlock, getInfo, sendPayment, config, saveConfig, clearConfig }}>
+    <LNCContext.Provider value={value}>
       {children}
       {modal}
     </LNCContext.Provider>

components/webln/nwc.js

@@ -1,6 +1,6 @@
 // https://github.com/getAlby/js-sdk/blob/master/src/webln/NostrWeblnProvider.ts
 
-import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { Relay, finalizeEvent, nip04 } from 'nostr-tools'
 import { parseNwcUrl } from '@/lib/url'
 import { useWalletLogger } from '../logger'
@@ -20,7 +20,6 @@ export function NWCProvider ({ children }) {
   const [status, setStatus] = useState()
   const { logger } = useWalletLogger(Wallet.NWC)
 
-  const name = 'NWC'
   let storageKey = 'webln:provider:nwc'
   if (me) {
     storageKey = `${storageKey}:${me.id}`
@@ -273,7 +272,9 @@ export function NWCProvider ({ children }) {
     loadConfig().catch(err => logger.error(err.message || err.toString?.()))
   }, [])
 
-  const value = { name, nwcUrl, relayUrl, walletPubkey, secret, status, saveConfig, clearConfig, getInfo, sendPayment }
+  const value = useMemo(
+    () => ({ name: 'NWC', nwcUrl, relayUrl, walletPubkey, secret, status, saveConfig, clearConfig, getInfo, sendPayment }),
+    [nwcUrl, relayUrl, walletPubkey, secret, status, saveConfig, clearConfig, getInfo, sendPayment])
   return (
     <NWCContext.Provider value={value}>
       {children}