# ValidationDisplay

**Slug:** `validation-display`  
**Import:** `import { ValidationDisplay } 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

Composed view combining VerificationBadge, ValidationScore, and ValidationList into a single unified validation panel.

## Caveats

> **Warning:** The Validation Registry contract is recorded at the zero address on every chain checked — testnets included — so this component renders its empty state everywhere. Verified 2026-09-04 across Ethereum, Base, Polygon, BNB Smart Chain, BNB Chapel and Base Sepolia. See [Concepts › Validation Registry](https://erc8004-ui.vercel.app/docs/concepts#validation-registry).

## Usage

```tsx
import { ValidationDisplay } from "@p4n/erc8004-ui"
<ValidationDisplay agentRegistry="eip155:8453:0x8004A169FB4a3325136EB29fA0ceB6D2e539a432" agentId={888} />
```

## Examples

### Inside AgentProvider

Use AgentProvider to avoid repeating identity props.

```tsx
<AgentProvider agentRegistry="eip155:8453:0x8004...a432" agentId={888}>
  <ValidationDisplay />
</AgentProvider>
```

### Constrained Width

Pass className to fit the composed panel into a sidebar or trust column.

```tsx
<ValidationDisplay
  agentRegistry="eip155:8453:0x8004...a432"
  agentId={888}
  className="max-w-sm"
/>
```

## In Context

ValidationDisplay as a standalone trust panel on an agent profile page.

```tsx
<AgentProvider agentRegistry="eip155:8453:0x8004...a432" agentId={888}>
  <AgentCard />
  <ValidationDisplay />
</AgentProvider>
```

## API Reference

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `agentRegistry` | `string` | no | — | Agent registry in the format "eip155:{chainId}:{contractAddress}". Required unless inside an <AgentProvider>. |
| `agentId` | `number` | no | — | ERC-721 token ID of the agent. Required unless inside an <AgentProvider>. |
| `className` | `string` | no | — | Optional CSS classes merged onto the component root for layout, spacing, or custom styling (e.g. Tailwind). |
| `emptyMessage` | `string` | no | `"No validations yet"` | Message shown when the agent has no validations. The composed view renders one consolidated empty state rather than letting each child render its own. |

## States

This component handles loading, error, empty, and not-found states internally. A skeleton placeholder is shown while fetching, an error message with details appears if the Subgraph is unreachable, and a short message is displayed when no data exists for this agent.

## Reference

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