Explorer

The XE block explorer is a SvelteKit 2 / Svelte 5 web application that provides a real-time view of the XE network. It connects to a node's HTTP API to display accounts, blocks, leases, conflicts, state chain data, and network statistics.

Design

The explorer uses a TUI-inspired monospace aesthetic with a light-on-dark slate color scheme. Typography is built around Berkeley Mono, IBM Plex Mono, and JetBrains Mono as fallbacks.

All data is read-only -- the explorer does not hold any keys or sign transactions.

Features

Real-time network dashboard with live statistics (accounts, blocks, leases, peers, conflicts)
Account explorer with full block chain history and multi-asset balances
Block search by hash with complete field display
Pending transaction tracking across all accounts
Conflict visualization showing competing blocks and resolution state
Lease management view with status, resources, cost, and duration
Provider dashboard with capacity metrics and earnings
State chain inspector with block history and KV browser
Responsive design that works on desktop and mobile
Sortable tables for accounts, leases, and other list views
Copy-to-clipboard utilities for addresses, hashes, and other values

Tech stack

Component

Version

Purpose

SvelteKit

Application framework

Svelte

5 (runes)

Reactivity and components

TailwindCSS

Styling

tweetnacl

Ed25519 (for address validation)

blakejs

Blake2b (utility)

Vite

Build tooling

adapter-static

SPA output

API integration

The explorer fetches all data from the node's HTTP API. In development, requests go to a local node. In production, Caddy proxies /api/* requests to the node container.

Browser → Caddy → /api/* → Node (port 8080)
         ↓
         /* → Static files (explorer SPA)

[!NOTE] Note The explorer is deployed as a static SPA (single-page application). Caddy serves the static files from /opt/xe/web/explorer/ and falls back to /index.html for client-side routing. See Deployment for the Caddy configuration.

Deployment

The explorer is built as static files by CI (npm ci && npm run build) and rsynced to /opt/xe/web/explorer/ on each host. Caddy serves the files directly from disk.