👛

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

2022/12/09に公開約6,100字1件のコメント

これは何?

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

前提

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

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

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

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

準備

  1. Rainbow KitとEtherium用のReact Hooksであるwagmiをインストール。
npm install @rainbow-me/rainbowkit wagmi
  1. 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>
);

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

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 を子コンポーネントで使えるようラップする。

ここまででデフォルトスタイルのボタンが設置されます。
Screen Shot 2022-12-04 at 0.35.34.png

ボタンを押すとWallet連携ダイアログが表示されます。
Screen Shot 2022-12-04 at 0.51.23.png

連携すると自分のアカウントステータスが表示されるようになります。
Screen Shot 2022-12-04 at 0.44.20.png

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

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

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

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

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

ラベルを変えた場合:
Screen Shot 2022-12-04 at 0.54.30.png
各種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

Discussion

勉強になりました!!

ログインするとコメントできます