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"}]
复制代码