Loading page…
Loading page…
The better address field. A bordered mono field with the coin's official glyph — monochrome, unframed, currentColor — seated inside its left edge (mirroring the copy button on the right), three truncation strategies, a BIP-352 silent-payment marker, the copy button's forced/live Copied state, an optional mempool-explorer link, a TxidField counterpart, and borderless inline variants for sentences and table cells.
Two mark styles per network: the framed disc seats the signal-flag icon in raised chrome (bg-canvas-raised / border-line), while frame={false} renders the official chain glyph — the real logo shape — bare and monochrome in currentColor. Never a coin brand hex either way.
<NetworkBadge network="bitcoin" frame={false} />--ch-fgframe={false} — every NetworkId as its official logo shape (₿, the Ether diamond, Ł, Monero, Solana's bars, bolt, drop, Base's notched disc), bare currentColor with no border, background, or pill.
<span className="text-primary"><NetworkGlyph network="bitcoin" /></span>NetworkGlyph is a plain currentColor SVG — seat it in any text colour.
--ch-bg-raised--ch-border--ch-fgEvery NetworkId at size sm — the signal-flag icon seated in the raised disc.
<NetworkBadge network="monero" size="md" label="Monero" />Disc sizes xs / sm / md, then the labelled pill form.
--ch-surface--ch-border--ch-font-family-monoPills read the deterministic NETWORK_LABELS map; frame={false} keeps the label but drops all chrome.
--ch-accent--ch-shadow-beaconThe ring prop lights the aurum beacon (shadow-beacon) and tints the glyph accent; unframed, ring tints the bare glyph.
sm / md / lg scale the field padding, mono text, seated glyph, and copy button together. The official glyph always sits fully inside the field — bare currentColor, no disc chrome — 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-monoThe 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-accentauto (default) measures the field with a ResizeObserver and binary-searches the largest head…tail that fits the current width — the ellipsis never clips into adjacent glyphs. middle keeps a fixed silhouette. 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-borderSend-confirmation contexts — the field spans the container and the whole string wraps with break-all when it runs out of width.
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-mutedSuccess check plus the Copied badge, pinned via the copied prop.
Omit the copy button for read-only display contexts.
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-monoThe 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.
explorer adds a trailing ArrowUpRight link that opens the value on the ColdHarbor mempool explorer in a new tab — /address/?id=<addr> for addresses, /tx/?id=<txid> for transactions. The default base https://mempool.coldharbor.dev is overridable per field via explorerBase.
Copy button plus the external-link affordance — target=_blank, rel=noopener noreferrer.
The TxidField counterpart links to /tx/?id=<txid>.
<AddressField address={address} network="bitcoin" explorer explorerBase="https://mempool.example.org" />--ch-surface-raised--ch-border--ch-fg-mutedPoint the link at any compatible explorer origin.
TxidField shares the AddressField anatomy — bordered mono field, middle/auto/full truncation, forced/live Copied state — with transaction-scoped labels and the /tx/ explorer route. The network glyph is optional: omit it for a plain hash field.
AddressInline and TxidInline drop the field chrome entirely — borderless, background-free mono text for sentences and table cells, with the ghost copy affordance, optional bare network glyph, and optional explorer link. head/tail tune the truncation.
Change returned to in transaction .
Change returned to <AddressInline address={address} network="bitcoin" explorer /> in transaction <TxidInline txid={txid} explorer />.The inline value sits in running text; copy and explorer ride along as ghost icons.
sm size in a dense mono table — truncation keeps every row one line.
Full value (truncate none), forced copied swap, copy-free read-only.
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