以太坊dapp应用--福利彩票 IDEA+React(简单版)

1.应用程序骨架（脚手架）

npm install -g create-react-app
 
create-react-app lottery-react
 
npm run start 启动应用程序
复制代码

2.初始化web3环境

npm install --save web3
复制代码

3.编译器

npm install --save solc
复制代码

src/App.js

import React,{Component} from "react" ;
import {Message,Contract,Card,Image,Icon,Statistic,Button,Label} from"semantic-ui-react";
import Web3 from "./web3";
import lottery from "./lottery";
 
class App extends Component{
 
    state = {
        manager:"",
        playersCount:0,
        balance:0,
        loading:false,
        showbutton:"none"
    };
}
复制代码

src/index.js

//1.导入react
import React from "react";
//2.导入ReactDom
import ReactDOM from "react-Dom";
//3.导入App
import App from "./App";
//4.用ReactDom调用render
ReactDOM.render(<App/>,document.getElementById("root"));
复制代码

src/lottery.js

//直接获取区块链上的彩票的智能合约
 
import web3 from './web3'; //装好了 用户provider的web3
const address = '0x8f6B03a0DdA6397343A3e0B8CeC78c9BBfB4bba8';
//ctrl + shift + J
const abi = [{
    "constant": true,
    "inputs": [],
    "name": "getBalance",
    "outputs": [{"name": "", "type": "uint256"}],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
}, {
    "constant": true,
    "inputs": [],
    "name": "manager",
    "outputs": [{"name": "", "type": "address"}],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
}, {
    "constant": false,
    "inputs": [],
    "name": "refund",
    "outputs": [],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "function"
}, {
    "constant": false,
    "inputs": [],
    "name": "pickWinner",
    "outputs": [{"name": "", "type": "address"}],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "function"
}, {
    "constant": true,
    "inputs": [],
    "name": "getPlayersCount",
    "outputs": [{"name": "", "type": "uint256"}],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
}, {
    "constant": true,
    "inputs": [],
    "name": "getManager",
    "outputs": [{"name": "", "type": "address"}],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
}, {
    "constant": false,
    "inputs": [],
    "name": "enter",
    "outputs": [],
    "payable": true,
    "stateMutability": "payable",
    "type": "function"
}, {
    "constant": true,
    "inputs": [],
    "name": "getAllPlayers",
    "outputs": [{"name": "", "type": "address[]"}],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
}, {
    "constant": true,
    "inputs": [{"name": "", "type": "uint256"}],
    "name": "players",
    "outputs": [{"name": "", "type": "address"}],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
}, {"inputs": [], "payable": false, "stateMutability": "nonpayable", "type": "constructor"}]
 
const lottery = new Web3.eth.Contract(abi,address);
export default lottery;
复制代码

src/web3.js

//1.导入Web3
import Web3  from "web3";
//2.定义web3
const web3 = new (window.web3.currentProvider);
//3.导出web3
export default web3;
复制代码

Lottery/app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
 
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
 
var app = express();
 
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
 
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
 
app.use('/', indexRouter);
app.use('/users', usersRouter);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});
 
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
 
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
 
module.exports = app;
复制代码

Lottery/compile.js

// 在这里是编译智能合约的脚本
 
//获取path
const path = require("path");
//获取fs
const fs = require("fs");
//获取solc
const solc = require("solac");
//调用path.resolve
const srcPath = path.resolve(__dirname,"contracts","Lottery.sol");
//调用fs.readFileSync
const source = fs.readFileSync(srcPath,"utf-8");
//调用solc.compile
const result = solc.compile(source,1);
//导出合约
module.exports = result.contracts[":Lottery"];
复制代码

Lottery/deploy.js

// 在这里是编译智能合约的脚本
 
//获取path
const path = require("path");
//获取fs
const fs = require("fs");
//获取solc
const solc = require("solac");
//调用path.resolve
const srcPath = path.resolve(__dirname,"contracts","Lottery.sol");
//调用fs.readFileSync
const source = fs.readFileSync(srcPath,"utf-8");
//调用solc.compile
const result = solc.compile(source,1);
//导出合约
module.exports = result.contracts[":Lottery"];
复制代码

Lottery.sol

pragma solidity ^0.4.17;
 
contract Lottery{
    address public manager;
    address[] public players;
    address public winner;
 
    function Lottery{
        mannager = msg.sender;
    }
 
    function getMannager() public returns(address){
        return manager;
    }
 
    function enter() public payable{
        require(msg.value == 1 ether);
        players.push(msg.sender);
    }
 
    function getAllPlayers() public view returns(address[]){
        return players;
    }
 
    function getBalance() public view returns(uint){
        return this.balance;
    }
 
    function getPlayersCount() public view returns(uint){
        return player.length;
    }
 
    function random() private view returns(uint){
        return uint(keccak(block.difficulty,now,players));
    }
 
    function pickWinner() public onlyMangerCanCall{
        uint index = random()% players.length;
        winner = players[index];
        players = new address[](0);
        winner.transfer(this.balance);
    }
 
    function refund() public onlyMangerCanCall{
        for(uint i=0;i<players.length;i++){
            players[i].transfer(1 ether);
        }
        players = new address[](0);
    }
 
    modifier onlyManagerCanCall(){
        require(msg.sender == manager);
        _;
    }
}
复制代码

info普通文件

0x8f6B03a0DdA6397343A3e0B8CeC78c9BBfB4bba8
 
 
[{"constant":true,"inputs":[],"name":"getBalance","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"manager","outputs":[{"name":"","type":"ad
dress"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"refund","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name
":"pickWinner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getPlayersCount","outputs":[{"name":"","type":"uint256"}],"payable":fa
lse,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"getManager","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"
name":"enter","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":true,"inputs":[],"name":"getAllPlayers","outputs":[{"name":"","type":"address[]"}],"payable":false,"stateMutability":"view","typ
e":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"players","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[],"payable":false,"stateMuta
bility":"nonpayable","type":"constructor"}]
复制代码