インストール
RainbowKitで始めてみましょう
あなたの選択したパッケージマネージャで、以下のコマンドのいずれかを使用して、新しいRainbowKit + wagmi + Next.jsアプリを一から作成することができます。
これにより、プロジェクト名を求められ、新しいディレクトリが生成され、ボイラープレートプロジェクトが含まれ、必要な全ての依存関係がインストールされます。
または、既存のプロジェクトにRainbowKitを手動で統合することも可能です。
RainbowKitおよびそのピア依存関係であるwagmi、viem、@tanstack/react-queryをインストールしてください。
RainbowKit、Wagmi、TanStack Queryをインポートします。
希望するチェーンを設定し、必要なコネクタを生成します。 wagmi
設定も行う必要があります。 If your dApp uses server side rendering (SSR) make sure to set ssr
to true
.
アプリケーションをRainbowKitProvider
、WagmiProvider
、およびQueryClientProvider
でラップしてください。
次に、あなたのアプリで、ConnectButton
コンポーネントをインポートしてレンダリングします。
RainbowKitは今後、ユーザーのウォレット選択の処理、ウォレット/トランザクション情報の表示、そしてネットワーク/ウォレットの切り替えを行います。
一部のビルドツールでは追加の設定が必要になります。
Remixを使用する場合、buffer
、events
、http
モジュールをポリフィルする必要があります。 以下のRemix設定を参照するか、サンプル Remix プロジェクトを参照してください。
デフォルトでは、dAppは各チェーンの公開RPCプロバイダーを使用してバランスを取得し、ENS名を解決などを行います。 これは、パブリックノードがレート制限されているため、ユーザーに信頼性の問題を引き起こすことがよくあります。 代わりに、AlchemyやQuickNodeなどのサービスを通じてRPCプロバイダーへのアクセスを購入し、Wagmiで独自のトランスポートを定義する必要があります。 これは、getDefaultConfig
のtransports
パラメータを追加するか、Wagmiの createConfig
を直接使用することで達成できます。
A Transport is the networking middle layer that handles sending JSON-RPC requests to the Ethereum Node Provider (like Alchemy, Infura, etc).
http
トランスポートの例
詳細については、wagmi トランスポートドキュメントをご覧ください。
ユーザーがウォレットを接続できるようになったので、あなたは wagmi.を使用してアプリの残りの部分を構築を開始することができます。
トランザクションを送信し、コントラクトと対話し、ENSの詳細を解決し、その他の多くのことを、wagmiの包括的なReactフックスイートを使用して行います。
詳細については、wagmi の文書化をご覧ください。
RainbowKitの一部の実行例を見るため、またはそれらを使って新しいプロジェクトを自動的に生成するために、公式の例をご確認ください。
ブラウザで直接RainbowKitを試すためには、下記のCodeSandboxリンクをご覧ください:
- [Create React App]を使用(https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app)
- [Next.js]を使用(https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next)
- [Next.js App Router]を使用(https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next-app)
- [Remix]を使用(https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-remix)
- with Vite