Add LNbits logs

components/wallet-logs.js

@@ -18,7 +18,7 @@ const FollowCheckbox = ({ value, ...props }) => {
   )
 }
 
-export default function WalletLogs ({ embedded }) {
+export default function WalletLogs ({ wallet, embedded }) {
   const { logs } = useWalletLogger()
 
   const router = useRouter()
@@ -69,7 +69,9 @@ export default function WalletLogs ({ embedded }) {
         <table>
           <tbody>
             <tr><td colSpan='4' className='text-center'>------ start of logs ------</td></tr>
-            {logs.map((log, i) => <LogMessage key={i} {...log} />)}
+            {logs
+              .filter(l => !wallet || l.wallet === wallet)
+              .map((log, i) => <LogMessage key={i} {...log} />)}
             <tr><td colSpan='4' ref={tableEndRef} /></tr>
           </tbody>
         </table>

components/webln/lnbits.js

@@ -1,4 +1,6 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import { useWalletLogger } from '../logger'
+import lnpr from 'bolt11'
 
 // Reference: https://github.com/getAlby/bitcoin-connect/blob/v3.2.0-alpha/src/connectors/LnbitsConnector.ts
 
@@ -65,6 +67,7 @@ export function LNbitsProvider ({ children }) {
   const [adminKey, setAdminKey] = useState('')
   const [enabled, setEnabled] = useState()
   const [initialized, setInitialized] = useState(false)
+  const logger = useWalletLogger('lnbits')
 
   const name = 'LNbits'
   const storageKey = 'webln:provider:lnbits'
@@ -87,19 +90,31 @@ export function LNbitsProvider ({ children }) {
   }, [url, adminKey])
 
   const sendPayment = useCallback(async (bolt11) => {
-    const response = await postPayment(url, adminKey, bolt11)
-    const checkResponse = await getPayment(url, adminKey, response.payment_hash)
-    if (!checkResponse.preimage) {
-      throw new Error('No preimage')
+    const inv = lnpr.decode(bolt11)
+    const hash = inv.tagsObject.payment_hash
+    // use short hash for logging to prevent x-overflow
+    const shortHash = `${hash.slice(0, 8)}..${hash.slice(-8)}`
+    logger.info('sending payment:', shortHash)
+    try {
+      const response = await postPayment(url, adminKey, bolt11)
+      const checkResponse = await getPayment(url, adminKey, response.payment_hash)
+      if (!checkResponse.preimage) {
+        throw new Error('No preimage')
+      }
+      logger.ok('payment successful:', shortHash)
+      return { preimage: checkResponse.preimage }
+    } catch (err) {
+      logger.error('payment failed:', shortHash, err.message)
+      throw err
     }
-    return { preimage: checkResponse.preimage }
-  }, [url, adminKey])
+  }, [logger, url, adminKey])
 
   const loadConfig = useCallback(async () => {
     const configStr = window.localStorage.getItem(storageKey)
     if (!configStr) {
       setEnabled(undefined)
       setInitialized(true)
+      logger.info('no existing config found')
       return
     }
 
@@ -109,18 +124,27 @@ export function LNbitsProvider ({ children }) {
     setUrl(url)
     setAdminKey(adminKey)
 
+    logger.info(
+      'loaded wallet config: ' +
+      'adminKey=****** ' +
+      `url=${url}`)
+
     try {
       // validate config by trying to fetch wallet
+      logger.info('trying to fetch wallet')
       await getWallet(url, adminKey)
+      logger.ok('wallet found')
       setEnabled(true)
+      logger.ok('wallet enabled')
     } catch (err) {
-      console.error('invalid LNbits config:', err)
+      logger.error('invalid config:', err)
       setEnabled(false)
+      logger.info('wallet disabled')
       throw err
     } finally {
       setInitialized(true)
     }
-  }, [])
+  }, [logger])
 
   const saveConfig = useCallback(async (config) => {
     // immediately store config so it's not lost even if config is invalid
@@ -132,15 +156,24 @@ export function LNbitsProvider ({ children }) {
     //   https://thenewstack.io/leveraging-web-workers-to-safely-store-access-tokens/
     window.localStorage.setItem(storageKey, JSON.stringify(config))
 
+    logger.info(
+      'saved wallet config: ' +
+      'adminKey=****** ' +
+      `url=${config.url}`)
+
     try {
       // validate config by trying to fetch wallet
+      logger.info('trying to fetch wallet')
       await getWallet(config.url, config.adminKey)
+      logger.ok('wallet found')
     } catch (err) {
-      console.error('invalid LNbits config:', err)
+      logger.error('invalid LNbits config:', err)
       setEnabled(false)
+      logger.info('wallet disabled')
       throw err
     }
     setEnabled(true)
+    logger.ok('wallet enabled')
   }, [])
 
   const clearConfig = useCallback(() => {

components/webln/nwc.js

@@ -60,8 +60,7 @@ export function NWCProvider ({ children }) {
       'loaded wallet config: ' +
       'secret=****** ' +
       `pubkey=${params.walletPubkey.slice(0, 6)}..${params.walletPubkey.slice(-6)} ` +
-      `relay=${params.relayUrl}`
-    )
+      `relay=${params.relayUrl}`)
 
     try {
       logger.info(`requesting info event from ${params.relayUrl}`)

pages/settings/wallets/lnbits.js

@@ -8,6 +8,7 @@ import { useRouter } from 'next/router'
 import { useLNbits } from '@/components/webln/lnbits'
 import { WalletSecurityBanner } from '@/components/banners'
 import { useWebLNConfigurator } from '@/components/webln'
+import WalletLogs from '@/components/wallet-logs'
 
 export const getServerSideProps = getGetServerSideProps({ authRequired: true })
 
@@ -76,6 +77,9 @@ export default function LNbits () {
           }}
         />
       </Form>
+      <div className='mt-3'>
+        <WalletLogs wallet='lnbits' embedded />
+      </div>
     </CenterLayout>
   )
 }

pages/settings/wallets/nwc.js

@@ -70,7 +70,7 @@ export default function NWC () {
         />
       </Form>
       <div className='mt-3'>
-        <WalletLogs embedded />
+        <WalletLogs wallet='nwc' embedded />
       </div>
     </CenterLayout>
   )