Skip to content

Block 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 2 Application framework
Svelte 5 (runes) Reactivity and components
TailwindCSS v4 Styling
tweetnacl -- Ed25519 (for address validation)
blakejs -- Blake2b (utility)
Vite 6 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

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.

See Deployment for full details.

See also