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:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user