lensclear design system

A truncated address with copy and link. Hover for the full value, a copy button, and the explorer page.

Overview

The presentation half of the product's PublicKeyDisplay. It knows nothing about explorers or toasts: the host passes href and onCopy.

The trigger shows the value shortened by truncateAddress, four characters a side around one ellipsis. The tooltip holds the full value in mono, the copy button, and the external link when there is an href. Clicking the value keeps the tooltip open, so the copy button stays in reach.

truncateAddress is exported from the same file. String contexts, like toast text or prose, call it instead of slicing by hand.

Linked

With an href the trigger is an anchor to the explorer page, and the tooltip repeats the link as an icon.

7xKX…gAsUhover, then copy
<AddressDisplay
  value={address}
  href={orbAccountUrl(address)}
  onCopy={() => copyAndToast(address)}
/>

Copy only

A proof hash has no explorer page. Pass null and the trigger is a plain span with only the copy button in the tooltip.

7xKX…gAsUhover, then copy
<AddressDisplay value={proofHash} href={null} onCopy={copy} />

Full value

truncate false renders every character, wrapping, for the wizard surfaces where an operator diffs the address by eye.

<AddressDisplay value={address} href={href} onCopy={copy} truncate={false} />

Visible

visible widens both sides of the ellipsis.

7xKXtg…osgAsUhover, then copy
<AddressDisplay value={address} href={href} onCopy={copy} visible={6} />

Props

valuestringrequired

The pubkey, tx signature, or hash to show and copy.

hrefstring | nullrequired

The explorer page. null means copy only: the trigger is a span and the external link is gone.

onCopy() => voidrequired

Runs when the copy button is pressed. The host owns the clipboard write and any toast.

truncatebooleandefault: true

false renders the full value, wrapping, for a surface that diffs it character by character.

visiblenumberdefault: 4

Characters kept on each side of the ellipsis.

classNamestring

Bridge className on the trigger, appended after the lens styles.