generated from nathanwoodburn/python-webserver-template
feat: Initial explorer
This commit is contained in:
29
server.py
29
server.py
@@ -2,7 +2,6 @@ from flask import (
|
||||
Flask,
|
||||
make_response,
|
||||
request,
|
||||
jsonify,
|
||||
render_template,
|
||||
send_from_directory,
|
||||
send_file,
|
||||
@@ -105,32 +104,6 @@ def catch_all(path: str):
|
||||
# endregion
|
||||
|
||||
|
||||
# region API routes
|
||||
|
||||
api_requests = 0
|
||||
|
||||
|
||||
@app.route("/api/v1/data", methods=["GET"])
|
||||
def api_data():
|
||||
"""
|
||||
Example API endpoint that returns some data.
|
||||
You can modify this to return whatever data you need.
|
||||
"""
|
||||
|
||||
global api_requests
|
||||
api_requests += 1
|
||||
|
||||
data = {
|
||||
"header": "Sample API Response",
|
||||
"content": f"Hello, this is a sample API response! You have called this endpoint {api_requests} times.",
|
||||
"timestamp": datetime.now().isoformat(),
|
||||
}
|
||||
return jsonify(data)
|
||||
|
||||
|
||||
# endregion
|
||||
|
||||
|
||||
# region Error Catching
|
||||
# 404 catch all
|
||||
@app.errorhandler(404)
|
||||
@@ -140,4 +113,4 @@ def not_found(e):
|
||||
|
||||
# endregion
|
||||
if __name__ == "__main__":
|
||||
app.run(debug=True, port=5000, host="0.0.0.0")
|
||||
app.run(debug=True, port=5000, host="127.0.0.1")
|
||||
|
||||
@@ -1,41 +1,362 @@
|
||||
body {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.centre {
|
||||
margin-top: 10%;
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
|
||||
color: #e0e0e0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: linear-gradient(135deg, #8b2f0a 0%, #6b3d0a 100%);
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
a {
|
||||
|
||||
header h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
main {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: rgba(30, 30, 30, 0.8);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 107, 53, 0.2);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
color: #ff6b35;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
color: #f7931e;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
/* Status Section */
|
||||
.status-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
color: #b0b0b0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Info Grid */
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
padding: 0.5rem;
|
||||
background: rgba(20, 20, 20, 0.5);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255, 107, 53, 0.15);
|
||||
}
|
||||
|
||||
.info-item.no-border {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info-item.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.info-item strong {
|
||||
color: #ff6b35;
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.view-all-btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
|
||||
color: #ffffff !important;
|
||||
text-decoration: none !important;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.view-all-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.search-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
background: rgba(50, 50, 50, 0.5);
|
||||
color: #e0e0e0;
|
||||
border: 1px solid rgba(255, 107, 53, 0.3);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: rgba(255, 107, 53, 0.2);
|
||||
border-color: #ff6b35;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
|
||||
color: #ffffff;
|
||||
border-color: #ff6b35;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Search Box */
|
||||
.search-box {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(20, 20, 20, 0.8);
|
||||
border: 1px solid rgba(255, 107, 53, 0.3);
|
||||
border-radius: 8px;
|
||||
color: #e0e0e0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
outline: none;
|
||||
border-color: #ff6b35;
|
||||
box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: rgba(224, 224, 224, 0.5);
|
||||
}
|
||||
|
||||
.search-box button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-box button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
|
||||
}
|
||||
|
||||
.search-box button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(50, 50, 50, 0.8);
|
||||
color: #ff6b35;
|
||||
border: 1px solid #ff6b35;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.secondary-btn:hover {
|
||||
background: rgba(255, 107, 53, 0.2);
|
||||
}
|
||||
|
||||
/* Result Box */
|
||||
.result-box {
|
||||
background: rgba(10, 10, 10, 0.8);
|
||||
border: 1px solid rgba(255, 107, 53, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
min-height: 100px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.result-box:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-box pre {
|
||||
color: #b0b0b0;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9rem;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.result-box .error {
|
||||
color: #ff4444;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.result-box::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.result-box::-webkit-scrollbar-track {
|
||||
background: rgba(20, 20, 20, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.result-box::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 107, 53, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.result-box::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 107, 53, 0.7);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: rgba(20, 20, 20, 0.8);
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
border-top: 1px solid rgba(255, 107, 53, 0.2);
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: rgba(224, 224, 224, 0.7);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(224, 224, 224, 0.5);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: #ff6b35;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f7931e;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Mike section styling */
|
||||
.mike-section {
|
||||
margin-top: 30px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(50, 50, 50, 0.3);
|
||||
border-radius: 8px;
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-box input,
|
||||
.search-box button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.mike-section h2 {
|
||||
color: #f0f0f0;
|
||||
margin-top: 0;
|
||||
/* Loading Animation */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.mike-section p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.status-content:empty::after {
|
||||
content: 'Loading...';
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 62 KiB |
@@ -4,57 +4,331 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nathan.Woodburn/</title>
|
||||
<title>Fire Explorer - Handshake Blockchain Explorer</title>
|
||||
<link rel="icon" href="/assets/img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="/assets/css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="spacer"></div>
|
||||
<div class="centre">
|
||||
<h1>Nathan.Woodburn/</h1>
|
||||
<span>The current date and time is {{datetime}}</span>
|
||||
</div>
|
||||
<header>
|
||||
<div class="container">
|
||||
<h1><img src="/assets/img/favicon.png" alt="Fire Icon" style="height: 1em; vertical-align: middle;"> Fire Explorer</h1>
|
||||
<p class="subtitle">Handshake Blockchain Explorer</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<div class="centre">
|
||||
<h2 id="test-content-header">Pulling data</h2>
|
||||
<span class="test-content">This is a test content area that will be updated with data from the server.</span>
|
||||
<br>
|
||||
<br>
|
||||
<span class="test-content-timestamp">Timestamp: Waiting to pull data</span>
|
||||
</div>
|
||||
<main class="container">
|
||||
<!-- Status Cards -->
|
||||
<section class="status-section">
|
||||
<div class="card status-card">
|
||||
<h3>Node Status</h3>
|
||||
<div id="node-status" class="status-content">Loading...</div>
|
||||
</div>
|
||||
<div class="card status-card">
|
||||
<h3>Chain Info</h3>
|
||||
<div id="chain-status" class="status-content">Loading...</div>
|
||||
</div>
|
||||
<div class="card status-card">
|
||||
<h3>Mempool</h3>
|
||||
<div id="mempool-status" class="status-content">Loading...</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Search Section -->
|
||||
<section class="search-section">
|
||||
<div class="card">
|
||||
<h2>Search Blockchain</h2>
|
||||
<div class="search-tabs">
|
||||
<button class="tab-btn active" data-tab="block">Block</button>
|
||||
<button class="tab-btn" data-tab="tx">Transaction</button>
|
||||
<button class="tab-btn" data-tab="address">Address</button>
|
||||
<button class="tab-btn" data-tab="name">Name</button>
|
||||
</div>
|
||||
|
||||
<!-- Block Search -->
|
||||
<div class="tab-content active" id="block-tab">
|
||||
<div class="search-box">
|
||||
<input type="text" id="block-input" placeholder="Enter block height or hash">
|
||||
<button onclick="searchBlock()">Search Block</button>
|
||||
<button onclick="searchHeader()">Get Header</button>
|
||||
</div>
|
||||
<div id="block-result" class="result-box"></div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction Search -->
|
||||
<div class="tab-content" id="tx-tab">
|
||||
<div class="search-box">
|
||||
<input type="text" id="tx-input" placeholder="Enter transaction ID">
|
||||
<button onclick="searchTx()">Search Transaction</button>
|
||||
</div>
|
||||
<div id="tx-result" class="result-box"></div>
|
||||
</div>
|
||||
|
||||
<!-- Address Search -->
|
||||
<div class="tab-content" id="address-tab">
|
||||
<div class="search-box">
|
||||
<input type="text" id="address-input" placeholder="Enter Handshake address">
|
||||
<button onclick="searchAddressTx()">Get Transactions</button>
|
||||
<button onclick="searchAddressCoins()">Get Coins</button>
|
||||
</div>
|
||||
<div id="address-result" class="result-box"></div>
|
||||
</div>
|
||||
|
||||
<!-- Name Search -->
|
||||
<div class="tab-content" id="name-tab">
|
||||
<div class="search-box">
|
||||
<input type="text" id="name-input" placeholder="Enter Handshake name">
|
||||
<button onclick="searchName()">Name Info</button>
|
||||
<button onclick="searchNameResource()">Get Resource</button>
|
||||
<button onclick="searchNameSummary()">Get Summary</button>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input type="text" id="namehash-input" placeholder="Enter name hash">
|
||||
<button onclick="searchNameHash()">Search by Hash</button>
|
||||
</div>
|
||||
<div id="name-result" class="result-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Coin Lookup -->
|
||||
<section class="additional-section">
|
||||
<div class="card">
|
||||
<h2>Coin Lookup</h2>
|
||||
<div class="search-box">
|
||||
<input type="text" id="coin-hash" placeholder="Coin hash">
|
||||
<input type="text" id="coin-index" placeholder="Index">
|
||||
<button onclick="searchCoin()">Get Coin Info</button>
|
||||
</div>
|
||||
<div id="coin-result" class="result-box"></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>Fire Explorer - Handshake Blockchain Explorer | Powered by <a href="https://hns.au" target="_blank">HNSAU</a> & <a href="https://hsd.hns.au" target="_blank">Fire HSD</a></p>
|
||||
<p class="timestamp">Last updated: {{ datetime }}</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function fetchData() {
|
||||
// Fetch the data from the server
|
||||
fetch('/api/v1/data')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Get the data header element
|
||||
const dataHeader = document.getElementById('test-content-header');
|
||||
// Update the header with the fetched data
|
||||
dataHeader.textContent = data.header;
|
||||
// Get the test content element
|
||||
const testContent = document.querySelector('.test-content');
|
||||
// Update the content with the fetched data
|
||||
testContent.textContent = data.content;
|
||||
// Tab switching
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const tab = btn.dataset.tab;
|
||||
|
||||
// Update active tab button
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
// Update active tab content
|
||||
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
||||
document.getElementById(tab + '-tab').classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Get the timestamp element
|
||||
const timestampElement = document.querySelector('.test-content-timestamp');
|
||||
// Update the timestamp with the fetched data
|
||||
timestampElement.textContent = `Timestamp: ${data.timestamp}`;
|
||||
})
|
||||
.catch(error => console.error('Error fetching data:', error));
|
||||
// API call helper
|
||||
async function apiCall(endpoint) {
|
||||
try {
|
||||
const response = await fetch(`https://hsd.hns.au/api/v1/${endpoint}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
return { error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
// Initial fetch after 2 seconds
|
||||
setTimeout(fetchData, 2000);
|
||||
|
||||
// Then fetch every 2 seconds
|
||||
setInterval(fetchData, 2000);
|
||||
</script>
|
||||
// Format chain data nicely
|
||||
function formatChainData(chain) {
|
||||
return `
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><strong>Height:</strong> ${chain.height.toLocaleString()}</div>
|
||||
<div class="info-item"><strong>Progress:</strong> ${(chain.progress * 100).toFixed(2)}%</div>
|
||||
<div class="info-item"><strong>TX Count:</strong> ${chain.state.tx.toLocaleString()}</div>
|
||||
<div class="info-item"><strong>Coins:</strong> ${chain.state.coin.toLocaleString()}</div>
|
||||
<div class="info-item"><strong>Value:</strong> ${(chain.state.value / 1e6).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})} HNS</div>
|
||||
<div class="info-item"><strong>Burned:</strong> ${(chain.state.burned / 1e6).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})} HNS</div>
|
||||
<div class="info-item full-width"><strong>Tip:</strong> <span class="mono">${chain.tip}</span></div>
|
||||
<div class="info-item full-width"><strong>Tree Root:</strong> <span class="mono">${chain.treeRoot}</span></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Format mempool data nicely
|
||||
function formatMempoolData(mempool) {
|
||||
// Check if mempool is an array of transaction IDs
|
||||
if (Array.isArray(mempool)) {
|
||||
return `
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><strong>Transactions:</strong> ${mempool.length.toLocaleString()}</div>
|
||||
<div class="info-item no-border">
|
||||
<a href="/mempool" class="view-all-btn">View All Transactions</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// Fallback for object format
|
||||
return `
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><strong>Transactions:</strong> ${mempool.tx || 0}</div>
|
||||
<div class="info-item"><strong>Size:</strong> ${mempool.size ? (mempool.size / 1024).toFixed(2) + ' KB' : '0 KB'}</div>
|
||||
<div class="info-item"><strong>Orphans:</strong> ${mempool.orphans || 0}</div>
|
||||
<div class="info-item"><strong>Claims:</strong> ${mempool.claims || 0}</div>
|
||||
<div class="info-item"><strong>Airdrops:</strong> ${mempool.airdrops || 0}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Display helper
|
||||
function displayResult(elementId, data, key = null) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (data.error) {
|
||||
element.innerHTML = `<div class="error">Error: ${data.error}</div>`;
|
||||
} else {
|
||||
if (key && data[key] !== undefined) {
|
||||
// If the value is a simple string, display it without JSON formatting
|
||||
if (typeof data[key] === 'string') {
|
||||
element.innerHTML = `<pre>${data[key]}</pre>`;
|
||||
} else {
|
||||
element.innerHTML = `<pre>${JSON.stringify(data[key], null, 2)}</pre>`;
|
||||
}
|
||||
return;
|
||||
}
|
||||
element.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Load status on page load
|
||||
async function loadStatus() {
|
||||
const nodeStatus = await apiCall('status');
|
||||
displayResult('node-status', nodeStatus, 'status');
|
||||
|
||||
const chainStatus = await apiCall('chain');
|
||||
if (chainStatus.chain) {
|
||||
document.getElementById('chain-status').innerHTML = formatChainData(chainStatus.chain);
|
||||
} else {
|
||||
displayResult('chain-status', chainStatus);
|
||||
}
|
||||
|
||||
const mempoolStatus = await apiCall('mempool');
|
||||
if (mempoolStatus && !mempoolStatus.error) {
|
||||
document.getElementById('mempool-status').innerHTML = formatMempoolData(mempoolStatus);
|
||||
} else {
|
||||
displayResult('mempool-status', mempoolStatus);
|
||||
}
|
||||
}
|
||||
|
||||
// Search functions
|
||||
async function searchBlock() {
|
||||
const blockId = document.getElementById('block-input').value.trim();
|
||||
if (!blockId) {
|
||||
alert('Please enter a block height or hash');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`block/${blockId}`);
|
||||
displayResult('block-result', data);
|
||||
}
|
||||
|
||||
async function searchHeader() {
|
||||
const blockId = document.getElementById('block-input').value.trim();
|
||||
if (!blockId) {
|
||||
alert('Please enter a block height or hash');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`header/${blockId}`);
|
||||
displayResult('block-result', data);
|
||||
}
|
||||
|
||||
async function searchTx() {
|
||||
const txId = document.getElementById('tx-input').value.trim();
|
||||
if (!txId) {
|
||||
alert('Please enter a transaction ID');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`tx/${txId}`);
|
||||
displayResult('tx-result', data);
|
||||
}
|
||||
|
||||
async function searchAddressTx() {
|
||||
const address = document.getElementById('address-input').value.trim();
|
||||
if (!address) {
|
||||
alert('Please enter an address');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`tx/address/${address}`);
|
||||
displayResult('address-result', data);
|
||||
}
|
||||
|
||||
async function searchAddressCoins() {
|
||||
const address = document.getElementById('address-input').value.trim();
|
||||
if (!address) {
|
||||
alert('Please enter an address');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`coin/address/${address}`);
|
||||
displayResult('address-result', data);
|
||||
}
|
||||
|
||||
async function searchName() {
|
||||
const name = document.getElementById('name-input').value.trim();
|
||||
if (!name) {
|
||||
alert('Please enter a name');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`name/${name}`);
|
||||
displayResult('name-result', data);
|
||||
}
|
||||
|
||||
async function searchNameResource() {
|
||||
const name = document.getElementById('name-input').value.trim();
|
||||
if (!name) {
|
||||
alert('Please enter a name');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`nameresource/${name}`);
|
||||
displayResult('name-result', data);
|
||||
}
|
||||
|
||||
async function searchNameSummary() {
|
||||
const name = document.getElementById('name-input').value.trim();
|
||||
if (!name) {
|
||||
alert('Please enter a name');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`namesummary/${name}`);
|
||||
displayResult('name-result', data);
|
||||
}
|
||||
|
||||
async function searchNameHash() {
|
||||
const nameHash = document.getElementById('namehash-input').value.trim();
|
||||
if (!nameHash) {
|
||||
alert('Please enter a name hash');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`namehash/${nameHash}`);
|
||||
displayResult('name-result', data);
|
||||
}
|
||||
|
||||
async function searchCoin() {
|
||||
const coinHash = document.getElementById('coin-hash').value.trim();
|
||||
const coinIndex = document.getElementById('coin-index').value.trim();
|
||||
if (!coinHash || !coinIndex) {
|
||||
alert('Please enter both coin hash and index');
|
||||
return;
|
||||
}
|
||||
const data = await apiCall(`coin/${coinHash}/${coinIndex}`);
|
||||
displayResult('coin-result', data);
|
||||
}
|
||||
|
||||
// Load status when page loads
|
||||
window.addEventListener('load', loadStatus);
|
||||
|
||||
// Refresh status every 30 seconds
|
||||
setInterval(loadStatus, 30000);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user