Explorer Web

Overview

The AITBC Explorer Web provides a comprehensive view of the blockchain, allowing users to track blocks, transactions, addresses, and AI computation receipts in real-time.

Key Features

• Real-time block and transaction tracking
• Address balance and transaction history
• AI computation receipt verification
• Search functionality for blocks, transactions, and addresses
• Responsive design for all devices
• Live data updates via WebSocket

Architecture

The explorer is built as a modern single-page application:

Features

Block Explorer

• Latest blocks list with timestamps
• Detailed block view with transactions
• Block validation status
• Block size and gas metrics

Transaction Tracker

• Transaction details and status
• Input/output addresses
• Gas fees and confirmations
• Transaction mempool status

Address Viewer

• Address balance and history
• Transaction list per address
• QR code generation
• Address labeling

AI Receipt Explorer

• Computation receipt details
• ZK-proof verification
• Job metadata and results
• Miner rewards tracking

API Integration

The explorer connects directly to the blockchain node RPC API:

// Get latest blocks
GET /rpc/get_latest_blocks?limit=50

// Get block by height
GET /rpc/get_block/{height}

// Get transaction by hash
GET /rpc/get_transaction/{hash}

// Get address info
GET /rpc/get_address/{address}

// WebSocket subscription
ws://localhost:9081/ws
{
  "method": "subscribe",
  "params": ["new_blocks", "new_transactions"]
}

Deployment

Docker Deployment

# Build explorer image
docker build -t aitbc/explorer-web .

# Run with nginx
docker run -d \
  -p 80:80 \
  -e API_URL=http://blockchain-node:9080 \
  -e WS_URL=ws://blockchain-node:9081 \
  aitbc/explorer-web

Configuration

# Environment variables
API_URL=http://localhost:9080
WS_URL=ws://localhost:9081
NETWORK_NAME=mainnet
CACHE_TTL=300

Development

Local Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

Project Structure

explorer-web/
├── src/
│   ├── components/     # React components
│   ├── pages/         # Page components
│   ├── hooks/         # Custom hooks
│   ├── services/      # API services
│   └── utils/         # Utilities
├── public/
├── package.json
└── Dockerfile