TZGyn/koins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

fix blank page, icons, add logging and EVM balance chart

Browse Source 
- Fix blank page: set viewsRoot, base:'', history.replaceState in index.html
- Fix chain icons: add dist/icons→views/mainview/icons copy rule
- Add file-based logger (src/bun/lib/logger.ts) with logToFile RPC
- Add frontend error overlay + global error listeners in index.svelte
- Add EVM balance chart with time range filters (EvmDashboard.svelte)
- Replace console.log with file logger throughout backend
- Improve get-env.ts to read version.json for channel detection
This commit is contained in:
TZGyn
2026-06-27 16:59:15 +08:00
parent 0b6df331ee
commit f46e61ed5e
11 changed files with 297 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/.gitignore
+1
View File
@@ -24,3 +24,4 @@ dist-ssr
*.sw?
.router
artifacts
apps/desktop/electrobun.config.ts
+1
View File
@@ -11,6 +11,7 @@ export default {
copy: {
'dist/index.html': 'views/mainview/index.html',
'dist/assets': 'views/mainview/assets',
'dist/icons': 'views/mainview/icons',
'drizzle': 'drizzle',
'src/bun/native/biometric-helper': 'native/biometric-helper',
},
apps/desktop/index.html
+6 -1
View File
@@ -2,12 +2,17 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sv-router Starter</title>
</head>
<body>
<div id="app" style="display: contents"></div>
<script>
if (window.location.pathname === '/index.html') {
history.replaceState(null, '', '/')
}
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
apps/desktop/src/bun/index.ts
+27 -9
View File
@@ -9,6 +9,7 @@ import {
import { migrate } from 'drizzle-orm/bun-sqlite/migrator'
import { db } from './lib/db'
import { join } from 'path'
import { existsSync } from 'fs'
import { getENV } from './lib/get-env'
import { createEvmHandlers } from './rpc/evm'
import { createMoneroHandlers } from './rpc/monero'
@@ -17,15 +18,22 @@ import { canPromptTouchID, promptTouchID } from './lib/biometric'
import { sqlite } from './lib/sqlite'
import { evmWallets } from './lib/db/schema'
import type { RPC } from '../lib/rpc-schema'
import { log, logError } from './lib/logger'
const env = getENV()
console.log(env)
log(`env: ${JSON.stringify(env)}`)
if (env.env === 'prod') {
if (env.env === 'stable') {
try {
log('running migrations...')
migrate(db, {
migrationsFolder: join(PATHS.RESOURCES_FOLDER, 'app', 'drizzle'),
})
log('migrations complete')
} catch (e) {
logError('migration failed', e)
}
}
const DEV_SERVER_PORT = 5173
@@ -33,19 +41,17 @@ const DEV_SERVER_URL = `http://localhost:${DEV_SERVER_PORT}`
async function getMainViewUrl(): Promise<string> {
const channel = await Updater.localInfo.channel()
log(`channel from Updater: ${channel}`)
if (channel === 'dev') {
try {
await fetch(DEV_SERVER_URL, { method: 'HEAD' })
console.log(
`HMR enabled: Using Vite dev server at ${DEV_SERVER_URL}`,
)
log(`HMR enabled: Using Vite dev server at ${DEV_SERVER_URL}`)
return DEV_SERVER_URL
} catch {
console.log(
"Vite dev server not running. Run 'bun run dev:hmr' for HMR support.",
)
log("Vite dev server not running, falling back to bundled view")
}
}
log('using bundled view')
return 'views://mainview/index.html'
}
@@ -76,6 +82,12 @@ ApplicationMenu.setApplicationMenu([
const url = await getMainViewUrl()
log(`view URL: ${url}`)
const viewsRoot = join(PATHS.RESOURCES_FOLDER, 'app', 'views')
log(`viewsRoot: ${viewsRoot}`)
log(`viewsRoot exists: ${existsSync(viewsRoot)}`)
log(`index.html exists: ${existsSync(join(viewsRoot, 'mainview', 'index.html'))}`)
const moneroState = {
manager: null as MoneroWalletState | null,
downloading: false,
@@ -159,14 +171,19 @@ rpc.setRequestHandler({
margin: 1,
})
},
logToFile: async ({ message }) => {
log(message)
},
...createEvmHandlers(rpc, syncState),
...createMoneroHandlers(moneroState),
})
log('creating BrowserWindow...')
const win = new BrowserWindow({
title: 'Koins',
url,
rpc,
viewsRoot: join(PATHS.RESOURCES_FOLDER, 'app', 'views'),
frame: {
width: 900,
height: 700,
@@ -174,5 +191,6 @@ const win = new BrowserWindow({
y: 200,
},
})
log('BrowserWindow created')
console.log('Koins app started!')
log('Koins app started!')
apps/desktop/src/bun/lib/get-env.ts
+23 -16
View File
@@ -1,21 +1,28 @@
const env = (Bun.env.ELECTROBUN_ENV as string) || 'dev'
import { PATHS } from 'electrobun/bun'
import { readFileSync, existsSync } from 'fs'
import { join } from 'path'
console.log('ENV', env)
export const getENV = () => {
let appName
let dbFilename
if (env === 'stable') {
appName = 'koins'
dbFilename = 'koins.db'
} else {
appName = 'koins-dev'
dbFilename = 'koins-dev.db'
function detectEnv(): { env: string; appName: string; dbFilename: string } {
const channel = (Bun.env.ELECTROBUN_ENV as string) || ''
if (channel === 'stable') {
return { env: 'stable', appName: 'koins', dbFilename: 'koins.db' }
}
return {
env,
appName,
dbFilename,
try {
const p = join(PATHS.RESOURCES_FOLDER, 'version.json')
if (existsSync(p)) {
const { channel: c } = JSON.parse(readFileSync(p, 'utf-8'))
if (c === 'stable') {
return { env: 'stable', appName: 'koins', dbFilename: 'koins.db' }
}
}
} catch {}
return { env: 'dev', appName: 'koins-dev', dbFilename: 'koins-dev.db' }
}
const env = detectEnv()
console.log('ENV', env.env)
export const getENV = () => env
apps/desktop/src/bun/lib/logger.ts
+28
View File
@@ -0,0 +1,28 @@
import { appendFileSync, mkdirSync, existsSync } from 'fs'
import { join } from 'path'
import envPaths from 'env-paths'
import { getENV } from './get-env'
const { appName } = getENV()
const { data } = envPaths(appName, { suffix: '' })
const logDir = join(data, 'logs')
mkdirSync(logDir, { recursive: true })
const date = () => {
const d = new Date()
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}
const file = join(logDir, `${appName}-${date()}.log`)
export const log = (msg: string) => {
const line = `[${new Date().toISOString()}] ${msg}\n`
try {
appendFileSync(file, line, 'utf-8')
} catch {}
}
export const logError = (msg: string, err?: unknown) => {
const detail = err instanceof Error ? err.stack || err.message : String(err ?? '')
log(`[ERROR] ${msg}${detail ? ' — ' + detail : ''}`)
}
apps/desktop/src/lib/components/EvmDashboard.svelte
+157 -7
View File
@@ -6,9 +6,9 @@
} from '$lib/states/evm-wallet.svelte.js'
import { Button } from '$lib/components/ui/button/index.js'
import { Textarea } from '$lib/components/ui/textarea/index.js'
import { generateMnemonic } from 'viem/accounts'
import { english } from 'viem/accounts'
import { navigate } from 'sv-router/generated'
import { generateMnemonic } from 'viem/accounts'
import { english } from 'viem/accounts'
import { navigate } from 'sv-router/generated'
import {
Card,
CardContent,
@@ -30,6 +30,12 @@ import { navigate } from 'sv-router/generated'
import * as Dialog from '$lib/components/ui/dialog/index.js'
import QRCode from 'qrcode'
import Loader from './loader.svelte'
import { LineChart } from 'layerchart'
import { scaleUtc } from 'd3-scale'
import { curveLinear } from 'd3-shape'
import * as Chart from '$lib/components/ui/chart/index.js'
import { formatEther, parseEther } from 'viem'
import { frontendLog, frontendLogError } from '$lib/electrobun.js'
let { networkId }: { networkId: NetworkId } = $props()
@@ -161,6 +167,57 @@ import { navigate } from 'sv-router/generated'
})
}
})
function isNative(tx: TxEntry): boolean {
return !tx.contractAddress
}
const balanceHistory = $derived.by(() => {
const native = w.transactions.filter(isNative)
const sorted = [...native].reverse()
if (sorted.length === 0) return []
let cum = 0n
const addr = w.address.toLowerCase()
const points: { date: Date; balance: number }[] = []
for (const tx of sorted) {
console.log(tx.value)
const val = parseEther(tx.value)
if (tx.from.toLowerCase() === addr) cum -= val
else cum += val
points.push({
date: new Date(Number(tx.timeStamp) * 1000),
balance: Number(formatEther(cum)),
})
}
const cur = Number(w.balance)
const offset = cur - Number(formatEther(cum))
for (const p of points) p.balance += offset
return points
})
$inspect(balanceHistory)
let selectedRange = $state<'1D' | '1W' | '1M' | '1Y' | 'ALL'>('ALL')
const rangeCutoff = $derived(
selectedRange === 'ALL'
? 0
: Date.now() -
(
{
'1D': 86400000,
'1W': 604800000,
'1M': 2592000000,
'1Y': 31536000000,
} as const
)[selectedRange],
)
const chartData = $derived(
selectedRange === 'ALL'
? balanceHistory
: balanceHistory.filter((p) => p.date.getTime() >= rangeCutoff),
)
</script>
{#if !w.ready}
@@ -437,12 +494,23 @@ import { navigate } from 'sv-router/generated'
</p>
{/if}
{#if gasPrice}
{@const gasNative = Number(gasPrice) * 21000 / 1e9}
{@const gasNative = (Number(gasPrice) * 21000) / 1e9}
<p class="font-mono text-xs text-muted-foreground mt-1">
Gas: {Number(gasPrice).toFixed(1)} Gwei
({gasNative.toLocaleString(undefined, { minimumFractionDigits: 6, maximumFractionDigits: 6 })} {w.symbol})
Gas: {Number(gasPrice).toFixed(1)} Gwei ({gasNative.toLocaleString(
undefined,
{
minimumFractionDigits: 6,
maximumFractionDigits: 6,
},
)}
{w.symbol})
{#if nativePrice}
${(gasNative * Number(nativePrice.value)).toLocaleString(undefined, { minimumFractionDigits: 4, maximumFractionDigits: 4 })}
${(
gasNative * Number(nativePrice.value)
).toLocaleString(undefined, {
minimumFractionDigits: 4,
maximumFractionDigits: 4,
})}
{/if}
</p>
{/if}
@@ -519,6 +587,88 @@ import { navigate } from 'sv-router/generated'
</CardContent>
</Card>
{#if balanceHistory.length > 1}
<Card>
<CardHeader>
<div class="flex items-center justify-between">
<CardTitle>Balance</CardTitle>
<div class="flex gap-1">
{#each ['1D', '1W', '1M', '1Y', 'ALL'] as const as range}
<button
onclick={() => (selectedRange = range)}
class="rounded px-1.5 py-0.5 text-xs font-medium transition-colors {selectedRange ===
range
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:text-foreground'}">
{range}
</button>
{/each}
</div>
</div>
</CardHeader>
<CardContent>
{#if chartData.length > 1}
<Chart.Container
config={{
balance: { label: w.symbol, color: 'var(--chart-1)' },
}}>
<LineChart
data={chartData}
x="date"
xScale={scaleUtc()}
axis="x"
points
series={[
{
key: 'balance',
label: w.symbol,
color: 'var(--chart-1)',
},
]}
yDomain={[
chartData.reduce((a, b) =>
a.balance < b.balance ? a : b,
).balance,
chartData.reduce((a, b) =>
a.balance > b.balance ? a : b,
).balance,
]}
props={{
spline: {
curve: curveLinear,
motion: 'tween',
strokeWidth: 2,
},
yAxis: {},
xAxis: {
format: (v: Date) =>
v.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
}),
},
highlight: { points: { r: 4 } },
}}>
{#snippet tooltip()}
<Chart.Tooltip
labelFormatter={(value: Date) => {
return value.toLocaleDateString()
}}
valueFormatter={(value: Number) => {
return Number(value).toFixed(6)
}} />
{/snippet}
</LineChart>
</Chart.Container>
{:else}
<p class="text-center text-sm text-muted-foreground">
No transactions in this time range.
</p>
{/if}
</CardContent>
</Card>
{/if}
<Card>
<CardHeader>
<CardTitle>Transactions</CardTitle>
apps/desktop/src/lib/electrobun.ts
+11
View File
@@ -23,3 +23,14 @@ const rpc = Electroview.defineRPC<RPC>({
},
})
export const electrobun = new Electroview({ rpc })
export async function frontendLog(message: string) {
try {
await electrobun.rpc?.request.logToFile({ message: `[FE] ${message}` })
} catch {}
}
export async function frontendLogError(message: string, err?: unknown) {
const detail = err instanceof Error ? err.stack || err.message : String(err ?? '')
await frontendLog(`[ERROR] ${message} — ${detail}`)
}
apps/desktop/src/lib/rpc-schema.ts
+1
View File
@@ -148,6 +148,7 @@ export type GeneralRpcRequests = {
setSecret: { params: { service: string; name: string; value: string }; response: void }
openExternal: { params: { url: string }; response: void }
generateQrCode: { params: { text: string; size?: number }; response: string }
logToFile: { params: { message: string }; response: void }
}
export type EvmRpcRequests = {
apps/desktop/src/routes/index.svelte
+37 -2
View File
@@ -11,15 +11,50 @@
} from '$lib/components/ui/card/index.js'
import { navigate } from 'sv-router/generated'
import { onMount } from 'svelte'
import { frontendLog, frontendLogError } from '$lib/electrobun.js'
const w = wallet
let feError = $state<string | null>(null)
onMount(() => {
w.init()
moneroWallet.init()
frontendLog('index.svelte mounted')
w.init().catch((e) => frontendLogError('w.init() failed', e))
moneroWallet.init().catch((e) => frontendLogError('moneroWallet.init() failed', e))
})
$effect(() => {
if (typeof window !== 'undefined') {
const handler = (event: ErrorEvent) => {
const msg = event.error?.stack || event.error?.message || event.message || 'unknown error'
feError = msg
frontendLogError('uncaught error', msg)
}
const rejectHandler = (event: PromiseRejectionEvent) => {
const msg = event.reason?.stack || event.reason?.message || String(event.reason || 'unknown')
feError = msg
frontendLogError('unhandled rejection', msg)
}
window.addEventListener('error', handler)
window.addEventListener('unhandledrejection', rejectHandler)
return () => {
window.removeEventListener('error', handler)
window.removeEventListener('unhandledrejection', rejectHandler)
}
}
})
</script>
{#if feError}
<div
class="fixed inset-0 z-50 flex items-center justify-center bg-background/95 p-8">
<div class="max-w-lg rounded-lg border border-destructive/50 bg-destructive/10 p-6">
<p class="font-bold text-destructive text-sm mb-2">Frontend Error</p>
<pre class="whitespace-pre-wrap font-mono text-xs text-destructive/80 max-h-96 overflow-y-auto">{feError}</pre>
</div>
</div>
{/if}
<div class="mx-auto mt-24 max-w-sm">
{#if !w.ready}
<p class="text-center text-muted-foreground text-sm">
apps/desktop/vite.config.ts
+1
View File
@@ -5,6 +5,7 @@ import { defineConfig } from 'vite'
import { fileURLToPath } from 'url'
export default defineConfig({
base: '',
plugins: [tailwindcss(), svelte(), router()],
resolve: {
alias: {