【入門編】MetaMaskと接続、接続アカウント情報を表示するWebサイトを作成してみた！

こんにちは、ラスク（@lusk_eng）です。

今回は、Web3では欠かせないMetaMaskについて触れていきたいと思います。
まずは入門編として、MetaMaskを使ったブロックチェーンへの接続を試していきます。

動作検証環境

モジュールインストール

まずは、Web3のライブラリを利用するためのモジュールをインストールします。
インストールが完了したら、MetaMaskの公式ライブラリが利用できる状態になります。

yarn add web3-react@unstable

 

早速、公式ドキュメントを覗いてみましょう！

Getting Started

Web3ライブラリの準備が整いましたので、MetaMaskの公式ドキュメントにあるサンプルコードを実行してみましょう。

if (typeof window.ethereum !== 'undefined') {
  console.log('MetaMask is installed!');
}

MetaMaskのChrome拡張機能が入っていれば、コンソールログに「MetaMask is installed!」と表示されていることが確認できると思います。

MetaMaskのインストールをしていない場合は、以下からインストールしてください。

今回の実装内容

ではこれから、実際に以下の実装を行なっていきます。

1. MetaMask との接続
2. 接続アカウントのID 取得
3. チェーン IDの 取得

MetaMaskとの接続

まずは、公式ドキュメントを参考にMetaMaskと接続をさせるための
コードを書いてみましょう。

以下、サンプルコードになります。

import React from "react";

function App() {
  const ConnectWalletHandler = async () => {
    if (window.ethereum) {
      // MetaMaskに接続を試す
      account = await window.ethereum
        .request({method: "eth_requestAccounts",})[0];
      console.log(account)
    }
  }
  return (
    <div>
      <p>MetaMask Test</p>
      <button onClick={ConnectWalletHandler}>Connect Wallet</button>
    </div>
  );
}
export default App;

※App.js

接続アカウントのID取得

先ほどのサンプルコードで接続アカウントIDをコンソールログに
出力させていましたが、useStateを利用して画面出力に切り替えてみます。

import React, { useState } from "react";

function App() {
  const [account, setAccount] = useState("-");

  const ConnectWalletHandler = async () => {
    if (window.ethereum) {
      // MetaMaskに接続を試す
      await window.ethereum
        .request({method: "eth_requestAccounts",})
        .then((result) => {setAccount(result[0]);});
    }
  }
  return (
    <div>
      <p>MetaMask Test</p>
      <button onClick={ConnectWalletHandler}>Connect Wallet</button>
      <p>Connected with: {account}</p>
    </div>
  );
}
export default App;

※App.js

チェーンIDの取得

最後に接続中のチェーンIDを取得していきます。
BTCやEthereumのチェーンごとにIDが異なっていることが
確認することができると思います。

import React, { useState } from "react";

function App() {
  const [account, setAccount] = useState("-");
  const [chainId, setChainId] = useState("-");

  const ConnectWalletHandler = async () => {
    if (window.ethereum) {
      // MetaMaskに接続を試す
      await window.ethereum
        .request({method: "eth_requestAccounts",})
        .then((result) => {setAccount(result[0]);});
      // 接続中のchainIdを取得する
      await window.ethereum
        .request({method: "eth_chainId",})
        .then((result) => {setChainId(result);});
    }
  };
  return (
    <div>
      <p>MetaMask Test</p>
      <button onClick={ConnectWalletHandler}>Connect Wallet</button>
      <p>Connected with: {account}</p>
    </div>
  );
}
export default App;

※App.js

チェーンIDを参照できるサイトもあるようなので、参考程度に載せておきます。

まとめ

今回はWeb3に触れてみようということで、MetaMaskとの接続を検証してみました。公式ドキュメントだけでも簡単に接続することができましたね。

次回は以下の項目あたりを検証していければと思っています。

• Walletの保有ETHを表示
• Walletから特定のNFTを持っているか確認
• Walletから何個NFTをもっているか確認

本記事についてやWeb3関連で情報交換していただける方はぜひTwitterで声かけていただけますと嬉しいです！ではまた〜！