import LogMessage from './log-message' import { useCallback, useEffect, useMemo, useState } from 'react' import styles from '@/styles/log.module.css' import { Button } from 'react-bootstrap' import { useToast } from './toast' import { useShowModal } from './modal' import { WALLET_LOGS } from '@/fragments/wallet' import { getWalletByType } from 'wallets' import { gql, useLazyQuery, useMutation } from '@apollo/client' import { useMe } from './me' import useIndexedDB from './use-indexeddb' import { SSR } from '@/lib/constants' export function WalletLogs ({ wallet, embedded }) { const { logs, setLogs, hasMore, loadMore, loading } = useWalletLogs(wallet) const showModal = useShowModal() return ( <>
{ showModal(onClose => ) }} >clear logs
{logs.map((log, i) => ( ))}
{loading ?
loading...
: logs.length === 0 &&
empty
} {hasMore ? :
------ start of logs ------
}
) } function DeleteWalletLogsObstacle ({ wallet, setLogs, onClose }) { const { deleteLogs } = useWalletLogger(wallet, setLogs) const toaster = useToast() const prompt = `Do you really want to delete all ${wallet ? '' : 'wallet'} logs ${wallet ? 'of this wallet' : ''}?` return (
{prompt}
cancel
) } const INDICES = [ { name: 'ts', keyPath: 'ts' }, { name: 'wallet_ts', keyPath: ['wallet', 'ts'] } ] function useWalletLogDB () { const { me } = useMe() const dbName = `app:storage${me ? `:${me.id}` : ''}` const idbStoreName = 'wallet_logs' const { add, getPage, clear, error, notSupported } = useIndexedDB(dbName, idbStoreName, 1, INDICES) return { add, getPage, clear, error, notSupported } } export function useWalletLogger (wallet, setLogs) { const { add, clear, notSupported } = useWalletLogDB() const appendLog = useCallback(async (wallet, level, message) => { const log = { wallet: tag(wallet), level, message, ts: +new Date() } try { if (notSupported) { console.log('cannot persist wallet log: indexeddb not supported') } else { await add(log) } setLogs?.(prevLogs => [log, ...prevLogs]) } catch (error) { console.error('Failed to append wallet log:', error) } }, [add, notSupported]) const [deleteServerWalletLogs] = useMutation( gql` mutation deleteWalletLogs($wallet: String) { deleteWalletLogs(wallet: $wallet) } `, { onCompleted: (_, { variables: { wallet: walletType } }) => { setLogs?.(logs => logs.filter(l => walletType ? l.wallet !== getWalletByType(walletType).name : false)) } } ) const deleteLogs = useCallback(async (wallet, options) => { if ((!wallet || wallet.walletType) && !options?.clientOnly) { await deleteServerWalletLogs({ variables: { wallet: wallet?.walletType } }) } if (!wallet || wallet.sendPayment) { try { const walletTag = wallet ? tag(wallet) : null if (notSupported) { console.log('cannot clear wallet logs: indexeddb not supported') } else { await clear('wallet_ts', walletTag ? window.IDBKeyRange.bound([walletTag, 0], [walletTag, Infinity]) : null) } setLogs?.(logs => logs.filter(l => wallet ? l.wallet !== tag(wallet) : false)) } catch (e) { console.error('failed to delete logs', e) } } }, [clear, deleteServerWalletLogs, setLogs, notSupported]) const log = useCallback(level => message => { if (!wallet) { console.error('cannot log: no wallet set') return } appendLog(wallet, level, message) console[level !== 'error' ? 'info' : 'error'](`[${tag(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?.name]) return { logger, deleteLogs } } function tag (wallet) { return wallet?.shortName || wallet?.name } export function useWalletLogs (wallet, initialPage = 1, logsPerPage = 10) { const [logs, setLogs] = useState([]) const [page, setPage] = useState(initialPage) const [hasMore, setHasMore] = useState(true) const [total, setTotal] = useState(0) const [cursor, setCursor] = useState(null) const [loading, setLoading] = useState(true) const { getPage, error, notSupported } = useWalletLogDB() const [getWalletLogs] = useLazyQuery(WALLET_LOGS, SSR ? {} : { fetchPolicy: 'cache-and-network' }) const loadLogsPage = useCallback(async (page, pageSize, wallet) => { try { let result = { data: [], hasMore: false } if (notSupported) { console.log('cannot get client wallet logs: indexeddb not supported') } else { const indexName = wallet ? 'wallet_ts' : 'ts' const query = wallet ? window.IDBKeyRange.bound([tag(wallet), -Infinity], [tag(wallet), Infinity]) : null result = await getPage(page, pageSize, indexName, query, 'prev') // no walletType means we're using the local IDB if (wallet && !wallet.walletType) { return result } } const { data } = await getWalletLogs({ variables: { type: wallet?.walletType, // if it client logs has more, page based on it's range from: result?.data[result.data.length - 1]?.ts && result.hasMore ? String(result.data[result.data.length - 1].ts) : null, // if we have a cursor (this isn't the first page), page based on it's range to: result?.data[0]?.ts && cursor ? String(result.data[0].ts) : null, cursor } }) const newLogs = data.walletLogs.entries.map(({ createdAt, wallet: walletType, ...log }) => ({ ts: +new Date(createdAt), wallet: tag(getWalletByType(walletType)), ...log })) const combinedLogs = Array.from(new Set([...result.data, ...newLogs].map(JSON.stringify))).map(JSON.parse).sort((a, b) => b.ts - a.ts) setCursor(data.walletLogs.cursor) return { ...result, data: combinedLogs, hasMore: result.hasMore || !!data.walletLogs.cursor } } catch (error) { console.error('Error loading logs from IndexedDB:', error) return { data: [], total: 0, hasMore: false } } }, [getPage, setCursor, cursor, notSupported]) if (error) { console.error('IndexedDB error:', error) } const loadMore = useCallback(async () => { if (hasMore) { setLoading(true) const result = await loadLogsPage(page, logsPerPage, wallet) setLogs(prevLogs => [...prevLogs, ...result.data]) setHasMore(result.hasMore) setTotal(result.total) setPage(prevPage => prevPage + 1) setLoading(false) } }, [loadLogsPage, page, logsPerPage, wallet, hasMore]) const loadLogs = useCallback(async () => { setLoading(true) const result = await loadLogsPage(1, logsPerPage, wallet) setLogs(result.data) setHasMore(result.hasMore) setTotal(result.total) setPage(1) setLoading(false) }, [wallet, loadLogsPage]) useEffect(() => { loadLogs() }, [wallet]) return { logs, hasMore, total, loadMore, loadLogs, setLogs, loading } }