209 lines
7.3 KiB
HTML
209 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Explorer Web - AITBC Documentation</title>
|
||
|
||
<link rel="stylesheet" href="css/docs.css">
|
||
<link rel="stylesheet" href="../assets/css/site-header.css">
|
||
<link rel="preload" href="../assets/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
||
<noscript><link rel="stylesheet" href="../assets/css/font-awesome.min.css"></noscript>
|
||
<!-- Font Awesome CDN fallback -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" media="print" onload="this.media='all'; this.onload=null;">
|
||
</head>
|
||
<body>
|
||
<div data-global-header></div>
|
||
|
||
<main>
|
||
<div class="container">
|
||
<!-- Breadcrumb -->
|
||
<div class="breadcrumb">
|
||
<a href="index.html">Documentation</a>
|
||
<span>›</span>
|
||
<a href="components.html">Components</a>
|
||
<span>›</span>
|
||
<span>Explorer Web</span>
|
||
</div>
|
||
|
||
<!-- Back Button -->
|
||
<a href="components.html" class="back-button">
|
||
<i class="fas fa-arrow-left"></i>
|
||
Back to Components
|
||
</a>
|
||
|
||
<!-- Header -->
|
||
<div class="doc-header">
|
||
<h1><i class="fas fa-search"></i> Explorer Web</h1>
|
||
<p>Full-featured blockchain explorer with blocks, transactions, addresses, and receipts tracking. Responsive design with live data.</p>
|
||
<span class="status-badge">● Live</span>
|
||
</div>
|
||
|
||
<!-- Overview -->
|
||
<section class="content-section">
|
||
<h2>Overview</h2>
|
||
<p>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.</p>
|
||
|
||
<h3>Key Features</h3>
|
||
<ul>
|
||
<li>Real-time block and transaction tracking</li>
|
||
<li>Address balance and transaction history</li>
|
||
<li>AI computation receipt verification</li>
|
||
<li>Search functionality for blocks, transactions, and addresses</li>
|
||
<li>Responsive design for all devices</li>
|
||
<li>Live data updates via WebSocket</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Architecture -->
|
||
<section class="content-section">
|
||
<h2>Architecture</h2>
|
||
<p>The explorer is built as a modern single-page application:</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h4><i class="fas fa-paint-brush"></i> Frontend</h4>
|
||
<p>React with TypeScript for type safety</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4><i class="fas fa-plug"></i> API Integration</h4>
|
||
<p>Direct blockchain RPC API connection</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4><i class="fas fa-sync"></i> Real-time Updates</h4>
|
||
<p>WebSocket for live block updates</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<i class="fas fa-mobile-alt"></i> Responsive</h4>
|
||
<p>Mobile-first responsive design</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section class="content-section">
|
||
<h2>Features</h2>
|
||
|
||
<h3>Block Explorer</h3>
|
||
<ul>
|
||
<li>Latest blocks list with timestamps</li>
|
||
<li>Detailed block view with transactions</li>
|
||
<li>Block validation status</li>
|
||
<li>Block size and gas metrics</li>
|
||
</ul>
|
||
|
||
<h3>Transaction Tracker</h3>
|
||
<ul>
|
||
<li>Transaction details and status</li>
|
||
<li>Input/output addresses</li>
|
||
<li>Gas fees and confirmations</li>
|
||
<li>Transaction mempool status</li>
|
||
</ul>
|
||
|
||
<h3>Address Viewer</h3>
|
||
<ul>
|
||
<li>Address balance and history</li>
|
||
<li>Transaction list per address</li>
|
||
<li>QR code generation</li>
|
||
<li>Address labeling</li>
|
||
</ul>
|
||
|
||
<h3>AI Receipt Explorer</h3>
|
||
<ul>
|
||
<li>Computation receipt details</li>
|
||
<li>ZK-proof verification</li>
|
||
<li>Job metadata and results</li>
|
||
<li>Miner rewards tracking</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- API Integration -->
|
||
<section class="content-section">
|
||
<h2>API Integration</h2>
|
||
<p>The explorer connects directly to the blockchain node RPC API:</p>
|
||
|
||
<pre><code>// 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"]
|
||
}</code></pre>
|
||
</section>
|
||
|
||
<!-- Deployment -->
|
||
<section class="content-section">
|
||
<h2>Deployment</h2>
|
||
|
||
<h3>Docker Deployment</h3>
|
||
<pre><code># 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</code></pre>
|
||
|
||
<h3>Configuration</h3>
|
||
<pre><code># Environment variables
|
||
API_URL=http://localhost:9080
|
||
WS_URL=ws://localhost:9081
|
||
NETWORK_NAME=mainnet
|
||
CACHE_TTL=300</code></pre>
|
||
</section>
|
||
|
||
<!-- Development -->
|
||
<section class="content-section">
|
||
<h2>Development</h2>
|
||
|
||
<h3>Local Development</h3>
|
||
<pre><code># Install dependencies
|
||
npm install
|
||
|
||
# Start development server
|
||
npm run dev
|
||
|
||
# Build for production
|
||
npm run build
|
||
|
||
# Run tests
|
||
npm test</code></pre>
|
||
|
||
<h3>Project Structure</h3>
|
||
<pre><code>explorer-web/
|
||
├── src/
|
||
│ ├── components/ # React components
|
||
│ ├── pages/ # Page components
|
||
│ ├── hooks/ # Custom hooks
|
||
│ ├── services/ # API services
|
||
│ └── utils/ # Utilities
|
||
├── public/
|
||
├── package.json
|
||
└── Dockerfile</code></pre>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2026 AITBC. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
<script src="js/theme.js"></script>
|
||
<script src="../assets/js/global-header.js"></script>
|
||
</body>
|
||
</html>
|