Zenn
🦊

React.jsで学ぶWeb3.js 第一弾（🦊MetaMask）

2021/10/02に公開
React
TypeScript
Web3
MetaMask
tech

最近人気のブロックチェーンに参入してみた引きこもり学生エンジニアSeiです。
普段私はWebアプリを開発している人間ですが、DAppsなどを作る上でWeb3.jsの基礎知識は必要だと思い勉強しています。ただ、なかなかWeb3.jsのサンプルコードって少ないですよね。なのでアプトプットついでに記事を書こうと思います。

React.js + Web3.jsセットアップ

  1. プロジェクトを以下のコマンドで立ち上げます。
    npx create-react-app --template typescript myapp

  2. MetaMaskのProvideを取得できる以下のライブラリを使います。
    https://www.npmjs.com/package/@metamask/detect-provider
    公式の説明はこちら

  3. Web3.jsのnpmパッケージも
    https://www.npmjs.com/package/web3

クライアントアプリがMetaMaskをインストールしているか検出

App.tsx
import React from 'react';
import './App.css';
import detectEthereumProvider from '@metamask/detect-provider';

function App() {
  
  const enable = async () => {
    const provider = await detectEthereumProvider({ mustBeMetaMask: true });
    if (provider && window.ethereum?.isMetaMask) {
      console.log('Welcome to MetaMask User🎉');
    } else {
      console.log('Please Install MetaMask🙇‍♂️')
    }
  }

  enable();

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

export default App;

サイトアクセス時にMetaMaskに接続処理

web3.givenProvider

イーサリアム対応のブラウザでweb3.jsを使用する場合、そのブラウザの現在のネイティブプロバイダが設定されます。ブラウザの環境によって与えられたプロバイダを返し、そうでなければNULLを返します。

web3.defaultChain

デフォルトのチェーン・プロパティは、トランザクションをローカルに署名する際に使用されます。

Propety

name type
"mainnet" String
"goerli" String
"kovan" String
"rinkeby" String
"ropsten" String

web3.eth.requestAccounts()

このメソッドは、現在の環境からアカウントを要求/有効化します。このメソッドは、Metamask、Status、TrustWalletなどのアプリケーションから注入されたプロバイダを使用している場合にのみ動作します。Web3.jsのデフォルトのプロバイダ（WebsocketProvider、HttpProvidder、IpcProvider）を使用しているノードに接続している場合は動作しません。

App.tsx
import React from 'react';
import './App.css';
import detectEthereumProvider from '@metamask/detect-provider';
import Web3 from 'web3';

function App() {

  const [address, setAddress] = React.useState("");

  var web3: Web3;
  
  const enable = async () => {
    const provider = await detectEthereumProvider({ mustBeMetaMask: true });
    if (provider && window.ethereum?.isMetaMask) {
      console.log('Welcome to MetaMask User🎉');
      
      web3 = new Web3(Web3.givenProvider);
      web3.eth.defaultChain = "ropsten";
      
      const accounts = await web3.eth.requestAccounts();
      setAddress(accounts[0]);
    } else {
      console.log('Please Install MetaMask🙇‍♂️')
    }
  }

  enable();

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

export default App;

参考

web3.js公式ドキュメント
MetaMask Docs

Discussion