onchainkit

•

1.1k4023 months ago

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.

Quick Install

npxskills add bankrbot/openclaw-skills--skill onchainkit

Instructions

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:

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

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

Reference: references/transactions.md

5. Payment Processing

Build checkout flows and payment processing:

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

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

Reference: references/payments.md

6. NFT Integration

Display, mint, and manage NFTs:

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

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

Reference: references/nft-integration.md

Common Workflows

Setting Up a Complete App

Initialize project with create-onchain-app.py
Configure providers using setup templates
Add wallet connection with Wallet components
Implement core features (swap, buy, identity)
Test and deploy with validation scripts

Building a Token Swap App

Start with swap app template from assets/templates/swap-app/
Configure token lists and supported chains
Add wallet connection flow
Implement swap interface
Add transaction confirmations

Creating an NFT Marketplace

Use NFT template from assets/templates/nft-mint/
Set up NFT contract integration
Build minting interface
Add payment processing
Implement collection browsing

Configuration & Setup

Environment Variables

# 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

Provider Setup

OnchainKit requires proper React provider configuration:

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:

// 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:

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

Best Practices

Performance

Use component-level imports: import { Wallet } from '@coinbase/onchainkit/wallet'
Implement proper loading states
Cache API responses appropriately
Optimize for mobile experiences

Security

Never expose private keys in client code
Validate all transaction parameters
Use official OnchainKit providers
Implement proper error boundaries

User Experience

Provide clear transaction confirmations
Show loading states during blockchain operations
Handle wallet connection failures gracefully
Support multiple wallet types

Reference: references/best-practices.md

Troubleshooting

Common Issues

Wallet connection fails: Check WalletConnect configuration
API errors: Verify API key and network settings
Transaction reverts: Validate contract calls and gas limits
Styling issues: Import OnchainKit CSS properly

Debug Steps

Check browser console for errors
Verify environment variables
Test with different wallets
Use validation script to check setup

Reference: references/troubleshooting.md

Templates & Examples

Quick Start Templates

Basic App: assets/templates/basic-app/ - Minimal onchain app
Token Swap: assets/templates/swap-app/ - Complete swap interface
NFT Minting: assets/templates/nft-mint/ - NFT marketplace
Commerce: assets/templates/commerce/ - Onchain store

Real-World Examples

Wallet connection with identity display
Multi-token swap interface
NFT collection with minting
Payment processing with receipts

Reference: references/examples.md

Advanced Features

Custom Chains

Support additional EVM chains beyond Base:

const customChain = {
  id: 123456,
  name: 'Custom Chain',
  // ... chain configuration
};

<OnchainKitProvider chain={customChain}>

MiniKit Integration

Build Farcaster Frame applications:

import { useMiniKit } from '@coinbase/onchainkit/minikit';

function FrameApp() {
  const { isReady } = useMiniKit();
  return isReady ? <YourFrameContent /> : <Loading />;
}

Reference: references/advanced-features.md

API Reference

OnchainKit provides both React components and utility functions:

Components: Pre-built UI components for common onchain operations
Hooks: React hooks for blockchain state management
Utilities: TypeScript utilities for data formatting and validation
Types: Complete TypeScript definitions

Reference: references/api-reference.md

Resources

Documentation

Support

Discord: Coinbase Developer Platform
Twitter: @OnchainKit

💡 Pro Tip: Start with npm create onchain to bootstrap a working app, then customize components as needed. The quickstart template includes all necessary configuration and examples.

🚀 Quick Win: Use the validation script after setup to ensure everything is working correctly before building custom features.

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360