Zenn
Open5

WagmiでDAppを作成する会

React
Ethereum
#
ethers
wagmi
0xKoh0xKoh

createConfig

Walletとのコネクトや使用するJSON-RPCプロバイダやViem ClientsなどのConfigを生成する関数
DAppのInterface

const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: w3mConnectors({ projectId, chains }),
    publicClient
  })

Docsにviem clientsの設定とあるがよくわからない

Params

autoConnect

autoConnectというパラメータは最後に接続したWalletと自動で接続するかを定義できるっぽい。初期値はfalse

connector

DAppと接続するウォレットやチェーンの設定。
今回はWalletConnectを使用するのでw3mConnectors関数で設定する。

publicClient

JSON-RPCプロバイダ関連の設定。

0xKoh0xKoh

viem

viemはJSON-RPCなどのEthereum Interfaceを抽象化したTypeScript向けライブラリらしい。
これはwagmiに統合されており、wagmiがスーパーセットのようになっているっぽい。

関係ないけどGitcoin Grantsに出てる👀

0xKoh0xKoh

WagmiConfig Component

WagmiConfigはReact Contextの機能をラップしたコンポーネントで、この配下のコンポーネントがconfigを参照できるようにしている。

<WagmiConfig config={wagmiConfig}>
    <ConnectButton />
</WagmiConfig>
0xKoh0xKoh

publicClient

configureChains関数を使用してJSON-RPCプロバイダの設定を扱うらしい。

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])

この関数の最初のパラメータにはDAppが使用するチェーンで、最後にJSON-RPCのデータが入るっぽい。また今回はWalletConnectが提供するJSON-RPCクライアントを使用するので、w3mProviderで設定する。

0xKoh0xKoh

useAccount

アカウントのセッションや接続されたアカウントのアドレスの状態を保持するHooks

const { address, isConnecting, isDisconnected } = useAccount()

addressには接続されたWalletのAddressが格納され、その後ろには接続状態が真偽値で格納される。

useConnect

configを基に対応したウォレットに向けてアカウントの接続を提供するHooks

const { connect, connectors, error, isLoading, pendingConnector } = useConnect()

return(
    <>
      {connectors.map((connector) => (
          <Button 
              onClick={() => connect({ connector })} 
              key={connector.id}
          >{connector.name}</Button>
      ))}
    </>
)

wagmiConfigのconnectorsに格納したDAppへの接続を許可するWallet毎のコネクトBottonを再帰処理で実装する処理を定義している。