Fix import error
This commit is contained in:
ekzyis
parent
5f047cbfc9
commit
a1b343ac89
|
|
@ -1,11 +1,6 @@
|
|||
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
|
||||
import { useMe } from './me'
|
||||
import fancyNames from '@/lib/fancy-names.json'
|
||||
import { gql, useMutation, useQuery } from '@apollo/client'
|
||||
import { WALLET_LOGS } from '@/fragments/wallet'
|
||||
import { getWalletBy } from '@/lib/constants'
|
||||
// TODO: why can't I import this without errors?
|
||||
// import { getWalletByName } from './wallet'
|
||||
|
||||
const generateFancyName = () => {
|
||||
// 100 adjectives * 100 nouns * 10000 = 100M possible names
|
||||
|
|
@ -46,9 +41,7 @@ export const LoggerContext = createContext()
|
|||
export const LoggerProvider = ({ children }) => {
|
||||
return (
|
||||
<ServiceWorkerLoggerProvider>
|
||||
<WalletLoggerProvider>
|
||||
{children}
|
||||
</WalletLoggerProvider>
|
||||
{children}
|
||||
</ServiceWorkerLoggerProvider>
|
||||
)
|
||||
}
|
||||
|
|
@ -124,191 +117,3 @@ function ServiceWorkerLoggerProvider ({ children }) {
|
|||
export function useServiceWorkerLogger () {
|
||||
return useContext(ServiceWorkerLoggerContext)
|
||||
}
|
||||
|
||||
const WalletLoggerContext = createContext()
|
||||
const WalletLogsContext = createContext()
|
||||
|
||||
const initIndexedDB = async (dbName, storeName) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!window.indexedDB) {
|
||||
return reject(new Error('IndexedDB not supported'))
|
||||
}
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
|
||||
const request = window.indexedDB.open(dbName, 1)
|
||||
|
||||
let db
|
||||
request.onupgradeneeded = () => {
|
||||
// this only runs if version was changed during open
|
||||
db = request.result
|
||||
if (!db.objectStoreNames.contains(storeName)) {
|
||||
const objectStore = db.createObjectStore(storeName, { autoIncrement: true })
|
||||
objectStore.createIndex('ts', 'ts')
|
||||
objectStore.createIndex('wallet_ts', ['wallet', 'ts'])
|
||||
}
|
||||
}
|
||||
|
||||
request.onsuccess = () => {
|
||||
// this gets called after onupgradeneeded finished
|
||||
db = request.result
|
||||
resolve(db)
|
||||
}
|
||||
|
||||
request.onerror = () => {
|
||||
reject(new Error('failed to open IndexedDB'))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const WalletLoggerProvider = ({ children }) => {
|
||||
const me = useMe()
|
||||
const [logs, setLogs] = useState([])
|
||||
let dbName = 'app:storage'
|
||||
if (me) {
|
||||
dbName = `${dbName}:${me.id}`
|
||||
}
|
||||
const idbStoreName = 'wallet_logs'
|
||||
const idb = useRef()
|
||||
const logQueue = useRef([])
|
||||
|
||||
useQuery(WALLET_LOGS, {
|
||||
fetchPolicy: 'network-only',
|
||||
// required to trigger onCompleted on refetches
|
||||
notifyOnNetworkStatusChange: true,
|
||||
onCompleted: ({ walletLogs }) => {
|
||||
setLogs((prevLogs) => {
|
||||
const existingIds = prevLogs.map(({ id }) => id)
|
||||
const logs = walletLogs
|
||||
.filter(({ id }) => !existingIds.includes(id))
|
||||
.map(({ createdAt, wallet: walletType, ...log }) => {
|
||||
return {
|
||||
ts: +new Date(createdAt),
|
||||
wallet: getWalletBy('type', walletType).logTag,
|
||||
...log
|
||||
}
|
||||
})
|
||||
return [...prevLogs, ...logs].sort((a, b) => a.ts - b.ts)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const [deleteServerWalletLogs] = useMutation(
|
||||
gql`
|
||||
mutation deleteWalletLogs($wallet: String) {
|
||||
deleteWalletLogs(wallet: $wallet)
|
||||
}
|
||||
`,
|
||||
{
|
||||
onCompleted: (_, { variables: { wallet: walletType } }) => {
|
||||
setLogs((logs) => {
|
||||
return logs.filter(l => walletType ? l.wallet !== getWalletBy('type', walletType).logTag : false)
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const saveLog = useCallback((log) => {
|
||||
if (!idb.current) {
|
||||
// IDB may not be ready yet
|
||||
return logQueue.current.push(log)
|
||||
}
|
||||
const tx = idb.current.transaction(idbStoreName, 'readwrite')
|
||||
const request = tx.objectStore(idbStoreName).add(log)
|
||||
request.onerror = () => console.error('failed to save log:', log)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
initIndexedDB(dbName, idbStoreName)
|
||||
.then(db => {
|
||||
idb.current = db
|
||||
|
||||
// load all logs from IDB
|
||||
const tx = idb.current.transaction(idbStoreName, 'readonly')
|
||||
const store = tx.objectStore(idbStoreName)
|
||||
const index = store.index('ts')
|
||||
const request = index.getAll()
|
||||
request.onsuccess = () => {
|
||||
const logs = request.result
|
||||
setLogs((prevLogs) => {
|
||||
// sort oldest first to keep same order as logs are appended
|
||||
return [...prevLogs, ...logs].sort((a, b) => a.ts - b.ts)
|
||||
})
|
||||
}
|
||||
|
||||
// flush queued logs to IDB
|
||||
logQueue.current.forEach(q => {
|
||||
const isLog = !!q.wallet
|
||||
if (isLog) saveLog(q)
|
||||
})
|
||||
|
||||
logQueue.current = []
|
||||
})
|
||||
.catch(console.error)
|
||||
return () => idb.current?.close()
|
||||
}, [])
|
||||
|
||||
const appendLog = useCallback((walletName, level, message) => {
|
||||
const log = { wallet: walletName, level, message, ts: +new Date() }
|
||||
saveLog(log)
|
||||
setLogs((prevLogs) => [...prevLogs, log])
|
||||
}, [saveLog])
|
||||
|
||||
const deleteLogs = useCallback(async (walletName) => {
|
||||
const wallet = getWalletByName(walletName, me)
|
||||
|
||||
if (!walletName || wallet.server) {
|
||||
await deleteServerWalletLogs({ variables: { wallet: wallet?.type } })
|
||||
}
|
||||
if (!walletName || !wallet.server) {
|
||||
const tx = idb.current.transaction(idbStoreName, 'readwrite')
|
||||
const objectStore = tx.objectStore(idbStoreName)
|
||||
const idx = objectStore.index('wallet_ts')
|
||||
const request = walletName ? idx.openCursor(window.IDBKeyRange.bound([walletName, -Infinity], [walletName, Infinity])) : idx.openCursor()
|
||||
request.onsuccess = function (event) {
|
||||
const cursor = event.target.result
|
||||
if (cursor) {
|
||||
cursor.delete()
|
||||
cursor.continue()
|
||||
} else {
|
||||
// finished
|
||||
setLogs((logs) => logs.filter(l => walletName ? l.wallet !== walletName : false))
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [me, setLogs])
|
||||
|
||||
return (
|
||||
<WalletLogsContext.Provider value={logs}>
|
||||
<WalletLoggerContext.Provider value={{ appendLog, deleteLogs }}>
|
||||
{children}
|
||||
</WalletLoggerContext.Provider>
|
||||
</WalletLogsContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useWalletLogger (walletName) {
|
||||
const { appendLog, deleteLogs: innerDeleteLogs } = 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(walletName, level, message)
|
||||
console[level !== 'error' ? 'info' : 'error'](`[${walletName}]`, message)
|
||||
}, [appendLog, walletName])
|
||||
|
||||
const logger = useMemo(() => ({
|
||||
ok: (...message) => log('ok')(message.join(' ')),
|
||||
info: (...message) => log('info')(message.join(' ')),
|
||||
error: (...message) => log('error')(message.join(' '))
|
||||
}), [log, walletName])
|
||||
|
||||
const deleteLogs = useCallback((w) => innerDeleteLogs(w || walletName), [innerDeleteLogs, walletName])
|
||||
|
||||
return { logger, deleteLogs }
|
||||
}
|
||||
|
||||
export function useWalletLogs (walletName) {
|
||||
const logs = useContext(WalletLogsContext)
|
||||
return logs.filter(l => !walletName || l.wallet === walletName)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,8 +22,7 @@ import SearchIcon from '../../svgs/search-line.svg'
|
|||
import classNames from 'classnames'
|
||||
import SnIcon from '@/svgs/sn.svg'
|
||||
import { useHasNewNotes } from '../use-has-new-notes'
|
||||
import { useWalletLogger } from '@/components/logger'
|
||||
// import { useWallet } from '@/components/wallet'
|
||||
import { useWalletLogger } from '@/components/wallet-logger'
|
||||
|
||||
export function Brand ({ className }) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,314 @@
|
|||
import { useRouter } from 'next/router'
|
||||
import LogMessage from './log-message'
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { Checkbox, Form } from './form'
|
||||
import { useField } from 'formik'
|
||||
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 { getWalletByName } from './wallet'
|
||||
import { gql, useMutation, useQuery } from '@apollo/client'
|
||||
import { useMe } from './me'
|
||||
|
||||
const FollowCheckbox = ({ value, ...props }) => {
|
||||
const [,, helpers] = useField(props.name)
|
||||
|
||||
useEffect(() => {
|
||||
helpers.setValue(value)
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<Checkbox {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export function WalletLogs ({ wallet, embedded }) {
|
||||
const logs = useWalletLogs(wallet)
|
||||
|
||||
const router = useRouter()
|
||||
const { follow: defaultFollow } = router.query
|
||||
const [follow, setFollow] = useState(defaultFollow ?? true)
|
||||
const tableRef = useRef()
|
||||
const scrollY = useRef()
|
||||
const showModal = useShowModal()
|
||||
|
||||
useEffect(() => {
|
||||
if (follow) {
|
||||
tableRef.current?.scroll({ top: tableRef.current.scrollHeight, behavior: 'smooth' })
|
||||
}
|
||||
}, [logs, follow])
|
||||
|
||||
useEffect(() => {
|
||||
function onScroll (e) {
|
||||
const y = e.target.scrollTop
|
||||
|
||||
const down = y - scrollY.current >= -1
|
||||
if (!!scrollY.current && !down) {
|
||||
setFollow(false)
|
||||
}
|
||||
|
||||
const maxY = e.target.scrollHeight - e.target.clientHeight
|
||||
const dY = maxY - y
|
||||
const isBottom = dY >= -1 && dY <= 1
|
||||
if (isBottom) {
|
||||
setFollow(true)
|
||||
}
|
||||
|
||||
scrollY.current = y
|
||||
}
|
||||
tableRef.current?.addEventListener('scroll', onScroll)
|
||||
return () => tableRef.current?.removeEventListener('scroll', onScroll)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='d-flex w-100 align-items-center mb-3'>
|
||||
<Form initial={{ follow: true }}>
|
||||
<FollowCheckbox
|
||||
label='follow logs' name='follow' value={follow}
|
||||
handleChange={setFollow} groupClassName='mb-0'
|
||||
/>
|
||||
</Form>
|
||||
<span
|
||||
style={{ cursor: 'pointer' }}
|
||||
className='text-muted fw-bold nav-link' onClick={() => {
|
||||
showModal(onClose => <DeleteWalletLogsObstacle wallet={wallet} onClose={onClose} />)
|
||||
}}
|
||||
>clear
|
||||
</span>
|
||||
</div>
|
||||
<div ref={tableRef} className={`${styles.logTable} ${embedded ? styles.embedded : ''}`}>
|
||||
<div className='w-100 text-center'>------ start of logs ------</div>
|
||||
{logs.length === 0 && <div className='w-100 text-center'>empty</div>}
|
||||
<table>
|
||||
<tbody>
|
||||
{logs.map((log, i) => <LogMessage key={i} {...log} />)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function DeleteWalletLogsObstacle ({ wallet, onClose }) {
|
||||
const toaster = useToast()
|
||||
const { deleteLogs } = useWalletLogger(wallet)
|
||||
|
||||
const prompt = `Do you really want to delete all ${wallet ? '' : 'wallet'} logs ${wallet ? 'of this wallet' : ''}?`
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{prompt}
|
||||
<div className='d-flex justify-center align-items-center mt-3 mx-auto'>
|
||||
<span style={{ cursor: 'pointer' }} className='d-flex ms-auto text-muted fw-bold nav-link mx-3' onClick={onClose}>cancel</span>
|
||||
<Button
|
||||
className='d-flex me-auto mx-3' variant='danger'
|
||||
onClick={
|
||||
async () => {
|
||||
try {
|
||||
await deleteLogs()
|
||||
onClose()
|
||||
toaster.success('deleted wallet logs')
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
toaster.danger('failed to delete wallet logs')
|
||||
}
|
||||
}
|
||||
}
|
||||
>delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const WalletLoggerContext = createContext()
|
||||
const WalletLogsContext = createContext()
|
||||
|
||||
const initIndexedDB = async (dbName, storeName) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!window.indexedDB) {
|
||||
return reject(new Error('IndexedDB not supported'))
|
||||
}
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
|
||||
const request = window.indexedDB.open(dbName, 1)
|
||||
|
||||
let db
|
||||
request.onupgradeneeded = () => {
|
||||
// this only runs if version was changed during open
|
||||
db = request.result
|
||||
if (!db.objectStoreNames.contains(storeName)) {
|
||||
const objectStore = db.createObjectStore(storeName, { autoIncrement: true })
|
||||
objectStore.createIndex('ts', 'ts')
|
||||
objectStore.createIndex('wallet_ts', ['wallet', 'ts'])
|
||||
}
|
||||
}
|
||||
|
||||
request.onsuccess = () => {
|
||||
// this gets called after onupgradeneeded finished
|
||||
db = request.result
|
||||
resolve(db)
|
||||
}
|
||||
|
||||
request.onerror = () => {
|
||||
reject(new Error('failed to open IndexedDB'))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const WalletLoggerProvider = ({ children }) => {
|
||||
const me = useMe()
|
||||
const [logs, setLogs] = useState([])
|
||||
let dbName = 'app:storage'
|
||||
if (me) {
|
||||
dbName = `${dbName}:${me.id}`
|
||||
}
|
||||
const idbStoreName = 'wallet_logs'
|
||||
const idb = useRef()
|
||||
const logQueue = useRef([])
|
||||
|
||||
useQuery(WALLET_LOGS, {
|
||||
fetchPolicy: 'network-only',
|
||||
// required to trigger onCompleted on refetches
|
||||
notifyOnNetworkStatusChange: true,
|
||||
onCompleted: ({ walletLogs }) => {
|
||||
setLogs((prevLogs) => {
|
||||
const existingIds = prevLogs.map(({ id }) => id)
|
||||
const logs = walletLogs
|
||||
.filter(({ id }) => !existingIds.includes(id))
|
||||
.map(({ createdAt, wallet: walletType, ...log }) => {
|
||||
return {
|
||||
ts: +new Date(createdAt),
|
||||
// TODO: use wallet defs
|
||||
// wallet: getWalletBy('type', walletType).logTag,
|
||||
...log
|
||||
}
|
||||
})
|
||||
return [...prevLogs, ...logs].sort((a, b) => a.ts - b.ts)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const [deleteServerWalletLogs] = useMutation(
|
||||
gql`
|
||||
mutation deleteWalletLogs($wallet: String) {
|
||||
deleteWalletLogs(wallet: $wallet)
|
||||
}
|
||||
`,
|
||||
{
|
||||
onCompleted: (_, { variables: { wallet: walletType } }) => {
|
||||
setLogs((logs) => {
|
||||
// TODO: use wallet defs
|
||||
return logs.filter(l => walletType ? l.wallet !== getWalletByName('type', walletType) : false)
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const saveLog = useCallback((log) => {
|
||||
if (!idb.current) {
|
||||
// IDB may not be ready yet
|
||||
return logQueue.current.push(log)
|
||||
}
|
||||
const tx = idb.current.transaction(idbStoreName, 'readwrite')
|
||||
const request = tx.objectStore(idbStoreName).add(log)
|
||||
request.onerror = () => console.error('failed to save log:', log)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
initIndexedDB(dbName, idbStoreName)
|
||||
.then(db => {
|
||||
idb.current = db
|
||||
|
||||
// load all logs from IDB
|
||||
const tx = idb.current.transaction(idbStoreName, 'readonly')
|
||||
const store = tx.objectStore(idbStoreName)
|
||||
const index = store.index('ts')
|
||||
const request = index.getAll()
|
||||
request.onsuccess = () => {
|
||||
const logs = request.result
|
||||
setLogs((prevLogs) => {
|
||||
// sort oldest first to keep same order as logs are appended
|
||||
return [...prevLogs, ...logs].sort((a, b) => a.ts - b.ts)
|
||||
})
|
||||
}
|
||||
|
||||
// flush queued logs to IDB
|
||||
logQueue.current.forEach(q => {
|
||||
const isLog = !!q.wallet
|
||||
if (isLog) saveLog(q)
|
||||
})
|
||||
|
||||
logQueue.current = []
|
||||
})
|
||||
.catch(console.error)
|
||||
return () => idb.current?.close()
|
||||
}, [])
|
||||
|
||||
const appendLog = useCallback((walletName, level, message) => {
|
||||
const log = { wallet: walletName, level, message, ts: +new Date() }
|
||||
saveLog(log)
|
||||
setLogs((prevLogs) => [...prevLogs, log])
|
||||
}, [saveLog])
|
||||
|
||||
const deleteLogs = useCallback(async (walletName) => {
|
||||
const wallet = getWalletByName(walletName, me)
|
||||
|
||||
if (!walletName || wallet.server) {
|
||||
await deleteServerWalletLogs({ variables: { wallet: wallet?.type } })
|
||||
}
|
||||
if (!walletName || !wallet.server) {
|
||||
const tx = idb.current.transaction(idbStoreName, 'readwrite')
|
||||
const objectStore = tx.objectStore(idbStoreName)
|
||||
const idx = objectStore.index('wallet_ts')
|
||||
const request = walletName ? idx.openCursor(window.IDBKeyRange.bound([walletName, -Infinity], [walletName, Infinity])) : idx.openCursor()
|
||||
request.onsuccess = function (event) {
|
||||
const cursor = event.target.result
|
||||
if (cursor) {
|
||||
cursor.delete()
|
||||
cursor.continue()
|
||||
} else {
|
||||
// finished
|
||||
setLogs((logs) => logs.filter(l => walletName ? l.wallet !== walletName : false))
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [me, setLogs])
|
||||
|
||||
return (
|
||||
<WalletLogsContext.Provider value={logs}>
|
||||
<WalletLoggerContext.Provider value={{ appendLog, deleteLogs }}>
|
||||
{children}
|
||||
</WalletLoggerContext.Provider>
|
||||
</WalletLogsContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useWalletLogger (walletName) {
|
||||
const { appendLog, deleteLogs: innerDeleteLogs } = 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(walletName, level, message)
|
||||
console[level !== 'error' ? 'info' : 'error'](`[${walletName}]`, message)
|
||||
}, [appendLog, walletName])
|
||||
|
||||
const logger = useMemo(() => ({
|
||||
ok: (...message) => log('ok')(message.join(' ')),
|
||||
info: (...message) => log('info')(message.join(' ')),
|
||||
error: (...message) => log('error')(message.join(' '))
|
||||
}), [log, walletName])
|
||||
|
||||
const deleteLogs = useCallback((w) => innerDeleteLogs(w || walletName), [innerDeleteLogs, walletName])
|
||||
|
||||
return { logger, deleteLogs }
|
||||
}
|
||||
|
||||
export function useWalletLogs (walletName) {
|
||||
const logs = useContext(WalletLogsContext)
|
||||
return logs.filter(l => !walletName || l.wallet === walletName)
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
import { useRouter } from 'next/router'
|
||||
import LogMessage from './log-message'
|
||||
import { useWalletLogger, useWalletLogs } from './logger'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Checkbox, Form } from './form'
|
||||
import { useField } from 'formik'
|
||||
import styles from '@/styles/log.module.css'
|
||||
import { Button } from 'react-bootstrap'
|
||||
import { useToast } from './toast'
|
||||
import { useShowModal } from './modal'
|
||||
|
||||
const FollowCheckbox = ({ value, ...props }) => {
|
||||
const [,, helpers] = useField(props.name)
|
||||
|
||||
useEffect(() => {
|
||||
helpers.setValue(value)
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<Checkbox {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export default function WalletLogs ({ wallet, embedded }) {
|
||||
const logs = useWalletLogs(wallet)
|
||||
|
||||
const router = useRouter()
|
||||
const { follow: defaultFollow } = router.query
|
||||
const [follow, setFollow] = useState(defaultFollow ?? true)
|
||||
const tableRef = useRef()
|
||||
const scrollY = useRef()
|
||||
const showModal = useShowModal()
|
||||
|
||||
useEffect(() => {
|
||||
if (follow) {
|
||||
tableRef.current?.scroll({ top: tableRef.current.scrollHeight, behavior: 'smooth' })
|
||||
}
|
||||
}, [logs, follow])
|
||||
|
||||
useEffect(() => {
|
||||
function onScroll (e) {
|
||||
const y = e.target.scrollTop
|
||||
|
||||
const down = y - scrollY.current >= -1
|
||||
if (!!scrollY.current && !down) {
|
||||
setFollow(false)
|
||||
}
|
||||
|
||||
const maxY = e.target.scrollHeight - e.target.clientHeight
|
||||
const dY = maxY - y
|
||||
const isBottom = dY >= -1 && dY <= 1
|
||||
if (isBottom) {
|
||||
setFollow(true)
|
||||
}
|
||||
|
||||
scrollY.current = y
|
||||
}
|
||||
tableRef.current?.addEventListener('scroll', onScroll)
|
||||
return () => tableRef.current?.removeEventListener('scroll', onScroll)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='d-flex w-100 align-items-center mb-3'>
|
||||
<Form initial={{ follow: true }}>
|
||||
<FollowCheckbox
|
||||
label='follow logs' name='follow' value={follow}
|
||||
handleChange={setFollow} groupClassName='mb-0'
|
||||
/>
|
||||
</Form>
|
||||
<span
|
||||
style={{ cursor: 'pointer' }}
|
||||
className='text-muted fw-bold nav-link' onClick={() => {
|
||||
showModal(onClose => <DeleteWalletLogsObstacle wallet={wallet} onClose={onClose} />)
|
||||
}}
|
||||
>clear
|
||||
</span>
|
||||
</div>
|
||||
<div ref={tableRef} className={`${styles.logTable} ${embedded ? styles.embedded : ''}`}>
|
||||
<div className='w-100 text-center'>------ start of logs ------</div>
|
||||
{logs.length === 0 && <div className='w-100 text-center'>empty</div>}
|
||||
<table>
|
||||
<tbody>
|
||||
{logs.map((log, i) => <LogMessage key={i} {...log} />)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function DeleteWalletLogsObstacle ({ wallet, onClose }) {
|
||||
const toaster = useToast()
|
||||
const { deleteLogs } = useWalletLogger(wallet)
|
||||
|
||||
const prompt = `Do you really want to delete all ${wallet ? '' : 'wallet'} logs ${wallet ? 'of this wallet' : ''}?`
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{prompt}
|
||||
<div className='d-flex justify-center align-items-center mt-3 mx-auto'>
|
||||
<span style={{ cursor: 'pointer' }} className='d-flex ms-auto text-muted fw-bold nav-link mx-3' onClick={onClose}>cancel</span>
|
||||
<Button
|
||||
className='d-flex me-auto mx-3' variant='danger'
|
||||
onClick={
|
||||
async () => {
|
||||
try {
|
||||
await deleteLogs()
|
||||
onClose()
|
||||
toaster.success('deleted wallet logs')
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
toaster.danger('failed to delete wallet logs')
|
||||
}
|
||||
}
|
||||
}
|
||||
>delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { useCallback } from 'react'
|
||||
import { useMe } from '@/components/me'
|
||||
import useLocalState from '@/components/use-local-state'
|
||||
import { useWalletLogger } from '@/components/logger'
|
||||
import { useWalletLogger } from '@/components/wallet-logger'
|
||||
import { SSR } from '@/lib/constants'
|
||||
|
||||
// wallet definitions
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { SSR } from '@/lib/constants'
|
|||
import NProgress from 'nprogress'
|
||||
import 'nprogress/nprogress.css'
|
||||
import { LoggerProvider } from '@/components/logger'
|
||||
import { WalletLoggerProvider } from '@/components/wallet-logger'
|
||||
import { ChainFeeProvider } from '@/components/chain-fee.js'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { HasNewNotesProvider } from '@/components/use-has-new-notes'
|
||||
|
|
@ -104,24 +105,26 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
|
|||
<MeProvider me={me}>
|
||||
<HasNewNotesProvider>
|
||||
<LoggerProvider>
|
||||
<ServiceWorkerProvider>
|
||||
<PriceProvider price={price}>
|
||||
<LightningProvider>
|
||||
<ToastProvider>
|
||||
<ShowModalProvider>
|
||||
<BlockHeightProvider blockHeight={blockHeight}>
|
||||
<ChainFeeProvider chainFee={chainFee}>
|
||||
<ErrorBoundary>
|
||||
<Component ssrData={ssrData} {...otherProps} />
|
||||
{!router?.query?.disablePrompt && <PWAPrompt copyBody='This website has app functionality. Add it to your home screen to use it in fullscreen and receive notifications. In Safari:' promptOnVisit={2} />}
|
||||
</ErrorBoundary>
|
||||
</ChainFeeProvider>
|
||||
</BlockHeightProvider>
|
||||
</ShowModalProvider>
|
||||
</ToastProvider>
|
||||
</LightningProvider>
|
||||
</PriceProvider>
|
||||
</ServiceWorkerProvider>
|
||||
<WalletLoggerProvider>
|
||||
<ServiceWorkerProvider>
|
||||
<PriceProvider price={price}>
|
||||
<LightningProvider>
|
||||
<ToastProvider>
|
||||
<ShowModalProvider>
|
||||
<BlockHeightProvider blockHeight={blockHeight}>
|
||||
<ChainFeeProvider chainFee={chainFee}>
|
||||
<ErrorBoundary>
|
||||
<Component ssrData={ssrData} {...otherProps} />
|
||||
{!router?.query?.disablePrompt && <PWAPrompt copyBody='This website has app functionality. Add it to your home screen to use it in fullscreen and receive notifications. In Safari:' promptOnVisit={2} />}
|
||||
</ErrorBoundary>
|
||||
</ChainFeeProvider>
|
||||
</BlockHeightProvider>
|
||||
</ShowModalProvider>
|
||||
</ToastProvider>
|
||||
</LightningProvider>
|
||||
</PriceProvider>
|
||||
</ServiceWorkerProvider>
|
||||
</WalletLoggerProvider>
|
||||
</LoggerProvider>
|
||||
</HasNewNotesProvider>
|
||||
</MeProvider>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { CenterLayout } from '@/components/layout'
|
|||
import { WalletButtonBar } from '@/components/wallet-card'
|
||||
import { lnbitsSchema } from '@/lib/validate'
|
||||
import { WalletSecurityBanner } from '@/components/banners'
|
||||
import WalletLogs from '@/components/wallet-logs'
|
||||
import { WalletLogs } from '@/components/wallet-logger'
|
||||
import { useToast } from '@/components/toast'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useWallet } from '@/components/wallet'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { CenterLayout } from '@/components/layout'
|
||||
import { getGetServerSideProps } from '@/api/ssrApollo'
|
||||
import WalletLogs from '@/components/wallet-logs'
|
||||
import { WalletLogs } from '@/components/wallet-logs'
|
||||
|
||||
export const getServerSideProps = getGetServerSideProps({ query: null })
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue