Back to Components

# Explorer Web

Full-featured blockchain explorer with blocks, transactions, addresses, and receipts tracking. Responsive design with live data.

● Live

## 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:

#### Frontend

React with TypeScript for type safety

#### API Integration

Direct blockchain RPC API connection

#### Real-time Updates

WebSocket for live block updates

Responsive

Mobile-first responsive design

## 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