Skip to content

components: address, hash, and copy-to-clipboard primitives #74

Description

@joelpeace48-cell

Problem

Stellar addresses and transaction hashes appear on the contracts page, the
explorer, the dashboard, and the status page. Each is 56 characters of
base32 — unreadable in full, dangerous when truncated badly, and needed in full
when someone actually wants to copy one.

Without a shared primitive, four surfaces will truncate differently and at
least one will truncate in a way that makes two different addresses look
identical.

What to do

  • An <Address> component: truncates showing both the leading and trailing
    characters (never just the start — the tail is what distinguishes similar
    addresses), full value in a title and on hover, copy button, and an optional
    explorer link.
  • A <Hash> variant for transaction and payload hashes.
  • Copy feedback that is announced to screen readers, not only shown visually.
  • Monospace with tabular figures so columns of addresses align.
  • Handle the invalid or missing case explicitly rather than rendering
    undefined.

Acceptance criteria

  • Truncation shows head and tail
  • Copy works with accessible confirmation
  • Explorer link optional and network-aware
  • Invalid and missing values handled
  • Used everywhere an address or hash is rendered

Notes

Good first issue with disproportionate value — it appears on nearly every page
of the product, and getting truncation right prevents a genuinely costly
mistake.

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions