Add Chain column to blocks table and display human-readable chain names

Shows which network each block was mined on. Cross-network blocks
display a blue tag with dimmed row; same-network blocks show the
chain name in subdued text. Maps raw identifiers to readable names
(main → mainnet, testnet4 stays as-is).
This commit is contained in:
satoshi
2026-05-10 17:23:18 +03:00
parent 0787f092ff
commit 28dfbdec84
+28 -5
View File
@@ -2,6 +2,13 @@
import { snap } from "../stores/snapshot.svelte"; import { snap } from "../stores/snapshot.svelte";
import { formatAgo, formatDifficulty, explorerBaseFor } from "../format"; import { formatAgo, formatDifficulty, explorerBaseFor } from "../format";
const chainDisplayName: Record<string, string> = {
main: "mainnet",
};
function displayChain(chain: string): string {
return chainDisplayName[chain] ?? chain;
}
const blocks = $derived.by(() => { const blocks = $derived.by(() => {
const b = snap.data?.recent_blocks ?? []; const b = snap.data?.recent_blocks ?? [];
return [...b].reverse(); return [...b].reverse();
@@ -24,6 +31,7 @@
<thead> <thead>
<tr> <tr>
<th>Height</th> <th>Height</th>
<th>Chain</th>
<th>Hash</th> <th>Hash</th>
<th class="num">Reward</th> <th class="num">Reward</th>
<th class="num">Winning share</th> <th class="num">Winning share</th>
@@ -32,14 +40,20 @@
</thead> </thead>
<tbody> <tbody>
{#each blocks as b (b.height + "-" + b.found_at)} {#each blocks as b (b.height + "-" + b.found_at)}
<tr class:orphaned={!!b.orphaned_at}> <tr class:orphaned={!!b.orphaned_at} class:other-chain={!!b.chain && !!currentChain && b.chain !== currentChain}>
<td class="mono"> <td class="mono">
{b.height} {b.height}
{#if b.orphaned_at} {#if b.orphaned_at}
<span class="orphan-tag" title="Reorged out of the canonical chain at {b.orphaned_at}">orphaned</span> <span class="orphan-tag" title="Reorged out of the canonical chain at {b.orphaned_at}">orphaned</span>
{/if} {/if}
</td>
<td>
{#if b.chain && currentChain && b.chain !== currentChain} {#if b.chain && currentChain && b.chain !== currentChain}
<span class="chain-tag" title="Mined on {b.chain} current node is {currentChain}">{b.chain}</span> <span class="chain-tag" title="Mined on {displayChain(b.chain)} - current node is on {displayChain(currentChain)}">{displayChain(b.chain)}</span>
{:else if b.chain}
<span class="chain-current">{displayChain(b.chain)}</span>
{:else}
<span class="chain-unknown"></span>
{/if} {/if}
</td> </td>
<td class="hash-cell"> <td class="hash-cell">
@@ -128,15 +142,24 @@
} }
.chain-tag { .chain-tag {
display: inline-block; display: inline-block;
margin-left: 0.4em;
padding: 0.05em 0.4em; padding: 0.05em 0.4em;
border-radius: 3px; border-radius: 3px;
background: rgba(80, 160, 220, 0.15); background: rgba(80, 160, 220, 0.15);
color: rgb(100, 170, 220); color: rgb(100, 170, 220);
font-size: 0.7em; font-size: 0.8em;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
vertical-align: middle; }
.chain-current {
color: var(--fg-dim);
font-size: 0.8em;
}
.chain-unknown {
color: var(--fg-dim);
font-size: 0.8em;
}
tr.other-chain td {
opacity: 0.6;
} }
.unit { .unit {
color: var(--fg-dim); color: var(--fg-dim);