Address Field
The better address field. A bordered mono field with the coin's NetworkBadge disc seated inside its left edge (mirroring the copy button on the right), three truncation strategies — fixed middle, a responsive auto fit that measures its own width, and full break-all — a BIP-352 silent-payment marker, and the copy button's forced/live Copied state.
Networks
A monochrome mark per network drawn in currentColor, seated in a raised disc (bg-canvas-raised / border-line) or extended into a labelled pill. The aurum beacon ring flags a highlighted or own-node network.
--ch-bg-raised--ch-border--ch-fg
Every NetworkId at size sm. Each glyph inherits the disc's token colour — no coin brand hexes.
<NetworkBadge network="monero" size="md" label="Monero" />Disc sizes xs / sm / md, then the labelled pill form.
--ch-surface--ch-border--ch-font-family-mono
Pills read the deterministic NETWORK_LABELS map.
--ch-accent--ch-shadow-beacon
The ring prop lights the aurum beacon (shadow-beacon) and tints the glyph accent.
Sizes
sm / md / lg scale the field padding, mono text, seated disc, and copy button together. The disc always sits fully inside the field, inset to mirror the copy button on the right.
<AddressField address={address} network="bitcoin" size="lg" label="Receiving address" />--ch-surface--ch-border--ch-font-family-mono
Across networks
The seated disc identifies the chain at a glance — from EVM hex to a Lightning invoice, a Monero primary address, or a Liquid confidential address.
95-char primary address truncates to the same head…tail silhouette.
A bolt11 invoice — the disc reads Lightning, the value stays mono.
--ch-font-family-mono--ch-surface--ch-accent
Truncation
middle keeps a fixed head…tail. auto measures the field with a ResizeObserver and fits as many leading/trailing characters as the current width allows, growing and shrinking on one line and never wrapping. none renders the full string with break-all. The full address is always in the title attribute.
Fixed head…tail, sized by the size prop.
Constrained to 260px — the field measures itself and fits fewer characters on the single line.
<AddressField address={address} network="bitcoin" truncate="auto" />The same address and mode at 380px fits more characters — proof the fit is responsive, not fixed.
--ch-font-family-mono--ch-surface--ch-border
Send-confirmation contexts — the whole string wraps with break-all.
Copy state
The live button copies to the clipboard and holds the state for two seconds; the copied prop forces it for review. The glyph swaps through the beUI popLayout roll and the Copied badge slides in beside it.
Muted copy glyph — click it, the live state works in this specimen.
<AddressField address={address} network="bitcoin" copied />--ch-success--ch-success-muted
Success check plus the Copied badge, pinned via the copied prop.
Omit the copy button for read-only display contexts.
Silent payment
A BIP-352 silent-payment address is a reusable payment code, not a one-time address. The SP chip marks it so it is never mistaken for a normal address.
<AddressField address={code} network="bitcoin" silentPayment />--ch-primary--ch-primary-muted--ch-font-family-mono
The sp1 payment code carries the SP marker before the copy button.
The SP chip and the Copied badge coexist; the mono value yields width to both.
Across themes
The seated disc, mono value, and Copied badge under all three layers — the field reads on dark, light, and Harbor Mode alike.
<AddressField address={address} network="bitcoin" copied />--ch-surface--ch-border--ch-accent--ch-font-family-mono