以太坊DAPP[4]-博彩-前台展示界面

前台页面展示

在下面的展示中,展示了管理者的地址,当前参与者的数量、当前的资金池以及玩家入场按钮与判断输赢的按钮。将玩家列表、总资金、输入框信息都存储在了state状态变量中。

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
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import web3 from './web3';
import lottery from './lottery';

class App extends Component {

state = {
manager:'',
players:[],
balance:'',
value:'',
}



async componentDidMount(){
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});
}


render() {
//console.log(web3.version);
// console.log(this.state.value);
return (
<div>
<h1>lottery管理者地址:</h1>
<p>this is manager by {this.state.manager}</p>
<p>当前的参与者的数量: {this.state.players.length}</p>
<p>当前资金池:{web3.utils.fromWei(this.state.balance,'ether')} ether</p>
<hr/>


<form>
<h4>参与到博彩项目?</h4>
<div>
<label>你想参与的金额:</label>
<input
value={this.state.value}
onChange={event=>{this.setState({value:event.target.value})}}
/>
</div>
<button>提交</button>
</form>
<hr/>
<h4>判断输赢</h4>
<button>开始博彩</button>

<p>{this.state.message}</p>

</div>
);
}
}

export default App;