一、实现投注功能
（1）修改ui.js文件，添加投注按钮。
import { Button } from 'semantic-ui-react'
...
<Button animated='fade' color='orange' onClick={props.play}>
<Button.Content visible>投注产生希望</Button.Content>
<Button.Content hidden>购买放飞梦想</Button.Content>
</Button>（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，添加按钮。
<Button inverted color='red' onClick={props.kaiJiang}>
开奖
</Button>（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，添加按钮。
<Button inverted color='orange' onClick={props.tuiJiang}>
退奖
</Button>（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 (
<div>
<CardExampleCard
...
isPlaying={this.state.isPlaying}
isKaiJiang={this.state.isKaiJiang}
isTuiJiang={this.state.isTuiJiang}
/>
</div>
);
}（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属性。
<Button animated='fade' color='orange' onClick={props.play} loading={props.isPlaying}>
<Button.Content visible>投注产生希望</Button.Content>
<Button.Content hidden>购买放飞梦想</Button.Content>
</Button>
<Button inverted color='red' onClick={props.kaiJiang} loading={props.isKaiJiang}>
开奖
</Button>
<Button inverted color='orange' onClick={props.tuiJiang} loading={props.isTuiJiang}>
退奖
</Button>
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 (
<div>
<CardExampleCard
...
isShowButton={this.state.isShowButton}
/>
</div>
);
}（3）修改ui.js文件，为开奖和退奖按钮指定display样式。
<Button inverted color='red' onClick={props.kaiJiang} loading={props.isKaiJiang} style={{display : props.isShowButton}}>
开奖
</Button>
<Button inverted color='orange' onClick={props.tuiJiang} loading={props.isTuiJiang} style={{display : props.isShowButton}}>
退奖
</Button>4.3 显示中奖人
（1）修改render方法，在CardExampleCard元素中添加winner属性。
<CardExampleCard
...
winner={this.state.winner}
/>（2）修改ui.js，显示上期中奖者。
<Card.Meta>
<p>管理员：{props.manager}</p>
<p>当前用户：{props.currentPlayer}</p>
<p>上期中奖者：{props.winner}</p>
</Card.Meta>添加后效果如下图所示：
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属性。
<CardExampleCard
...
contractUrl={this.state.contractUrl}
/>（3）修改ui.js文件，找到“点击查看交易历史”的a标签，并指定href属性。
<a href={props.contractUrl} target='_blank'>点击我查看交易历史</a>