Code

An address is forty characters that mean nothing to read and everything to compare. Code is the element those go in: the design system's mono face, a size that agrees with whatever it is quoted inside, and permission to break at any character.

Why the mono face

A nibble is the same width wherever it appears, so two hashes can be compared down a column rather than read across. That is the whole of what a person does with these values — they scan the first four characters and the last four, or they copy the thing entire — and a proportional face defeats both by making 1 narrower than 0.

Why the size is relative

The size is 0.87em, not a token. A monospace face set at the same nominal size as the prose around it reads noticeably larger, because its glyphs fill more of their box; the correction is for that, and it is relative because a heading and a footnote do not want the same absolute number. Quoted inside a paragraph the literal comes out level with the sentence; quoted inside a heading it comes out level with the heading.

This is the one measure in the family that is not a rung on the ladder, and the reason is that it is not a size — it is a ratio to a size somebody else chose.

Why it breaks anywhere

overflowWrap: anywhere. Left alone, an address is a single unbreakable word, and a container can never be narrower than its widest word. One address in a two-column pair therefore sets a floor under the whole pair, and one line of calldata sets a floor under the page: this is most of what makes a surface full of chain data overflow a phone.

Breaking mid-value is right here in a way it would not be in prose. Nobody reads a hash across a line — they copy it — so the break costs nothing, and it is what lets everything around the literal go on shrinking.

Why an element and not a text primitive

Code renders a code element directly rather than composing a gui text primitive, and it is the only member of the family that does.

Half of these literals sit inside a sentence. The primitive lays out as a flex box, which makes a quoted literal one atomic box that cannot break across a line — the opposite of the rule above — and it carries its own wrapping, which would outrank that rule anyway. code is already inline and already semantic, and asks for none of it back.

Installation

npm install @luxfi/ui @hanzo/gui @hanzo/ui @hanzo/design @tanstack/react-query

import '@luxfi/ui/tokens.css'
import '@hanzo/design/styles.css'
import { Code } from '@luxfi/ui/read'

The mono face resolves from --font-mono, which the token sheet declares, and falls back through the platform's own monospace stack where a build has not loaded one.

Usage

<Code>0x4888e4a2ee0f03051c72d2bd3acf755ed3498b3e</Code>

Inside a sentence, where it takes the surrounding size and comes out level with it:

<Paragraph size="$3">
  The pool at <Code>{pool}</Code> answered the call <Code>{selector}</Code> in
  block {block}.
</Paragraph>

Inside a Facts grid, where the break is what keeps the other columns from being squeezed to pay for forty unbroken characters:

<Facts of={[{ term: 'Contract', value: <Code>{address}</Code> }]} />

Props

What it does not do

It does not shorten, and there is no 0x4888…8b3e mode: a middle-elided address cannot be copied and cannot be compared, and a component that elides by default hands back a value that is not the value. Where a surface wants a short form, it passes one.

It does not copy. There is no button, no press handler and no tooltip — it is a span of text, and selecting it is the browser's job.

It reads nothing and it takes no reading. The rest of @luxfi/ui/read takes a reading | read | failed because the difference between there is nothing and we could not ask is the difference between a fact and a fabrication. Code is given a value that has already arrived; whoever places it has done the asking.

And it does not validate. <Code>not an address</Code> renders exactly as written. It says this is a literal, in the face literals are set in — it does not say the literal is well-formed, and nothing about the way it draws should be read as a claim that it is.