RainbowKit or Web3Auth(Torus)

Webサービス開発におけるウォレット接続ライブラリ選択

最近は配布系のサービスを開発したり、プロトコルの開発をしたりしていますが、大体はRainbowKitとWeb3Authを活用して開発しているので、その辺のお話ができたらと思っております。

RainbowKit

RainbowKitは、ウォレットサービスの「Rainbow」を開発している企業が、webサービスで手軽にウォレット接続を行うために開発したライブラリです。手軽に導入することができ、デザインも素敵なので、最近のwebサービスだとRainbowKitを導入するところが多い印象です。

Web3Auth

Web3Authは、ウォレットサービスを開発するTorusが開発したライブラリになります。SNSでウォレット接続するために、SNSに紐付けたウォレットアドレスを生成するライブラリの印象でしたが、最近ではMetamaskなどの接続もできるRainbowKitのSNSログインも兼ね備えてる版みたいな印象です。

使い分け

RainbowKit 👉 ウォレットを既に持ってるユーザー向けサービス

ウォレットを既に持っているユーザーが対象のサービスの場合は、RainbowKitの方が良いと思います。理由としては

• ポップアップでmetamaskやrainbowなどのウォレットを促されるから
• 導入開発コスト低いから(APIキーがない)
• カスタマイズ性が高いから

実際の導入の流れ(ざっくり)

npm install @rainbow-me/rainbowkit wagmi ethers

index.tsx

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

import {
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [mainnet, polygon, optimism, arbitrum],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  chains
});

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

const App = () => {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <YourApp />
      </RainbowKitProvider>
    </WagmiConfig>
  );
};

component.tsx

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

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

ウォレットを持ってないユーザー向けサービス 👉 Web3Auth

ウォレットを持っていないユーザーが対象の場合はSNSログインを前提にしたWeb3Authが良いと思います。理由は

• ポップアップでSNSログインを促されるから

実際の流れ(ざっくり)

npm install --save @web3auth/modal @web3auth/base ethers

index.tsx

const clientId = "YOUR_WEB3AUTH_CLIENT_ID"; // get from https://dashboard.web3auth.io

function App() {
  const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null);
  const [provider, setProvider] = useState<SafeEventEmitterProvider | null>(null);

  useEffect(() => {
    const init = async () => {
      try {

      const web3auth = new Web3Auth({
        clientId,
        chainConfig: {
          chainNamespace: CHAIN_NAMESPACES.EIP155,
          chainId: "0x1",
          rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
        },
      });

      setWeb3auth(web3auth);

      await web3auth.initModal();
        if (web3auth.provider) {
          setProvider(web3auth.provider);
        };
      } catch (error) {
        console.error(error);
      }
    };

    init();
  }, []);
  
  //login(), logout(), getAccount()...ect
}

総括

基本的にSNSログイン(ウォレットを所持していないユーザーがターゲット)がベースでない限りは、RainbowKitで良いかなと思っています。RainbowKitはロジックとUIをwagmiとRainbowKitで分けているため、かなり柔軟にウォレット接続をカスタマイズしてくれる印象です。