Skip to content

Add copy-to-clipboard buttons on hash/address cells in the blocks table #3395

Description

@JSONbored

Context

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.
  • Coordination note: Add copy-to-clipboard buttons on hash/signer cells in the extrinsics table #3396 ("Add copy-to-clipboard buttons on hash/signer cells in the extrinsics table") is the direct twin of this issue for extrinsics.index.tsx — same CopyableCode pattern, 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.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

Size

Size: S — keep this PR small (aim for ≤10 files / ≤1000 LOC).

Part of #2542.

Metadata

Metadata

Assignees

No one assigned

    Labels

    gittensor:featureGittensor-scored feature linked to a feature issue — scores a 0.25x multiplier.

    Projects

    Status
    Todo

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions