# ERC8004Provider

**Slug:** `erc8004-provider`  
**Import:** `import { ERC8004Provider } 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

Root context provider that holds infrastructure config — your Graph API key and optional subgraph URL overrides. Wrap your app once at the top level. Automatically creates an internal QueryClient if TanStack Query is not already set up in your app.

## Usage

```tsx
import { ERC8004Provider } from "@p4n/erc8004-ui"
import { ERC8004Provider } from "@p4n/erc8004-ui"

// Minimal setup — no TanStack Query knowledge required:
function App() {
  return (
    <ERC8004Provider apiKey="your-graph-api-key">
      {/* your app */}
    </ERC8004Provider>
  )
}

// If you already use TanStack Query, ERC8004Provider detects it
// and shares the existing cache — no duplicate clients:
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ERC8004Provider apiKey="your-graph-api-key">
        {/* your app */}
      </ERC8004Provider>
    </QueryClientProvider>
  )
}
```

## API Reference

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `apiKey` | `string` | yes | — | Your Graph API key. Used to authenticate Subgraph requests. Safe to use in frontend code — read-only. |
| `subgraphOverrides` | `Record<number, string>` | no | — | Optional map of chainId → custom Subgraph URL. Overrides the default endpoint for that chain. |
| `className` | `string` | no | — | Optional CSS classes merged onto the .erc8004 wrapper. Use for scoping dark mode (.dark) or custom layout. |
| `children` | `ReactNode` | yes | — | Your application tree. |

## Reference

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