ethereumのreact hooks wagmiを使ってみた

はじめに

これはno plan inc.の Advent Calendar 2022の9日目の記事です。

先日参加した東京web3ハッカソンでwagmiというEVM互換のコントラクトとのやりとりやmetamask等のウォレットとの接続ができるreact hooksのコレクションを使用したので使い方や感想について書いていきたいと思います。

目次

1. ウォレット接続
2. コントラクトRead
3. コントラクトWrite
4. 感想
5. 参考文献

ウォレット接続

wagimiを使って一番感動的だったのはウォレット接続です。
本当に一瞬で出来ます。

sample.tsx

import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
 
function Profile() {
  const { address, isConnected } = useAccount()
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  })
  const { disconnect } = useDisconnect()
 
  if (isConnected)
    return (
      <div>
        Connected to {address}
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  return <button onClick={() => connect()}>Connect Wallet</button>
}

これだけです。
Connect Walletボタンを押すとウォレットに接続されDisconnectボタンを押すと接続が解除されます。

コントラクトRead

コントラクトからの情報の取得は以下のように行うことができます。

sample.ts

import { useContractRead } from 'wagmi'
import { wagmigotchiABI } from "wagmigotchiABI";
 
function App() {
  const contractRead = useContractRead({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'love',
    args: ['0xA0Cf798816D4b9b9866b5330EEa46a18382f251e'],
  })
}

typescriptでwagmiを使用する場合abiの読み込み方に少し癖があり正しい型を推測するためにはabiファイルの拡張子を.jsonではなく.tsにした上で以下のようにする必要があります。

wagmigotchiABI.ts

export const abi = [
//ここにabiのjson
] as const

コントラクトWrite

トランザクションの実行は以下のように行います。

sample.ts

import { useContractWrite, usePrepareContractWrite } from 'wagmi'
import { wagmigotchiABI } from "wagmigotchiABI";
 
function App() {
  const { config } = usePrepareContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    args: [],
  })
  const { data, isLoading, isSuccess, write } = useContractWrite(config)
  write()
}

usePrepareContractWrite()でgas見積もりを行っており実際にトランザクションを実行するのはwrite()で行っています。
私はここで結構ハマったのですがusePrepareContractWrite()の時点で一旦gasを見積もっているのでこの時点で引数等が全て揃って実行可能な状態でないとエラーになってしまいます。

感想

今回初めてwagmiを使いましたがweb3.jsやethersと比べてウォレット接続までは非常に簡単にできてよかったと感じました。
トランザクションの実行ではユーザーに引数となる値を入力させるなどページを開いた時点では引数の値が出揃っていない場合エラーになってしまいかなり面倒に感じました。
usePrepareContractWrite()の使用は強制されている訳ではないので使わずにトランザクションを実行することも可能ですが使用を強く推奨されており使用しない場合ux上の問題があるようです。¹

参考文献

• https://wagmi.sh/

1. UX Pitfalls without Prepare Hooks ↩