onchainkit

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

# 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

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:

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

2. Identity Display

Show blockchain identities with ENS names, avatars, and verification badges:

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

3. Token Operations

Handle token swaps, purchases, and transfers:

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

4. Transaction Building

Create and execute blockchain transactions: