以太坊彩票DAPP实战（四）

一、实现投注功能

（1）修改ui.js文件，添加投注按钮。

import { Button } from 'semantic-ui-react'

...


    投注产生希望
    

（2）在App.js中定义按钮的事件函数。

// 投注功能实现
play = async () => {
    let players = await web3.eth.getAccounts()
    try {
        await contractInstance.methods.play().send({
            from: players[0],    // 投注人
            value: web3.utils.toWei('1', 'ether'), // 投注金额
            gas: '3000000', // 油费上限
        })
    } catch (e) {
        alert('投注失败')
        console.log(e)
    }
}

（3）测试代码，效果如下图所示：

二、实现开奖功能

（1）修改ui.js，添加按钮。

    开奖

（2）在App.js中定义按钮的事件函数。

// 开奖
kaiJiang = async () => {
    let players = await web3.eth.getAccounts()
    try {
        await contractInstance.methods.kaiJIang().send({
            from : players[0],
            gas : '3000000',
         })
     } catch (e) {
         alert('开奖失败')
         console.log(e)
     }
}

（3）测试代码，界面如下图所示：

 

三、实现退奖功能

（1）修改ui.js，添加按钮。

    退奖

（2）在App.js中定义按钮的事件函数。

// 退奖
tuiJiang = async () => {
    let players = await web3.eth.getAccounts()
    try {
        await contractInstance.methods.tuiJiang().send({
            from : players[0],
            gas : '3000000',
         })
    } catch (e) {
        alert('退奖失败')
        console.log(e)
    }
}

（3）测试代码，界面如下图所示：

 

四、代码优化

4.1 当参与者点击投注、开奖、退奖按钮的时候，禁用按钮

（1）添加状态变量，记录当前按钮的状态。

this.setState({
    ...
    isPlaying : false,
    isKaiJiang : false,
    isTuiJiang : false,
})

isPlaying：true代表正在投注，false代表投注结束。

isKaiJiang：true代表正在开奖，false代表开奖结束。

isTuiJiang：true代表正在退奖，false代表退奖结束。

（2）修改render方法，在CardExampleCard元素中为每一个状态变量添加对应的属性。

// 渲染页面
render() {
    return (
        

            
        
    );
}

（3）修改play、kaiJiang、tuiJiang函数，在开始执行函数的时候修改对应状态变量为true，当函数结束时候修改为false。下面以play函数为例：

play = async () => {
    this.setState({isPlaying: true})
    let players = await web3.eth.getAccounts()
    try {
        await contractInstance.methods.play().send({
            from: players[0],    // 投注人
            value: web3.utils.toWei('1', 'ether'), // 投注金额
            gas: '3000000', // 油费上限
        })
    } catch (e) {
        alert('投注失败')
        console.log(e)
    }
    this.setState({isPlaying: false})
}

（4）在ui.js文件中为按钮指定loading属性。

    投注产生希望
    


    开奖


    退奖

 

4.2 只有管理员才显示开奖和退奖按钮

（1）修改componentWillMount方法，添加状态变量isShowButton。如果当前用户是否是管理员。那么isShowButton为inline，否则为none。

// 如果当前用户为管理员，就把display属性设置为inline，否则设置为none
let isShowButton = allPlayers[0] == manager ? 'inline' : 'none'

this.setState({
    ...
    isShowButton
})

（2）修改render方法，添加属性isShowButton。

render() {
    return (
        

            
        
    );
}

（3）修改ui.js文件，为开奖和退奖按钮指定display样式。

    开奖


    退奖

4.3  显示中奖人

（1）修改render方法，在CardExampleCard元素中添加winner属性。

（2）修改ui.js，显示上期中奖者。

    
管理员：{props.manager}
    
当前用户：{props.currentPlayer}
    
上期中奖者：{props.winner}

添加后效果如下图所示：

 

4.4 查看交易历史

（1）修改App.js文件，在componentWillMount方法中获取合约链接地址，并设置到contractUrl状态变量中。

// 合约链接地址
let contractUrl = 'https://ropsten.etherscan.io/address/' + contractInstance.options.address
this.setState({
   ...
   contractUrl : contractUrl,
})

（2）修改render方法，在CardExampleCard元素中定义contractUrl属性。

（3）修改ui.js文件，找到“点击查看交易历史”的a标签，并指定href属性。

点击我查看交易历史