MetaMaskによってsendTransactionを実行する [getData]

INFURA のROPSTEN Testnetにデプロイしたコントラクトに対して、npm install によってインストールしたweb3ではなく、MetaMaskによってブラウザにインジェクトされたweb3を利用してトランザクションを生成します。

開発環境

MetaMask Version 7.0.1

Nuxt.js v2.8.1

Truffle v5.0.31

本記事では下記のコントラクトをROPSTEN Testnetにデプロイした前提で話を進めます。

pragma solidity >=0.4.25 <0.6.0;
 
contract HelloWorld {
  string word;
 
  constructor(string memory _word) public {
      word = _word;
  }
 
  function getWord() public view returns(string memory) {
      return word;
  }
  
  function changeWord(string memory _word) public {
      word = _word;
  }
 
}

pragma solidity >=0.4.25 <0.6.0;

contract HelloWorld {

string word;

constructor(string memory _word) public {

word = _word;

}

function getWord() public view returns(string memory) {

return word;

}

function changeWord(string memory _word) public {

word = _word;

}

下記リンク先ページでは、ethereumjs-tx を利用してchangeWord関数を実行（トランザクションを生成）しました。

ethereumjs-tx version 2 を利用する [Tx is not a constructor][invalid sender]

しかしMetaMaskによってブラウザにインジェクトされたweb3を利用すれば ethereumjs-tx を利用しなくてもchangeWord関数を実行することができます。つまり秘密鍵（Private Key）をコード側に記述する必要はありません。

デプロイするまでの過程は下記ページをご覧下さい。引き続きHelloProject ディレクトリ内で作業をしていきます。

Truffle v5でINFURAのROPSTEN Testnetにコントラクトをデプロイする

また本記事では、Nuxt.js（Vue.js）を利用します。HelloProjectディレクトリ内において下記コマンドで「nuxt–project」という名前のNuxt.jsプロジェクトを作成します。

$ npx create-nuxt-app nuxt-project

1	$ npx create-nuxt-app nuxt-project

関連ページ

Nuxt.js入門 [$route.params][layouts]

作成されたnuxt-projectと同階層に、Truffleによって生成されたbuild ディレクトリがあることを確認して下さい。デプロイ済みのコントラクトのABI情報を利用します。

$ tree -L 1
.
├── build
├── contracts
├── hello-express
├── migrations
├── node_modules
├── nuxt-project
├── package-lock.json
├── test
└── truffle-config.js

$ tree -L 1

├── build

├── contracts

├── hello-express

├── migrations

├── node_modules

├── nuxt-project

├── package-lock.json

├── test

└── truffle-config.js

Nuxt.jsでページコンポーネントを作成します。なお、必要最低限の処理しかおこなっておりませんのであしからず。

pages/meta-test.vue

<template>
  <div>
    <p>メッセージ：{{ message }}</p>

    <label>
      テストネットに保存するワード:
      <input type="text" v-model="word" />
    </label>
    <button v-bind:disabled="isOn" @click="sendWord">ボタン</button>

    <p>アカウント：{{ account }}</p>
    <p>Etherscan：{{ link }}</p>
  </div>
</template>
 
<script>
//ABI情報
const HelloWorld = require("../../build/contracts/HelloWorld.json");
const abi = HelloWorld.abi;

//コントラクトのアドレス
const contractAddress = "0x8b351c5ED9818441283AC49d4C683F4ab626f299";

export default {
  data() {
    return {
      isOn: false,
      word: "",
      message: "",
      account: "",
      link: ""
    };
  },
  mounted() {
    if (typeof web3 !== "undefined") {
      this.message = "フォームにワードを入力してボタンをクリック";
    } else {
      this.message = "MetaMaskをインストールして下さい";
      this.isOn = true;
    }
  },
  methods: {
    sendWord() {
      let self = this;
      web3.eth.getAccounts((error, accounts) => {
        self.account = accounts[0];

        //ログインチェック
        if (typeof self.account !== "undefined") {
          this.message = "MetaMaskの「確認」をクリックするとトランザクションが生成されます";
          const contract = web3.eth.contract(abi).at(contractAddress);

          //フォームで入力した値（self.word）を設定
          const functionData = contract.changeWord.getData(self.word);
          
          const paramas = {
            to: contractAddress,
            from: self.account,
            data: functionData,
            gas: 500000
          };
          web3.eth.sendTransaction(paramas, (error, response) => {
            self.link = "https://ropsten.etherscan.io/tx/" + response;
          });
        } else {
          self.message = "ログインして下さい";
        }
      });
    }
  }
};
</script>

<div>

<p>メッセージ：{{ message }}</p>

<label>

テストネットに保存するワード:

</label>

<p>アカウント：{{ account }}</p>

<p>Etherscan：{{ link }}</p>

</div>

</template>

//ABI情報

const HelloWorld = require("../../build/contracts/HelloWorld.json");

const abi = HelloWorld.abi;

//コントラクトのアドレス

const contractAddress = "0x8b351c5ED9818441283AC49d4C683F4ab626f299";

export default {

data() {

return {

isOn: false,

word: "",

message: "",

account: "",

link: ""

};

mounted() {

if (typeof web3 !== "undefined") {

this.message = "フォームにワードを入力してボタンをクリック";

} else {

this.message = "MetaMaskをインストールして下さい";

this.isOn = true;

}

methods: {

sendWord() {

let self = this;

web3.eth.getAccounts((error, accounts) => {

self.account = accounts[0];

//ログインチェック

if (typeof self.account !== "undefined") {

this.message = "MetaMaskの「確認」をクリックするとトランザクションが生成されます";

const contract = web3.eth.contract(abi).at(contractAddress);

//フォームで入力した値（self.word）を設定

const functionData = contract.changeWord.getData(self.word);

const paramas = {

to: contractAddress,

from: self.account,

data: functionData,

gas: 500000

};

web3.eth.sendTransaction(paramas, (error, response) => {

self.link = "https://ropsten.etherscan.io/tx/" + response;

});

} else {

self.message = "ログインして下さい";

}

});

}

};

</script>

54行目

コントラクトのchangeWord関数に渡すwordを、getData関数の引数として設定します。フォームに「テスト」と入力すれば、〜getData(“テスト”)のように設定されます。

62行目

ethereumjs-txを利用する際の sendSignedTransaction と違うことに注意して下さい。

動作確認

MetaMaskにログインした状態で、フォームに適当なワードを入力し「ボタン」をクリックします。MetaMask内の「確認」ボタンをクリックすると「PENDING」と表示されます。

「PENDING」がしばらく続くと、「Speed Up」ボタンが表示されます。この機能を利用するとMetaMaskが gas fee をうまく調節してくれます。

「Fast」を選択して「保存」をクリック。

成功すると、下記のようなポップアップが表示されます。

Pocket

思考の葉

思考の葉

MetaMaskによってsendTransactionを実行する [getData]