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

Add gas price display (Gwei, native, USD) under native balance per network

Browse Source
This commit is contained in:
TZGyn
2026-05-25 21:57:44 +08:00
parent bbd80cbfff
commit bdd841b632
3 changed files with 116 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/bun/index.ts
+42 -3
View File
@@ -21,6 +21,7 @@ import { db } from './lib/db'
import { join } from 'path'
import { getENV } from './lib/get-env'
import { getClient } from './lib/viem'
import { formatGwei } from 'viem'
import {
isBinaryInstalled,
downloadBinary,
@@ -502,13 +503,20 @@ const rpc = BrowserView.defineRPC<RPC>({
if (symbols && symbols.length > 0) {
const url = `https://api.g.alchemy.com/prices/v1/${key}/tokens/by-symbol?${symbols.map((s) => `symbols=${encodeURIComponent(s)}`).join('&')}`
const res = await fetch(url, { signal: AbortSignal.timeout(10000) })
const res = await fetch(url, {
signal: AbortSignal.timeout(10000),
})
if (res.ok) {
const body = await res.json()
const data = (body.data ?? []) as any[]
for (const d of data) {
for (const p of d.prices ?? []) {
results.push({ symbol: d.symbol, currency: p.currency, value: p.value, lastUpdatedAt: p.lastUpdatedAt })
results.push({
symbol: d.symbol,
currency: p.currency,
value: p.value,
lastUpdatedAt: p.lastUpdatedAt,
})
}
}
}
@@ -527,7 +535,14 @@ const rpc = BrowserView.defineRPC<RPC>({
const data = (body.data ?? []) as any[]
for (const d of data) {
for (const p of d.prices ?? []) {
results.push({ symbol: d.symbol, currency: p.currency, value: p.value, lastUpdatedAt: p.lastUpdatedAt, network: d.network, address: d.address })
results.push({
symbol: d.symbol,
currency: p.currency,
value: p.value,
lastUpdatedAt: p.lastUpdatedAt,
network: d.network,
address: d.address,
})
}
}
}
@@ -540,6 +555,30 @@ const rpc = BrowserView.defineRPC<RPC>({
return []
}
},
fetchGasPrice: async ({ chainid }) => {
const key = await Bun.secrets.get({
service: 'koins',
name: 'alchemy_key',
})
if (!key) {
console.log('[gas] no key')
return null
}
try {
const client = getClient(chainid, key)
const gasPrice = await client.getGasPrice()
console.log(
'[gas] price for chain',
chainid,
':',
gasPrice.toString(),
)
return formatGwei(gasPrice)
} catch (error) {
console.log('[gas] error:', error)
return null
}
},
fetchTransactionDetails: async ({ hash, chainid, address }) => {
const key = await Bun.secrets.get({
service: 'koins',
apps/desktop/src/lib/components/EvmDashboard.svelte
+72 -13
View File
@@ -92,7 +92,10 @@
value: string
currency: string
} | null>(null)
let tokenPrices = $state<Record<string, { value: string; currency: string }>>({})
let tokenPrices = $state<
Record<string, { value: string; currency: string }>
>({})
let gasPrice = $state<string | null>(null)
$effect(() => {
const syms: string[] = w.symbol ? [w.symbol] : []
@@ -107,16 +110,30 @@
}
if (syms.length > 0 || addrs.length > 0) {
electrobun.rpc?.request
.fetchTokenPrices({ symbols: syms.length > 0 ? syms : undefined, addresses: addrs.length > 0 ? addrs : undefined })
.fetchTokenPrices({
symbols: syms.length > 0 ? syms : undefined,
addresses: addrs.length > 0 ? addrs : undefined,
})
.then((prices) => {
const usd = prices.find((p) => p.currency === 'usd' && p.symbol === w.symbol && !p.address)
const usd = prices.find(
(p) =>
p.currency === 'usd' &&
p.symbol === w.symbol &&
!p.address,
)
nativePrice = usd
? { value: usd.value, currency: usd.currency }
: null
const map: Record<string, { value: string; currency: string }> = {}
const map: Record<
string,
{ value: string; currency: string }
> = {}
for (const p of prices) {
if (p.currency === 'usd' && p.address) {
map[p.address.toLowerCase()] = { value: p.value, currency: p.currency }
map[p.address.toLowerCase()] = {
value: p.value,
currency: p.currency,
}
}
}
tokenPrices = map
@@ -124,6 +141,14 @@
}
})
$effect(() => {
if (w.chainid) {
electrobun.rpc?.request
.fetchGasPrice({ chainid: w.chainid })
.then((gp) => (gasPrice = gp))
}
})
$effect(() => {
if (!initStarted) {
initStarted = true
@@ -386,16 +411,37 @@
{w.symbol}
</p>
{#if nativePrice}
{@const balVal = Number(w.balance) * Number(nativePrice.value)}
{@const balVal =
Number(w.balance) * Number(nativePrice.value)}
<p class="font-mono text-xs text-muted-foreground">
${balVal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} @ ${Number(nativePrice.value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}/{w.symbol}
${balVal.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})} @ ${Number(nativePrice.value).toLocaleString(
undefined,
{
minimumFractionDigits: 2,
maximumFractionDigits: 2,
},
)}/{w.symbol}
</p>
{/if}
{#if gasPrice}
{@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})
{#if nativePrice}
${(gasNative * Number(nativePrice.value)).toLocaleString(undefined, { minimumFractionDigits: 4, maximumFractionDigits: 4 })}
{/if}
</p>
{/if}
</div>
<div class="mb-4 space-y-1">
<p class="font-medium text-xs">Tokens</p>
{#each w.tokenBalances as t}
<div class="flex items-center gap-1.5 font-mono text-sm">
<div
class="flex items-center gap-1.5 font-mono text-sm">
<img
src={t.logo}
alt=""
@@ -409,10 +455,22 @@
{t.symbol}
</div>
{#if t.contractAddress && tokenPrices[t.contractAddress.toLowerCase()]}
{@const val = tokenPrices[t.contractAddress.toLowerCase()]}
{@const balVal = Number(t.balance) * Number(val.value)}
<p class="font-mono text-xs text-muted-foreground -mt-0.5 ml-6">
${balVal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} @ ${Number(val.value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}/{t.symbol}
{@const val =
tokenPrices[t.contractAddress.toLowerCase()]}
{@const balVal =
Number(t.balance) * Number(val.value)}
<p
class="font-mono text-xs text-muted-foreground -mt-0.5 ml-6">
${balVal.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})} @ ${Number(val.value).toLocaleString(
undefined,
{
minimumFractionDigits: 2,
maximumFractionDigits: 2,
},
)}/{t.symbol}
</p>
{/if}
{/each}
@@ -485,7 +543,8 @@
})}
class="flex w-full cursor-pointer items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs text-left hover:bg-muted/80 transition-colors">
<div
class="shrink-0 mt-0.5 {txAction(tx, w.address) === 'Swap'
class="shrink-0 mt-0.5 {txAction(tx, w.address) ===
'Swap'
? 'text-yellow-500'
: tx.from.toLowerCase() ===
w.address.toLowerCase()
apps/desktop/src/lib/rpc-schema.ts
+1
View File
@@ -169,6 +169,7 @@ export type RPC = {
evmGetSeed: { params: { vaultKey: string }; response: string }
evmDeleteWallet: { params: { id: string }; response: void }
fetchTokenPrices: { params: { symbols?: string[]; addresses?: { network: string; address: string }[] }; response: TokenPriceEntry[] }
fetchGasPrice: { params: { chainid: string }; response: string | null }
}
messages: {}
}