# ActivityLog

**Slug:** `activity-log`  
**Import:** `import { ActivityLog } 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

Chronological feed of all on-chain events across all registries — feedback and validations merged and sorted by time.

## Usage

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

## Examples

### Feedback Only

Filter to show only feedback events.

```tsx
<ActivityLog agentRegistry="eip155:8453:0x8004...a432" agentId={888} eventTypes={["feedback"]} />
```

### Smaller Page Size

Show only the 5 most recent events.

```tsx
<ActivityLog agentRegistry="eip155:8453:0x8004...a432" agentId={888} pageSize={5} />
```

## In Context

ActivityLog in a sidebar showing recent agent activity alongside last activity timestamp.

```tsx
<AgentProvider agentRegistry="eip155:8453:0x8004...a432" agentId={888}>
  <div className="flex items-center gap-3">
    <AgentName />
    <LastActivity />
  </div>
  <ActivityLog pageSize={5} />
</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). |
| `pageSize` | `number` | no | `20` | Maximum number of events to display. |
| `eventTypes` | `Array<"feedback" \| "validation">` | no | — | Filter by event type. Default shows all. |
| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | no | `3` | Heading level for this component's title. The default is the level it was previously hardcoded to, so leaving it alone renders exactly as before. Set it to keep the component from breaking the surrounding page's heading order. |

## 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/activity-log
- Markdown source: https://erc8004-ui.vercel.app/docs/components/activity-log.md