//tips
//smart contract
Lottery-reactのweb3.js生成の続きから始める。
import Web3 from 'web3';
const web3 = new Web3(window.web3.currentProvider);
//これによりテストネットワークとキーにアクセスできるようになる
export default web3;//これはweb3 v1.0のもの。メタマスクが生成する0番台ではない
これをApp.jsに反映。
import web3 from './web3';
class App extends Component {
render(){
web3.eth.getAccounts().then(console.log);
ととし、ブラウザのコンソールにweb3インスタンスのアカウントが表示されるかを確認。
web3.eth.getAccounts().then(console.log);
ここでweb3接続アカウントを表示させる形にしているが、なぜかアカウントが表示されない。
ここは一旦質問。
今度はlottery-reactではなく、lotteryフォルダの方に行き、deploy.js及びcompile.jsを修正。
こちらでnode deploy.jsを実行。
十分なテストコインがないので実行できないとエラー。0.4ethはアカウントにあるのでこの問題についても確認。rinkebyはfaucetが現在うまく機能しておらず問題になっているよう。
この内容をlottery-reactに反映させるためlottery.jsを新たに作成し、
import web3 from './web3';
//下記は一旦lotteryをチェーンにデプロイした後に取得できるもの
const address =''//transactionアドレスを入れる deploy実行時に出てくるもの
const abi=[];//deploy実行時に出てくるabi []で囲まれているもの
export default new web3.eth.Contract(abi,address);
このようにして、ローカルコピーをrinkebyのデプロイ済みのコントラクトに渡すよう。テストプロジェクトで行ったlottery.methods.enter().sendでのアクセスをするのと同じ要領とのこと。
渡し方としてはlottery.jsでlottery-reactにコントラクトの内容を使用できるようにする。
import web3 from './web3';
//下記は一旦lotteryをチェーンにデプロイした後に取得できるもの
const address =''//transactionアドレスを入れる deploy実行時に出てくるもの
const abi=[];//deploy実行時に出てくるabi []で囲まれているもの
export default new web3.eth.Contract(abi,address); //lottery.methods.enter().sendでのアクセスと同じ要領とのこと
これを作っておいて、下記のApp.jsのasync componentDidMountにて連動させる。コピーしたものを入れ物に移し替える要領なのだろうか。そして、実際にはrender以下でブラウザに表示する。index.htmlではなくApp.jsにて表示内容を決めている。
少し2つのweb3の関係が見えてきた気がする。
State周りとconstructorでなぜthis.state={manager:’’};だけ定義しているかなどまだ理解が及んでいないところはあるが作りながら理解していく。
import React ,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import web3 from './web3';
//import { RENDER } from 'ci-info';
import lottery from './lottery';//デプロイに使用したアドレスが入っている
class App extends Component {
state={
manager:'',
players:[],
balance:'',
value:''
};
constructor(props){
super(props);//JavaScriptはこれを呼ぶまでthisは使わせない
//propsの結果はコンポーネント呼び出しのとき渡された値
this.state={manager:''};
}
async componentDidMount(){
//大元のlotteryコントラクトから引っ張る内容
const manager=await lottery.methods.manager().call();
const players=await lottery.methods.getPlayers().call();
const balance=await web3.eth.getBalance(lottery.options.address);
this.setState({manager,players,balance});
}
onSubmit=async(event)=>{
event.preventDefault();
//Event オブジェクトの preventDefault メソッドを使用することで、
//イベントが発生したときにイベントに対してブラウザで設定されているデフォルトの動作をキャンセルさせることができる
const accounts=await web3.eth.getAccounts();
await lottery.methods.enter().send({
from:aacounts[0],
value:web3.utils.toWei(this.state.value,'ether')
});
};
render(){
web3.eth.getAccounts().then(console.log);
return (
<div>
<h2>Lottery Contract</h2>
<p>
This contract is managed by {this.state.manager}.
There are currently {this.state.players.length} people entered,
competing to win {web3.utils.fromWei(this.state.balance,'either')} ether!
</p>
<hr/>
<form onSubmit={this.onSubmit}>
<h4>Want to try your luck?</h4>
<div>
<label>Amount of ether to enter</label>
<input
value={this.state.value}
onChange={event =>{this.state({value:event.target.value})}}
/>
</div>
<button>Enter</button>
</form>
</div>
);
}
}
export default App;
