11 Commits
16 changed files with 486 additions and 184 deletions
+1 -1
View File
@@ -4,7 +4,7 @@ export default {
app: { app: {
name: 'koins', name: 'koins',
identifier: 'koins.tzgyn.com', identifier: 'koins.tzgyn.com',
version: '0.0.7', version: '0.0.12',
}, },
build: { build: {
// Vite builds to dist/, we copy from there // Vite builds to dist/, we copy from there
+1
View File
@@ -20,6 +20,7 @@
"d3-shape": "^3.2.0", "d3-shape": "^3.2.0",
"electrobun": "^1.18.1", "electrobun": "^1.18.1",
"env-paths": "^4.0.0", "env-paths": "^4.0.0",
"jsqr": "^1.4.0",
"mode-watcher": "^1.1.0", "mode-watcher": "^1.1.0",
"monero-ts": "^0.11.8", "monero-ts": "^0.11.8",
"qrcode": "^1.5.4", "qrcode": "^1.5.4",
+10
View File
@@ -151,6 +151,7 @@ export function createMoneroHandlers(state: {
console.log('[rpc] moneroGetBalance') console.log('[rpc] moneroGetBalance')
if (!state.manager) if (!state.manager)
throw new Error('Monero wallet RPC not started') throw new Error('Monero wallet RPC not started')
try {
const { balance, unlocked } = await walletGetBalance( const { balance, unlocked } = await walletGetBalance(
state.manager, state.manager,
) )
@@ -171,6 +172,10 @@ export function createMoneroHandlers(state: {
height, height,
daemonHeight, daemonHeight,
} }
} catch (e) {
logError('[rpc] moneroGetBalance failed', e)
throw e
}
}, },
moneroGetTransactions: async ({ moneroGetTransactions: async ({
accountIndex, accountIndex,
@@ -180,12 +185,17 @@ export function createMoneroHandlers(state: {
console.log('[rpc] moneroGetTransactions', { accountIndex }) console.log('[rpc] moneroGetTransactions', { accountIndex })
if (!state.manager) if (!state.manager)
throw new Error('Monero wallet RPC not started') throw new Error('Monero wallet RPC not started')
try {
const txs = await walletGetTransactions( const txs = await walletGetTransactions(
state.manager, state.manager,
accountIndex, accountIndex,
) )
console.log(`[rpc] moneroGetTransactions: ${txs.length} txs`) console.log(`[rpc] moneroGetTransactions: ${txs.length} txs`)
return txs return txs
} catch (e) {
logError('[rpc] moneroGetTransactions failed', e)
throw e
}
}, },
moneroWalletStatus: async () => { moneroWalletStatus: async () => {
if (!state.manager) { if (!state.manager) {
@@ -0,0 +1,62 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js'
import Loader from '$lib/components/loader.svelte'
import QrCodeIcon from '@lucide/svelte/icons/qr-code'
import { decodeQrFromFile } from '$lib/qr.js'
let {
onDecode,
disabled = false,
}: {
onDecode: (text: string) => void
disabled?: boolean
} = $props()
let fileInput: HTMLInputElement
let busy = $state(false)
let error = $state('')
const handleFile = async (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file) return
busy = true
error = ''
try {
const text = await decodeQrFromFile(file)
if (!text) throw new Error('No QR code found in the image')
onDecode(text)
} catch (err) {
error = err instanceof Error ? err.message : 'Failed to read QR code'
} finally {
busy = false
if (fileInput) fileInput.value = ''
}
}
</script>
<div class="flex items-center gap-2">
<input
bind:this={fileInput}
type="file"
accept="image/*"
class="hidden"
onchange={handleFile}
disabled={disabled || busy} />
<Button
type="button"
variant="outline"
size="sm"
class="h-7 gap-1.5"
disabled={disabled || busy}
onclick={() => fileInput?.click()}>
{#if busy}
<Loader class="size-3.5" />
{:else}
<QrCodeIcon size={14} />
{/if}
Scan QR
</Button>
{#if error}
<span class="text-xs text-red-500">{error}</span>
{/if}
</div>
+75
View File
@@ -0,0 +1,75 @@
import jsQR from 'jsqr'
export const decodeQrFromFile = (file: File): Promise<string> =>
new Promise((resolve, reject) => {
const url = URL.createObjectURL(file)
const img = new Image()
img.onload = () => {
try {
const canvas = document.createElement('canvas')
canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
const ctx = canvas.getContext('2d')
if (!ctx) throw new Error('Canvas is not supported')
ctx.drawImage(img, 0, 0)
const { data, width, height } = ctx.getImageData(
0,
0,
canvas.width,
canvas.height,
)
resolve(jsQR(data, width, height)?.data ?? '')
} catch (e) {
reject(e)
} finally {
URL.revokeObjectURL(url)
}
}
img.onerror = () => {
URL.revokeObjectURL(url)
reject(new Error('Could not load the image'))
}
img.src = url
})
export type QrParseResult = {
address: string
amount?: string
destinationTag?: string
}
// Handles payment URIs (monero:ADDRESS?tx_amount=..., xrp:rADDR?amount=..&dt=..)
// as well as bare addresses. Returns the last path-like segment before any
// query string so prefixes and /pay paths are skipped.
export const parseQrPayload = (
text: string,
kind: 'xrp' | 'monero',
): QrParseResult => {
let body = text.trim().replace(/\s+/g, '')
body = body.replace(/^(?:[a-z0-9+.-]+):\/?\//i, '')
const [beforeQuery, queryRaw] = body.split('?')
const segments = beforeQuery.split('/')
const address = segments[segments.length - 1]
const params: Record<string, string> = {}
if (queryRaw) {
for (const pair of queryRaw.split('&')) {
const eq = pair.indexOf('=')
const key = (eq >= 0 ? pair.slice(0, eq) : pair).toLowerCase()
const value = eq >= 0 ? decodeURIComponent(pair.slice(eq + 1)) : ''
if (key) params[key] = value
}
}
if (kind === 'xrp') {
return {
address,
amount: params['amount'] || undefined,
destinationTag: params['dt'] || undefined,
}
}
return {
address,
amount: params['tx_amount'] || undefined,
}
}
@@ -1,5 +1,7 @@
import { import {
electrobun, electrobun,
frontendLog,
frontendLogError,
type MoneroTxEntry, type MoneroTxEntry,
type MoneroAccountEntry, type MoneroAccountEntry,
type MoneroSendResult, type MoneroSendResult,
@@ -25,7 +27,7 @@ export const atomicToXmr = (atomic: string): string => {
return frac ? `${whole}.${frac}` : `${whole}` return frac ? `${whole}.${frac}` : `${whole}`
} }
export const MoneroWallet = () => { export const createMoneroWallet = () => {
let accountType = $state<'monero' | null>(null) let accountType = $state<'monero' | null>(null)
let ready = $state(false) let ready = $state(false)
let biometricAvailable = $state(false) let biometricAvailable = $state(false)
@@ -54,6 +56,9 @@ export const MoneroWallet = () => {
let refreshInFlight: Promise<void> | null = null let refreshInFlight: Promise<void> | null = null
let syncing = $state(false) let syncing = $state(false)
let syncRetryTimer: ReturnType<typeof setTimeout> | null = null let syncRetryTimer: ReturnType<typeof setTimeout> | null = null
let autoRefreshTimer: ReturnType<typeof setInterval> | null = null
let price = $state<string | null>(null)
let priceInFlight = false
const rpcTimeout = <T>(promise: Promise<T>, ms: number, label: string): Promise<T> => const rpcTimeout = <T>(promise: Promise<T>, ms: number, label: string): Promise<T> =>
new Promise<T>((resolve, reject) => { new Promise<T>((resolve, reject) => {
@@ -101,7 +106,10 @@ export const MoneroWallet = () => {
return authed === true return authed === true
} }
let initPromise: Promise<void> | null = null
const init = async () => { const init = async () => {
if (initPromise) return initPromise
initPromise = (async () => {
await checkStatus() await checkStatus()
if (installed && !running && !downloading) { if (installed && !running && !downloading) {
await start() await start()
@@ -109,6 +117,8 @@ export const MoneroWallet = () => {
} }
await checkBiometric() await checkBiometric()
ready = true ready = true
})()
return initPromise
} }
const login = async () => { const login = async () => {
@@ -399,6 +409,31 @@ export const MoneroWallet = () => {
}, 15000) }, 15000)
} }
const stopAutoRefresh = () => {
if (autoRefreshTimer) {
clearInterval(autoRefreshTimer)
autoRefreshTimer = null
}
}
// Refresh runs in the store so the dashboard's connection/sync state
// stays live regardless of which page is mounted.
const startAutoRefresh = () => {
if (autoRefreshTimer || !walletOpen) return
autoRefreshTimer = setInterval(() => {
if (walletOpen && !loading) refresh()
}, 30000)
}
// $effect needs a root outside a component; the root lives for the
// lifetime of the singleton store.
$effect.root(() => {
$effect(() => {
if (walletOpen && !loading) startAutoRefresh()
else if (!walletOpen) stopAutoRefresh()
})
})
const refresh = async () => { const refresh = async () => {
const rpc = electrobun.rpc const rpc = electrobun.rpc
if (!rpc) return if (!rpc) return
@@ -406,6 +441,8 @@ export const MoneroWallet = () => {
refreshInFlight = (async () => { refreshInFlight = (async () => {
loading = true loading = true
let failed = false let failed = false
const wasSyncing = syncing
let lastError: unknown = null
try { try {
const [bal, balErr] = await tryCatch( const [bal, balErr] = await tryCatch(
rpcTimeout( rpcTimeout(
@@ -414,7 +451,10 @@ export const MoneroWallet = () => {
'moneroGetBalance', 'moneroGetBalance',
), ),
) )
if (balErr) failed = true if (balErr) {
failed = true
lastError = balErr
}
if (bal) { if (bal) {
balAtomic = bal.balance balAtomic = bal.balance
unlockedAtomic = bal.unlocked unlockedAtomic = bal.unlocked
@@ -431,21 +471,38 @@ export const MoneroWallet = () => {
'moneroGetTransactions', 'moneroGetTransactions',
), ),
) )
if (txErr) failed = true if (txErr) {
failed = true
lastError = txErr
}
txs = result ?? [] txs = result ?? []
const ok = await fetchAccounts() const ok = await fetchAccounts()
if (!ok) failed = true if (!ok) {
failed = true
lastError = new Error('moneroGetAccounts failed')
}
if (failed) { if (failed) {
// The wallet-rpc is likely busy syncing; keep the stale // The wallet-rpc is likely busy syncing; keep the stale
// balance and retry shortly instead of showing an error. // balance and retry shortly instead of showing an error.
syncing = true syncing = true
scheduleSyncRetry() scheduleSyncRetry()
frontendLogError(
`monero refresh failed (height ${height}/${daemonHeight})`,
lastError,
)
} else { } else {
if (wasSyncing) {
frontendLog(`monero sync complete at height ${height}`)
}
syncing = false syncing = false
} }
} catch (e) { } catch (e) {
syncing = true syncing = true
scheduleSyncRetry() scheduleSyncRetry()
frontendLogError(
`monero refresh failed (height ${height}/${daemonHeight})`,
e,
)
} finally { } finally {
loading = false loading = false
refreshInFlight = null refreshInFlight = null
@@ -454,6 +511,18 @@ export const MoneroWallet = () => {
return refreshInFlight return refreshInFlight
} }
const fetchPrice = async () => {
const rpc = electrobun.rpc
if (!rpc || priceInFlight) return
priceInFlight = true
try {
const [p] = await tryCatch(rpc.request.fetchMoneroPrice({}))
if (p) price = p.usd
} finally {
priceInFlight = false
}
}
const send = async ( const send = async (
address: string, address: string,
amountAtomic: string, amountAtomic: string,
@@ -573,6 +642,9 @@ export const MoneroWallet = () => {
get syncing() { get syncing() {
return syncing return syncing
}, },
get price() {
return price
},
get error() { get error() {
return error return error
}, },
@@ -622,6 +694,7 @@ export const MoneroWallet = () => {
autoUnlock, autoUnlock,
unlockWallet, unlockWallet,
refresh, refresh,
fetchPrice,
send, send,
sendAll, sendAll,
createAccount, createAccount,
@@ -629,4 +702,15 @@ export const MoneroWallet = () => {
} }
} }
// Singleton: calling MoneroWallet() always returns the same instance, so
// no component can ever create a second, disconnected wallet state.
type MoneroWalletStore = ReturnType<typeof createMoneroWallet>
let moneroWalletInstance: MoneroWalletStore | null = null
export const MoneroWallet = (): MoneroWalletStore => {
if (!moneroWalletInstance) moneroWalletInstance = createMoneroWallet()
return moneroWalletInstance
}
export const moneroWallet = MoneroWallet() export const moneroWallet = MoneroWallet()
@@ -13,7 +13,7 @@ export const xrpNetwork = {
explorerAddressUrl: 'https://xrpscan.com/account/', explorerAddressUrl: 'https://xrpscan.com/account/',
} as const } as const
export const XrpWallet = () => { export const createXrpWallet = () => {
let accountType = $state<'xrp' | null>(null) let accountType = $state<'xrp' | null>(null)
let ready = $state(false) let ready = $state(false)
let biometricAvailable = $state(false) let biometricAvailable = $state(false)
@@ -29,6 +29,9 @@ export const XrpWallet = () => {
let loading = $state(false) let loading = $state(false)
let error = $state('') let error = $state('')
let wallets = $state<XrpWalletInfo[]>([]) let wallets = $state<XrpWalletInfo[]>([])
let balances = $state<Record<string, { balance: number; funded: boolean }>>({})
let balancesLoading = $state(false)
let fetchBalancesInFlight = false
let currentWalletId = $state<string | null>(null) let currentWalletId = $state<string | null>(null)
let currentPasswordHash = $state<string | null>(null) let currentPasswordHash = $state<string | null>(null)
@@ -73,7 +76,10 @@ export const XrpWallet = () => {
biometricAvailable = ok === true biometricAvailable = ok === true
} }
let initPromise: Promise<void> | null = null
const init = async () => { const init = async () => {
if (initPromise) return initPromise
initPromise = (async () => {
if (!electrobun.rpc) return if (!electrobun.rpc) return
const [walletList] = await tryCatch( const [walletList] = await tryCatch(
electrobun.rpc.request.xrpListWallets({}), electrobun.rpc.request.xrpListWallets({}),
@@ -86,6 +92,8 @@ export const XrpWallet = () => {
} }
await checkBiometric() await checkBiometric()
ready = true ready = true
})()
return initPromise
} }
const login = async () => { const login = async () => {
@@ -319,6 +327,34 @@ export const XrpWallet = () => {
})() })()
} }
const fetchBalances = async () => {
const rpc = electrobun.rpc
if (!rpc || fetchBalancesInFlight) return
if (wallets.length === 0) return
fetchBalancesInFlight = true
balancesLoading = true
try {
const [p] = await tryCatch(rpc.request.fetchXrpPrice({}))
if (p) price = p.usd
await Promise.allSettled(
wallets.map(async (w) => {
const [res] = await tryCatch(
rpc.request.xrpGetBalance({ address: w.address }),
)
if (res) {
balances[w.address] = {
balance: parseFloat(res.balance),
funded: res.funded,
}
}
}),
)
} finally {
balancesLoading = false
fetchBalancesInFlight = false
}
}
const send = async ( const send = async (
to: string, to: string,
amount: string, amount: string,
@@ -399,6 +435,12 @@ export const XrpWallet = () => {
get wallets() { get wallets() {
return wallets return wallets
}, },
get balances() {
return balances
},
get balancesLoading() {
return balancesLoading
},
get currentWalletId() { get currentWalletId() {
return currentWalletId return currentWalletId
}, },
@@ -424,6 +466,7 @@ export const XrpWallet = () => {
login, login,
logout, logout,
refresh, refresh,
fetchBalances,
createWallet, createWallet,
importWallet, importWallet,
lock, lock,
@@ -442,4 +485,15 @@ export const XrpWallet = () => {
} }
} }
// Singleton: calling XrpWallet() always returns the same instance, so no
// component can ever create a second, disconnected wallet state.
type XrpWalletStore = ReturnType<typeof createXrpWallet>
let xrpWalletInstance: XrpWalletStore | null = null
export const XrpWallet = (): XrpWalletStore => {
if (!xrpWalletInstance) xrpWalletInstance = createXrpWallet()
return xrpWalletInstance
}
export const xrpWallet = XrpWallet() export const xrpWallet = XrpWallet()
+106 -86
View File
@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { moneroWallet } from '$lib/states/monero-wallet.svelte.js' import { moneroWallet } from '$lib/states/monero-wallet.svelte.js'
import { xrpWallet } from '$lib/states/xrp-wallet.svelte.js' import { xrpWallet } from '$lib/states/xrp-wallet.svelte.js'
import { electrobun } from '$lib/electrobun.js'
import { navigate } from 'sv-router/generated' import { navigate } from 'sv-router/generated'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { import {
@@ -16,30 +15,23 @@
import WalletIcon from '@lucide/svelte/icons/wallet' import WalletIcon from '@lucide/svelte/icons/wallet'
import Loader from '$lib/components/loader.svelte' import Loader from '$lib/components/loader.svelte'
import { frontendLog, frontendLogError } from '$lib/electrobun.js' import { frontendLog, frontendLogError } from '$lib/electrobun.js'
import { arc } from 'd3-shape'
let xrpPrice = $state<string | null>(null) import { tweened } from 'svelte/motion'
let xmrPrice = $state<string | null>(null) import { cubicOut } from 'svelte/easing'
let xrpBalances = $state<Record<string, { balance: number; funded: boolean }>>({})
let loadingXrp = $state(true)
let loadingXmr = $state(true)
let fetchXrpInFlight = false
let feError = $state<string | null>(null) let feError = $state<string | null>(null)
const usd = (amount: string, price: string | null) =>
price ? parseFloat(amount) * parseFloat(price) : 0
const xrpTotalUsd = $derived.by(() => { const xrpTotalUsd = $derived.by(() => {
const price = xrpPrice const p = xrpWallet.price
return xrpWallet.wallets.reduce((sum, w) => { return xrpWallet.wallets.reduce((sum, w) => {
const b = xrpBalances[w.address]?.balance ?? 0 const b = xrpWallet.balances[w.address]?.balance ?? 0
return sum + (price ? b * parseFloat(price) : 0) return sum + (p ? b * parseFloat(p) : 0)
}, 0) }, 0)
}) })
const xrpTotalBalance = $derived.by(() => const xrpTotalBalance = $derived.by(() =>
xrpWallet.wallets.reduce((sum, w) => { xrpWallet.wallets.reduce((sum, w) => {
return sum + (xrpBalances[w.address]?.balance ?? 0) return sum + (xrpWallet.balances[w.address]?.balance ?? 0)
}, 0), }, 0),
) )
@@ -47,17 +39,54 @@
moneroWallet.walletOpen ? parseFloat(moneroWallet.balance || '0') : 0, moneroWallet.walletOpen ? parseFloat(moneroWallet.balance || '0') : 0,
) )
const xmrTotalUsd = $derived( const xmrTotalUsd = $derived(
moneroWallet.walletOpen && xmrPrice moneroWallet.walletOpen && moneroWallet.price
? xmrBalance * parseFloat(xmrPrice) ? xmrBalance * parseFloat(moneroWallet.price)
: 0, : 0,
) )
const portfolioUsd = $derived(xrpTotalUsd + xmrTotalUsd) const portfolioUsd = $derived(xrpTotalUsd + xmrTotalUsd)
const xrpShare = $derived(portfolioUsd > 0 ? xrpTotalUsd / portfolioUsd : 0)
const xmrShare = $derived(
portfolioUsd > 0 ? xmrTotalUsd / portfolioUsd : 0,
)
const tweenedUsd = tweened(0, { duration: 600, easing: cubicOut })
const tweenedXrpShare = tweened(0, { duration: 600, easing: cubicOut })
$effect(() => {
tweenedUsd.set(portfolioUsd)
tweenedXrpShare.set(xrpShare)
})
const donut = $derived.by(() => {
if (portfolioUsd <= 0) return { xrp: '', xmr: '' }
const a = arc<{ startAngle: number; endAngle: number }>()
.innerRadius(62)
.outerRadius(80)
.padAngle(0.02)
const start = -Math.PI / 2
const endXrp = start + $tweenedXrpShare * 2 * Math.PI
return {
xrp: a({ startAngle: start, endAngle: endXrp }) ?? '',
xmr: a({ startAngle: endXrp, endAngle: start + 2 * Math.PI }) ?? '',
}
})
const hasXrp = $derived(xrpWallet.wallets.length > 0) const hasXrp = $derived(xrpWallet.wallets.length > 0)
const hasXmr = $derived(moneroWallet.wallets.length > 0) const hasXmr = $derived(moneroWallet.wallets.length > 0)
const noWallets = $derived(!hasXrp && !hasXmr) const noWallets = $derived(!hasXrp && !hasXmr)
const moneroDot = $derived(
!moneroWallet.running
? 'bg-muted'
: !moneroWallet.connected
? 'bg-red-500'
: moneroWallet.syncing || moneroWallet.height < moneroWallet.daemonHeight
? 'bg-yellow-500 animate-pulse'
: 'bg-emerald-500',
)
const fmtUsd = (v: number) => const fmtUsd = (v: number) =>
v.toLocaleString(undefined, { v.toLocaleString(undefined, {
minimumFractionDigits: 2, minimumFractionDigits: 2,
@@ -70,66 +99,23 @@
maximumFractionDigits: dp, maximumFractionDigits: dp,
}) })
async function fetchXrp() { const fmtPct = (v: number) => `${Math.round(v * 100)}%`
if (fetchXrpInFlight) return
fetchXrpInFlight = true
loadingXrp = true
const rpc = electrobun.rpc
if (!rpc) {
loadingXrp = false
fetchXrpInFlight = false
return
}
try {
const p = await rpc.request.fetchXrpPrice({})
if (p) xrpPrice = p.usd
} catch { /* ignore */ }
await Promise.allSettled(
xrpWallet.wallets.map(async (w) => {
const res = await rpc.request.xrpGetBalance({
address: w.address,
})
xrpBalances[w.address] = {
balance: parseFloat(res.balance),
funded: res.funded,
}
}),
)
loadingXrp = false
fetchXrpInFlight = false
}
async function fetchXmr() {
loadingXmr = true
const rpc = electrobun.rpc
if (!rpc) {
loadingXmr = false
return
}
try {
const p = await rpc.request.fetchMoneroPrice({})
xmrPrice = p?.usd ?? null
} catch { /* ignore */ }
loadingXmr = false
}
onMount(() => { onMount(() => {
frontendLog('dashboard mounted') frontendLog('dashboard mounted')
moneroWallet.init().catch((e) => frontendLogError('moneroWallet.init() failed', e))
xrpWallet.init().catch((e) => frontendLogError('xrpWallet.init() failed', e))
fetchXmr()
}) })
// Wait for the XRP wallet list to load, then fetch balances. // Balances live in the stores so they survive navigation; the effects
// only trigger background refetches.
$effect(() => { $effect(() => {
if (xrpWallet.ready && xrpWallet.wallets.length > 0) { if (xrpWallet.ready && xrpWallet.wallets.length > 0) {
fetchXrp() xrpWallet.fetchBalances()
} }
}) })
$effect(() => { $effect(() => {
if (moneroWallet.walletOpen) { if (moneroWallet.walletOpen) {
fetchXmr() moneroWallet.fetchPrice()
} }
}) })
@@ -189,9 +175,9 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="flex flex-col items-center pt-4 pb-2"> <div class="flex flex-col items-center pt-4 pb-2">
<p class="text-xs text-muted-foreground">Total Portfolio Value</p> <p class="text-xs text-muted-foreground">Total Portfolio Value</p>
{#if loadingXrp || loadingXmr || moneroWallet.opening || (moneroWallet.wallets.length > 0 && !moneroWallet.walletOpen)} {#if moneroWallet.opening || (moneroWallet.wallets.length > 0 && !moneroWallet.walletOpen) || (xrpWallet.wallets.length > 0 && !xrpWallet.price) || (moneroWallet.walletOpen && !moneroWallet.price)}
<div class="mt-2 h-9 w-44 rounded-md bg-muted animate-pulse"></div> <div class="mt-2 h-9 w-44 rounded-md bg-muted animate-pulse"></div>
{:else} {:else}
<p class="mt-1 text-3xl font-semibold tabular-nums"> <p class="mt-1 text-3xl font-semibold tabular-nums">
@@ -200,6 +186,43 @@
{/if} {/if}
</div> </div>
<Card>
<CardHeader class="pb-2">
<CardTitle class="text-base">Portfolio Allocation</CardTitle>
<CardDescription class="text-xs">
Share of your balance by asset
</CardDescription>
</CardHeader>
<CardContent class="flex flex-col items-center gap-5 py-6">
<div class="relative">
<svg viewBox="-100 -100 200 200" class="size-48">
<path d={donut.xrp} fill="#0EA5E9" />
<path d={donut.xmr} fill="#F97316" />
</svg>
<div
class="absolute inset-0 flex flex-col items-center justify-center">
<p
class="text-lg font-semibold tabular-nums">$
{fmtUsd($tweenedUsd)}
</p>
<p class="text-xs text-muted-foreground">
Portfolio
</p>
</div>
</div>
<div class="flex gap-5 text-xs">
<span class="flex items-center gap-1.5">
<span class="size-2.5 rounded-full bg-sky-500"></span>
XRP · {fmtPct($tweenedXrpShare)}
</span>
<span class="flex items-center gap-1.5">
<span class="size-2.5 rounded-full bg-orange-500"></span>
XMR · {fmtPct(1 - $tweenedXrpShare)}
</span>
</div>
</CardContent>
</Card>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<button <button
onclick={() => navigate('/xrp')} onclick={() => navigate('/xrp')}
@@ -210,21 +233,19 @@
<img src="/icons/xrp.png" alt="" class="size-5 rounded-full" /> <img src="/icons/xrp.png" alt="" class="size-5 rounded-full" />
<CardTitle class="text-base">XRP</CardTitle> <CardTitle class="text-base">XRP</CardTitle>
</div> </div>
<CardDescription class="text-xs"> <CardDescription class="text-xs">XRP Ledger</CardDescription>
{xrpWallet.wallets.length} wallet{xrpWallet.wallets.length !== 1 ? 's' : ''}
</CardDescription>
</CardHeader> </CardHeader>
<CardContent class="flex flex-1 flex-col justify-center"> <CardContent class="flex flex-1 flex-col justify-center">
{#if !xrpWallet.ready || loadingXrp || (xrpWallet.wallets.length > 0 && Object.keys(xrpBalances).length === 0)} {#if !xrpWallet.ready || (xrpWallet.wallets.length > 0 && Object.keys(xrpWallet.balances).length === 0)}
<div class="h-14 flex items-center"><Loader /></div> <div class="h-14 flex items-center"><Loader /></div>
{:else} {:else}
<p class="font-mono text-xl tabular-nums">{fmtBal(xrpTotalBalance)}</p> <p class="font-mono text-xl tabular-nums">{fmtBal(xrpTotalBalance)}</p>
{#if xrpPrice} {#if xrpWallet.price}
<p class="mt-0.5 text-sm text-muted-foreground tabular-nums"> <p class="mt-0.5 text-sm text-muted-foreground tabular-nums">
${fmtUsd(xrpTotalUsd)} ${fmtUsd(xrpTotalUsd)}
</p> </p>
<p class="mt-2 text-xs text-muted-foreground"> <p class="mt-2 text-xs text-muted-foreground">
${fmtUsd(parseFloat(xrpPrice) )} / XRP ${fmtUsd(parseFloat(xrpWallet.price) )} / XRP
</p> </p>
{/if} {/if}
{/if} {/if}
@@ -241,27 +262,28 @@
<img src="/icons/monero.png" alt="" class="size-5 rounded-full" /> <img src="/icons/monero.png" alt="" class="size-5 rounded-full" />
<CardTitle class="text-base">Monero</CardTitle> <CardTitle class="text-base">Monero</CardTitle>
</div> </div>
<CardDescription class="text-xs"> <CardDescription class="flex items-center gap-1.5 text-xs">
{moneroWallet.walletOpen <span class="size-2 shrink-0 rounded-full {moneroDot}"></span>
? moneroWallet.walletName || 'Wallet open' {#if !moneroWallet.running}
: moneroWallet.wallets.length > 0 Server offline
? `${moneroWallet.wallets.length} wallet${moneroWallet.wallets.length !== 1 ? 's' : ''}` {:else if !moneroWallet.connected}
: 'Not set up'} Connecting to daemon…
{:else}
{fmtBal(moneroWallet.height, 0)} / {fmtBal(moneroWallet.daemonHeight, 0)}
{/if}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent class="flex flex-1 flex-col justify-center"> <CardContent class="flex flex-1 flex-col justify-center">
{#if moneroWallet.walletOpen} {#if moneroWallet.walletOpen}
<p class="font-mono text-xl tabular-nums">{fmtBal(xmrBalance, 4)}</p> <p class="font-mono text-xl tabular-nums">{fmtBal(xmrBalance, 4)}</p>
{#if moneroWallet.syncing} {#if !moneroWallet.syncing && moneroWallet.price}
<p class="mt-0.5 text-xs text-muted-foreground">Syncing…</p>
{:else if xmrPrice}
<p class="mt-0.5 text-sm text-muted-foreground tabular-nums"> <p class="mt-0.5 text-sm text-muted-foreground tabular-nums">
${fmtUsd(xmrTotalUsd)} ${fmtUsd(xmrTotalUsd)}
</p> </p>
{/if} {/if}
{#if xmrPrice} {#if moneroWallet.price}
<p class="mt-2 text-xs text-muted-foreground"> <p class="mt-2 text-xs text-muted-foreground">
${fmtUsd(parseFloat(xmrPrice) )} / XMR ${fmtUsd(parseFloat(moneroWallet.price) )} / XMR
</p> </p>
{/if} {/if}
{:else if moneroWallet.passwordRequired && moneroWallet.wallets.length > 0} {:else if moneroWallet.passwordRequired && moneroWallet.wallets.length > 0}
@@ -289,8 +311,6 @@
<Loader /> <Loader />
<p class="text-sm text-muted-foreground">Opening wallet...</p> <p class="text-sm text-muted-foreground">Opening wallet...</p>
</div> </div>
{:else if loadingXmr}
<div class="h-14 flex items-center"><Loader /></div>
{:else} {:else}
<Button <Button
onclick={() => navigate('/monero')} onclick={() => navigate('/monero')}
+1
View File
@@ -31,6 +31,7 @@
if (!xrpWallet.ready) await xrpWallet.init() if (!xrpWallet.ready) await xrpWallet.init()
if (!moneroWallet.ready) await moneroWallet.init() if (!moneroWallet.ready) await moneroWallet.init()
await Promise.allSettled([ await Promise.allSettled([
xrpWallet.login(),
xrpWallet.autoUnlock(), xrpWallet.autoUnlock(),
moneroWallet.login(), moneroWallet.login(),
]) ])
@@ -24,8 +24,6 @@
let unlocking = $state(false) let unlocking = $state(false)
let unlockError = $state('') let unlockError = $state('')
let initStarted = false
async function unlockWithPassword() { async function unlockWithPassword() {
if (unlocking || !walletPassword.trim()) return if (unlocking || !walletPassword.trim()) return
unlocking = true unlocking = true
@@ -48,16 +46,6 @@
} }
}) })
$effect(() => {
if (!initStarted) {
initStarted = true
w.init().then(async () => {
if (w.accountType === 'monero') return
await w.login()
})
}
})
$effect(() => { $effect(() => {
if (w.running && !w.walletOpen && w.wallets.length > 0 && !w.loading && !w.opening) { if (w.running && !w.walletOpen && w.wallets.length > 0 && !w.loading && !w.opening) {
w.autoUnlock(w.wallets[0]) w.autoUnlock(w.wallets[0])
@@ -19,6 +19,8 @@
SelectTrigger, SelectTrigger,
} from '$lib/components/ui/select/index.js' } from '$lib/components/ui/select/index.js'
import { navigate } from 'sv-router/generated' import { navigate } from 'sv-router/generated'
import QrUpload from '$lib/components/qr-upload.svelte'
import { parseQrPayload } from '$lib/qr.js'
const w = moneroWallet const w = moneroWallet
@@ -134,7 +136,15 @@
</div> </div>
<div class="space-y-1.5"> <div class="space-y-1.5">
<div class="flex items-center justify-between">
<label class="text-xs font-medium">Recipient Address</label> <label class="text-xs font-medium">Recipient Address</label>
<QrUpload
onDecode={(text) => {
const parsed = parseQrPayload(text, 'monero')
recipient = parsed.address
if (parsed.amount && !sendAll) amountXmr = parsed.amount
}} />
</div>
<Input <Input
placeholder="Monero address starting with 4..." placeholder="Monero address starting with 4..."
bind:value={recipient} /> bind:value={recipient} />
@@ -15,10 +15,6 @@
const w = moneroWallet const w = moneroWallet
let moneroSettingsPw = $state('') let moneroSettingsPw = $state('')
$effect(() => {
w.init()
})
</script> </script>
<div class="mx-auto max-w-xl"> <div class="mx-auto max-w-xl">
@@ -154,7 +154,6 @@
$effect(() => { $effect(() => {
if (w.walletOpen && !autoRefreshTimer) { if (w.walletOpen && !autoRefreshTimer) {
autoRefreshTimer = setInterval(() => { autoRefreshTimer = setInterval(() => {
w.refresh()
electrobun.rpc?.request electrobun.rpc?.request
.fetchMoneroPrice({}) .fetchMoneroPrice({})
.then((p) => (moneroPrice = p)) .then((p) => (moneroPrice = p))
-12
View File
@@ -22,18 +22,6 @@
let inputUnlockPassword = $state('') let inputUnlockPassword = $state('')
let newSeed = $state<string | null>(null) let newSeed = $state<string | null>(null)
let initStarted = false
$effect(() => {
if (!initStarted) {
initStarted = true
w.init().then(async () => {
if (w.accountType === 'xrp') return
await w.login()
})
}
})
$effect(() => { $effect(() => {
if (w.accountType === 'xrp' && w.currentWalletId && w.seed && !newSeed) { if (w.accountType === 'xrp' && w.currentWalletId && w.seed && !newSeed) {
navigate('/xrp/wallet/:id', { navigate('/xrp/wallet/:id', {
+11
View File
@@ -10,6 +10,8 @@
CardDescription, CardDescription,
} from '$lib/components/ui/card/index.js' } from '$lib/components/ui/card/index.js'
import { navigate } from 'sv-router/generated' import { navigate } from 'sv-router/generated'
import QrUpload from '$lib/components/qr-upload.svelte'
import { parseQrPayload } from '$lib/qr.js'
const w = xrpWallet const w = xrpWallet
@@ -78,7 +80,16 @@
}} }}
class="space-y-4"> class="space-y-4">
<div class="space-y-1.5"> <div class="space-y-1.5">
<div class="flex items-center justify-between">
<label class="text-xs font-medium">Recipient Address</label> <label class="text-xs font-medium">Recipient Address</label>
<QrUpload
onDecode={(text) => {
const parsed = parseQrPayload(text, 'xrp')
recipient = parsed.address
if (parsed.destinationTag) destinationTag = parsed.destinationTag
if (parsed.amount) amountXrp = parsed.amount
}} />
</div>
<Input <Input
placeholder="XRP address starting with r..." placeholder="XRP address starting with r..."
bind:value={recipient} /> bind:value={recipient} />
+4 -1
View File
@@ -18,6 +18,7 @@
"d3-shape": "^3.2.0", "d3-shape": "^3.2.0",
"electrobun": "^1.18.1", "electrobun": "^1.18.1",
"env-paths": "^4.0.0", "env-paths": "^4.0.0",
"jsqr": "^1.4.0",
"mode-watcher": "^1.1.0", "mode-watcher": "^1.1.0",
"monero-ts": "^0.11.8", "monero-ts": "^0.11.8",
"qrcode": "^1.5.4", "qrcode": "^1.5.4",
@@ -640,6 +641,8 @@
"json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="], "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
"jsqr": ["jsqr@1.4.0", "", {}, "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="],
"kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="], "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
"koins": ["koins@workspace:apps/desktop"], "koins": ["koins@workspace:apps/desktop"],
@@ -846,7 +849,7 @@
"supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="], "supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="],
"sv-router": ["sv-router@0.18.0", "", { "dependencies": { "esm-env": "^1.2.2" }, "peerDependencies": { "svelte": "^5" }, "bin": { "sv-router": "./src/cli/index.js" } }, "sha512-gLky7FBGj8P6MAna1wxYniHJxMrXgaeTNnkZ7WH387ddRyUohfDtvEgWQFfB4oLL2XxWlw8Lfmk03TtBdK/JTA=="], "sv-router": ["sv-router@0.18.1", "", { "dependencies": { "esm-env": "^1.2.2" }, "peerDependencies": { "svelte": "^5" }, "bin": { "sv-router": "./src/cli/index.js" } }, "sha512-xMJxgDwmcWtLDopU6xdEiBICRN40ucTlK63GUZf6cQk8689LUaUD5FlMrdtTdPFRQ2kfJBeJgoaI1k+XOuIQSQ=="],
"svelte": ["svelte@5.55.5", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "@types/trusted-types": "^2.0.7", "acorn": "^8.12.1", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.6.4", "esm-env": "^1.2.1", "esrap": "^2.2.4", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-2uCs/LZ9us+AktdzYJM8OcxQ8qnPS1kpaO7syGT/MgO+6Qr1Ybl+TqPq+97u7PHqmmMlye5ZkoyXONy5mjjAbw=="], "svelte": ["svelte@5.55.5", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "@types/trusted-types": "^2.0.7", "acorn": "^8.12.1", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.6.4", "esm-env": "^1.2.1", "esrap": "^2.2.4", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-2uCs/LZ9us+AktdzYJM8OcxQ8qnPS1kpaO7syGT/MgO+6Qr1Ybl+TqPq+97u7PHqmmMlye5ZkoyXONy5mjjAbw=="],