インストール

RainbowKitを使ってすぐに開始しましょう

クイックスタート

お使いのパッケージマネージャを使用して、次のコマンドのいずれかで新しいRainbowKit + wagmi + Next.jsアプリをスキャフォルドできます。

npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit

これにより、プロジェクト名が求められ、新しいディレクトリが生成され、ボイラープロジェクトが含まれ、必要なすべての依存関係がインストールされます。

または、既存のプロジェクトに手動でRainbowKitを統合することができます。

手動設定

RainbowKitとそのピア依存関係、wagmi、viem、そして@tanstack/react-queryをインストールします。

npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

注: RainbowKitはReactライブラリです。

インポート

RainbowKit、Wagmi、およびTanStack Queryをインポートします。

import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

設定

必要なチェーンを設定し、必要なコネクタを生成します。また、wagmiの設定を行う必要があります。dAppがサーバーサイドレンダリング（SSR）を使用する場合、ssrをtrueに設定することを確認してください。

注: WalletConnectに依存するすべてのdAppは、WalletConnect CloudからprojectIdを取得する必要があります。これは完全に無料で、数分で完了します。

...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});

プロバイダをラップ

アプリケーションをRainbowKitProvider、WagmiProvider、およびQueryClientProviderでラップします。

const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

接続ボタンの追加

次に、アプリでConnectButtonコンポーネントをインポートし、レンダリングします。

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

RainbowKitは、ユーザーのウォレット選択を処理し、ウォレット/トランザクション情報を表示し、ネットワーク/ウォレットの切り替えを処理します。

追加のビルドツール設定

一部のビルドツールには追加の設定が必要です。

Next.js

RainbowKitはTurbopack （Next.js 16+のデフォルトバンドラー）とwebpackの両方で動作します。

Webpackを必要とするプラグインを使用している場合は、スクリプトに --webpack フラグを追加してください:

{
  "scripts": {
    "dev": "next dev --webpack",
    "build": "next build --webpack"
  }
}

Remix

Remixを使用する場合、buffer、events、およびhttpモジュールをポリフィルする必要があります。下記のRemix設定や、例のRemixプロジェクトを参照してください。

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};

デフォルトでは、dAppは各チェーンに対して公開RPCプロバイダを使用して残高を取得し、ENS名を解決し、その他の操作を行います。これは、多くの場合、公開ノードがレート制限されているため、ユーザーに信頼性の問題を引き起こすことがあります。そのため、AlchemyやQuickNodeのようなサービスを通じてRPCプロバイダへのアクセスを購入し、Wagmiで独自のTransportを定義するべきです。これは、getDefaultConfig内のtransportsパラメータに追加するか、WagmiのcreateConfigを直接使用することで実現できます。

Transportは、Ethereumノードプロバイダ（Alchemy、Infuraなど）にJSON-RPCリクエストを送信するネットワーク中間層です。

httpトランスポートの例

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});

詳細についてはwagmiのトランスポートドキュメントを参照してください。

独自の機能を追加

現在、ユーザーはウォレットを接続できるようになったので、wagmiを使用してアプリの他の部分を構築し始めることができます。

トランザクションの送信、コントラクトとのインタラクション、ENSの詳細解決など、wagmiの包括的なReactフックを使って可能です。

詳細についてはwagmiのドキュメントをご覧ください。

さらなる例

RainbowKitの動作するいくつかの例を確認し、新しいプロジェクトを自動的にスキャフォルドするためにも、公式の例をチェックしてください。

ブラウザでRainbowKitを直接試してみるには、以下のCodeSandboxリンクをチェックしてください。

Create React Appと一緒に
Next.jsと一緒に
Next.js App Routerと一緒に
Remixと一緒に
Viteと一緒に
React Routerと一緒に

概要

入門

高度な設定