AddressAvatar

A gradient identicon for an address. The same address paints the same picture on every render.

Overview

Four layers in a round frame: the organic gradient, a grain texture, a soft sheen, and an inner ring. All four are hidden from assistive tech.

The gradient comes from address-gradient, a pure generator seeded by the address. A palette is four darkened hues and five blobs, and the hues are identicon data rather than design tokens.

The frame has no size of its own. The host sets it, here with a grid cell of a fixed width and height.

Addresses

Three addresses and the null fallback.

<AddressAvatar address="7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU" />
<AddressAvatar address={null} />

Sizes

24 for a table row, 44 for a menu, 56 for a profile.

<Box display="grid" width={24} height={24}>
  <AddressAvatar address={address} />
</Box>

Props

addressstring | null | undefinedrequired

The wallet address. Missing means the neutral fallback gradient with no grain.

classNamestring

Bridge className, appended after the lens styles. Tailwind product code sizes the frame with it today.

styleCSSProperties

Inline style on the frame, merged after the lens styles.