INFURA のROPSTEN Testnetにデプロイしたコントラクトに対して、npm install によってインストールしたweb3ではなく、MetaMaskによってブラウザにインジェクトされたweb3を利用してトランザクションを生成します。
開発環境
MetaMask Version 7.0.1
Nuxt.js v2.8.1
Truffle v5.0.31
本記事では下記のコントラクトをROPSTEN Testnetにデプロイした前提で話を進めます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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プロジェクトを作成します。
|
1 |
$ npx create-nuxt-app nuxt-project |
関連ページ
Nuxt.js入門 [$route.params][layouts]
作成されたnuxt-projectと同階層に、Truffleによって生成されたbuild ディレクトリがあることを確認して下さい。デプロイ済みのコントラクトのABI情報を利用します。
|
1 2 3 4 5 6 7 8 9 10 11 |
$ 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<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> |
54行目
コントラクトのchangeWord関数に渡すwordを、getData関数の引数として設定します。フォームに「テスト」と入力すれば、〜getData(“テスト”)のように設定されます。
62行目
ethereumjs-txを利用する際の sendSignedTransaction と違うことに注意して下さい。
動作確認
MetaMaskにログインした状態で、フォームに適当なワードを入力し「ボタン」をクリックします。MetaMask内の「確認」ボタンをクリックすると「PENDING」と表示されます。
「PENDING」がしばらく続くと、「Speed Up」ボタンが表示されます。この機能を利用するとMetaMaskが gas fee をうまく調節してくれます。
「Fast」を選択して「保存」をクリック。
成功すると、下記のようなポップアップが表示されます。
