Front page display
In the following display, it shows the address of the manager, the number of current participants, the current fund pool, the players' entry button and the button to judge whether they win or lose. The player list, total fund and input box information are stored in the state variable.
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();
}
render() {
//console.log(web3.version);
// console.log(this.state.value);
return (
<div>
<h1>lottery Manager address:</h1>
<p>this is manager by </p>
<p>Number of current participants: {this.state.players.length}</p>
<p>Current fund pool: ether</p>
<hr/>
<form>
<h4>Participate in×××Project?</h4>
<div>
<label>Amount you want to participate:</label>
<input
value={this.state.value}
onChange=)}}
/>
</div>
<button>Submission</button>
</form>
<hr/>
<h4>Judgement of winning or losing</h4>
<button>start×××</button>
<p>{this.state.message}</p>
</div>
);
}
}
export default App;
Link to this article: https://dreamerjonson.com/2018/12/02/solidity-63-lottery-project-show-page/
Copyright notice: except for the special notice, all articles in this blog adopt CC BY 4.0 CN agreement License agreement. Reprint please indicate the source!
