lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

Revise BUILD-GUIDE and enhance ISO build process

Browse Source 
- Updated BUILD-GUIDE.md to streamline instructions for building the Archipelago Auto-Installer ISO, including prerequisites and post-installation steps.
- Added detailed sections on capturing the live server state and building from source.
- Enhanced Docker and Podman integration in build scripts for improved backend and web UI capture.
- Introduced new app metadata for "IndeedHub" in the Docker package scanner and updated UI components for better installation progress tracking.
- Improved styling and functionality in the Bitcoin UI for a more cohesive user experience.
This commit is contained in:
Dorian
2026-02-03 21:43:33 +00:00
parent 0f40cb88b5
commit 337ebee510
22 changed files with 2619 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docker/bitcoin-ui/Dockerfile Normal file
View File

@@ -0,0 +1,19 @@
FROM docker.io/library/nginx:alpine
# Copy the static UI
COPY index.html /usr/share/nginx/html/
# Create assets directories first
RUN mkdir -p /usr/share/nginx/html/assets/img/app-icons && \
mkdir -p /usr/share/nginx/html/assets/img
# Copy Bitcoin Knots icon and background
COPY bitcoin-knots.webp /usr/share/nginx/html/assets/img/app-icons/
COPY bg-network.jpg /usr/share/nginx/html/assets/img/
# Copy custom Nginx config with Bitcoin RPC proxy
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

BIN
docker/bitcoin-ui/bg-network.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 KiB

BIN
docker/bitcoin-ui/bitcoin-knots.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

600
docker/bitcoin-ui/index.html
View File

@@ -3,6 +3,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Bitcoin Knots - Archipelago</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@@ -32,7 +35,7 @@
.bg-layer {
position: absolute;
inset: 0;
background-image: url('/assets/img/bg-web5.jpg');
background-image: url('/assets/img/bg-network.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@@ -51,19 +54,43 @@
pointer-events: none;
}
/* Glass card - Web5 style */
/* Glass card - Archipelago standard with gradient border */
.glass-card {
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
position: relative;
background: rgba(0, 0, 0, 0.60);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
border-radius: 1rem;
overflow-x: hidden;
overflow-y: visible;
border: none;
}
/* Glass button - Web5 style */
.glass-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
.glass-card > * {
position: relative;
z-index: 2;
}
/* Glass button - Archipelago standard (secondary actions) */
.glass-button {
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(18px);
@@ -75,6 +102,107 @@
.glass-button:hover {
color: white;
background-color: rgba(0, 0, 0, 0.7);
}
/* Gradient button - Archipelago standard (primary actions) */
.gradient-button {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.8) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.95);
transition: all 0.3s ease;
}
.gradient-button:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
transform: translateY(-1px);
}
.gradient-button:active {
transform: translateY(1px);
}
/* Interactive card - Archipelago standard (display only, no hover) */
.info-card {
position: relative;
background: rgba(0, 0, 0, 0.60);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
border-radius: 16px;
padding: 12px;
border: none;
}
.info-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* Interactive button - Same as info-card but with hover effects */
.info-card-button {
position: relative;
background: rgba(0, 0, 0, 0.60);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
border-radius: 16px;
padding: 12px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
color: rgba(255, 255, 255, 0.9);
}
.info-card-button::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
transition: all 0.3s ease;
}
.info-card-button:hover {
transform: translateY(-2px);
background: rgba(0, 0, 0, 0.35);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 1);
}
.info-card-button:hover::before {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
}
.info-card-button:active {
transform: translateY(1px);
}
/* Container */
@@ -124,6 +252,75 @@
.animate-ping {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
/* Pulsing glow for progress bar */
@keyframes progressGlow {
0%, 100% {
box-shadow: 0 0 10px rgba(251, 146, 60, 0.5),
0 0 20px rgba(251, 146, 60, 0.3),
0 0 30px rgba(251, 146, 60, 0.1);
}
50% {
box-shadow: 0 0 20px rgba(251, 146, 60, 0.8),
0 0 30px rgba(251, 146, 60, 0.5),
0 0 40px rgba(251, 146, 60, 0.3);
}
}
.progress-glow {
animation: progressGlow 2s ease-in-out infinite;
}
/* Spinning animation */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin-slow {
animation: spin 3s linear infinite;
}
/* Shimmer effect */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.shimmer {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 1000px 100%;
animation: shimmer 3s infinite;
}
/* Number increment animation */
@keyframes numberPulse {
0%, 100% {
transform: scale(1);
color: rgba(255, 255, 255, 0.9);
}
50% {
transform: scale(1.05);
color: rgba(251, 146, 60, 1);
}
}
.number-update {
animation: numberPulse 0.5s ease-in-out;
}
</style>
</head>
<body>
@@ -133,9 +330,9 @@
<div class="overlay"></div>
<div class="container">
<!-- Header - Glass card with logo top left -->
<!-- Header - Glass card with logo and node info -->
<div class="glass-card p-6 mb-6">
<div class="flex items-start gap-4">
<div class="flex flex-col md:flex-row items-center md:items-center gap-4 md:gap-6">
<!-- Logo - Top Left -->
<div class="flex-shrink-0">
<div class="logo-gradient-border">
@@ -144,6 +341,7 @@
alt="Bitcoin Knots"
class="w-16 h-16"
style="object-fit: contain;"
onerror="this.style.display='none'"
/>
</div>
</div>
@@ -152,137 +350,99 @@
<div class="flex-1 min-w-0">
<h1 class="text-3xl font-bold text-white mb-2">Bitcoin Knots</h1>
<p class="text-white/70">Enhanced Bitcoin node implementation</p>
<p class="text-sm text-white/60 mt-2">Regtest mode - Development environment</p>
</div>
</div>
</div>
<!-- Quick Actions Container - Web5 style -->
<div class="glass-card p-6 mb-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Network Status -->
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<!-- Node Status Info - Compact on Desktop -->
<div class="w-full md:w-auto flex flex-col md:flex-row gap-3 md:gap-4 mt-4 md:mt-0">
<div class="info-card flex items-center gap-3">
<div class="relative">
<div class="w-3 h-3 rounded-full bg-green-400"></div>
<div class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
</div>
<div>
<p class="text-sm font-medium text-white">Network</p>
<p class="text-xs text-white/60">Regtest</p>
<p class="text-xs text-white/60">Status</p>
<p class="text-sm font-medium text-white">Running</p>
</div>
</div>
</div>
<!-- Block Height -->
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<div class="relative">
<span class="text-2xl text-orange-500 font-bold">₿</span>
</div>
<div class="info-card flex items-center gap-3">
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<div>
<p class="text-sm font-medium text-white">Block Height</p>
<p class="text-xs text-orange-500 font-medium" id="blockHeight">0</p>
<p class="text-xs text-white/60">Version</p>
<p class="text-sm font-medium text-white" id="nodeVersion">Loading...</p>
</div>
</div>
</div>
<!-- RPC Status -->
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<div class="relative">
<div class="w-3 h-3 rounded-full bg-green-400"></div>
<div class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
</div>
<div class="info-card flex items-center gap-3">
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<div>
<p class="text-sm font-medium text-white">RPC Server</p>
<p class="text-xs text-white/60">Active</p>
<p class="text-xs text-white/60">Network</p>
<p class="text-sm font-medium text-white" id="networkType">Loading...</p>
</div>
</div>
<button
onclick="openSettings()"
class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
<button
onclick="openSettings()"
class="px-4 py-3 glass-button rounded-lg text-sm font-medium"
>
Settings
</button>
</div>
</div>
</div>
<!-- ZMQ Status -->
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<div class="relative">
<div class="w-3 h-3 rounded-full bg-green-400"></div>
<div class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
</div>
<div>
<p class="text-sm font-medium text-white">ZMQ</p>
<p class="text-xs text-white/60">Enabled</p>
</div>
</div>
<button
onclick="openLogs()"
class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
>
Logs
</button>
<!-- Blockchain Sync Status Card - NEW -->
<div class="glass-card p-6 mb-6" id="syncStatusCard">
<div class="flex items-start gap-4 mb-4">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-orange-500/20 flex items-center justify-center">
<svg class="w-6 h-6 text-orange-500 animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24" id="syncIcon">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</div>
<div class="flex-1">
<h2 class="text-xl font-semibold text-white mb-1">Blockchain Sync</h2>
<p class="text-white/70 text-sm" id="syncStatusText">Checking sync status...</p>
</div>
</div>
<!-- Progress Bar -->
<div class="mb-4">
<div class="flex justify-between text-sm text-white/60 mb-2">
<span id="currentBlock">Block 0</span>
<span id="syncPercentage">0%</span>
</div>
<div class="w-full bg-white/10 rounded-full h-3 overflow-hidden relative shimmer">
<div class="h-full bg-gradient-to-r from-orange-500 to-yellow-400 rounded-full transition-all duration-500 progress-glow" id="syncProgressBar" style="width: 0%"></div>
</div>
</div>
<!-- Sync Stats Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<div class="info-card">
<p class="text-xs text-white/60 mb-1">Current Height</p>
<p class="text-lg font-semibold text-white transition-all" id="currentHeight">-</p>
</div>
<div class="info-card">
<p class="text-xs text-white/60 mb-1">Network Height</p>
<p class="text-lg font-semibold text-white" id="networkHeight">-</p>
</div>
<div class="info-card">
<p class="text-xs text-white/60 mb-1">Headers</p>
<p class="text-lg font-semibold text-white" id="headers">-</p>
</div>
<div class="info-card">
<p class="text-xs text-white/60 mb-1">Verification</p>
<p class="text-lg font-semibold text-white" id="verificationProgress">-</p>
</div>
</div>
</div>
<!-- Core Services Overview Cards - Web5 style -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- Node Information -->
<div class="glass-card p-6">
<div class="flex items-start gap-4 mb-4">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
</div>
<div class="flex-1">
<h2 class="text-xl font-semibold text-white mb-2">Node Information</h2>
<p class="text-white/70 text-sm mb-4">Bitcoin Core node status</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
<span class="text-white/80 text-sm">Node Status</span>
</div>
<span class="text-green-400 text-sm font-medium">Running</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span class="text-white/80 text-sm">Version</span>
</div>
<span class="text-white/60 text-sm">v27.0</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
</svg>
<span class="text-white/80 text-sm">Network</span>
</div>
<span class="text-white/60 text-sm">Regtest</span>
</div>
</div>
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors" onclick="openSettings()">
Node Settings
</button>
</div>
<!-- RPC Connection -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="glass-card p-6">
<div class="flex items-start gap-4 mb-4">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
@@ -304,7 +464,7 @@
</svg>
<span class="text-white/80 text-sm">RPC Host</span>
</div>
<span class="text-white/60 text-sm font-mono">localhost:18443</span>
<span class="text-white/60 text-sm font-mono" id="rpcHost">localhost:8332</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
@@ -314,7 +474,7 @@
</svg>
<span class="text-white/80 text-sm">RPC User</span>
</div>
<span class="text-white/60 text-sm font-mono">bitcoin</span>
<span class="text-white/60 text-sm font-mono">archipelago</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
@@ -328,7 +488,7 @@
</div>
</div>
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors" onclick="copyRPCInfo()">
<button class="mt-4 w-full info-card-button text-sm font-medium" onclick="copyRPCInfo()">
Copy RPC Info
</button>
</div>
@@ -379,7 +539,7 @@
</div>
</div>
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors" onclick="openLogs()">
<button class="mt-4 w-full info-card-button text-sm font-medium" onclick="openLogs()">
View Logs
</button>
</div>
@@ -391,7 +551,7 @@
<div class="glass-card p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-white">Node Settings</h2>
<button onclick="closeSettings()" class="w-10 h-10 rounded-lg bg-white/10 border border-white/18 text-white text-xl flex items-center justify-center hover:bg-white/20 transition-colors">×</button>
<button onclick="closeSettings()" class="glass-button px-3 py-2 rounded-lg text-xl font-medium">×</button>
</div>
<div class="space-y-3">
<div class="p-3 bg-white/5 rounded-lg">
@@ -419,7 +579,7 @@
<div class="glass-card p-6 max-w-4xl w-full max-h-[80vh] overflow-y-auto">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-white">Node Logs</h2>
<button onclick="closeLogs()" class="w-10 h-10 rounded-lg bg-white/10 border border-white/18 text-white text-xl flex items-center justify-center hover:bg-white/20 transition-colors">×</button>
<button onclick="closeLogs()" class="glass-button px-3 py-2 rounded-lg text-xl font-medium">×</button>
</div>
<div class="bg-black/40 rounded-lg p-4 font-mono text-xs text-white/80 whitespace-pre-wrap break-all" id="logsContent">
Loading logs...
@@ -428,8 +588,161 @@
</div>
<script>
console.log('[Bitcoin UI] Script loaded, initializing...');
// RPC Configuration - Use local Nginx proxy within container
const RPC_ENDPOINT = '/bitcoin-rpc/';
console.log('[Bitcoin UI] RPC Endpoint:', RPC_ENDPOINT);
// Make RPC call to Bitcoin node via local proxy
async function callRPC(method, params = []) {
try {
console.log(`[Bitcoin UI] Calling RPC method: ${method}`);
const response = await fetch(RPC_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
jsonrpc: '1.0',
id: 'bitcoin-ui',
method: method,
params: params
})
});
console.log(`[Bitcoin UI] RPC response status: ${response.status}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(`[Bitcoin UI] RPC ${method} success:`, data.result ? 'OK' : 'Error');
if (data.error) {
throw new Error(data.error.message);
}
return data.result;
} catch (error) {
console.error(`[Bitcoin UI] RPC call failed: ${method}`, error);
return null;
}
}
// Track last block count for animations
let lastBlockCount = 0;
// Update blockchain info
async function updateBlockchainInfo() {
console.log('[Bitcoin UI] updateBlockchainInfo() called');
try {
const blockchainInfo = await callRPC('getblockchaininfo');
console.log('[Bitcoin UI] blockchainInfo:', blockchainInfo);
if (!blockchainInfo) {
console.error('[Bitcoin UI] No blockchain info received');
document.getElementById('syncStatusText').textContent = 'Unable to connect to Bitcoin node';
document.getElementById('syncStatusText').className = 'text-red-400 text-sm';
return;
}
const networkInfo = await callRPC('getnetworkinfo');
// Update network mode
const chain = blockchainInfo.chain || 'unknown';
const networkType = document.getElementById('networkType');
let networkShort = '';
if (chain === 'regtest') {
networkShort = 'Regtest';
} else if (chain === 'test') {
networkShort = 'Testnet';
} else if (chain === 'main') {
networkShort = 'Mainnet';
} else {
networkShort = chain;
}
if (networkType) networkType.textContent = networkShort;
// Update sync status
const blocks = blockchainInfo.blocks || 0;
const headers = blockchainInfo.headers || 0;
const verificationProgress = blockchainInfo.verificationprogress || 0;
const isSynced = blocks >= headers - 1;
// Calculate actual sync percentage based on blocks/headers
const actualSyncPercentage = headers > 0 ? ((blocks / headers) * 100).toFixed(2) : '0.00';
const verificationPercentage = (verificationProgress * 100).toFixed(2);
// Animate block count if it changed
const currentHeightElem = document.getElementById('currentHeight');
if (blocks !== lastBlockCount && lastBlockCount > 0) {
currentHeightElem.classList.add('number-update');
setTimeout(() => currentHeightElem.classList.remove('number-update'), 500);
}
lastBlockCount = blocks;
currentHeightElem.textContent = blocks.toLocaleString();
document.getElementById('networkHeight').textContent = headers.toLocaleString();
document.getElementById('headers').textContent = headers.toLocaleString();
document.getElementById('verificationProgress').textContent = `${verificationPercentage}%`;
document.getElementById('syncPercentage').textContent = `${actualSyncPercentage}%`;
document.getElementById('currentBlock').textContent = `Block ${blocks.toLocaleString()}`;
document.getElementById('syncProgressBar').style.width = `${actualSyncPercentage}%`;
// Update sync status text and icon
const syncStatusText = document.getElementById('syncStatusText');
const syncIcon = document.getElementById('syncIcon');
if (isSynced) {
syncStatusText.textContent = '✓ Fully synchronized with the network';
syncStatusText.className = 'text-green-400 text-sm font-medium';
// Stop spinning when synced
if (syncIcon) {
syncIcon.classList.remove('animate-spin-slow');
syncIcon.classList.add('text-green-500');
}
} else {
const remaining = headers - blocks;
syncStatusText.textContent = `Syncing... ${remaining.toLocaleString()} blocks remaining`;
syncStatusText.className = 'text-orange-400 text-sm font-medium';
// Keep spinning while syncing
if (syncIcon) {
syncIcon.classList.add('animate-spin-slow');
syncIcon.classList.remove('text-green-500');
}
}
// Update block height in quick actions (removed section)
// document.getElementById('blockHeight').textContent = blocks.toLocaleString();
// Update version
if (networkInfo && networkInfo.version) {
const version = networkInfo.version;
const versionStr = `v${Math.floor(version / 10000)}.${Math.floor((version % 10000) / 100)}.${version % 100}`;
const versionElem = document.getElementById('nodeVersion');
if (versionElem) versionElem.textContent = versionStr;
}
} catch (error) {
console.error('Failed to update blockchain info:', error);
document.getElementById('syncStatusText').textContent = 'Unable to fetch blockchain data';
document.getElementById('syncStatusText').className = 'text-red-400 text-sm';
}
}
// Initial update
console.log('[Bitcoin UI] Starting initial blockchain info update...');
updateBlockchainInfo();
// Update every 5 seconds
console.log('[Bitcoin UI] Setting up 5-second update interval');
setInterval(updateBlockchainInfo, 5000);
function copyRPCInfo() {
const info = `RPC Host: localhost:18443\nRPC User: bitcoin\nRPC Password: bitcoinpass`;
const info = `RPC Host: ${window.location.hostname}:8332\nRPC User: archipelago\nRPC Password: archipelago123\nRPC Endpoint: ${RPC_ENDPOINT}`;
navigator.clipboard.writeText(info).then(() => {
alert('RPC info copied to clipboard!');
});
@@ -456,29 +769,34 @@
document.getElementById('logsModal').classList.remove('flex');
}
function loadLogs() {
async function loadLogs() {
const logsContent = document.getElementById('logsContent');
logsContent.textContent = `Bitcoin Core version v27.0
Assuming ancestors of block 0000000000000000000000000000000000000000000000000000000000000000 have valid signatures.
Setting nMinimumChainWork=0000000000000000000000000000000000000000000000000000000000000000
logsContent.textContent = 'Loading logs from node...';
try {
const networkInfo = await callRPC('getnetworkinfo');
const blockchainInfo = await callRPC('getblockchaininfo');
const peerInfo = await callRPC('getpeerinfo');
if (networkInfo && blockchainInfo) {
logsContent.textContent = `Bitcoin Knots version ${networkInfo.subversion || 'unknown'}
Network: ${blockchainInfo.chain}
Blocks: ${blockchainInfo.blocks}
Headers: ${blockchainInfo.headers}
Verification Progress: ${(blockchainInfo.verificationprogress * 100).toFixed(2)}%
Connected Peers: ${peerInfo ? peerInfo.length : 0}
Difficulty: ${blockchainInfo.difficulty}
Chain Work: ${blockchainInfo.chainwork || 'N/A'}
Regtest mode activated
RPC server listening on 0.0.0.0:18443
ZMQ block notifications enabled on tcp://0.0.0.0:28332
ZMQ tx notifications enabled on tcp://0.0.0.0:28333
Transaction index enabled (txindex=1)
Node initialization complete
Ready to accept connections on port 18444`;
}
let blockHeight = 0;
setInterval(() => {
if (Math.random() > 0.7) {
blockHeight++;
document.getElementById('blockHeight').textContent = blockHeight;
Node is running and accepting connections.
RPC server active on port 8332`;
} else {
logsContent.textContent = 'Unable to fetch node logs. Please check your RPC connection.';
}
} catch (error) {
logsContent.textContent = `Error loading logs: ${error.message}`;
}
}, 5000);
}
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {

28
docker/bitcoin-ui/nginx.conf Normal file
View File

@@ -0,0 +1,28 @@
server {
listen 8334;
server_name _;
root /usr/share/nginx/html;
index index.html;
# Bitcoin RPC proxy to avoid CORS issues
location /bitcoin-rpc/ {
# Proxy to localhost Bitcoin RPC (using host network mode)
proxy_pass http://127.0.0.1:8332/;
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 Authorization "Basic YXJjaGlwZWxhZ286YXJjaGlwZWxhZ28xMjM=";
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";
if ($request_method = OPTIONS) {
return 204;
}
}
location / {
try_files $uri $uri/ /index.html;
}
}