Ethereum Distributed App With React Tutorial

ICO’s, crypto, blockchain, DAPPs. Everyone is discussing it nowadays (or at leas heard). Today I’m going to show you how to create your first distributed app on Ethereum blockchain, using ReactJS.

This article has two parts:

• How to create ERC20 token (this one)
• How to create ReactJS front end for your DAPP

In the end of second article I’ll provide a Github repo with this project.

What Are We Going To Build

We’ll create our own token that will conform the ERC20 token standard. We’ll create a wallet application using ReactJS, that will allow you to play around with your token using browser with 🦊 MetaMask extension.

We’ll use Truffle to compile and deploy our token, Ganache to set up the test blockchain aNd Drizzle to integrate all this with ReactJS front end.

About ERC20

ERC20 basically represents fungible token, that means that any token of this kind is equal to any other token of this kind. Like 1$ is always equal to 1$.

Overall this standard requires to have 6 methods and 2 events defined.

3 of those methods are totally necessary to make a fungible token and a remaining 3 are needed to make it ERC20 compliant (they are needed to do automatic transactions).

Super Necessary Fungible Token Methods

So if you want to have a coin – you need to know how many coins exist in total, how many coins are in this particular wallet and be able to transfer those coins from one wallet to another. That’s practically it and that’s what those 3 essential functions do.

• totalSupply returns total amount of existing tokens.
• balanceOf accepts wallet address and returns balance of this wallet
• transfer accepts receivers wallet address and amount of tokens to transfer

Also it needs to define the Transfer event that tells who sent what amount of tokens to who.

As you can see, no magic here, and it’s totally understandable why do you need to have such methods.

Remaining Methods

Those methods are needed to execute automated transactions. Like recurring payments, or payments based on some external event. For instance you could make a subscription service based completely on blockchain.

• allowance accepts owner and spender wallet addresses and returns the amount of tokens allowed to spender to withdraw automatically.
• approve accepts spenders wallet address and amount of tokens. Sets the amount of tokens allowed to for given spender.
• transferFrom gets address from, address to and amount of tokens to transfer. Executes transfer within limit allowed by the owner of from address.

Also it needs to define the Approval that tells that some amount of tokens are approved for some spender.

Setting Up

To write our contract we need local blockchain and an wallet that will allow us to test the DAPP locally.

First install the 🦊 MetaMask browser extension. We’ll need it to interact with our contract in browser.

For local ethereum blockchain I recommend Ganache. Go and download version for your OS.

Now install Truffle and initialize new project:

npm install -g truffle
mkdir ethereum-token-tutorial
cd ethereum-token-tutorial
yarn init
truffle init

truffle init will install all required dependencies and generate 3 folders:

• contracts - contain actual contracts. Our token contract will be here.
• migrations - migrations are js scripts that deploy your contracts to ethereum network.
• test - folder for your tests. JS and Solidity.

Writing Contract

We are going to use ERC20 token template provided by Zeppelin. It already provides all the required methods we’ll only have to set the name, symbol for our token.

Install Zeppelin templates and create new contract file:

yarn add zeppelin-solidity
touch contracts/TutorialCoin.sol

Edit tutorial token contract file so it will look like this:

pragma solidity ^0.4.17;

import 'zeppelin-solidity/contracts/token/ERC20/StandardToken.sol';

contract TutorialToken is StandardToken {
  string public name = 'TutorialToken';
  string public symbol = 'TUT';
  uint8 public decimals = 2;

  uint public INITIAL_SUPPLY = 1000000;

  function TutorialToken() public {
    totalSupply_ = INITIAL_SUPPLY;
    balances[msg.sender] = INITIAL_SUPPLY;
  }
}

Name and symbol allow to identify our token, decimals – determines the minimal fraction of the token. In this case it’s 1/100 like cents for $.

total_supply_ is provided by BasicToken and defines total number of tokens in existence.

In our constructor function TutorialToken() we set total_supply_ equal to INITIAL_SUPPLY and assign all newly emitted tokens to the wallet that initiated contract execution.

That’s it, now you have your own token. Let’s deploy it.

Compiling And Deploying

Create file 2_deploy_contract.js in migrations folder:

var TutorialToken = artifacts.require("TutorialToken");

module.exports = function(deployer) {
  deployer.deploy(TutorialToken);
};

If you haven’t done it yet – download Ganache and run it. It will start on 7545 port by default.

Now go back to terminal and compile your contract:

truffle compile

Now to be able to deploy contract to local network – in your projects root create truffle.js with following content:

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*" // Match any network id
    }
  }
};

As we set only one network – truffle will use it by default. Run the migrations.

truffle migrate

After successful migration you should see new transactions in Ganache:

Awesome, your contract is now up and running, let’s make simple React app to interact with your token.

See you in the next part, where we’ll set up front end and send our tokens between wallets.

To not miss the article – subscribe to my mailing list: