diff --git a/ui/src/lib/BlocksTable.svelte b/ui/src/lib/BlocksTable.svelte index ae55c7b..16e809c 100644 --- a/ui/src/lib/BlocksTable.svelte +++ b/ui/src/lib/BlocksTable.svelte @@ -2,6 +2,13 @@ import { snap } from "../stores/snapshot.svelte"; import { formatAgo, formatDifficulty, explorerBaseFor } from "../format"; + const chainDisplayName: Record = { + main: "mainnet", + }; + function displayChain(chain: string): string { + return chainDisplayName[chain] ?? chain; + } + const blocks = $derived.by(() => { const b = snap.data?.recent_blocks ?? []; return [...b].reverse(); @@ -24,6 +31,7 @@ Height + Chain Hash Reward Winning share @@ -32,14 +40,20 @@ {#each blocks as b (b.height + "-" + b.found_at)} - + {b.height} {#if b.orphaned_at} orphaned {/if} + + {#if b.chain && currentChain && b.chain !== currentChain} - {b.chain} + {displayChain(b.chain)} + {:else if b.chain} + {displayChain(b.chain)} + {:else} + {/if} @@ -128,15 +142,24 @@ } .chain-tag { display: inline-block; - margin-left: 0.4em; padding: 0.05em 0.4em; border-radius: 3px; background: rgba(80, 160, 220, 0.15); color: rgb(100, 170, 220); - font-size: 0.7em; + font-size: 0.8em; font-weight: 600; 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 { color: var(--fg-dim);