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

2019年8月21日

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

 

開発環境

MetaMask Version 7.0.1

Nuxt.js v2.8.1

Truffle v5.0.31

 

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

 

下記リンク先ページでは、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ディレクトリ内において下記コマンドで「nuxtproject」という名前のNuxt.jsプロジェクトを作成します。

 

関連ページ

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

 

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

 

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

 

pages/meta-test.vue

54行目

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

 

62行目

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

 

 

動作確認


 

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

 

 

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

 

 

 

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

 

 

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

 

 

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー