For the complete documentation index, see /llms.txt. A single-fetch full bundle is at /llms-full.txt. Every docs page is also available as Markdown by appending .md to its URL, or by requesting it with Accept: text/markdown.

FingerprintBadge

Deterministic SVG identity generated from the agent's registry and id — an ordered-dithered wave-interference pattern that is the same on every page and every reload, and different for every agent. It fetches nothing: there is no subgraph query, no API key and no network request, so it renders instantly and works offline.

Props are required here

Unlike every other component, FingerprintBadge does not read AgentProvider context. It takes agentRegistry and agentId directly, and both are required. Being a pure renderer with no data layer, it also works outside ERC8004Provider — no API key needed.

Preview

Usage

import { FingerprintBadge } from "@p4n/erc8004-ui"

<FingerprintBadge agentRegistry="eip155:8453:0x8004A169FB4a3325136EB29fA0ceB6D2e539a432" agentId={888} size={96} />

Examples

One Per Agent

The pattern is derived from the registry and id alone, so each agent keeps its own figure permanently and no two agents collide.

{agentIds.map((id) => (
  <FingerprintBadge
    key={id}
    agentRegistry="eip155:8453:0x8004...a432"
    agentId={id}
    size={56}
  />
))}

FingerprintCircleMini

A second export rendering the same interference pattern in the fingerprint's primary hue on a dark tinted disc. Built to stay legible at avatar and favicon scale, where the full badge's detail muddies.

import { FingerprintCircleMini } from "@p4n/erc8004-ui"

<FingerprintCircleMini
  agentRegistry="eip155:8453:0x8004...a432"
  agentId={888}
  size={32}
/>

Filling a Container

Omit the size prop and the SVG fills its parent, which is how AgentImage and AgentCard use it. Give the wrapper the dimensions and any clipping.

<div className="h-20 w-20 overflow-hidden rounded-full border border-white/20">
  <FingerprintBadge agentRegistry="eip155:8453:0x8004...a432" agentId={888} />
</div>

In Context

You rarely place this yourself — AgentImage and AgentCard both fall back to it when an agent has neither a registered image nor a name, which is the common case rather than the exception. Reach for it directly when you want the fingerprint unconditionally.

Agent #10No registered name or image

<div className="flex items-center gap-4 rounded-lg border border-white/20 bg-neutral-900 p-4">
  <FingerprintBadge agentRegistry="eip155:8453:0x8004...a432" agentId={10} size={48} />
  <div className="flex min-w-0 flex-col">
    <span className="text-sm font-medium text-white">Agent #10</span>
    <span className="font-mono text-xs text-white/50">No registered name or image</span>
  </div>
</div>

API Reference

agentRegistryrequired

type: string

Agent registry in the format "eip155:{chainId}:{contractAddress}". Required — this component does not read AgentProvider context.

agentIdrequired

type: number

ERC-721 token ID of the agent. Required — this component does not read AgentProvider context. Together with agentRegistry it is the only input to the pattern.

sizeoptional

type: number

Explicit width and height in pixels. Omit it and the SVG fills its container instead.

classNameoptional

type: stringdefault: "w-full h-full"

Classes applied to the <svg> root. The default fills the parent, so pass your own sizing classes or use the size prop to override it.

Prop	Type	Required	Default	Description
`agentRegistry`	`string`	Yes	—	Agent registry in the format "eip155:{chainId}:{contractAddress}". Required — this component does not read AgentProvider context.
`agentId`	`number`	Yes	—	ERC-721 token ID of the agent. Required — this component does not read AgentProvider context. Together with agentRegistry it is the only input to the pattern.
`size`	`number`	No	—	Explicit width and height in pixels. Omit it and the SVG fills its container instead.
`className`	`string`	No	"w-full h-full"	Classes applied to the <svg> root. The default fills the parent, so pass your own sizing classes or use the size prop to override it.

States

No states to handle. The component fetches nothing, so it cannot load, error, or be empty — it renders the same figure synchronously on every mount.

←AgentProvider AgentName→