Using the default homepage shipped with the Drizzle box, we will set up a web page for our game. Open the src/layouts/home/Home.js file and make the following changes:
import React, { Component } from 'react';
import { AccountData, ContractData, ContractForm } from 'drizzle-react-components';
import PropTypes from 'prop-types';
import logo from '../../logo.png';
class Home extends Component {
constructor(props, context) {
super(props);
this.contracts = context.drizzle.contracts;
}
render() {
return (
<main className="container">
<div className="pure-g">
<div className="pure-u-1-1 header">
<img src={logo} alt="drizzle-logo" />
<h1>Tontine Game</h1>
<p>Examples of how to get started with Drizzle in various situations.</p>
</div>
<div className="pure-u-1-1">
<h2>Active Account</h2>
<strong>My details: </strong>
<AccountData accountIndex="0" units="ether" precision="3" />
</div>
<div className="pure-u-1-1">
<h2>Cplayer Contract</h2>
<ContractData
contract="Cplayer"
method="findplayer"
methodArgs={[this.props.accounts[0]]} />
<h3>Register</h3>
<p>Before you start playing, players should register themselves using AddPlayer from.</p>
<ContractForm contract="Cplayer" method="AddPlayer" />
</div>
<div className="pure-u-1-1">
<h2>Ctontine</h2>
<strong>Last Ping: </strong>
<ContractData
contract="Ctontine"
method="ping_time"
methodArgs={[this.props.accounts[0]]} />
<strong>Your Game pension: </strong>
<ContractData
contract="Ctontine"
method="Tpension"
methodArgs={[this.props.accounts[0]]} />
<h3>join game</h3>
<p>Press the button below to join the game (only the first time)</p>
<ContractForm
contract="Ctontine"
method="join"
methodArgs={[{value: this.context.drizzle.web3.utils.toWei('2','ether'), from: this.props.accounts[0]}]} />
<strong>Ping game: </strong>
<p>Keep pinging the contract to avoid being eliminated (ping interval is 1 day)</p>
<ContractForm
contract="Ctontine"
method="ping"
methodArgs={[{from: this.props.accounts[0],data:1}]} />
<h3>Eliminate an opponent</h3>
<p>use this form to eliminate your opponent</p>
<ContractForm
contract="Ctontine"
method="eliminate"
labels={['Opponent Address']} />
<h3>Claim your reward</h3>
<ContractForm contract="Ctontine" method="claimReward" />
</div>
</div>
<h2>First Active players</h2>
<ContractData contract="Ctontine" method="active_players" methodArgs={"0"} />
<h2>First Eliminated players</h2>
<ContractData contract="Ctontine" method="eliminated_players" methodArgs={"0"} />
</main>
)
}
}
Home.contextTypes = { drizzle: PropTypes.object };
export default Home;Since this is not a CSS nor a ReactJs book, I’m skipping some of the ReactJs explanations and focusing on Drizzle.
Drizzle comes with its own React components, through the drizzle-react-components library, which makes it easier for you to display contract-related information and call the contract methods. In the preceding code, we started by importing three components from Drizzle: AccountData, ContractData, and ContractForm. These components are very powerful, so let's discover what they are used for:
- AccountData: Displays the account address and balance for a given index. To use this component, we specify these attributes:
- accountIndex (int): Index of the account to use (zero is the first account)
- units (string): Denomination of the balance (expressed in wei)
- precision (int): Number of digits after the decimal point
For example, the <AccountData accountIndex="0" units="ether" precision="3" /> element will render the first active account’s balance and address:
- ContractData: Displays the contract call’s output and accepts the following parameters:
- contract(string, required): Name of the contract to call
- method(string, required): Method to call from the contract
- methodArgs(array): Arguments for the contract method call
For example, in the previous code we had the following:
<ContractData contract="Ctontine" method="ping_time" methodArgs={[this.props.accounts[0]]} />
This element will display the ping time value (ping_time) for the specified player (this.props.accounts[0]) from the Ctontine contract. As you can see, there's no such method as ping_time in our contract, but while it's a public state, ContractData element accepts it as a method argument:
- ContractForm: Contrary to ContractData, the ContractForm Drizzle component can automatically generate a form to read input and interact with the smart contract.
For example, when we use <ContractForm contract="Ctontine" method="eliminate" labels={['Opponent Address']} />, we will generate the following form with one input (as eliminate accepts a single argument). Once submitted, it will call the specified eliminate() method and pass the input value as an argument:
The Drizzle ContractForm element accepts the following parameters:
- contract(string, required): Name of the called contract
- method(string, required): Method whose input will be used to create corresponding form fields
- labels(array): Optional custom labels for the generated form input (following ABI input ordering)
At the time of writing, the ContractForm component doesn't support a value field (maybe soon) to send ether, but there is a workaround for that listed in this GitHub discussion: https://github.com/trufflesuite/drizzle-react-components/issues/17.
One more thing: you may have noticed the use of web3.utils.toWei. Interestingly, Drizzle maintains access to the underlying functionality of web3 1.0, thus you can use all web3.js methods in your React code without needing to initiate a web3 object.
Save all the changes you’ve made so far and now let's try our Drizzle DApp.