Let’s start by listing the different elements needed in the front-end : one div to display the informations about the Team A, and one div to display the informations about the Team B. Each div will also contain an input and a button to allow the user to bet on his favorite team.

We will also make a button to trigger the “Team A win” or “Team B win” event, to redistribute the ethers to the winners. For a real application, these events could be linked to a sport results API to automatically update the winner team.

Since we use React, let’s divide each part on different components:

App.js , which is already the front-page, will contain general informations about the dApp, and import the other components.

, which is already the front-page, will contain general informations about the dApp, and import the other components. TeamA.jsx , will contain the elements for the Team A

, will contain the elements for the Team A TeamB.jsx , will contain the elements for the Team B

I personnaly use the .jsx format but feel free to use what you prefer

Go on the bet-eth main folder with your terminal, and type

cd src to access the src folder and touch TeamA.jsx && touch TeamB.jsx to create the two files.

Remember web3 ? We installed during the part. 1 of the tutorial, and now we need it to make the front-end interact with the blockchain. In order to load it, we will create a javascript file. We will also create a folder to put the compiled smart-contract that we created in the part one of the tutorial.

Still in the src folder, type in the terminal mkdir utils and create the getWeb3.js file with touch utils/getWeb3.js . Then create a folder, still in src, called contracts : mkdir contracts and Copy the contracts from build/contracts to this folder, like in the image below. (Because it’s not possible to access file outside of the src directory with React-create-app)

Configuring Web3

Open the getWeb3.js file with your favorite editor, and insert the same code to allow your website to detect the wallet you’re using : Metamask in our case.

import Web3 from 'web3' let getWeb3 = new Promise(function(resolve, reject) {

// Wait for loading completion before loading web3, to be sure it's

// already injected

window.addEventListener('load', function() {

var results

var web3 = window.web3

// Checking if Web3 has been injected by the browser MetaMask

if (typeof web3 !== 'undefined') {

// Use MetaMask's provider.

web3 = new Web3(web3.currentProvider)

web3: web3

}

console.log('Injected web3 detected.');

resolve(results)

} else {

// If no web3 is detected, then the local web3 provider is loaded.

var provider = new Web3.providers.HttpProvider('

web3 = new Web3(provider)

results = {

web3: web3

}

console.log('No web3 instance injected, using Local web3.');

resolve(results)

}

})

}) results = {web3: web3console.log('Injected web3 detected.');resolve(results)} else {// If no web3 is detected, then the local web3 provider is loaded.var provider = new Web3.providers.HttpProvider(' http://127.0.0.1:9545' web3 = new Web3(provider)results = {web3: web3console.log('No web3 instance injected, using Local web3.');resolve(results)})}) export default getWeb3

The front-page : App.js

Now that everything, from the smart-contract to web3, is configurated, let’s start to edit the main page, by editing App.js, located in /src.

We will start by importing what we need : react-bootstrap, the two Team components called TeamA.jsx and TeamB.jsx, and the getWeb3.js file to be able to load web3. Write the next lines in the imports, at the top of App.js :

import getWeb3 from './utils/getWeb3.js';

import {Grid,Row,Col} from 'react-bootstrap';

import TeamA from './TeamA.jsx';

import TeamB from './TeamB.jsx';

You can notice that in the default App.js file, there is one App class, containing one render() function. For those who are not initiated with React, the function render is used to write html and render it on a Web page. Before editing this, we will write some new functions, starting by the constructor of the class :

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css'; import getWeb3 from './utils/getWeb3.js';

import {Grid,Row,Col} from 'react-bootstrap';

import TeamA from './TeamA.jsx';

import TeamB from './TeamB.jsx'; class App extends Component { constructor(){

super(); //This is needed in every constructor to allow the use of 'this' //We define the two variables we need in the state of our component, so they can be updated

this.state = {

web3 : '',

address: '',

};

} render() {

return (

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<h1 className="App-title">Bet-eth</h1>

</header>

<p className="App-intro"> </p>

</div>

);

}

} export default App;

After the constructor, we will use the ComponentDidMount() function, from the React lifecycle functions. This function is invoked directly after a component is mounted, and we can use it to load Web3.

We will do it by chaining promises. Promises are asynchronous tasks, and we can chain them to do the tasks wanted on a chosen order. On this chain we have two promises: the first one to load web3 into the state variable also called web3 (the user address is also saved), and the second one to call the getAmount() function.

Schema from developer.mozilla.org