Zenn
🦊

reactから@metamask/sdk-reactを使ってみる

2023/08/23に公開
React
Web3
MetaMask
tech

はじめに

こんにちは。calloc134です。

さて、先日Nagoya Web3 Hackathonに参加しました。
このときにreactとmetamaskを接続する必要がありました。

普通はweb3.jsを使うのですが、今回はまた別の選択肢として、@metamask/sdk-reactを使ってみました。
https://github.com/MetaMask/metamask-sdk

このライブラリはGithubを確認したところ、公式が開発しているようでした。
しかし、ドキュメントがまだ存在せず、開発中のライブラリのようでした。

そんなライブラリを今回のハッカソンでは使ってみました。
このライブラリの使い方がドキュメントとして存在しなかったため、メモとして残しておきます。

使い方

1. ライブラリのインストール

まずはライブラリをインストールします。
今回はパッケージマネージャにpnpmを使っています。

pnpm add @metamask/sdk-react

2. reactからライブラリをインポート

次に、reactからライブラリをインポートします。
metamaskのコンポーネントやフックを利用するためには、MetaMaskProviderというプロバイダでコンポーネントをラップする必要があるため、ルートに近いところでインポートします。

import { MetaMaskProvider } from "@metamask/sdk-react";
(...)

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <MetaMaskProvider
      sdkOptions={{
        dappMetadata: {
          name: "(適当なアプリケーション名)",
          url: "(適当なURL)",
        },
        # metamaskがインストールされているかを起動直後にチェックするかどうか
        checkInstallationImmediately: false,
      }}
    >
      (childrenのコンポーネントを記述)
    </MetaMaskProvider>
  </React.StrictMode>,
);

これで、metamaskのコンポーネントやフックを利用することができるようになります。

ログインボタンを埋め込み

metamaskの提供するログインボタンは以下のようにして埋め込むことができます。

import { MetaMaskButton } from "@metamask/sdk-react";
(...)

function App() {
  return (
    <div className="App">
      <MetaMaskButton />
    </div>
  );
}

以下のようなボタンが表示されます。

このボタンを押すと、ブラウザに存在する拡張機能としてmetamaskが起動し、ログインを行うことができます。

metamaskのログイン後は以下のような画面となります。

サンプル: 送金処理

@metamask/react-sdkのフックは数多く存在します。

ここでは、送金するためのフックを用いて、送金処理を行うサンプルを紹介します。

import { useSendTransaction } from "@metamask/sdk-react";

(...)

function App() {
  // トランザクション用フック
  const { data, isSuccess, sendTransaction } = useSendTransaction({
    to: "0x57dc7A6D9Aa8cc04E8fb629C5AC298b02C85F1e4",
    value: BigInt(transaction.amount * 10 ** 18),
  });

  return (
    <div className="App">
      <button onClick={() => sendTransaction()} />
      {isSuccess && <p>送金完了</p>}
    </div>
  );
}

ここで、useSendTransactionの引数には、送金先のアドレスと送金額を指定します。
この送金額は、BigInt型で指定し、単位はweiであるため、送金額を10^18倍しています。

また、useSendTransactionの戻り値には、送金処理の状態を示すisSuccessと、送金処理を実行するためのsendTransactionが含まれています。
フックの利用のイメージとしてはreact-queryやapollo clientのミューテーションのような感じです。

これを実行すると、metamaskで送金処理を行うかどうかの確認が表示されます。

成功するとisSuccessがtrueになり、送金完了と表示されます。

おわりに

今回は、reactから@metamask/sdk-reactを使ってmetamaskと接続する方法を紹介しました。
web3.js以外の選択肢として参考になれば幸いです。

捕捉

このライブラリの開発者が過去に作っていたライブラリがあるのですが、このライブラリのフックとmetamaskのreact-sdkのフックのAPIはある程度共通であるようです。
そのため、このライブラリのフックのドキュメントがない場合は、以下のライブラリのドキュメントを参考にすると良いかもしれません。

https://wagmi.sh/react
https://wagmi.sh/examples/connect-wallet

ではでは。

GitHubで編集を提案

Discussion