wip: wallet logs

* nwc only for now

components/log-message.js

@@ -0,0 +1,14 @@
+import { timeSince } from '@/lib/time'
+import styles from './log-message.module.css'
+
+export default function LogMessage ({ wallet, level, message, ts }) {
+  const levelClassName = level === 'ok' ? 'text-success' : level === 'error' ? 'text-danger' : level === 'info' ? 'text-info' : ''
+  return (
+    <div className={styles.line}>
+      <span className={styles.timestamp}>{timeSince(new Date(ts))}</span>
+      <span className='fw-bold mx-1'>[{wallet}]</span>
+      <span className={`fw-bold ${styles.level} ${levelClassName}`}>{level}</span>
+      <span>{message}</span>
+    </div>
+  )
+}

components/log-message.module.css

@@ -0,0 +1,18 @@
+.line {
+    font-family: monospace;
+    font-size: x-small;
+    color: var(--theme-grey) !important; /* .text-muted */
+}
+
+.timestamp {
+    text-align: end;
+    display: inline-block;
+    width: 25px;
+}
+
+.level {
+    text-transform: uppercase;
+    display: inline-block;
+    width: 40px;
+    margin: 0 0.25em;
+}

components/logger.js

@@ -38,7 +38,19 @@ export function detectOS () {
 
 export const LoggerContext = createContext()
 
-export function LoggerProvider ({ children }) {
+export const LoggerProvider = ({ children }) => {
+  return (
+    <ServiceWorkerLoggerProvider>
+      <WalletLoggerProvider>
+        {children}
+      </WalletLoggerProvider>
+    </ServiceWorkerLoggerProvider>
+  )
+}
+
+const ServiceWorkerLoggerContext = createContext()
+
+function ServiceWorkerLoggerProvider ({ children }) {
   const me = useMe()
   const [name, setName] = useState()
   const [os, setOS] = useState()
@@ -98,12 +110,53 @@ export function LoggerProvider ({ children }) {
   }, [logger])
 
   return (
-    <LoggerContext.Provider value={logger}>
+    <ServiceWorkerLoggerContext.Provider value={logger}>
+      {children}
+    </ServiceWorkerLoggerContext.Provider>
+  )
+}
+
+export function useServiceWorkerLogger () {
+  return useContext(ServiceWorkerLoggerContext)
+}
+
+const WalletLoggerContext = createContext()
+
+const WalletLoggerProvider = ({ children }) => {
+  // TODO: persist logs in local storage
+  // limit to last 24h?
+  const [logs, setLogs] = useState([])
+
+  const appendLog = useCallback((wallet, level, message) => {
+    setLogs((prevLogs) => [...prevLogs, { wallet, level, message, ts: +new Date() }])
+  }, [setLogs])
+
+  return (
+    <WalletLoggerContext.Provider value={{ logs, appendLog }}>
       {children}
-    </LoggerContext.Provider>
+    </WalletLoggerContext.Provider>
   )
 }
 
-export function useLogger () {
-  return useContext(LoggerContext)
+export function useWalletLogger (wallet) {
+  const { logs, appendLog: _appendLog } = useContext(WalletLoggerContext)
+
+  const log = useCallback(level => message => {
+    // TODO:
+    //   also send this to us if diagnostics was enabled,
+    //   very similar to how the service worker logger works.
+    _appendLog(wallet, level, message)
+    console[level !== 'error' ? 'info' : 'error'](`[${wallet}]`, message)
+  }, [_appendLog, wallet])
+
+  const logger = useMemo(() => ({
+    ok: (...message) => log('ok')(message.join(' ')),
+    info: (...message) => log('info')(message.join(' ')),
+    error: (...message) => log('error')(message.join(' '))
+  }), [log, wallet])
+
+  return {
+    logs: logs.filter(log => !wallet || log.wallet === wallet),
+    ...logger
+  }
 }

components/serviceworker.js

@@ -1,7 +1,7 @@
 import { createContext, useContext, useEffect, useState, useCallback, useMemo } from 'react'
 import { Workbox } from 'workbox-window'
 import { gql, useMutation } from '@apollo/client'
-import { detectOS, useLogger } from './logger'
+import { detectOS, useServiceWorkerLogger } from './logger'
 
 const applicationServerKey = process.env.NEXT_PUBLIC_VAPID_PUBKEY
 
@@ -44,7 +44,7 @@ export const ServiceWorkerProvider = ({ children }) => {
           }
         }
       `)
-  const logger = useLogger()
+  const logger = useServiceWorkerLogger()
 
   // I am not entirely sure if this is needed since at least in Brave,
   // using `registration.pushManager.subscribe` also prompts the user.