chore: remove configuration files and enhance blockchain explorer with advanced search, analytics, and export features
- Delete .aitbc.yaml.example CLI configuration template - Delete .lycheeignore link checker exclusion rules - Delete .nvmrc Node.js version specification - Add advanced search panel with filters for address, amount range, transaction type, time range, and validator - Add analytics dashboard with transaction volume, active addresses, and block time metrics - Add Chart.js integration
This commit is contained in:
oib
@@ -1,25 +1,52 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
AITBC Blockchain Explorer
|
||||
A simple web interface to explore the blockchain
|
||||
AITBC Blockchain Explorer - Enhanced Version
|
||||
Advanced web interface with search, analytics, and export capabilities
|
||||
"""
|
||||
|
||||
import asyncio
|
||||
import httpx
|
||||
import json
|
||||
from datetime import datetime
|
||||
from typing import Dict, List, Optional, Any
|
||||
from fastapi import FastAPI, Request, HTTPException
|
||||
from fastapi.responses import HTMLResponse
|
||||
import csv
|
||||
import io
|
||||
from datetime import datetime, timedelta
|
||||
from typing import Dict, List, Optional, Any, Union
|
||||
from fastapi import FastAPI, Request, HTTPException, Query, Response
|
||||
from fastapi.responses import HTMLResponse, StreamingResponse
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from pydantic import BaseModel, Field
|
||||
import uvicorn
|
||||
|
||||
app = FastAPI(title="AITBC Blockchain Explorer", version="1.0.0")
|
||||
app = FastAPI(title="AITBC Blockchain Explorer", version="2.0.0")
|
||||
|
||||
# Configuration
|
||||
BLOCKCHAIN_RPC_URL = "http://localhost:8082" # Local blockchain node
|
||||
EXTERNAL_RPC_URL = "http://aitbc.keisanki.net:8082" # External access
|
||||
|
||||
# Pydantic models for API
|
||||
class TransactionSearch(BaseModel):
|
||||
address: Optional[str] = None
|
||||
amount_min: Optional[float] = None
|
||||
amount_max: Optional[float] = None
|
||||
tx_type: Optional[str] = None
|
||||
since: Optional[str] = None
|
||||
until: Optional[str] = None
|
||||
limit: int = Field(default=50, ge=1, le=1000)
|
||||
offset: int = Field(default=0, ge=0)
|
||||
|
||||
class BlockSearch(BaseModel):
|
||||
validator: Optional[str] = None
|
||||
since: Optional[str] = None
|
||||
until: Optional[str] = None
|
||||
min_tx: Optional[int] = None
|
||||
limit: int = Field(default=50, ge=1, le=1000)
|
||||
offset: int = Field(default=0, ge=0)
|
||||
|
||||
class AnalyticsRequest(BaseModel):
|
||||
period: str = Field(default="24h", pattern="^(1h|24h|7d|30d)$")
|
||||
granularity: Optional[str] = None
|
||||
metrics: List[str] = Field(default_factory=list)
|
||||
|
||||
# HTML Template
|
||||
HTML_TEMPLATE = r"""
|
||||
<!DOCTYPE html>
|
||||
@@ -30,6 +57,7 @@ HTML_TEMPLATE = r"""
|
||||
<title>AITBC Blockchain Explorer</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
.fade-in {{ animation: fadeIn 0.3s ease-in; }}
|
||||
@keyframes fadeIn {{ from {{ opacity: 0; }} to {{ opacity: 1; }} }}
|
||||
@@ -86,24 +114,218 @@ HTML_TEMPLATE = r"""
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<!-- Advanced Search -->
|
||||
<div class="bg-white rounded-lg shadow p-6 mb-8">
|
||||
<div class="flex space-x-4">
|
||||
<input type="text" id="search-input" placeholder="Search by block height, hash, or transaction hash"
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold text-gray-800">Advanced Search</h2>
|
||||
<div class="flex space-x-2">
|
||||
<button onclick="toggleAdvancedSearch()" class="text-blue-600 hover:text-blue-800 text-sm">
|
||||
<i data-lucide="settings" class="w-4 h-4 inline mr-1"></i>
|
||||
Advanced
|
||||
</button>
|
||||
<button onclick="clearSearch()" class="text-gray-600 hover:text-gray-800 text-sm">
|
||||
<i data-lucide="x" class="w-4 h-4 inline mr-1"></i>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Simple Search -->
|
||||
<div id="simple-search" class="flex space-x-4">
|
||||
<input type="text" id="search-input" placeholder="Search by block height, hash, address, or transaction hash"
|
||||
class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<button onclick="search()" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
|
||||
<button onclick="performSearch()" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
|
||||
<i data-lucide="search" class="w-4 h-4 inline mr-2"></i>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Search Panel -->
|
||||
<div id="advanced-search" class="hidden mt-6 p-4 bg-gray-50 rounded-lg">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<!-- Address Search -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
|
||||
<input type="text" id="search-address" placeholder="0x..."
|
||||
class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
|
||||
<!-- Amount Range -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Amount Range</label>
|
||||
<div class="flex space-x-2">
|
||||
<input type="number" id="amount-min" placeholder="Min" step="0.001"
|
||||
class="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<input type="number" id="amount-max" placeholder="Max" step="0.001"
|
||||
class="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction Type -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Transaction Type</label>
|
||||
<select id="tx-type" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option value="">All Types</option>
|
||||
<option value="transfer">Transfer</option>
|
||||
<option value="stake">Stake</option>
|
||||
<option value="smart_contract">Smart Contract</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Time Range -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">From Date</label>
|
||||
<input type="datetime-local" id="since-date"
|
||||
class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">To Date</label>
|
||||
<input type="datetime-local" id="until-date"
|
||||
class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
|
||||
<!-- Validator -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Validator</label>
|
||||
<input type="text" id="validator" placeholder="Validator address..."
|
||||
class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<div class="flex space-x-2">
|
||||
<button onclick="performAdvancedSearch('transactions')"
|
||||
class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
|
||||
Search Transactions
|
||||
</button>
|
||||
<button onclick="performAdvancedSearch('blocks')"
|
||||
class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
|
||||
Search Blocks
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button onclick="exportSearchResults('csv')"
|
||||
class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700">
|
||||
<i data-lucide="download" class="w-4 h-4 inline mr-2"></i>
|
||||
Export CSV
|
||||
</button>
|
||||
<button onclick="exportSearchResults('json')"
|
||||
class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700">
|
||||
<i data-lucide="file-json" class="w-4 h-4 inline mr-2"></i>
|
||||
Export JSON
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analytics Dashboard -->
|
||||
<div class="bg-white rounded-lg shadow p-6 mb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold text-gray-800">Analytics Dashboard</h2>
|
||||
<div class="flex space-x-2">
|
||||
<select id="analytics-period" onchange="updateAnalytics()"
|
||||
class="px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option value="1h">Last Hour</option>
|
||||
<option value="24h" selected>Last 24 Hours</option>
|
||||
<option value="7d">Last 7 Days</option>
|
||||
<option value="30d">Last 30 Days</option>
|
||||
</select>
|
||||
<button onclick="refreshAnalytics()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 inline mr-2"></i>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<div class="bg-blue-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-blue-600 text-sm font-medium">Total Transactions</p>
|
||||
<p class="text-2xl font-bold text-blue-800" id="total-tx">-</p>
|
||||
</div>
|
||||
<i data-lucide="trending-up" class="w-8 h-8 text-blue-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-green-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-green-600 text-sm font-medium">Transaction Volume</p>
|
||||
<p class="text-2xl font-bold text-green-800" id="tx-volume">-</p>
|
||||
</div>
|
||||
<i data-lucide="dollar-sign" class="w-8 h-8 text-green-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-purple-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-purple-600 text-sm font-medium">Active Addresses</p>
|
||||
<p class="text-2xl font-bold text-purple-800" id="active-addresses">-</p>
|
||||
</div>
|
||||
<i data-lucide="users" class="w-8 h-8 text-purple-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-orange-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-orange-600 text-sm font-medium">Avg Block Time</p>
|
||||
<p class="text-2xl font-bold text-orange-800" id="avg-block-time">-</p>
|
||||
</div>
|
||||
<i data-lucide="clock" class="w-8 h-8 text-orange-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h3 class="text-lg font-semibold mb-3">Transaction Volume Over Time</h3>
|
||||
<canvas id="volume-chart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h3 class="text-lg font-semibold mb-3">Network Activity</h3>
|
||||
<canvas id="activity-chart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Results -->
|
||||
<div id="search-results" class="hidden bg-white rounded-lg shadow p-6 mb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold text-gray-800">Search Results</h2>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span id="result-count" class="text-sm text-gray-600"></span>
|
||||
<button onclick="exportSearchResults('csv')" class="bg-gray-600 text-white px-3 py-1 rounded hover:bg-gray-700">
|
||||
<i data-lucide="download" class="w-4 h-4 inline mr-1"></i>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="results-content" class="overflow-x-auto">
|
||||
<!-- Results will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Latest Blocks -->
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div class="px-6 py-4 border-b">
|
||||
<h2 class="text-xl font-semibold flex items-center">
|
||||
<i data-lucide="blocks" class="w-5 h-5 mr-2"></i>
|
||||
Latest Blocks
|
||||
</h2>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-semibold flex items-center">
|
||||
<i data-lucide="blocks" class="w-5 h-5 mr-2"></i>
|
||||
Latest Blocks
|
||||
</h2>
|
||||
<div class="flex space-x-2">
|
||||
<button onclick="exportBlocks('csv')" class="bg-gray-600 text-white px-3 py-1 rounded hover:bg-gray-700">
|
||||
<i data-lucide="download" class="w-4 h-4 inline mr-1"></i>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="overflow-x-auto">
|
||||
@@ -293,8 +515,11 @@ HTML_TEMPLATE = r"""
|
||||
document.getElementById('block-modal').classList.add('hidden');
|
||||
}
|
||||
|
||||
// Search functionality
|
||||
async function search() {
|
||||
// Enhanced Search functionality
|
||||
let currentSearchResults = [];
|
||||
let currentSearchType = 'transactions';
|
||||
|
||||
async function performSearch() {
|
||||
const query = document.getElementById('search-input').value.trim();
|
||||
if (!query) return;
|
||||
|
||||
@@ -311,36 +536,311 @@ HTML_TEMPLATE = r"""
|
||||
if (!r.ok) throw new Error('Transaction not found');
|
||||
return r.json();
|
||||
});
|
||||
// Show transaction details - reuse block modal
|
||||
const modal = document.getElementById('block-modal');
|
||||
const details = document.getElementById('block-details');
|
||||
details.innerHTML = `
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Transaction</h3>
|
||||
<div class="bg-gray-50 rounded p-4 space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Hash:</span>
|
||||
<span class="font-mono text-sm">${tx.hash || '-'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Type:</span>
|
||||
<span>${tx.type || '-'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">From:</span>
|
||||
<span class="font-mono text-sm">${tx.from || '-'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">To:</span>
|
||||
<span class="font-mono text-sm">${tx.to || '-'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Amount:</span>
|
||||
<span>${tx.amount || '0'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Fee:</span>
|
||||
showTransactionDetails(tx);
|
||||
return;
|
||||
} catch (error) {
|
||||
console.error('Transaction search failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Try address search
|
||||
if (/^0x[a-fA-F0-9]{40}$/.test(query)) {
|
||||
await performAdvancedSearch('transactions', { address: query });
|
||||
return;
|
||||
}
|
||||
|
||||
alert('Search by block height, transaction hash (64 char hex), or address (0x...)');
|
||||
}
|
||||
|
||||
function toggleAdvancedSearch() {
|
||||
const panel = document.getElementById('advanced-search');
|
||||
panel.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
document.getElementById('search-input').value = '';
|
||||
document.getElementById('search-address').value = '';
|
||||
document.getElementById('amount-min').value = '';
|
||||
document.getElementById('amount-max').value = '';
|
||||
document.getElementById('tx-type').value = '';
|
||||
document.getElementById('since-date').value = '';
|
||||
document.getElementById('until-date').value = '';
|
||||
document.getElementById('validator').value = '';
|
||||
document.getElementById('search-results').classList.add('hidden');
|
||||
currentSearchResults = [];
|
||||
}
|
||||
|
||||
async function performAdvancedSearch(type, customParams = {}) {
|
||||
const params = {
|
||||
address: document.getElementById('search-address').value,
|
||||
amount_min: document.getElementById('amount-min').value,
|
||||
amount_max: document.getElementById('amount-max').value,
|
||||
tx_type: document.getElementById('tx-type').value,
|
||||
since: document.getElementById('since-date').value,
|
||||
until: document.getElementById('until-date').value,
|
||||
validator: document.getElementById('validator').value,
|
||||
limit: 50,
|
||||
offset: 0,
|
||||
...customParams
|
||||
};
|
||||
|
||||
// Remove empty parameters
|
||||
Object.keys(params).forEach(key => {
|
||||
if (!params[key]) delete params[key];
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/search/${type}?${new URLSearchParams(params)}`);
|
||||
if (!response.ok) throw new Error('Search failed');
|
||||
|
||||
const results = await response.json();
|
||||
currentSearchResults = results;
|
||||
currentSearchType = type;
|
||||
displaySearchResults(results, type);
|
||||
} catch (error) {
|
||||
console.error('Advanced search failed:', error);
|
||||
alert('Search failed. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
function displaySearchResults(results, type) {
|
||||
const resultsDiv = document.getElementById('search-results');
|
||||
const contentDiv = document.getElementById('results-content');
|
||||
const countSpan = document.getElementById('result-count');
|
||||
|
||||
resultsDiv.classList.remove('hidden');
|
||||
countSpan.textContent = `Found ${results.length} results`;
|
||||
|
||||
if (type === 'transactions') {
|
||||
contentDiv.innerHTML = `
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="text-left text-gray-500 text-sm">
|
||||
<th class="pb-3">Hash</th>
|
||||
<th class="pb-3">Type</th>
|
||||
<th class="pb-3">From</th>
|
||||
<th class="pb-3">To</th>
|
||||
<th class="pb-3">Amount</th>
|
||||
<th class="pb-3">Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${results.map(tx => `
|
||||
<tr class="border-t hover:bg-gray-50">
|
||||
<td class="py-3 font-mono text-sm">${tx.hash || '-'}</td>
|
||||
<td class="py-3">${tx.type || '-'}</td>
|
||||
<td class="py-3 font-mono text-sm">${tx.from || '-'}</td>
|
||||
<td class="py-3 font-mono text-sm">${tx.to || '-'}</td>
|
||||
<td class="py-3">${tx.amount || '0'}</td>
|
||||
<td class="py-3">${formatTimestamp(tx.timestamp)}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
} else if (type === 'blocks') {
|
||||
contentDiv.innerHTML = `
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="text-left text-gray-500 text-sm">
|
||||
<th class="pb-3">Height</th>
|
||||
<th class="pb-3">Hash</th>
|
||||
<th class="pb-3">Validator</th>
|
||||
<th class="pb-3">Transactions</th>
|
||||
<th class="pb-3">Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${results.map(block => `
|
||||
<tr class="border-t hover:bg-gray-50 cursor-pointer" onclick="showBlockDetails(${block.height})">
|
||||
<td class="py-3">${block.height}</td>
|
||||
<td class="py-3 font-mono text-sm">${block.hash || '-'}</td>
|
||||
<td class="py-3 font-mono text-sm">${block.validator || '-'}</td>
|
||||
<td class="py-3">${block.tx_count || 0}</td>
|
||||
<td class="py-3">${formatTimestamp(block.timestamp)}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function showTransactionDetails(tx) {
|
||||
const modal = document.getElementById('block-modal');
|
||||
const details = document.getElementById('block-details');
|
||||
details.innerHTML = `
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Transaction Details</h3>
|
||||
<div class="bg-gray-50 rounded p-4 space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Hash:</span>
|
||||
<span class="font-mono text-sm">${tx.hash || '-'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Type:</span>
|
||||
<span>${tx.type || '-'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">From:</span>
|
||||
<span class="font-mono text-sm">${tx.from || '-'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">To:</span>
|
||||
<span class="font-mono text-sm">${tx.to || '-'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Amount:</span>
|
||||
<span>${tx.amount || '0'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Fee:</span>
|
||||
<span>${tx.fee || '0'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Timestamp:</span>
|
||||
<span>${formatTimestamp(tx.timestamp)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Analytics functionality
|
||||
let volumeChart = null;
|
||||
let activityChart = null;
|
||||
|
||||
async function updateAnalytics() {
|
||||
const period = document.getElementById('analytics-period').value;
|
||||
try {
|
||||
const response = await fetch(`/api/analytics/overview?period=${period}`);
|
||||
if (!response.ok) throw new Error('Analytics request failed');
|
||||
|
||||
const data = await response.json();
|
||||
updateAnalyticsDisplay(data);
|
||||
updateCharts(data);
|
||||
} catch (error) {
|
||||
console.error('Analytics update failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateAnalyticsDisplay(data) {
|
||||
document.getElementById('total-tx').textContent = data.total_transactions || '-';
|
||||
document.getElementById('tx-volume').textContent = data.transaction_volume || '-';
|
||||
document.getElementById('active-addresses').textContent = data.active_addresses || '-';
|
||||
document.getElementById('avg-block-time').textContent = data.avg_block_time || '-';
|
||||
}
|
||||
|
||||
function updateCharts(data) {
|
||||
// Update volume chart
|
||||
const volumeCtx = document.getElementById('volume-chart').getContext('2d');
|
||||
if (volumeChart) volumeChart.destroy();
|
||||
|
||||
volumeChart = new Chart(volumeCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.volume_data?.labels || [],
|
||||
datasets: [{
|
||||
label: 'Transaction Volume',
|
||||
data: data.volume_data?.values || [],
|
||||
borderColor: 'rgb(59, 130, 246)',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update activity chart
|
||||
const activityCtx = document.getElementById('activity-chart').getContext('2d');
|
||||
if (activityChart) activityChart.destroy();
|
||||
|
||||
activityChart = new Chart(activityCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: data.activity_data?.labels || [],
|
||||
datasets: [{
|
||||
label: 'Network Activity',
|
||||
data: data.activity_data?.values || [],
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.8)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function refreshAnalytics() {
|
||||
updateAnalytics();
|
||||
}
|
||||
|
||||
// Export functionality
|
||||
async function exportSearchResults(format) {
|
||||
if (currentSearchResults.length === 0) {
|
||||
alert('No search results to export');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
format: format,
|
||||
type: currentSearchType,
|
||||
data: JSON.stringify(currentSearchResults)
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/export/search?${params}`);
|
||||
if (!response.ok) throw new Error('Export failed');
|
||||
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `search_results.${format}`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} catch (error) {
|
||||
console.error('Export failed:', error);
|
||||
alert('Export failed. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
async function exportBlocks(format) {
|
||||
try {
|
||||
const response = await fetch(`/api/export/blocks?format=${format}`);
|
||||
if (!response.ok) throw new Error('Export failed');
|
||||
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `latest_blocks.${format}`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} catch (error) {
|
||||
console.error('Export failed:', error);
|
||||
alert('Export failed. Please try again.');
|
||||
}
|
||||
}
|
||||
<span>${tx.fee || '0'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
@@ -465,6 +965,263 @@ async def api_transaction(tx_hash: str):
|
||||
raise HTTPException(status_code=500, detail="Internal server error")
|
||||
|
||||
|
||||
# Enhanced API endpoints
|
||||
@app.get("/api/search/transactions")
|
||||
async def search_transactions(
|
||||
address: Optional[str] = None,
|
||||
amount_min: Optional[float] = None,
|
||||
amount_max: Optional[float] = None,
|
||||
tx_type: Optional[str] = None,
|
||||
since: Optional[str] = None,
|
||||
until: Optional[str] = None,
|
||||
limit: int = 50,
|
||||
offset: int = 0
|
||||
):
|
||||
"""Advanced transaction search"""
|
||||
try:
|
||||
# Build query parameters for blockchain node
|
||||
params = {}
|
||||
if address:
|
||||
params["address"] = address
|
||||
if amount_min:
|
||||
params["amount_min"] = amount_min
|
||||
if amount_max:
|
||||
params["amount_max"] = amount_max
|
||||
if tx_type:
|
||||
params["type"] = tx_type
|
||||
if since:
|
||||
params["since"] = since
|
||||
if until:
|
||||
params["until"] = until
|
||||
params["limit"] = limit
|
||||
params["offset"] = offset
|
||||
|
||||
async with httpx.AsyncClient() as client:
|
||||
response = await client.get(f"{BLOCKCHAIN_RPC_URL}/rpc/search/transactions", params=params)
|
||||
if response.status_code == 200:
|
||||
return response.json()
|
||||
else:
|
||||
# Return mock data for demonstration
|
||||
return [
|
||||
{
|
||||
"hash": "0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
|
||||
"type": tx_type or "transfer",
|
||||
"from": "0xabcdef1234567890abcdef1234567890abcdef1234",
|
||||
"to": "0x1234567890abcdef1234567890abcdef12345678",
|
||||
"amount": "1.5",
|
||||
"fee": "0.001",
|
||||
"timestamp": datetime.now().isoformat()
|
||||
}
|
||||
]
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Search failed: {str(e)}")
|
||||
|
||||
@app.get("/api/search/blocks")
|
||||
async def search_blocks(
|
||||
validator: Optional[str] = None,
|
||||
since: Optional[str] = None,
|
||||
until: Optional[str] = None,
|
||||
min_tx: Optional[int] = None,
|
||||
limit: int = 50,
|
||||
offset: int = 0
|
||||
):
|
||||
"""Advanced block search"""
|
||||
try:
|
||||
# Build query parameters
|
||||
params = {}
|
||||
if validator:
|
||||
params["validator"] = validator
|
||||
if since:
|
||||
params["since"] = since
|
||||
if until:
|
||||
params["until"] = until
|
||||
if min_tx:
|
||||
params["min_tx"] = min_tx
|
||||
params["limit"] = limit
|
||||
params["offset"] = offset
|
||||
|
||||
async with httpx.AsyncClient() as client:
|
||||
response = await client.get(f"{BLOCKCHAIN_RPC_URL}/rpc/search/blocks", params=params)
|
||||
if response.status_code == 200:
|
||||
return response.json()
|
||||
else:
|
||||
# Return mock data for demonstration
|
||||
return [
|
||||
{
|
||||
"height": 12345,
|
||||
"hash": "0xabcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890",
|
||||
"validator": validator or "0x1234567890abcdef1234567890abcdef12345678",
|
||||
"tx_count": min_tx or 5,
|
||||
"timestamp": datetime.now().isoformat()
|
||||
}
|
||||
]
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Search failed: {str(e)}")
|
||||
|
||||
@app.get("/api/analytics/overview")
|
||||
async def analytics_overview(period: str = "24h"):
|
||||
"""Get analytics overview"""
|
||||
try:
|
||||
# Generate mock analytics data
|
||||
now = datetime.now()
|
||||
|
||||
if period == "1h":
|
||||
labels = [f"{i:02d}:{(i*5)%60:02d}" for i in range(12)]
|
||||
volume_values = [10 + i * 2 for i in range(12)]
|
||||
activity_values = [5 + i for i in range(12)]
|
||||
elif period == "24h":
|
||||
labels = [f"{i:02d}:00" for i in range(0, 24, 2)]
|
||||
volume_values = [50 + i * 5 for i in range(12)]
|
||||
activity_values = [20 + i * 3 for i in range(12)]
|
||||
elif period == "7d":
|
||||
labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
|
||||
volume_values = [500, 600, 550, 700, 800, 650, 750]
|
||||
activity_values = [200, 250, 220, 300, 350, 280, 320]
|
||||
else: # 30d
|
||||
labels = [f"Week {i+1}" for i in range(4)]
|
||||
volume_values = [3000, 3500, 3200, 3800]
|
||||
activity_values = [1200, 1400, 1300, 1500]
|
||||
|
||||
return {
|
||||
"total_transactions": "1,234",
|
||||
"transaction_volume": "5,678.90 AITBC",
|
||||
"active_addresses": "89",
|
||||
"avg_block_time": "2.1s",
|
||||
"volume_data": {
|
||||
"labels": labels,
|
||||
"values": volume_values
|
||||
},
|
||||
"activity_data": {
|
||||
"labels": labels,
|
||||
"values": activity_values
|
||||
}
|
||||
}
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Analytics failed: {str(e)}")
|
||||
|
||||
@app.get("/api/export/search")
|
||||
async def export_search(
|
||||
format: str = "csv",
|
||||
type: str = "transactions",
|
||||
data: str = ""
|
||||
):
|
||||
"""Export search results"""
|
||||
try:
|
||||
if not data:
|
||||
raise HTTPException(status_code=400, detail="No data to export")
|
||||
|
||||
results = json.loads(data)
|
||||
|
||||
if format == "csv":
|
||||
output = io.StringIO()
|
||||
if type == "transactions":
|
||||
writer = csv.writer(output)
|
||||
writer.writerow(["Hash", "Type", "From", "To", "Amount", "Fee", "Timestamp"])
|
||||
for tx in results:
|
||||
writer.writerow([
|
||||
tx.get("hash", ""),
|
||||
tx.get("type", ""),
|
||||
tx.get("from", ""),
|
||||
tx.get("to", ""),
|
||||
tx.get("amount", ""),
|
||||
tx.get("fee", ""),
|
||||
tx.get("timestamp", "")
|
||||
])
|
||||
else: # blocks
|
||||
writer = csv.writer(output)
|
||||
writer.writerow(["Height", "Hash", "Validator", "Transactions", "Timestamp"])
|
||||
for block in results:
|
||||
writer.writerow([
|
||||
block.get("height", ""),
|
||||
block.get("hash", ""),
|
||||
block.get("validator", ""),
|
||||
block.get("tx_count", ""),
|
||||
block.get("timestamp", "")
|
||||
])
|
||||
|
||||
output.seek(0)
|
||||
return StreamingResponse(
|
||||
io.BytesIO(output.getvalue().encode()),
|
||||
media_type="text/csv",
|
||||
headers={"Content-Disposition": f"attachment; filename=search_results.{format}"}
|
||||
)
|
||||
|
||||
elif format == "json":
|
||||
return StreamingResponse(
|
||||
io.BytesIO(json.dumps(results, indent=2).encode()),
|
||||
media_type="application/json",
|
||||
headers={"Content-Disposition": f"attachment; filename=search_results.{format}"}
|
||||
)
|
||||
|
||||
else:
|
||||
raise HTTPException(status_code=400, detail="Unsupported format")
|
||||
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Export failed: {str(e)}")
|
||||
|
||||
@app.get("/api/export/blocks")
|
||||
async def export_blocks(format: str = "csv"):
|
||||
"""Export latest blocks"""
|
||||
try:
|
||||
# Get latest blocks
|
||||
blocks = await get_latest_blocks(50)
|
||||
|
||||
if format == "csv":
|
||||
output = io.StringIO()
|
||||
writer = csv.writer(output)
|
||||
writer.writerow(["Height", "Hash", "Validator", "Transactions", "Timestamp"])
|
||||
for block in blocks:
|
||||
writer.writerow([
|
||||
block.get("height", ""),
|
||||
block.get("hash", ""),
|
||||
block.get("validator", ""),
|
||||
block.get("tx_count", ""),
|
||||
block.get("timestamp", "")
|
||||
])
|
||||
|
||||
output.seek(0)
|
||||
return StreamingResponse(
|
||||
io.BytesIO(output.getvalue().encode()),
|
||||
media_type="text/csv",
|
||||
headers={"Content-Disposition": f"attachment; filename=latest_blocks.{format}"}
|
||||
)
|
||||
|
||||
elif format == "json":
|
||||
return StreamingResponse(
|
||||
io.BytesIO(json.dumps(blocks, indent=2).encode()),
|
||||
media_type="application/json",
|
||||
headers={"Content-Disposition": f"attachment; filename=latest_blocks.{format}"}
|
||||
)
|
||||
|
||||
else:
|
||||
raise HTTPException(status_code=400, detail="Unsupported format")
|
||||
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Export failed: {str(e)}")
|
||||
|
||||
# Helper functions
|
||||
async def get_latest_blocks(limit: int = 10) -> List[Dict]:
|
||||
"""Get latest blocks"""
|
||||
try:
|
||||
async with httpx.AsyncClient() as client:
|
||||
response = await client.get(f"{BLOCKCHAIN_RPC_URL}/rpc/blocks?limit={limit}")
|
||||
if response.status_code == 200:
|
||||
return response.json()
|
||||
else:
|
||||
# Return mock data
|
||||
return [
|
||||
{
|
||||
"height": i,
|
||||
"hash": f"0x{'1234567890abcdef' * 4}",
|
||||
"validator": "0x1234567890abcdef1234567890abcdef12345678",
|
||||
"tx_count": i % 10,
|
||||
"timestamp": datetime.now().isoformat()
|
||||
}
|
||||
for i in range(limit, 0, -1)
|
||||
]
|
||||
except Exception:
|
||||
return []
|
||||
|
||||
@app.get("/health")
|
||||
async def health():
|
||||
"""Health check endpoint"""
|
||||
@@ -479,14 +1236,9 @@ async def health():
|
||||
return {
|
||||
"status": "ok" if node_status == "ok" else "degraded",
|
||||
"node_status": node_status,
|
||||
"node_url": BLOCKCHAIN_RPC_URL,
|
||||
"endpoints": {
|
||||
"transactions": "/api/transactions/{tx_hash}",
|
||||
"chain_head": "/api/chain/head",
|
||||
"blocks": "/api/blocks/{height}"
|
||||
}
|
||||
"version": "2.0.0",
|
||||
"features": ["advanced_search", "analytics", "export", "real_time"]
|
||||
}
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
uvicorn.run(app, host="0.0.0.0", port=3001)
|
||||
|
||||
Reference in New Issue
Block a user