Module 6 – My First DApp with React (50 minutes)

The idea is to create a simple DApp for parents.

They give some money to their children and wish that it can only be spent in some known and allowed places.

The smart contract

Take a look at the smart contract:

pragma solidity ^0.4.4;

contract ChildrenWallet {
  WalletAllowed[] public allowed;
  address parents;

  struct WalletAllowed {
    bytes32 name;
    address account;
  }
  
  function ChildrenWallet() {
    parents = msg.sender;
  }

  function addAllowed(bytes32 _name, address _account) returns (bool _success) {

    WalletAllowed memory newAllowed;
    newAllowed.name = _name;
    newAllowed.account = _account;

    allowed.push(newAllowed);
    return true;
  }

  function getAllowedNames() constant returns (bytes32[]) {    
      uint length = allowed.length;
      bytes32[] memory names = new bytes32[](length);

      for (uint i = 0; i < length; i++) {
          names[i] = allowed[i].name;
      }

      return names;
  }

  function getAllowedAddresses() constant returns (address[]) {    
      uint length = allowed.length;
      address[] memory addresses = new address[](length);

      for (uint i = 0; i < length; i++) {
          addresses[i] = allowed[i].account;
      }

      return addresses;
  }

  function buySomething(address _to) constant returns (string) {   
      uint length = allowed.length;
      for (uint i = 0; i < length; i++) {
          if (_to == allowed[i].account) {
            return "You can buy here";
          }
      } 
      return "You can not buy here";    
  }
}

It has some interesting parts. Let's analyze them:

• The contract has 2 fields: an array of WalletAllowed, to save the places where the children can use their money; and an address called parents, to save the parents' address because later maybe we want to restrict some function for being used only for parents.
• There's also one struct called WalletAllowed. It's like an object that represents an allowed place.
• On the constructor function the parents' address is initialized (msg.sender is the address which creates the contract).

The functions are:

• addAllowed: for the parents, to add an allowed place/wallet.
• getAllowedNames: to get all the allowed names.
• getAllowedAddresses: to get all the allowed addresses.
• buySomething: to know if it's possible to buy on a place, with a given address.

So, let's start:

1. On a console run testrpc
2. Create a new project with Truffle as we did before with truffle init.
3. Open the project with any code editor (Visual Studio Code, Atom or the one you have).
4. Create a new contract and call it ChildrenWallet (truffle create contract ChildrenWallet).
5. Copy and paste the Solidity code that is on top inside the ChildrenWallet.sol file.
6. Migrate (deploy) the contracts to the blockchain with truffle migrate.
7. Let's add a wallet with the commands:

var childrenContract;
var anAccount = web3.eth.accounts[0];

ChildrenWallet.deployed().then(function(instance){ childrenContract = instance; })
childrenContract.addAllowed('Library', anAccount).then(console.log)

Now, let's check the wallet was added:

childrenContract.getAllowedNames.call().then(console.log)

The result should be something similar to:

[ '0x4c69627261727900000000000000000000000000000000000000000000000000' ]

and that is good, because the type of the field 'name' of WalletAllowed is not a string, it's a bytes32[]. So, if you want to see the string you should try with the command:

 web3.toAscii('0x4c69627261727900000000000000000000000000000000000000000000000000')

We have the smart contract.

The following section will teach you how you can get a frontend that will show the smart contract information on a web site.

A frontend, with React.js

You'll need Node JS, version >= 6.

1. Open a console and run:

npm install -g create-react-app

and:

create-react-app children-wallet

It will create a directory called children-wallet inside the current folder. 2) Open this directory with any code editor 3) We need web3, that's a library to interact with the smart contracts. We will also add lodash, a library that will help iterating arrays. Open the package.json file and modify the dependencies:

...
 "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-scripts": "1.0.17",
    "lodash": "^4.17.4",
    "web3": "^1.0.0-beta.24"
  }
...

4. Now, type npm install in the console, to install these dependencies.