onchainkit

OnchainKit

Coinbase の包括的な React コンポーネントライブラリと TypeScript ユーティリティを使用して、本番環境に対応したオンチェーンアプリケーションを構築します。

概要

OnchainKit は、ブロックチェーンの複雑さを抽象化する、すぐに使えるフルスタックコンポーネントを提供します。ブロックチェーンに関する深い知識がなくても、オンチェーンアプリケーションを簡単に構築できます。Base 上で自動的に動作する AI に適したコンポーネントを提供し、バックエンドインフラストラクチャは不要で、費用対効果の高いトランザクション（手数料 < $0.01）を実現します。

クイックスタート

新規プロジェクトのセットアップ

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

# Verify setup
scripts/validate-setup.py

既存プロジェクトへの追加

npm install @coinbase/onchainkit
# Setup configuration and providers
scripts/setup-environment.py

主な機能

1. ウォレット接続と管理

最小限のコードでユーザーを暗号資産ウォレットに接続します。

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

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

ユースケース：

• ウォレット接続フロー
• ウォレットの状態表示
• 接続状態の管理
• 複数のウォレットへの対応

リファレンス： references/wallet-integration.md

2. アイデンティティの表示

ENS 名、アバター、認証バッジを使用して、ブロックチェーン上のアイデンティティを表示します。

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

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

リファレンス： references/identity-components.md

3. トークン操作

トークンのスワップ、購入、送金に対応します。

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

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

対応する操作：

• トークンのスワップ（任意の ERC-20）
• 法定通貨でのトークン購入
• 残高の表示
• 価格フィード

リファレンス： references/token-operations.md

4. トランザクションの構築

ブロックチェーンのトランザクションを作成して実行します。

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

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

リファレンス： references/transactions.md

5. 決済処理

チェックアウトフローと決済処理を構築します。

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

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

リファレンス： references/payments.md

6. NFT 連携

NFT の表示、ミント、管理を行います。

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

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

リファレンス： references/nft-integration.md

一般的なワークフロー

アプリ全体のセットアップ

1. create-onchain-app.py で プロジェクトを初期化します
2. セットアップテンプレートを使用して プロバイダーを設定します
3. Wallet コンポーネントで ウォレット接続を追加します
4. 主要機能を実装します（スワップ、購入、アイデンティティ）
5. 検証スクリプトで テストしてデプロイします

トークンスワップアプリの構築

1. assets/templates/swap-app/ のスワップアプリテンプレートから始めます
2. トークンリストと対応するチェーンを設定します
3. ウォレット接続フローを追加します
4. スワップインターフェースを実装します
5. トランザクション確認を追加します

NFT マーケットプレイスの作成

1. assets/templates/nft-mint/ の NFT テンプレートを使用します
2. NFT コントラクト連携を設定します
3. ミントインターフェースを構築します
4. 決済処理を追加します
5. コレクションの閲覧機能を実装します

設定とセットアップ

環境変数

# 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

リファレンス： references/configuration.md

プロバイダーのセットアップ

OnchainKit には、適切な React プロバイダー設定が必要です。

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>
  );
}

コンポーネントのパターン

段階的な機能強化

シンプルな状態から始め、必要に応じて機能を追加します。

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

コンポーザブルなアーキテクチャ

コンポーネントを組み合わせて、カスタムワークフローを構築します。

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

ベストプラクティス

パフォーマンス

• コンポーネント単位でインポートします：import { Wallet } from '@coinbase/onchainkit/wallet'
• 適切なローディング状態を実装します
• API レスポンスを適切にキャッシュします
• モバイルでの利用に最適化します

セキュリティ

• クライアントコードで秘密鍵を公開しないでください
• すべてのトランザクションパラメーターを検証します
• 公式の OnchainKit プロバイダーを使用します
• 適切なエラーバウンダリーを実装します

ユーザーエクスペリエンス

• トランザクションの確認内容を明確に提示します
• ブロックチェーン操作中はローディング状態を表示します
• ウォレット接続の失敗を適切に処理します
• 複数のウォレットタイプに対応します

リファレンス： references/best-practices.md

トラブルシューティング

よくある問題

• ウォレット接続に失敗する：WalletConnect の設定を確認してください
• API エラーが発生する：API キーとネットワーク設定を確認してください
• トランザクションがリバートされる：コントラクト呼び出しとガス上限を検証してください
• スタイルに関する問題が発生する：OnchainKit CSS を適切にインポートしてください

デバッグ手順

1. ブラウザーのコンソールでエラーを確認します
2. 環境変数を確認します
3. 別のウォレットでテストします
4. 検証スクリプトを使用してセットアップを確認します

参考： references/troubleshooting.md

テンプレートとサンプル

クイックスタートテンプレート

• 基本アプリ：assets/templates/basic-app/ - 最小構成のオンチェーンアプリ
• トークンスワップ：assets/templates/swap-app/ - 完全なスワップインターフェース
• NFT ミント：assets/templates/nft-mint/ - NFT マーケットプレイス
• コマース：assets/templates/commerce/ - オンチェーンストア

実際の使用例

• ID 表示機能付きウォレット接続
• マルチトークンスワップインターフェース
• ミント機能付き NFT コレクション
• 領収書付き決済処理

参考： references/examples.md

高度な機能

カスタムチェーン

Base 以外の EVM チェーンにも対応できます：

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

<OnchainKitProvider chain={customChain}>

MiniKit の統合

Farcaster Frame アプリケーションを構築します：

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

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

参考： references/advanced-features.md

API リファレンス

OnchainKit は React コンポーネントとユーティリティ関数の両方を提供します：

• コンポーネント：一般的なオンチェーン操作向けの、すぐに使える UI コンポーネント
• フック：ブロックチェーンの状態管理向け React フック
• ユーティリティ：データのフォーマットと検証を行う TypeScript ユーティリティ
• 型：完全な TypeScript 定義

参考： references/api-reference.md

リソース

ドキュメント

• 公式ドキュメント：onchainkit.xyz
• GitHub：github.com/coinbase/onchainkit
• サンプル：OnchainKit playground

サポート

• Discord：Coinbase Developer Platform
• Twitter：@OnchainKit

---

💡 プロのヒント：npm create onchain で動作するアプリをすばやく作成してから、必要に応じてコンポーネントをカスタマイズしましょう。クイックスタートテンプレートには、必要な設定とサンプルがすべて含まれています。

🚀 すぐにできること：セットアップ後に検証スクリプトを使用し、カスタム機能の構築を始める前にすべてが正しく動作することを確認しましょう。