Connect Walletボタンの設置とカスタマイズ方法

本記事は、Web3 Dev Advent Calendar 2022 10日目の記事です。

これは何？

NFTを取り扱うWebサイトではWalletを連携させるためのボタンが設置されているケースが多々あります。
今回はその Connect Walletボタン を設置する方法とカスタマイズ方法について紹介します。

前提

TypeScriptでReact18を使ったWebアプリケーションを開発しています。

実装に使うライブラリ候補

導入にあたり、ボタンを設置するためのライブラリがいくつか用意されていたので実装方法の比較調査を行いました。
候補としては下記のようなものがありました。

• Rainbow Kit
  • GitHub: https://github.com/rainbow-me/rainbowkit
  • 使い方
    • ボタンがReact Componentとして用意されている
  • pros
    • 開発がアクティブ、starも多い
    • 使用例が多い
    • 詳細ドキュメントあり: https://www.rainbowkit.com/docs/connect-button
• wagmi
  • GitHub: https://github.com/wagmi-dev/wagmi
  • 使い方
    • React Hooksとして実装
  • pros
    • star数が桁違い
    • 未だに開発もアクティブ
    • 導入がシンプルそう（に見える）
• ethereal-react
  • GitHub: https://github.com/kesne/ethereal-react
  • 使い方
    • React Hooksとして実装
  • pros
    • 初期に参考にしたwagumiで使われている実績あり
  • cons
    • 最終コミットが確認当時で2021/10
• web3-onboard
  • GitHub: https://github.com/blocknative/web3-onboard
  • pros
    • ドキュメントが充実してる: https://www.blocknative.com/blog/react-hooks-ethereum
    • 開発がアクティブ
  • cons
    • アクティブでコミット数多いのにstarがそこまでないのは新しめなのか・・？
    • Connect Wallet ボタンポチった時のダイアログにロゴが付いてるのはカスタマイズできるのか？

今回は自分自身がdApps開発初心者なこともあり、Web3開発の中では枯れてて知名度も高く、コンポーネントベースで使えるRainbowKitを採用することにしました。

準備

1. Rainbow KitとEtherium用のReact Hooksであるwagmiをインストール。

npm install @rainbow-me/rainbowkit wagmi

2. Alchemy API Keyを取得しておく

今回はAlchemyを使ってEthereumブロックチェーンネットワークに接続するため事前にAPI Keyを取得しておく必要があります。取得はこちらから。

ConnectWalletボタンのデフォルト実装

このようなComponentの構成になっているとします。
Connect Wallet ボタンは <Navbar> コンポーネント内に設置します。

<App>
  <Layout>
    <Navbar />
    <Main />
    ...
  </Layout>
</App>

大きく2箇所に実装を入れます。

App

Rootコンポーネント <App> にて <WagmiConfig> と <RainbowKitProvider> でラップします。

import '@rainbow-me/rainbowkit/styles.css';
import {
  getDefaultWallets,
  lightTheme,
  RainbowKitProvider
} from '@rainbow-me/rainbowkit';
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

export default function App() {
  const { chains, provider } = configureChains(    // 1. chainやproviderの設定
    [chain.mainnet],    // 2. 使いたいchainを記載
    [
      alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),　　　　// 3. API Keyを設定
      publicProvider()
    ]
  );

  const { connectors } = getDefaultWallets({
    appName: 'Creators Studio',
    chains
  });

  const wagmiClient = createClient({
    autoConnect: true,
    connectors,
    provider
  });

  return (
    <WagmiConfig client={wagmiClient}>    // 4. WagmiConfigでラップ
      <RainbowKitProvider chains={chains}>    // 4. RainbowKitProviderでラップ
        <Layout />
      </RainbowKitProvider>
    </WagmiConfig>
);

Navbar

続いてボタンを実際に設置する箇所です。

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

const Navabr = () => {
  ...
  return (
    <div>
      <ConnectButton />
    </div>
  );
};

コード詳細

1. chainやproviderの設定。詳細はこちら。
2. 使いたいchainを配列に入れていく。設定できるchainの種類はこちら。
3. 事前取得したAlchemyのAPI Keyを.envファイルに記載。
4. 設定した WagmiConfig RainbowKitProvider を子コンポーネントで使えるようラップする。

ここまででデフォルトスタイルのボタンが設置されます。

ボタンを押すとWallet連携ダイアログが表示されます。

連携すると自分のアカウントステータスが表示されるようになります。

ConnectWalletボタンのカスタマイズ実装

カスタマイズの度合いにより2通り紹介します。

ちょっとした見た目のみを変える

ラベリングやアドレス・アイコンの表示を変えることができる。

<ConnectButton 
    label="Sign in" 
    accountStatus="avatar" 
    chainStatus="icon"
    showBalance={false} />

ラベルを変えた場合:

各種propsの詳細はこちら。

挙動含めがっつり変える

styleや挙動を完全に好みのものにカスタマイズしたい場合は <ConnectButton.Custom> を使用します。

                <ConnectButton.Custom>
                  {({
                    account,
                    chain,
                    openAccountModal,
                    openChainModal,
                    openConnectModal,
                    authenticationStatus,
                    mounted,
                  }) => {
                    ...
                    return (
                      <div>
                        {(() => {
                          if (!connected) {
                            return (
                              <p style={{
                                color: "white",
                                backgroundColor: "rgb(248 113 113)",
                                opacity: "0.8",
                                paddingTop: "0.5rem",
                                paddingBottom: "0.5rem",
                                paddingLeft: "1rem",
                                paddingRight: "1rem",
                              }}>
                                Wallet連携する
                              </p>
                            );
                          }
                        })()}
                      </div>
                    )
                  }}
                </ConnectButton.Custom>

styleとラベルをカスタマイズ:

自由度が高い分Wallet連携有無による挙動やchain、アカウントのステータス等の挙動をイチからハンドリングする必要があります。ハンドリング方法はこちらを参照ください。

参考

https://www.rainbowkit.com/docs/connect-button

https://www.rainbowkit.com/docs/custom-connect-button