Ethereum DAPP[5] - ××× - event handling

Handle the submit event for the button:

It deals with the buttons for players to enter the arena and the buttons for starting XXX.
Handle button submit events. If there is no problem with the current operation, metamask will be opened for transaction commit.
At the same time, it should be noted that information prompt is added, that is, if the current transaction has been waiting for the confirmation of the miner's transaction, it will prompt to wait for the completion of the transaction. When the transaction is completed, the state changes and the transaction is renewed.
Transaction completion will be prompted.

src/App.js:

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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:'',
    message:''
  }



 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});
 }

 onSubmit  = async event =>{
     event.preventDefault();
     const accounts = await web3.eth.getAccounts();

     this.setState({message:'Wait for the transaction to complete.....'});

     await lottery.methods.enetr().send({from:accounts[0],value:web3.utils.toWei(this.state.value,'ether')});
       this.setState({message:'Admission success.....'});
 }

 onClick = async ()=>{
     const accounts = await web3.eth.getAccounts();
     this.setState({message:'Wait for the transaction to complete......'});
     await lottery.methods.pickwiner().send({from:accounts[0]});
   this.setState({message:'Winner generation'});
 }

 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 onSubmit={this.onSubmit}>
         <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 onClick={this.onClick}>start×××</button>

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

     </div>
   );
 }
}

export default App;

Tags: Web Development React

Posted on Mon, 02 Dec 2019 02:56:40 -0800 by wrathican