Ethereum DAPP[4] - ××× - foreground display interface

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.

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 Manager address:</h1>
       <p>this is manager by  {this.state.manager}</p>
       <p>Number of current participants: {this.state.players.length}</p>
       <p>Current fund pool:{web3.utils.fromWei(this.state.balance,'ether')} ether</p>
       <hr/>


       <form>
         <h4>Participate in×××Project?</h4>
         <div>
           <label>Amount you want to participate:</label>
           <input
               value={this.state.value}
               onChange={event=>{this.setState({value:event.target.value})}}
           />
         </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;

Tags: Web Development React

Posted on Wed, 04 Dec 2019 01:15:31 -0500 by pyr02k1