ViteでRainbowkit を使ってみた

概要

フロントエンドのビルドツールVite + Rainbowkitを使い、Walletの接続ボタンを作成した際のコードとはまりポイントを紹介します。

Viteとは

最近注目されているフロントエンドのビルドツールです。
ビルドツールとは、ソースコードから実行可能アプリケーションまでの作成を自動化するツールのことです。

Viteは、Evan Youによって開発されています。Evan YouはVue.jsの開発者でもありますが、ViteはVue専用、というわけではなくSvelte・Reactまで、さまざまな環境で利用可能な汎用的なツールです。

特徴はとにかく、早い！！！！ということ。Viteとはフランス語で「早い」を意味しているので名前からも早そうですね。

Rainbowkitとは

Rainbowkitとは、dapps (decentralized apps)向けに作られた reactのライブラリーです。
dappsでは、ウォレットに接続する機能が必要ですがそれを手軽に実装できちゃうのがこちらのrainbowkit。
デフォルトのウォレットボタンもありますが、デザイン変更も可能。どのウォレットを表示させるかも簡単に設定ができちゃいます。
さまざまなweb3関連のプロジェクトで使われているライブラリーです。

コード

Viteの導入方法

$ npm create vite@latest

上記の通常コマンドの他にも、色々なテンプレートがあるみたいです。

npm create vite@latest my-vue-app --template vue
npm create vite@latest my-vue-app --template react
npm create vite@latest my-vue-app --template react-ts

Rainbowkit導入方法

新規でnext.jsを使って開発する際は便利なコマンドがこちら。
npm init @rainbow-me/rainbowkit@latest

このコマンドで、rainbowkit + wagmi + next.jsを一気にインストールすることができます。
wagmiは、rainbowkit内で使用されているEthrerumの開発に必要なさまざまなhooksをまとめたライブラリーです。

既存のプロジェクトに入れたい場合や、Next.jsを使わない場合はこちら。
npm install @rainbow-me/rainbowkit wagmi ethers

コード

// src/App.tsx

const { chains, provider } = configureChains(
  [chain.polygon, chain.polygonMumbai], // 利用するチェーンを指定
  [
    alchemyProvider({ apiKey: import.meta.env.VITE_ALCHEMY_ID }), // 利用するproviderのkeyを指定
    publicProvider(),
  ]
);

const { connectors } = getDefaultWallets({
  appName: "My app",
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,　// trueにすると以前connectしたウォレットに自動的に接続する

　// 上で指定した connectorsとproviderをwagmiに渡す
  connectors,
  provider,
});

const App = () => (
  <WagmiConfig client={wagmiClient}>
    <RainbowKitProvider>
        <Home />
    </RainbowKitProvider>
  </WagmiConfig>
);

const root = createRoot(document.getElementById("root")!);
root.render(<App />);

export default App;

Rainbowkitの使い方はとっても簡単。
最上位のコンポーネント（例: App.tsx）内で利用するチェーンの指定や、プロバイダーのAPI key を渡した後に、RainbowKitProvider と WagmiConfigに囲ってあげるだけで、App.tsx以下のコンポーネントでRainbowkitを利用することができます。

デフォルトは白基調のUIですが、ダークモードにも簡単に変更ができます。
ダークモードにしたい時は、RainbowkitProviderにthemeのpropを渡してあげるだけです。

<WagmiConfig client={wagmiClient}>
    <RainbowKitProvider
      chains={chains}
      coolMode
      theme={
        darkTheme({
            accentColor: "#CB2BF3",
            accentColorForeground: "white",
            borderRadius: "small",
            fontStack: "system",
            overlayBlur: "small",
          })}
    >
        <Home />
    </RainbowKitProvider>
  </WagmiConfig>

Themeは全部で3つありますのでアプリに合わせて選んでみてください。

Vite + Rainbowkitで注意する点

ここまではViteでもwebpackでも共通部分でしたが、最後にVite + Rainbowkitを使う上ではまりポイントがあるので紹介します。

Viteでは、Node polyfillが含まれていないため以下のような、polyfills.tsを作成してあげる必要があります。
(Polyfillとは最新のES仕様で書いたコードをどのブラウザーでも動作するようにするためのツール)

// src/polyfills.ts

import { Buffer } from 'buffer';

window.global = window.global ?? window;
window.Buffer = window.Buffer ?? Buffer;
window.process = window.process ?? { env: {} }; // Minimal process polyfill

export {};

これを入れないとRainbowkitが正常に動きませんでした。
公式にも、Node Polyfillがないビルドツールを利用する際は、こちらのセットアップが必要と記載があります。