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.
890 lines
36 KiB
Bash
Executable File
890 lines
36 KiB
Bash
Executable File
#!/usr/bin/env bash
|
|
# Add Comprehensive Bridge Monitoring to Blockscout Explorer
|
|
# Adds CCIP bridge monitoring, transaction tracking, and health monitoring
|
|
|
|
set -euo pipefail
|
|
|
|
IP="${IP:-192.168.11.140}"
|
|
DOMAIN="${DOMAIN:-explorer.d-bis.org}"
|
|
PASSWORD="${PASSWORD:-L@kers2010}"
|
|
|
|
# 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 "Add Bridge Monitoring to Blockscout Explorer"
|
|
echo "════════════════════════════════════════════════════════"
|
|
echo ""
|
|
|
|
# Step 1: Read current explorer HTML
|
|
log_step "Step 1: Reading current explorer interface..."
|
|
sshpass -p "$PASSWORD" scp -o StrictHostKeyChecking=no root@"$IP":/var/www/html/index.html /tmp/blockscout-current.html
|
|
log_success "Current explorer interface backed up"
|
|
|
|
# Step 2: Create enhanced explorer with bridge monitoring
|
|
log_step "Step 2: Creating enhanced explorer with bridge monitoring..."
|
|
|
|
# This is a large file - I'll create it with comprehensive bridge monitoring features
|
|
cat > /tmp/blockscout-with-bridge-monitoring.html <<'BRIDGE_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 | Bridge Monitoring</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;
|
|
--bridge-blue: #3b82f6;
|
|
--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-card.bridge-card {
|
|
border-left: 4px solid var(--bridge-blue);
|
|
}
|
|
.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);
|
|
}
|
|
.stat-value.bridge-value {
|
|
color: var(--bridge-blue);
|
|
}
|
|
.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);
|
|
flex-wrap: wrap;
|
|
}
|
|
.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;
|
|
}
|
|
.bridge-tab.active {
|
|
color: var(--bridge-blue);
|
|
border-bottom-color: var(--bridge-blue);
|
|
}
|
|
.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); }
|
|
.badge-chain {
|
|
background: #dbeafe;
|
|
color: var(--bridge-blue);
|
|
}
|
|
.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;
|
|
}
|
|
.bridge-chain-card {
|
|
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.chain-name {
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
color: var(--bridge-blue);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.chain-info {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
.chain-stat {
|
|
font-size: 0.875rem;
|
|
}
|
|
.chain-stat-label {
|
|
color: var(--text-light);
|
|
}
|
|
.chain-stat-value {
|
|
font-weight: bold;
|
|
color: var(--text);
|
|
margin-top: 0.25rem;
|
|
}
|
|
.bridge-health {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.health-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: var(--success);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
.health-indicator.warning { background: var(--warning); }
|
|
.health-indicator.danger { background: var(--danger); }
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
.detail-view {
|
|
display: none;
|
|
}
|
|
.detail-view.active { display: block; }
|
|
.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;
|
|
}
|
|
.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-bridge {
|
|
background: var(--bridge-blue);
|
|
color: white;
|
|
}
|
|
.btn-bridge:hover { background: #2563eb; }
|
|
@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="showBridgeMonitoring(); return false;"><i class="fas fa-bridge"></i> Bridge</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">
|
|
<!-- Stats loaded dynamically -->
|
|
</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>
|
|
|
|
<!-- Bridge Monitoring View -->
|
|
<div id="bridgeView" class="detail-view">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title"><i class="fas fa-bridge"></i> Bridge Monitoring Dashboard</h2>
|
|
<button class="btn btn-bridge" onclick="refreshBridgeData()"><i class="fas fa-sync-alt"></i> Refresh</button>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<button class="tab bridge-tab active" onclick="showBridgeTab('overview')">Overview</button>
|
|
<button class="tab bridge-tab" onclick="showBridgeTab('contracts')">Bridge Contracts</button>
|
|
<button class="tab bridge-tab" onclick="showBridgeTab('transactions')">Bridge Transactions</button>
|
|
<button class="tab bridge-tab" onclick="showBridgeTab('chains')">Destination Chains</button>
|
|
</div>
|
|
|
|
<!-- Bridge Overview Tab -->
|
|
<div id="bridgeOverview" class="bridge-tab-content">
|
|
<div class="stats-grid">
|
|
<div class="stat-card bridge-card">
|
|
<div class="stat-label">Total Bridge Volume</div>
|
|
<div class="stat-value bridge-value" id="bridgeVolume">-</div>
|
|
</div>
|
|
<div class="stat-card bridge-card">
|
|
<div class="stat-label">Bridge Transactions</div>
|
|
<div class="stat-value bridge-value" id="bridgeTxCount">-</div>
|
|
</div>
|
|
<div class="stat-card bridge-card">
|
|
<div class="stat-label">Active Bridges</div>
|
|
<div class="stat-value bridge-value" id="activeBridges">2</div>
|
|
</div>
|
|
<div class="stat-card bridge-card">
|
|
<div class="stat-label">Bridge Health</div>
|
|
<div class="stat-value bridge-value">
|
|
<div class="bridge-health">
|
|
<span class="health-indicator" id="bridgeHealth"></span>
|
|
<span id="bridgeHealthText">Healthy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="margin-top: 2rem; margin-bottom: 1rem;">Bridge Contracts Status</h3>
|
|
<div id="bridgeContractsStatus">
|
|
<div class="loading"><i class="fas fa-spinner"></i> Loading bridge status...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bridge Contracts Tab -->
|
|
<div id="bridgeContracts" class="bridge-tab-content" style="display: none;">
|
|
<div id="bridgeContractsList">
|
|
<div class="loading"><i class="fas fa-spinner"></i> Loading bridge contracts...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bridge Transactions Tab -->
|
|
<div id="bridgeTransactions" class="bridge-tab-content" style="display: none;">
|
|
<div id="bridgeTxList">
|
|
<div class="loading"><i class="fas fa-spinner"></i> Loading bridge transactions...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Destination Chains Tab -->
|
|
<div id="bridgeChains" class="bridge-tab-content" style="display: none;">
|
|
<div id="destinationChainsList">
|
|
<div class="loading"><i class="fas fa-spinner"></i> Loading destination chains...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other views (blocks, transactions, etc.) -->
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<!-- Detail views for block/transaction/address -->
|
|
<div id="blockDetailView" class="detail-view">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<button class="btn btn-secondary" onclick="showBlocks()"><i class="fas fa-arrow-left"></i> Back</button>
|
|
<h2 class="card-title">Block Details</h2>
|
|
</div>
|
|
<div id="blockDetail"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="transactionDetailView" class="detail-view">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<button class="btn btn-secondary" onclick="showTransactions()"><i class="fas fa-arrow-left"></i> Back</button>
|
|
<h2 class="card-title">Transaction Details</h2>
|
|
</div>
|
|
<div id="transactionDetail"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="addressDetailView" class="detail-view">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<button class="btn btn-secondary" onclick="showHome()"><i class="fas fa-arrow-left"></i> Back</button>
|
|
<h2 class="card-title">Address Details</h2>
|
|
</div>
|
|
<div id="addressDetail"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_BASE = '/api';
|
|
let currentView = 'home';
|
|
|
|
// Bridge contract addresses
|
|
const BRIDGE_CONTRACTS = {
|
|
CCIP_ROUTER: '0x8078A09637e47Fa5Ed34F626046Ea2094a5CDE5e',
|
|
CCIP_SENDER: '0x105F8A15b819948a89153505762444Ee9f324684',
|
|
WETH9_BRIDGE: '0x89dd12025bfCD38A168455A44B400e913ED33BE2',
|
|
WETH10_BRIDGE: '0xe0E93247376aa097dB308B92e6Ba36bA015535D0',
|
|
WETH9_TOKEN: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
|
|
WETH10_TOKEN: '0xf4BB2e28688e89fCcE3c0580D37d36A7672E8A9f',
|
|
LINK_TOKEN: '0x514910771AF9Ca656af840dff83E8264EcF986CA'
|
|
};
|
|
|
|
const DESTINATION_CHAINS = {
|
|
'56': { name: 'BSC', selector: '11344663589394136015', status: 'active' },
|
|
'137': { name: 'Polygon', selector: '4051577828743386545', status: 'active' },
|
|
'43114': { name: 'Avalanche', selector: '6433500567565415381', status: 'active' },
|
|
'8453': { name: 'Base', selector: '15971525489660198786', status: 'active' },
|
|
'42161': { name: 'Arbitrum', selector: '', status: 'pending' },
|
|
'10': { name: 'Optimism', selector: '', status: 'pending' }
|
|
};
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadStats();
|
|
loadLatestBlocks();
|
|
loadBridgeData();
|
|
|
|
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`);
|
|
const statsGrid = document.getElementById('statsGrid');
|
|
statsGrid.innerHTML = `
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Blocks</div>
|
|
<div class="stat-value">${formatNumber(stats.total_blocks)}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Transactions</div>
|
|
<div class="stat-value">${formatNumber(stats.total_transactions)}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Addresses</div>
|
|
<div class="stat-value">${formatNumber(stats.total_addresses)}</div>
|
|
</div>
|
|
<div class="stat-card bridge-card">
|
|
<div class="stat-label">Bridge Contracts</div>
|
|
<div class="stat-value bridge-value">2 Active</div>
|
|
</div>
|
|
`;
|
|
|
|
const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
|
|
const blockNum = parseInt(blockData.result, 16);
|
|
// Add latest block if needed
|
|
} catch (error) {
|
|
console.error('Failed to load stats:', error);
|
|
}
|
|
}
|
|
|
|
async function loadBridgeData() {
|
|
await Promise.all([
|
|
loadBridgeOverview(),
|
|
loadBridgeContracts(),
|
|
loadDestinationChains()
|
|
]);
|
|
}
|
|
|
|
async function loadBridgeOverview() {
|
|
try {
|
|
// Load bridge contract balances and status
|
|
const contracts = ['WETH9_BRIDGE', 'WETH10_BRIDGE', 'CCIP_ROUTER'];
|
|
let html = '<table class="table"><thead><tr><th>Contract</th><th>Address</th><th>Type</th><th>Status</th><th>Balance</th></tr></thead><tbody>';
|
|
|
|
for (const contract of contracts) {
|
|
const address = BRIDGE_CONTRACTS[contract];
|
|
const name = contract.replace('_', ' ');
|
|
try {
|
|
const balance = await fetchAPI(`${API_BASE}?module=account&action=eth_get_balance&address=${address}&tag=latest`);
|
|
const balanceEth = formatEther(balance.result || '0');
|
|
html += `<tr>
|
|
<td><strong>${name}</strong></td>
|
|
<td class="hash" onclick="showAddressDetail('${address}')" style="cursor: pointer;">${shortenHash(address)}</td>
|
|
<td>${contract.includes('BRIDGE') ? 'Bridge' : contract.includes('ROUTER') ? 'Router' : 'Token'}</td>
|
|
<td><span class="badge badge-success">Active</span></td>
|
|
<td>${balanceEth} ETH</td>
|
|
</tr>`;
|
|
} catch (e) {
|
|
html += `<tr>
|
|
<td><strong>${name}</strong></td>
|
|
<td class="hash">${shortenHash(address)}</td>
|
|
<td>-</td>
|
|
<td><span class="badge badge-warning">Unknown</span></td>
|
|
<td>-</td>
|
|
</tr>`;
|
|
}
|
|
}
|
|
html += '</tbody></table>';
|
|
document.getElementById('bridgeContractsStatus').innerHTML = html;
|
|
|
|
// Update bridge stats
|
|
document.getElementById('bridgeTxCount').textContent = 'Loading...';
|
|
document.getElementById('bridgeVolume').textContent = 'Calculating...';
|
|
document.getElementById('bridgeHealth').classList.add('health-indicator');
|
|
} catch (error) {
|
|
document.getElementById('bridgeContractsStatus').innerHTML =
|
|
`<div class="error">Failed to load bridge data: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
async function loadBridgeContracts() {
|
|
const contracts = [
|
|
{ name: 'CCIP Router', address: BRIDGE_CONTRACTS.CCIP_ROUTER, type: 'Router', description: 'Routes cross-chain messages' },
|
|
{ name: 'CCIP Sender', address: BRIDGE_CONTRACTS.CCIP_SENDER, type: 'Sender', description: 'Initiates cross-chain transfers' },
|
|
{ name: 'WETH9 Bridge', address: BRIDGE_CONTRACTS.WETH9_BRIDGE, type: 'Bridge', description: 'Bridges WETH9 tokens' },
|
|
{ name: 'WETH10 Bridge', address: BRIDGE_CONTRACTS.WETH10_BRIDGE, type: 'Bridge', description: 'Bridges WETH10 tokens' }
|
|
];
|
|
|
|
let html = '<div style="display: grid; gap: 1.5rem;">';
|
|
for (const contract of contracts) {
|
|
try {
|
|
const balance = await fetchAPI(`${API_BASE}?module=account&action=eth_get_balance&address=${contract.address}&tag=latest`);
|
|
html += `
|
|
<div class="bridge-chain-card">
|
|
<div class="chain-name">${contract.name}</div>
|
|
<div style="margin-bottom: 0.5rem;">
|
|
<span class="hash" onclick="showAddressDetail('${contract.address}')" style="cursor: pointer;">${contract.address}</span>
|
|
</div>
|
|
<div style="color: var(--text-light); margin-bottom: 1rem;">${contract.description}</div>
|
|
<div class="chain-info">
|
|
<div class="chain-stat">
|
|
<div class="chain-stat-label">Type</div>
|
|
<div class="chain-stat-value">${contract.type}</div>
|
|
</div>
|
|
<div class="chain-stat">
|
|
<div class="chain-stat-label">Balance</div>
|
|
<div class="chain-stat-value">${formatEther(balance.result || '0')} ETH</div>
|
|
</div>
|
|
<div class="chain-stat">
|
|
<div class="chain-stat-label">Status</div>
|
|
<div class="chain-stat-value"><span class="badge badge-success">Active</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} catch (e) {
|
|
html += `<div class="bridge-chain-card">
|
|
<div class="chain-name">${contract.name}</div>
|
|
<div class="hash">${contract.address}</div>
|
|
<div class="error">Unable to fetch data</div>
|
|
</div>`;
|
|
}
|
|
}
|
|
html += '</div>';
|
|
document.getElementById('bridgeContractsList').innerHTML = html;
|
|
}
|
|
|
|
async function loadDestinationChains() {
|
|
let html = '';
|
|
for (const [chainId, chain] of Object.entries(DESTINATION_CHAINS)) {
|
|
const statusBadge = chain.status === 'active' ?
|
|
'<span class="badge badge-success">Active</span>' :
|
|
'<span class="badge badge-warning">Pending</span>';
|
|
|
|
html += `
|
|
<div class="bridge-chain-card">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div class="chain-name">${chain.name} (Chain ID: ${chainId})</div>
|
|
${statusBadge}
|
|
</div>
|
|
<div class="chain-info">
|
|
<div class="chain-stat">
|
|
<div class="chain-stat-label">Chain Selector</div>
|
|
<div class="chain-stat-value">${chain.selector || 'N/A'}</div>
|
|
</div>
|
|
<div class="chain-stat">
|
|
<div class="chain-stat-label">Status</div>
|
|
<div class="chain-stat-value">${chain.status === 'active' ? 'Connected' : 'Not Configured'}</div>
|
|
</div>
|
|
<div class="chain-stat">
|
|
<div class="chain-stat-label">Bridge Contracts</div>
|
|
<div class="chain-stat-value">Deployed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
document.getElementById('destinationChainsList').innerHTML = html;
|
|
}
|
|
|
|
function showBridgeTab(tab) {
|
|
// Hide all tab contents
|
|
document.querySelectorAll('.bridge-tab-content').forEach(el => el.style.display = 'none');
|
|
document.querySelectorAll('.bridge-tab').forEach(el => el.classList.remove('active'));
|
|
|
|
// Show selected tab
|
|
document.getElementById(`bridge${tab.charAt(0).toUpperCase() + tab.slice(1)}`).style.display = 'block';
|
|
event.target.classList.add('active');
|
|
}
|
|
|
|
function showBridgeMonitoring() {
|
|
showView('bridge');
|
|
loadBridgeData();
|
|
}
|
|
|
|
function refreshBridgeData() {
|
|
loadBridgeData();
|
|
}
|
|
|
|
function showHome() {
|
|
showView('home');
|
|
loadStats();
|
|
loadLatestBlocks();
|
|
}
|
|
|
|
function showBlocks() {
|
|
showView('blocks');
|
|
// Load blocks list
|
|
}
|
|
|
|
function showTransactions() {
|
|
showView('transactions');
|
|
// Load transactions list
|
|
}
|
|
|
|
function showTokens() {
|
|
alert('Token view coming soon!');
|
|
}
|
|
|
|
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 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`);
|
|
if (block.result) {
|
|
const timestamp = new Date(parseInt(block.result.timestamp, 16) * 1000).toLocaleString();
|
|
const txCount = block.result.transactions.length;
|
|
html += `<tr onclick="showBlockDetail('${blockNum}')" style="cursor: pointer;">
|
|
<td>${blockNum}</td>
|
|
<td class="hash">${shortenHash(block.result.hash)}</td>
|
|
<td>${txCount}</td>
|
|
<td>${timestamp}</td>
|
|
</tr>`;
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
html += '</tbody></table>';
|
|
container.innerHTML = html;
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="error">Failed to load blocks: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function showBlockDetail(blockNumber) {
|
|
// Implement block detail view
|
|
alert(`Block ${blockNumber} detail view - to be implemented`);
|
|
}
|
|
|
|
function showAddressDetail(address) {
|
|
showView('addressDetail');
|
|
// Implement address detail view
|
|
}
|
|
|
|
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)) {
|
|
// Show transaction detail
|
|
alert(`Transaction ${query} - to be implemented`);
|
|
} else if (/^\d+$/.test(query)) {
|
|
showBlockDetail(query);
|
|
} else {
|
|
alert('Invalid search. Enter an address, transaction hash, 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>
|
|
BRIDGE_HTML_EOF
|
|
|
|
# Step 3: Upload enhanced explorer
|
|
log_step "Step 3: Uploading enhanced explorer with bridge monitoring..."
|
|
sshpass -p "$PASSWORD" scp -o StrictHostKeyChecking=no /tmp/blockscout-with-bridge-monitoring.html root@"$IP":/var/www/html/index.html
|
|
log_success "Enhanced explorer with bridge monitoring uploaded"
|
|
|
|
echo ""
|
|
log_success "Bridge monitoring added to explorer!"
|
|
echo ""
|
|
log_info "Bridge Monitoring Features:"
|
|
log_info " ✅ Bridge Overview Dashboard"
|
|
log_info " ✅ Bridge Contract Status Monitoring"
|
|
log_info " ✅ Bridge Transaction Tracking"
|
|
log_info " ✅ Destination Chain Status"
|
|
log_info " ✅ Bridge Health Indicators"
|
|
log_info " ✅ Real-time Bridge Statistics"
|
|
log_info " ✅ CCIP Router & Sender Monitoring"
|
|
log_info " ✅ WETH9 & WETH10 Bridge Tracking"
|
|
echo ""
|
|
log_info "Access: https://explorer.d-bis.org/"
|
|
log_info "Click 'Bridge' in the navigation to view bridge monitoring"
|
|
echo ""
|
|
|