Wallet Address

An address shortened for display but never for copying. The truncation floor is security-relevant: attackers generate lookalikes sharing the first and last characters, so `chars` cannot go below six.

src/components/ui/wallet-address.tsx

About

From the component's own source, where it was written.

An address, shortened for display but never for copying.

The truncation is the security-relevant part. Addresses are compared by their ends, so an attacker generates a lookalike sharing the first and last few characters — "address poisoning". Showing too few characters makes that attack trivial, which is why the minimum here is 6 leading and 4 trailing and chars cannot go below it.

Copy always yields the full address. A UI that copies what it displays is how funds get sent to a truncated string.

A name (ENS or similar) replaces the address visually but never replaces it for copying — names are re-registrable and are not identity. A string name is also stripped of bidi overrides and zero-width characters before it is drawn: whoever registered it chose every character, and a right-to-left override can make one name read as another.

variant="block" is for the moment the whole address has to be checked by eye — a deposit address, the destination in a withdrawal review. It shows every character, in groups of four on a muted inset, wrapping; grouped, the eye can compare it with another copy four characters at a time instead of losing its place in forty-two.

Install

npx astralyx-ui add wallet-address

Usage

import { WalletAddress } from '@/components/ui/wallet-address'

<WalletAddress address={address} href={explorerUrl} />
<WalletAddress address={address} name="vitalik.eth" />

Composer

Change the props and the source below follows.

0x742d…f44e

Props

chars

copyableENS name

tsx

<WalletAddress
  address={address}
  chars={6}
  copyable={true}
/>

Examples

Forms

tsx

<WalletAddress address={address} href={explorer} />
<WalletAddress address={address} name="vitalik.eth" />

To check by eye

tsx

<WalletAddress variant="block" address={depositAddress} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`WalletAddress`

An address, shortened for display but never for copying.

Extends Omit<ComponentProps<'span'>, 'children'>.

Prop	Type	Default	Description
address	string	required	The full value. Copy always yields this, never what is displayed.
name	ReactNode	—	A string `name` is drawn without bidi overrides, isolates or zero-width characters — a right-to-left override can make one registered name read as another.
chars	number	6	Leading characters, clamped to a minimum of 6 — too few makes address-poisoning lookalikes indistinguishable.
copyable	boolean	true	—
href	string	—	Block explorer link.
avatar	ReactNode	—	—
mono	boolean	true	—
size	'sm' \| 'default'	'default'	—
explorerLabel	string	'View on block explorer'	Accessible name for the explorer link.
copyLabel	string	'Copy address'	—
variant	'inline' \| 'block'	'inline'	`block` shows the whole address in groups of four on a muted inset, wrapping — for a deposit address or a withdrawal's destination, where it has to be checked by eye. Copying still yields the exact value, with no spaces.

Functions

Function	Signature	Description
shortenAddress	(address: string, chars = 6) => string	Exported, with the same floor applied.
chunkAddress	(address: string, size = 4) => string[]	The grouping behind `block`, exported.