below is a basic react font-end for an etherium voting app. It uses the web3 library to talk to the smart contract. The first two pieces of code below are the invocation of the web3 object and hooking up to the already deployed contract. The rest is a simple interface with the contract written in react and the contract itself.
import web3 from './web3';
const address = '0xeE8b00eA01dA0ee3C38feE826a35095914C27603'
const abi = [{"constant":true,"inputs":[],"name":"manager","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"pickWinner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getPlayers","outputs":[{"name":"","type":"address[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"lottery","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"enter","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"players","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"}]
export default new web3.eth.Contract(abi, address);
import Web3 from 'web3';
const web3 = new Web3(window.web3.currentProvider);
export default web3;
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: 'Waiting on transaction success...'})
await lottery.methods.enter().send({
from: accounts[0],
value: web3.utils.toWei(this.state.value, 'ether')
})
this.setState({message:'You have been entered into the lottery!'})
}
onClick = async () => {
const accounts = await web3.eth.getAccounts();
this.setState({message: 'Waiting on transaction success...'})
await lottery.methods.pickWinner().send({
from: accounts[0]
})
this.setState({message: 'A winner has been Picked!'})
}
render() {
web3.eth.getAccounts().then(console.log)
return (
<div>
<h2>Lottery Contract</h2>
<p>
This contract manager is {this.state.manager}
There are currently {this.state.players.length} people entered competing to win {web3.utils.fromWei(this.state.balance, '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.setState({ value: event.target.value})}
/>
</div>
<button>enter</button>
</form>
<hr />
<h1>{this.state.message}</h1>
<hr />
<h4>Ready to pick a winner?</h4>
<button onClick = {this.onClick}> Pick a Winner</button>
<hr />
</div>
);
}
}
export default App;
pragma solidity ^0.4.17;
contract Lottery {
address public manager;
address[] public players;
function Lottery() public{
manager = msg.sender;
}
function enter() public payable{
require(msg.value > .01 ether);
players.push(msg.sender);
}
function random() private view returns (uint){
return uint(keccak256(block.difficulty, now, players));
}
function pickWinner() public restricted{
uint index = random() % players.length;
players[index].transfer(this.balance);
players = new address[](0);
}
modifier restricted(){
require(msg.sender == manager);
_;
}
function getPlayers() public view returns (address[]) {
return players;
}
}