Explorer

The Explorer is a Next.js-based block explorer that provides real-time visualization of Kaizen's blockchain state, transactions, theses, and events.

Features

Real-time Dashboard: Live view of blocks, transactions, and events
Detail Pages: In-depth views for blocks, transactions, accounts, and theses
Oracle Prices: Live oracle price feeds and historical price charts
Bridge Monitoring: Track pending and processed withdrawals
Global Search: Smart search across blocks, transactions, addresses, and theses
SSR Support: Server-side rendering with RPC proxy for production deployments

Running Locally

# Development mode
pnpm run --filter @kaizen-core/explorer dev
 
# Production build
pnpm run --filter @kaizen-core/explorer build
pnpm run --filter @kaizen-core/explorer start

Environment Variables

Variable	Default	Description
`NEXT_PUBLIC_KAIZEN_RPC_URL`	`http://localhost:8545`	Public RPC endpoint for client-side calls
`NEXT_PUBLIC_USE_SSR_PROXY`	`false`	Enable SSR API routes for RPC calls
`KAIZEN_RPC_URL`	-	Server-side RPC endpoint (when SSR enabled)
`KAIZEN_ARCHIVE_RPC_URL`	-	Archive node RPC for historical queries

Views

Dashboard

The main dashboard displays:

Stats: Current block height, total transactions, active theses, total events
Recent Blocks: Last 20 blocks with expandable transaction details
Recent Events: Events from initial block fetch (up to 20 blocks)
Connection Status: WebSocket and RPC connection indicators

Blocks View

Lists all blocks with:

Block height and timestamp
State root hash
Transaction count
Expandable view showing individual transactions

Click on a block to view its detail page with full transaction list.

Transactions View

Displays recent transactions with:

Transaction hash
Type (Transfer, Deposit, Withdraw, SubmitThesis, etc.)
Sender address
Block height

Theses View

Shows active and recent theses with:

Thesis ID and status
User and solver addresses
Oracle pair and price bounds
Bet amount and payout
Settlement status

Events View

Real-time event stream showing:

Event type (Transfer, Deposit, RfqSubmitted, RfqSettled, etc.)
Event data (amounts, addresses, outcomes)
Grouped by category (Trading, Balance, Oracle, Bridge)

Oracle View

Displays oracle price feeds:

Current prices for all registered oracle pairs
Historical price chart with 24-hour data
Price update timestamps

Bridge View

Bridge monitoring dashboard:

Unprocessed withdrawal queue
Individual withdrawal details
Status tracking (Pending, Processing, Completed, Failed)

Detail Pages

Block Detail (`/block/[height]`)

Shows comprehensive block information:

Block metadata (height, timestamp, state root)
Full transaction list with links to transaction details
Event summary

Transaction Detail (`/tx/[hash]`)

Displays transaction details:

Transaction hash and status
Type and payload data
Block information
Events emitted by the transaction

Account Detail (`/account/[address]`)

Shows account information:

Current balance
Associated API wallets
User's thesis history
Withdrawal history

Thesis Detail (`/thesis/[id]`)

Complete thesis information:

Thesis parameters (oracle pair, price bounds, timing)
User and solver addresses
Bet amount and potential payout
Current status and settlement outcome

Architecture

Data Fetching Strategy

The explorer uses a hybrid approach for optimal performance:

Initial Load: Fetches last 20 blocks with full transaction data via RPC
Real-time Updates: WebSocket subscription for new block notifications
On-demand Details: Detail pages fetch data via React Query with caching

This approach minimizes RPC load while providing real-time updates.

SSR Proxy

When NEXT_PUBLIC_USE_SSR_PROXY=true, client requests are routed through Next.js API routes:

/api/rpc - Proxies RPC calls, routing historical queries to archive node
/api/search - Server-side search across blocks, transactions, accounts, theses

This hides internal RPC endpoints from clients and enables intelligent request routing.

State Management

Zustand: Global state for blocks, events, connection status, selected view
React Query: Server state caching for detail pages and search results

Docker Deployment

The explorer is included in the Docker Compose stack:

explorer:
  build:
    context: .
    dockerfile: docker/Dockerfile.explorer
  ports:
    - "3100:3000"
  environment:
    - NEXT_PUBLIC_KAIZEN_RPC_URL=http://localhost:8546
    - NEXT_PUBLIC_USE_SSR_PROXY=true
    - KAIZEN_RPC_URL=http://proxy:8545
    - KAIZEN_ARCHIVE_RPC_URL=http://read-node-archive:8545

Access at http://localhost:3100 when running via Docker Compose.

Global Search

The search bar in the header supports:

Block Height: Numbers (e.g., 12345) → Block detail page
Transaction Hash: 66-char hex with 0x prefix → Transaction detail page
Address: 42-char hex with 0x prefix → Account detail page
Thesis ID: Numbers → Thesis detail page

Search intelligently routes to the appropriate detail page based on input format.