Maksim IvanovProgramming tutorials

Ethereum Distributed App With React Tutorial – Part 2

February 14, 2018

So, we have a token. Time to create front end part and try to send it between accounts.

This article has two parts:

Go read the first part if you missed it, you’ll learn how to create a token and run local ethereum network.

Creating React App

We’ll use create-react-app to bootstrap our application. Modern versions of npm come with npx package that allows to run scripts without installing them:

npx create-react-app front

Now go to this folder and create a symlink to our build folder, where we have our compiled contracts:

cd front/src
ln -s ../../build/contracts contracts

By default react-scripts don’t allow to import stuff outside the src folder. We fixed it by making that symlink.

Set Up Drizzle

First we need to install dependencies:

yarn add redux drizzle drizzle-react drizzle-react-components

Redux is drizzle-react dependency. Drizzle-react-components allow to create basic interface in a few seconds.

Open the front/src/index.js file and make following changes:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { DrizzleProvider } from "drizzle-react";

// Import contract
import TutorialToken from "./contracts/TutorialToken.json";


const options = {
  web3: {
    block: false,
    fallback: {
      type: "ws",
      url: "ws://"
  contracts: [TutorialToken],
  events: {}

  <DrizzleProvider options={options}>
    <App />

Here we imported DrizzleProvider from drizzle-react and provided it with required options.

DrizzleProvider works a lot like Redux provider, and is actually based on it.

It allows us to use drizzleConnect to inject data from drizzle state to props.

Create The Main Screen

Open the front/src/App.js and make it look like this:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

import { drizzleConnect } from "drizzle-react";
import { ContractData, ContractForm } from "drizzle-react-components";

class App extends Component {
  render() {
    const { drizzleStatus, accounts } = this.props;

    if (drizzleStatus.initialized) {
      return (
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Tutorial Token</h1>
              <strong>Total Supply</strong>:{" "}
                methodArgs={[{ from: accounts[0] }]}
              />{" "}
              <strong>My Balance</strong>:{" "}
            <h3>Send Tokens</h3>
          <div className="App-intro">
              labels={["To Address", "Amount to Send"]}

    return <div>Loading dapp...</div>;

const mapStateToProps = state => {
  return {
    accounts: state.accounts,
    drizzleStatus: state.drizzleStatus,
    TutorialToken: state.contracts.TutorialToken

const AppContainer = drizzleConnect(App, mapStateToProps);
export default AppContainer;

Here we used drizzleConnect to get values from drizzle state. Check the mapStateToProps, we need accounts to get accounts controlled by current node. In our case there will be only one account – the one that is currently active in MetaMask.

We need drizzleStatus to avoid calling uninitialized web3 instance.

Finally we need TutorialToken contract reference, to be able to call it’s methods.

Drizzle React Components

In this example I used drizzle-react-components: ContractForm and ContractData. They allow to display contract related info and call it’s methods.

After checking their internals I can’t recommend using them. drizzle-react-components depend on purecss and also don’t give much freedom in making custom layout for your app.

Testing the application

If you read the first part of the article – you should already have the local ethereum network running. If not – I highly recommend to do it.

Download and install the MetaMask browser extension.

After you’ve done it – connect to local network. In our case it will be https://localhost:7545.

Now import new user using private key. You can get private key by clicking on key icon in ganache.

Use the key of the first account. As you remember this is the account that got all the initial Tutorial Tokens.

Reload the page. You should see that you have a bunch of Tutorial Tokens.

Copy the any other wallet address from ganache and try to send it using the form.

Where To Go Next

If you feel lazy – here is the repo with all the steps done:

This is it. Now you can create your own tokens with little to no effort. Use your new power wisely.

Now you can add authorization to this app and build the whole ICO dashboard around it.

Stay tuned, I’m going to make more tutorials about Ethereum and DAPPs.

Subscribe to my mailing list to not miss other articles:

Share this post: