# FingerprintBadge

**Slug:** `fingerprint-badge`  
**Import:** `import { FingerprintBadge } from "@p4n/erc8004-ui"`

> **NOTE — unofficial library.** `@p4n/erc8004-ui` is an independent, community-built project. It is not affiliated with, maintained by, or endorsed by the authors of ERC-8004. It reads the standard's on-chain data through public subgraphs; it does not speak for the standard.

## Description

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.

## Caveats

> **Props are required here:** Unlike every other component, FingerprintBadge does not read [AgentProvider](https://erc8004-ui.vercel.app/docs/components/agent-provider) 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.

## Usage

```tsx
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.

```tsx
{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.

```tsx
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.

```tsx
<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.

```tsx
<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

| 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.

## Reference

- Live preview & full docs: https://erc8004-ui.vercel.app/docs/components/fingerprint-badge
- Markdown source: https://erc8004-ui.vercel.app/docs/components/fingerprint-badge.md