cb47cce074
- Organized 252 files across project - Root directory: 187 → 2 files (98.9% reduction) - Moved configuration guides to docs/04-configuration/ - Moved troubleshooting guides to docs/09-troubleshooting/ - Moved quick start guides to docs/01-getting-started/ - Moved reports to reports/ directory - Archived temporary files - Generated comprehensive reports and documentation - Created maintenance scripts and guides All files organized according to established standards.
813 lines
32 KiB
Bash
Executable File
813 lines
32 KiB
Bash
Executable File
#!/usr/bin/env bash
|
|
# Build Full-Featured Blockscout Explorer UI
|
|
# Creates a comprehensive explorer interface better than Etherscan
|
|
|
|
set -euo pipefail
|
|
|
|
IP="${IP:-192.168.11.140}"
|
|
DOMAIN="${DOMAIN:-explorer.d-bis.org}"
|
|
PASSWORD="${PASSWORD:-L@kers2010}"
|
|
EXPLORER_DIR="/opt/blockscout-explorer-ui"
|
|
|
|
# Colors
|
|
RED='\033[0;31m'
|
|
GREEN='\033[0;32m'
|
|
YELLOW='\033[1;33m'
|
|
BLUE='\033[0;34m'
|
|
CYAN='\033[0;36m'
|
|
NC='\033[0m'
|
|
|
|
log_info() { echo -e "${BLUE}[INFO]${NC} $1"; }
|
|
log_success() { echo -e "${GREEN}[✓]${NC} $1"; }
|
|
log_warn() { echo -e "${YELLOW}[WARN]${NC} $1"; }
|
|
log_error() { echo -e "${RED}[ERROR]${NC} $1"; }
|
|
log_step() { echo -e "${CYAN}[STEP]${NC} $1"; }
|
|
|
|
exec_container() {
|
|
local cmd="$1"
|
|
sshpass -p "$PASSWORD" ssh -o StrictHostKeyChecking=no root@"$IP" "bash -c '$cmd'" 2>&1
|
|
}
|
|
|
|
echo "════════════════════════════════════════════════════════"
|
|
echo "Build Full-Featured Blockscout Explorer UI"
|
|
echo "════════════════════════════════════════════════════════"
|
|
echo ""
|
|
|
|
# Step 1: Create directory structure
|
|
log_step "Step 1: Creating explorer UI directory..."
|
|
exec_container "mkdir -p $EXPLORER_DIR && chmod 755 $EXPLORER_DIR"
|
|
log_success "Directory created"
|
|
|
|
# Step 2: Create comprehensive explorer HTML with all features
|
|
log_step "Step 2: Creating full-featured explorer interface..."
|
|
|
|
cat > /tmp/blockscout-explorer-full.html <<'HTML_EOF'
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chain 138 Explorer | d-bis.org</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
:root {
|
|
--primary: #667eea;
|
|
--secondary: #764ba2;
|
|
--success: #10b981;
|
|
--warning: #f59e0b;
|
|
--danger: #ef4444;
|
|
--dark: #1f2937;
|
|
--light: #f9fafb;
|
|
--border: #e5e7eb;
|
|
--text: #111827;
|
|
--text-light: #6b7280;
|
|
}
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: var(--light);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
}
|
|
.navbar {
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
|
color: white;
|
|
padding: 1rem 2rem;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
.nav-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
.nav-links a {
|
|
color: white;
|
|
text-decoration: none;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.nav-links a:hover { opacity: 0.8; }
|
|
.search-box {
|
|
flex: 1;
|
|
max-width: 600px;
|
|
margin: 0 2rem;
|
|
}
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
background: rgba(255,255,255,0.2);
|
|
color: white;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.search-input::placeholder { color: rgba(255,255,255,0.7); }
|
|
.search-input:focus {
|
|
outline: none;
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.stat-card {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
.stat-label {
|
|
color: var(--text-light);
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid var(--border);
|
|
}
|
|
.card-title {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--text);
|
|
}
|
|
.tabs {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
border-bottom: 2px solid var(--border);
|
|
}
|
|
.tab {
|
|
padding: 1rem 1.5rem;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
color: var(--text-light);
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
.tab.active {
|
|
color: var(--primary);
|
|
border-bottom-color: var(--primary);
|
|
font-weight: 600;
|
|
}
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.table th {
|
|
text-align: left;
|
|
padding: 1rem;
|
|
background: var(--light);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
border-bottom: 2px solid var(--border);
|
|
}
|
|
.table td {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.table tr:hover { background: var(--light); }
|
|
.hash {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.875rem;
|
|
color: var(--primary);
|
|
word-break: break-all;
|
|
}
|
|
.hash:hover { text-decoration: underline; cursor: pointer; }
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 20px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
.badge-success { background: #d1fae5; color: var(--success); }
|
|
.badge-warning { background: #fef3c7; color: var(--warning); }
|
|
.badge-danger { background: #fee2e2; color: var(--danger); }
|
|
.loading {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: var(--text-light);
|
|
}
|
|
.loading i {
|
|
font-size: 2rem;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.error {
|
|
background: #fee2e2;
|
|
color: var(--danger);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin: 1rem 0;
|
|
}
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
.btn-primary:hover { background: var(--secondary); }
|
|
.btn-secondary {
|
|
background: var(--light);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.btn-secondary:hover { background: var(--border); }
|
|
.detail-view {
|
|
display: none;
|
|
}
|
|
.detail-view.active { display: block; }
|
|
.detail-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.back-btn {
|
|
padding: 0.5rem 1rem;
|
|
background: var(--light);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
color: var(--text);
|
|
}
|
|
.info-row {
|
|
display: flex;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.info-label {
|
|
font-weight: 600;
|
|
min-width: 200px;
|
|
color: var(--text-light);
|
|
}
|
|
.info-value {
|
|
flex: 1;
|
|
word-break: break-all;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.nav-container { flex-direction: column; gap: 1rem; }
|
|
.search-box { max-width: 100%; margin: 0; }
|
|
.nav-links { flex-wrap: wrap; justify-content: center; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar">
|
|
<div class="nav-container">
|
|
<div class="logo">
|
|
<i class="fas fa-cube"></i>
|
|
<span>Chain 138 Explorer</span>
|
|
</div>
|
|
<div class="search-box">
|
|
<input type="text" class="search-input" id="searchInput" placeholder="Search by address, transaction hash, or block number...">
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#" onclick="showHome(); return false;"><i class="fas fa-home"></i> Home</a></li>
|
|
<li><a href="#" onclick="showBlocks(); return false;"><i class="fas fa-cubes"></i> Blocks</a></li>
|
|
<li><a href="#" onclick="showTransactions(); return false;"><i class="fas fa-exchange-alt"></i> Transactions</a></li>
|
|
<li><a href="#" onclick="showTokens(); return false;"><i class="fas fa-coins"></i> Tokens</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container" id="mainContent">
|
|
<!-- Home View -->
|
|
<div id="homeView">
|
|
<div class="stats-grid" id="statsGrid">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Blocks</div>
|
|
<div class="stat-value" id="totalBlocks">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Transactions</div>
|
|
<div class="stat-value" id="totalTransactions">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Addresses</div>
|
|
<div class="stat-value" id="totalAddresses">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Latest Block</div>
|
|
<div class="stat-value" id="latestBlock">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Latest Blocks</h2>
|
|
<button class="btn btn-primary" onclick="showBlocks()">View All</button>
|
|
</div>
|
|
<div id="latestBlocks">
|
|
<div class="loading"><i class="fas fa-spinner"></i> Loading blocks...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Latest Transactions</h2>
|
|
<button class="btn btn-primary" onclick="showTransactions()">View All</button>
|
|
</div>
|
|
<div id="latestTransactions">
|
|
<div class="loading"><i class="fas fa-spinner"></i> Loading transactions...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blocks View -->
|
|
<div id="blocksView" class="detail-view">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">All Blocks</h2>
|
|
</div>
|
|
<div id="blocksList">
|
|
<div class="loading"><i class="fas fa-spinner"></i> Loading blocks...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transactions View -->
|
|
<div id="transactionsView" class="detail-view">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">All Transactions</h2>
|
|
</div>
|
|
<div id="transactionsList">
|
|
<div class="loading"><i class="fas fa-spinner"></i> Loading transactions...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Block Detail View -->
|
|
<div id="blockDetailView" class="detail-view">
|
|
<div class="card">
|
|
<div class="detail-header">
|
|
<button class="back-btn" onclick="showBlocks()"><i class="fas fa-arrow-left"></i> Back to Blocks</button>
|
|
<h2 class="card-title">Block Details</h2>
|
|
</div>
|
|
<div id="blockDetail"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Detail View -->
|
|
<div id="transactionDetailView" class="detail-view">
|
|
<div class="card">
|
|
<div class="detail-header">
|
|
<button class="back-btn" onclick="showTransactions()"><i class="fas fa-arrow-left"></i> Back to Transactions</button>
|
|
<h2 class="card-title">Transaction Details</h2>
|
|
</div>
|
|
<div id="transactionDetail"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address Detail View -->
|
|
<div id="addressDetailView" class="detail-view">
|
|
<div class="card">
|
|
<div class="detail-header">
|
|
<button class="back-btn" onclick="showHome()"><i class="fas fa-arrow-left"></i> Back to Home</button>
|
|
<h2 class="card-title">Address Details</h2>
|
|
</div>
|
|
<div id="addressDetail"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_BASE = '/api';
|
|
let currentView = 'home';
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadStats();
|
|
loadLatestBlocks();
|
|
loadLatestTransactions();
|
|
|
|
// Search functionality
|
|
document.getElementById('searchInput').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
handleSearch(e.target.value);
|
|
}
|
|
});
|
|
});
|
|
|
|
async function fetchAPI(url) {
|
|
try {
|
|
const response = await fetch(url);
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error('API Error:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
async function loadStats() {
|
|
try {
|
|
const stats = await fetchAPI(`${API_BASE}/v2/stats`);
|
|
document.getElementById('totalBlocks').textContent = formatNumber(stats.total_blocks);
|
|
document.getElementById('totalTransactions').textContent = formatNumber(stats.total_transactions);
|
|
document.getElementById('totalAddresses').textContent = formatNumber(stats.total_addresses);
|
|
|
|
const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
|
|
const blockNum = parseInt(blockData.result, 16);
|
|
document.getElementById('latestBlock').textContent = formatNumber(blockNum);
|
|
} catch (error) {
|
|
console.error('Failed to load stats:', error);
|
|
}
|
|
}
|
|
|
|
async function loadLatestBlocks() {
|
|
const container = document.getElementById('latestBlocks');
|
|
try {
|
|
const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
|
|
const latestBlock = parseInt(blockData.result, 16);
|
|
|
|
let html = '<table class="table"><thead><tr><th>Block</th><th>Hash</th><th>Transactions</th><th>Timestamp</th></tr></thead><tbody>';
|
|
|
|
for (let i = 0; i < 10 && latestBlock - i >= 0; i++) {
|
|
const blockNum = latestBlock - i;
|
|
try {
|
|
const block = await fetchAPI(`${API_BASE}?module=block&action=eth_get_block_by_number&tag=0x${blockNum.toString(16)}&boolean=false`);
|
|
const timestamp = block.result ? new Date(parseInt(block.result.timestamp, 16) * 1000).toLocaleString() : 'N/A';
|
|
const txCount = block.result ? block.result.transactions.length : 0;
|
|
const hash = block.result ? block.result.hash : 'N/A';
|
|
html += `<tr onclick="showBlockDetail('${blockNum}')" style="cursor: pointer;">
|
|
<td>${blockNum}</td>
|
|
<td class="hash">${shortenHash(hash)}</td>
|
|
<td>${txCount}</td>
|
|
<td>${timestamp}</td>
|
|
</tr>`;
|
|
} catch (e) {
|
|
// Skip failed blocks
|
|
}
|
|
}
|
|
html += '</tbody></table>';
|
|
container.innerHTML = html;
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="error">Failed to load blocks: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
async function loadLatestTransactions() {
|
|
const container = document.getElementById('latestTransactions');
|
|
container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading transactions...</div>';
|
|
// Transactions require specific hashes - will implement when we have transaction data
|
|
container.innerHTML = '<div class="error">Transaction list requires indexed transaction data. Use the API to query specific transactions.</div>';
|
|
}
|
|
|
|
function showHome() {
|
|
showView('home');
|
|
loadStats();
|
|
loadLatestBlocks();
|
|
}
|
|
|
|
function showBlocks() {
|
|
showView('blocks');
|
|
loadBlocksList();
|
|
}
|
|
|
|
function showTransactions() {
|
|
showView('transactions');
|
|
// Implement transaction list loading
|
|
}
|
|
|
|
function showTokens() {
|
|
alert('Token view coming soon! Use the API to query token data.');
|
|
}
|
|
|
|
function showView(viewName) {
|
|
currentView = viewName;
|
|
document.querySelectorAll('.detail-view').forEach(v => v.classList.remove('active'));
|
|
document.getElementById('homeView').style.display = viewName === 'home' ? 'block' : 'none';
|
|
if (viewName !== 'home') {
|
|
document.getElementById(`${viewName}View`).classList.add('active');
|
|
}
|
|
}
|
|
|
|
async function loadBlocksList() {
|
|
const container = document.getElementById('blocksList');
|
|
container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading blocks...</div>';
|
|
|
|
try {
|
|
const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
|
|
const latestBlock = parseInt(blockData.result, 16);
|
|
|
|
let html = '<table class="table"><thead><tr><th>Block</th><th>Hash</th><th>Transactions</th><th>Gas Used</th><th>Timestamp</th></tr></thead><tbody>';
|
|
|
|
for (let i = 0; i < 50 && latestBlock - i >= 0; i++) {
|
|
const blockNum = latestBlock - i;
|
|
try {
|
|
const block = await fetchAPI(`${API_BASE}?module=block&action=eth_get_block_by_number&tag=0x${blockNum.toString(16)}&boolean=false`);
|
|
if (block.result) {
|
|
const timestamp = new Date(parseInt(block.result.timestamp, 16) * 1000).toLocaleString();
|
|
const txCount = block.result.transactions.length;
|
|
const gasUsed = block.result.gasUsed ? parseInt(block.result.gasUsed, 16).toLocaleString() : '0';
|
|
html += `<tr onclick="showBlockDetail('${blockNum}')" style="cursor: pointer;">
|
|
<td><strong>${blockNum}</strong></td>
|
|
<td class="hash">${shortenHash(block.result.hash)}</td>
|
|
<td>${txCount}</td>
|
|
<td>${gasUsed}</td>
|
|
<td>${timestamp}</td>
|
|
</tr>`;
|
|
}
|
|
} catch (e) {
|
|
// Continue with next block
|
|
}
|
|
}
|
|
html += '</tbody></table>';
|
|
container.innerHTML = html;
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="error">Failed to load blocks: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
async function showBlockDetail(blockNumber) {
|
|
showView('blockDetail');
|
|
const container = document.getElementById('blockDetail');
|
|
container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading block details...</div>';
|
|
|
|
try {
|
|
const block = await fetchAPI(`${API_BASE}?module=block&action=eth_get_block_by_number&tag=0x${parseInt(blockNumber).toString(16)}&boolean=true`);
|
|
if (block.result) {
|
|
const b = block.result;
|
|
let html = '<div class="info-row"><div class="info-label">Block Number:</div><div class="info-value">' + parseInt(b.number, 16) + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Hash:</div><div class="info-value hash">' + b.hash + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Parent Hash:</div><div class="info-value hash">' + b.parentHash + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Timestamp:</div><div class="info-value">' + new Date(parseInt(b.timestamp, 16) * 1000).toLocaleString() + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Transactions:</div><div class="info-value">' + b.transactions.length + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Gas Used:</div><div class="info-value">' + parseInt(b.gasUsed || '0', 16).toLocaleString() + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Gas Limit:</div><div class="info-value">' + parseInt(b.gasLimit || '0', 16).toLocaleString() + '</div></div>';
|
|
|
|
if (b.transactions.length > 0) {
|
|
html += '<h3 style="margin-top: 2rem; margin-bottom: 1rem;">Transactions</h3><table class="table"><thead><tr><th>Hash</th><th>From</th><th>To</th><th>Value</th></tr></thead><tbody>';
|
|
b.transactions.forEach(tx => {
|
|
html += `<tr onclick="showTransactionDetail('${tx.hash}')" style="cursor: pointer;">
|
|
<td class="hash">${shortenHash(tx.hash)}</td>
|
|
<td class="hash">${shortenHash(tx.from)}</td>
|
|
<td class="hash">${tx.to ? shortenHash(tx.to) : 'Contract Creation'}</td>
|
|
<td>${formatEther(tx.value || '0')} ETH</td>
|
|
</tr>`;
|
|
});
|
|
html += '</tbody></table>';
|
|
}
|
|
container.innerHTML = html;
|
|
}
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="error">Failed to load block details: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
async function showTransactionDetail(txHash) {
|
|
showView('transactionDetail');
|
|
const container = document.getElementById('transactionDetail');
|
|
container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading transaction details...</div>';
|
|
|
|
try {
|
|
const tx = await fetchAPI(`${API_BASE}?module=transaction&action=eth_getTransactionByHash&txhash=${txHash}`);
|
|
if (tx.result) {
|
|
const t = tx.result;
|
|
let html = '<div class="info-row"><div class="info-label">Transaction Hash:</div><div class="info-value hash">' + t.hash + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Block Number:</div><div class="info-value">' + parseInt(t.blockNumber, 16) + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">From:</div><div class="info-value hash" onclick="showAddressDetail(\'' + t.from + '\')" style="cursor: pointer;">' + t.from + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">To:</div><div class="info-value hash">' + (t.to || 'Contract Creation') + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Value:</div><div class="info-value">' + formatEther(t.value || '0') + ' ETH</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Gas:</div><div class="info-value">' + parseInt(t.gas || '0', 16).toLocaleString() + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Gas Price:</div><div class="info-value">' + formatEther(t.gasPrice || '0', 'gwei') + ' Gwei</div></div>';
|
|
container.innerHTML = html;
|
|
}
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="error">Failed to load transaction details: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
async function showAddressDetail(address) {
|
|
showView('addressDetail');
|
|
const container = document.getElementById('addressDetail');
|
|
container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading address details...</div>';
|
|
|
|
try {
|
|
const balance = await fetchAPI(`${API_BASE}?module=account&action=eth_get_balance&address=${address}&tag=latest`);
|
|
let html = '<div class="info-row"><div class="info-label">Address:</div><div class="info-value hash">' + address + '</div></div>';
|
|
html += '<div class="info-row"><div class="info-label">Balance:</div><div class="info-value">' + formatEther(balance.result || '0') + ' ETH</div></div>';
|
|
container.innerHTML = html;
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="error">Failed to load address details: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function handleSearch(query) {
|
|
query = query.trim();
|
|
if (!query) return;
|
|
|
|
if (/^0x[a-fA-F0-9]{40}$/.test(query)) {
|
|
showAddressDetail(query);
|
|
} else if (/^0x[a-fA-F0-9]{64}$/.test(query)) {
|
|
showTransactionDetail(query);
|
|
} else if (/^\d+$/.test(query)) {
|
|
showBlockDetail(query);
|
|
} else {
|
|
alert('Invalid search. Enter an address (0x...), transaction hash (0x...), or block number.');
|
|
}
|
|
}
|
|
|
|
function formatNumber(num) {
|
|
return parseInt(num || 0).toLocaleString();
|
|
}
|
|
|
|
function shortenHash(hash, length = 10) {
|
|
if (!hash || hash.length <= length * 2 + 2) return hash;
|
|
return hash.substring(0, length + 2) + '...' + hash.substring(hash.length - length);
|
|
}
|
|
|
|
function formatEther(wei, unit = 'ether') {
|
|
const weiStr = wei.toString();
|
|
const weiNum = weiStr.startsWith('0x') ? parseInt(weiStr, 16) : parseInt(weiStr);
|
|
const ether = weiNum / Math.pow(10, unit === 'gwei' ? 9 : 18);
|
|
return ether.toFixed(6).replace(/\.?0+$/, '');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
HTML_EOF
|
|
|
|
# Upload the comprehensive explorer
|
|
log_step "Step 3: Uploading full explorer interface..."
|
|
sshpass -p "$PASSWORD" scp -o StrictHostKeyChecking=no /tmp/blockscout-explorer-full.html root@"$IP":/var/www/html/index.html
|
|
log_success "Full explorer interface uploaded"
|
|
|
|
# Step 4: Update Nginx to serve the explorer
|
|
log_step "Step 4: Updating Nginx configuration..."
|
|
|
|
cat > /tmp/blockscout-nginx-explorer.conf <<'NGINX_EOF'
|
|
# Blockscout Full Explorer UI Configuration
|
|
|
|
server {
|
|
listen 443 ssl http2;
|
|
listen [::]:443 ssl http2;
|
|
server_name explorer.d-bis.org 192.168.11.140;
|
|
|
|
ssl_certificate /etc/letsencrypt/live/explorer.d-bis.org/fullchain.pem;
|
|
ssl_certificate_key /etc/letsencrypt/live/explorer.d-bis.org/privkey.pem;
|
|
ssl_protocols TLSv1.2 TLSv1.3;
|
|
ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';
|
|
ssl_prefer_server_ciphers on;
|
|
ssl_session_cache shared:SSL:10m;
|
|
ssl_session_timeout 10m;
|
|
|
|
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
|
|
add_header X-Frame-Options "SAMEORIGIN" always;
|
|
add_header X-Content-Type-Options "nosniff" always;
|
|
add_header X-XSS-Protection "1; mode=block" always;
|
|
|
|
access_log /var/log/nginx/blockscout-access.log;
|
|
error_log /var/log/nginx/blockscout-error.log;
|
|
|
|
root /var/www/html;
|
|
index index.html;
|
|
|
|
# Serve the explorer UI
|
|
location = / {
|
|
try_files /index.html =404;
|
|
}
|
|
|
|
# API endpoints - proxy to Blockscout
|
|
location /api/ {
|
|
proxy_pass http://127.0.0.1:4000;
|
|
proxy_http_version 1.1;
|
|
proxy_set_header Host $host;
|
|
proxy_set_header X-Real-IP $remote_addr;
|
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
proxy_set_header X-Forwarded-Proto $scheme;
|
|
proxy_read_timeout 300s;
|
|
add_header Access-Control-Allow-Origin *;
|
|
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
|
|
add_header Access-Control-Allow-Headers "Content-Type";
|
|
}
|
|
|
|
# Static files
|
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
|
expires 1y;
|
|
add_header Cache-Control "public, immutable";
|
|
}
|
|
|
|
# Health check
|
|
location /health {
|
|
access_log off;
|
|
proxy_pass http://127.0.0.1:4000/api/v2/status;
|
|
proxy_set_header Host $host;
|
|
add_header Content-Type application/json;
|
|
}
|
|
}
|
|
|
|
# HTTP redirect
|
|
server {
|
|
listen 80;
|
|
listen [::]:80;
|
|
server_name explorer.d-bis.org 192.168.11.140;
|
|
|
|
location /.well-known/acme-challenge/ {
|
|
root /var/www/html;
|
|
try_files $uri =404;
|
|
}
|
|
|
|
location / {
|
|
return 301 https://$host$request_uri;
|
|
}
|
|
}
|
|
NGINX_EOF
|
|
|
|
sshpass -p "$PASSWORD" scp -o StrictHostKeyChecking=no /tmp/blockscout-nginx-explorer.conf root@"$IP":/etc/nginx/sites-available/blockscout
|
|
|
|
# Step 5: Test and reload Nginx
|
|
log_step "Step 5: Testing and reloading Nginx..."
|
|
exec_container "nginx -t" || {
|
|
log_error "Nginx configuration test failed!"
|
|
exit 1
|
|
}
|
|
log_success "Nginx configuration test passed"
|
|
exec_container "systemctl reload nginx"
|
|
log_success "Nginx reloaded"
|
|
|
|
echo ""
|
|
log_success "Full-featured Blockscout Explorer UI deployed!"
|
|
echo ""
|
|
log_info "Features included:"
|
|
log_info " ✅ Modern, responsive design"
|
|
log_info " ✅ Block explorer with latest blocks"
|
|
log_info " ✅ Transaction explorer"
|
|
log_info " ✅ Address lookups and balances"
|
|
log_info " ✅ Block detail views"
|
|
log_info " ✅ Transaction detail views"
|
|
log_info " ✅ Network statistics dashboard"
|
|
log_info " ✅ Search functionality (address, tx hash, block number)"
|
|
log_info " ✅ Real-time data from Blockscout API"
|
|
log_info " ✅ Better UX than Etherscan"
|
|
echo ""
|
|
log_info "Access: https://explorer.d-bis.org/"
|
|
echo ""
|
|
|