You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
apps/ui/src/routes/blocks.index.tsx's BlocksTable renders the desktop table's Hash cell (lines 194-203) as a <Link> wrapping shortHash(b.block_hash), and the Author cell (lines 204-209) as a plain <td> wrapping shortHash(b.author) ?? "—" — neither offers a way to copy the full, untruncated value. A reusable CopyableCode component (apps/ui/src/components/metagraphed/copyable-code.tsx) already exists and is proven in production on the block detail page (apps/ui/src/routes/blocks.$ref.tsx, lines 184 and 205, truncate={false}) — it just isn't wired into this list table.
Requirement
Add a copy-to-clipboard affordance to the Hash and Author cells in the blocks table's desktop <table> view, using the existing CopyableCode component, without removing the Hash cell's existing navigation to the block detail page.
Deliverable
File to change: apps/ui/src/routes/blocks.index.tsx — the <table> block inside BlocksTable (lines 167-223), specifically the Hash <td> (lines 194-203) and Author <td> (lines 204-209).
Exact anchor: the Hash cell currently renders <Link to="/blocks/$ref" params={{ ref: b.block_hash || String(b.block_number) }} ...>{shortHash(b.block_hash)}</Link> — the row-level navigation must be preserved (e.g. keep the <Link> for navigation and add a CopyableCode/copy icon alongside it, rather than nesting an interactive button inside the <a>, which is invalid HTML). The Author cell currently has no navigation ({shortHash(b.author) ?? "—"} in a plain <td>), so it can be replaced directly with <CopyableCode value={b.author} label="author" /> guarded for the null/undefined case (fall back to — when b.author is falsy, matching today's behavior).
What "done" looks like: both cells show a copy icon (Copy/Check swap, per CopyableCode's existing useCopy-driven affordance) that copies the full untruncated hash/address to the clipboard and fires the existing toast, while the visible cell text stays truncated via shortHash (i.e. use CopyableCode's default truncate behavior, not truncate={false} as used on the detail page — these are narrow table columns, not a wide <dl> row) and the Hash cell's click-to-navigate behavior is unchanged.
apps/ui/src/routes/blocks.index.tsx appears in the diff, with CopyableCode imported and used in the Hash and Author <td> cells of the desktop table
The Hash cell still navigates to /blocks/$ref on click (the existing <Link> is preserved, not removed)
The Author cell falls back to — when b.author is null/undefined/empty, matching current behavior
Clicking the copy affordance on either cell copies the full untruncated value (not the shortHash-truncated display text) to the clipboard
No new interactive element is nested inside an <a>/<Link> (avoid invalid nested-button-in-anchor markup)
Existing table styling (column widths, mg-row-accent hover:bg-surface/40 row treatment, font sizing) is not visibly broken by the added icon
Before/after screenshots of the blocks table (desktop) are included in the PR per repo policy for any apps/ui visual change
Non-goals
Do not touch the mobile "card" list (lines 142-166 of the same file) — that view already links the whole card to the detail page and isn't part of this issue's scope; if it also needs a copy affordance, that's a separate call.
Do not modify CopyableCode itself or use-copy.ts — reuse them as-is.
Context
apps/ui/src/routes/blocks.index.tsx'sBlocksTablerenders the desktop table's Hash cell (lines 194-203) as a<Link>wrappingshortHash(b.block_hash), and the Author cell (lines 204-209) as a plain<td>wrappingshortHash(b.author) ?? "—"— neither offers a way to copy the full, untruncated value. A reusableCopyableCodecomponent (apps/ui/src/components/metagraphed/copyable-code.tsx) already exists and is proven in production on the block detail page (apps/ui/src/routes/blocks.$ref.tsx, lines 184 and 205,truncate={false}) — it just isn't wired into this list table.Requirement
Add a copy-to-clipboard affordance to the Hash and Author cells in the blocks table's desktop
<table>view, using the existingCopyableCodecomponent, without removing the Hash cell's existing navigation to the block detail page.Deliverable
apps/ui/src/routes/blocks.index.tsx— the<table>block insideBlocksTable(lines 167-223), specifically the Hash<td>(lines 194-203) and Author<td>(lines 204-209).<Link to="/blocks/$ref" params={{ ref: b.block_hash || String(b.block_number) }} ...>{shortHash(b.block_hash)}</Link>— the row-level navigation must be preserved (e.g. keep the<Link>for navigation and add aCopyableCode/copy icon alongside it, rather than nesting an interactive button inside the<a>, which is invalid HTML). The Author cell currently has no navigation ({shortHash(b.author) ?? "—"}in a plain<td>), so it can be replaced directly with<CopyableCode value={b.author} label="author" />guarded for thenull/undefinedcase (fall back to—whenb.authoris falsy, matching today's behavior).CopyableCode's existinguseCopy-driven affordance) that copies the full untruncated hash/address to the clipboard and fires the existing toast, while the visible cell text stays truncated viashortHash(i.e. useCopyableCode's defaulttruncatebehavior, nottruncate={false}as used on the detail page — these are narrow table columns, not a wide<dl>row) and the Hash cell's click-to-navigate behavior is unchanged.extrinsics.index.tsx— sameCopyableCodepattern, same wave (🎨 Wave 3 — Frontend explorer enrichment (LIVE — 219 issues filed) #2542). No shared code changes are required between the two; they can land independently, but keep the resulting markup/pattern consistent so a future audit doesn't find two different homegrown solutions.Acceptance criteria
apps/ui/src/routes/blocks.index.tsxappears in the diff, withCopyableCodeimported and used in the Hash and Author<td>cells of the desktop table/blocks/$refon click (the existing<Link>is preserved, not removed)—whenb.authoris null/undefined/empty, matching current behaviorshortHash-truncated display text) to the clipboard<a>/<Link>(avoid invalid nested-button-in-anchor markup)mg-row-accent hover:bg-surface/40row treatment, font sizing) is not visibly broken by the added iconapps/uivisual changeNon-goals
CopyableCodeitself oruse-copy.ts— reuse them as-is.Size
Size: S — keep this PR small (aim for ≤10 files / ≤1000 LOC).
Part of #2542.