OnchainkitCAUTION

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

basic-app/
├── pages/
│   ├── _app.tsx          # Next.js app with providers
│   └── index.tsx         # Main page
├── components/
│   ├── WalletSection.tsx # Wallet connection component
│   └── UserProfile.tsx   # User identity display
├── lib/
│   ├── providers.tsx     # OnchainKit providers setup
│   └── wagmi.ts          # Wagmi configuration
├── styles/
│   └── globals.css       # Global styles with OnchainKit theme
├── .env.local.example    # Environment variables template
├── next.config.js        # Next.js configuration
├── package.json          # Dependencies
└── tsconfig.json         # TypeScript configuration

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: onchainkit
description: Build onchain applications with React components and TypeScript utilities from Coinbase's OnchainKit. Use when users want to create crypto wallets, swap tokens, mint NFTs, build payments, display blockchain identities, or develop any onchain app functionality. Supports wallet connection, transaction building, token operations, identity management, and complete onchain app development workflows.
---

# OnchainKit

Build production-ready onchain applications using Coinbase's comprehensive React component library and TypeScript utilities.

## Overview

OnchainKit provides ready-to-use, full-stack components that abstract blockchain complexity, making it easy to build onchain applications without deep blockchain knowledge. It offers AI-friendly components that work automatically on Base, requires no backend infrastructure, and provides cost-effective transactions (< $0.01 fees).

## Quick Start

### New Project Setup
```bash
# Create a new onchain app with all batteries included
scripts/create-onchain-app.py <project-name>

# Verify setup
scripts/validate-setup.py
```

### Add to Existing Project
```bash
npm install @coinbase/onchainkit
# Setup configuration and providers
scripts/setup-environment.py
```

## Core Capabilities

### 1. Wallet Connection & Management
Connect users to their crypto wallets with minimal code:

```tsx
import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';

function WalletConnection() {
  return (
    <Wallet>
      <ConnectWallet />
    </Wallet>
  );
}
```

**Use cases:**
- Wallet connection flows
- Display wallet status
- Manage connection state
- Handle multiple wallets

**Reference:** [references/wallet-integration.md](references/wallet-integration.md)

### 2. Identity Display
Show blockchain identities with ENS names, avatars, and verification badges:

```tsx
import { Identity, Avatar, Name, Badge } from '@coinbase/onchainkit/identity';

function UserProfile({ address }) {
  return (
    <Identity address={address}>
      <Avatar />
      <Name />
      <Badge />
    </Identity>
  );
}
```

**Reference:** [references/identity-components.md](references/identity-components.md)

### 3. Token Operations
Handle token swaps, purchases, and transfers:

```tsx
import { Swap, SwapAmountInput, SwapButton } from '@coinbase/onchainkit/swap';

function TokenSwap() {
  return (
    <Swap>
      <SwapAmountInput />
      <SwapButton />
    </Swap>
  );
}
```

**Supported operations:**
- Token swaps (any ERC-20)
- Token purchases with fiat
- Balance displays
- Price feeds

**Reference:** [references/token-operations.md](references/token-operations.md)

### 4. Transaction Building
Create and execute blockchain transactions:

```tsx
import { Transaction, TransactionButton } from '@coinbase/onchainkit/transaction';

function SendTransaction({ calls }) {
  return (
    <Transaction calls={calls}>
      <TransactionButton />
    </Transaction>
  );
}
```

**Reference:** [references/transactions.md](references/transactions.md)

### 5. Payment Processing
Build checkout flows and payment processing:

```tsx
import { Checkout, CheckoutButton } from '@coinbase/onchainkit/checkout';

function PaymentFlow() {
  return (
    <Checkout>
      <CheckoutButton />
    </Checkout>
  );
}
```

**Reference:** [references/payments.md](references/payments.md)

### 6. NFT Integration
Display, mint, and manage NFTs:

```tsx
import { NFTCard } from '@coinbase/onchainkit/nft';

function NFTDisplay({ contract, tokenId }) {
  return <NFTCard contract={contract} tokenId={tokenId} />;
}
```

**Reference:** [references/nft-integration.md](references/nft-integration.md)

## Common Workflows

### Setting Up a Complete App
1. **Initialize project** with `create-onchain-app.py`
2. **Configure providers** using setup templates
3. **Add wallet connection** with Wallet components
4. **Implement core features** (swap, buy, identity)
5. **Test and deploy** with validation scripts

### Building a Token Swap App
1. Start with swap app template from `assets/templates/swap-app/`
2. Configure token lists and supported chains
3. Add wallet connection flow
4. Implement swap interface
5. Add transaction confirmations

### Creating an NFT Marketplace
1. Use NFT template from `assets/templates/nft-mint/`
2. Set up NFT contract integration
3. Build minting interface
4. Add payment processing
5. Implement collection browsing

## Configuration & Setup

### Environment Variables
```bash
# Required for API access
NEXT_PUBLIC_CDP_API_KEY="your-api-key"
NEXT_PUBLIC_WC_PROJECT_ID="your-walletconnect-id"

# Optional configurations
NEXT_PUBLIC_CHAIN_ID="8453" # Base mainnet
```

**Reference:** [references/configuration.md](references/configuration.md)

### Provider Setup
OnchainKit requires proper React provider configuration:

```tsx
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { WagmiProvider } from 'wagmi';

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <OnchainKitProvider
        apiKey={process.env.NEXT_PUBLIC_CDP_API_KEY}
        chain={base}
      >
        {/* Your app components */}
      </OnchainKitProvider>
    </WagmiProvider>
  );
}
```

## Component Patterns

### Progressive Enhancement
Start simple, add features as needed:

```tsx
// Basic wallet connection
<ConnectWallet />

// Enhanced with custom styling
<ConnectWallet className="custom-wallet-button" />

// Full wallet interface with status
<Wallet>
  <ConnectWallet />
  <WalletDropdown>
    <Identity />
    <WalletDropdownDisconnect />
  </WalletDropdown>
</Wallet>
```

### Composable Architecture
Mix and match components for custom workflows:

```tsx
function CustomApp() {
  return (
    <div>
      {/* User identity */}
      <Identity address={address}>
        <Avatar />
        <Name />
      </Identity>
      
      {/* Token operations */}
      <Swap>
        <SwapAmountInput />
        <SwapButton />
      </Swap>
      
      {/* Payment processing */}
     

CAUTIONgrade B · trust 89/100 Install with care. The audit found things worth knowing before you trust its output.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

declared (1 observation(s))

Dependencies

not all pinned

Secrets in source

found

Findings (4)

token: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',

NEXT_PUBLIC_CDP_API_KEY=pk_live_1234567890abcdef

.env.local.example

@coinbase/onchainkit, @tanstack/react-query, react, react-dom, viem, wagmi, @types/node, @types/react

Gates applied: no_behavioural_pass.