New Rich on the Block

website: http://newrichontheblock.com

Technical review. This publication is a technical appendix of this post.

---

How does it work?

New Rich on the Block is a small project that aims to maintain a ranking of the richest people in the Ethereum blockchain. To participate, users can pay up to 10% of their wealth in any of the ERC20 Tokens on Ethereum and occupy a position in the ranking of that currency.

When registering, the user will have to fill out a form where they can upload a photo, write a title and a text to share. Each record will be permanently stored in blockchain and can be consulted by anybody.

DApp Architecture

The entire DApp consists of three fundamental parts:

1. Front end (html5) & Metamask (web3.js):

   When you build a html5 front end for an Ethereum DApp you will be working with web3.js. This is a library that implements an API to communicate with Ethereum blockchain. You can use this library to extract or push data directly on the blockchain, or you can to create an abstract javascript objects to interact with a specific smart contract on Ethereum.

   To create those objects you need to provide the contract address along with the ABI json that describes the contract API. All that can be obtained using remix which is an online Solidity Editor.

   Metamask a is browser extension that brings an interface to the user to interact with Ethereum. Also, when present, this extension injects a service provider that can be used along with web3.js as proxy from the website. This way you don't need to set up a backend to connect from there to the blockchain.

2. Ethereum (Smart Contracts)

   This project started as a simple "hello, world" but quickly was getting more and more complexity till I reached a point where I have to split the logic in modules, no only for the sake of quality but because a smart contract siply can not be very big.

   So I split my logic in three smart contracts:

   • NRB_Main

     This is the main contract which is in charge of receiving all the requests and delegating the job. It also stores the raised amount for every token.

   • NRB_Tokens

     This contract stores the info of all the tokens that where registered. The first intention was having stored the USD price for a given time for every currency but that required a transaction for each pair price-datetime and therefore some money cost. So I decided to let this logic outside the contract losing some of the magic of original idea.

   • NRB_Users

     This contract stores all the info introduced in the form. My first try was to store the picture inside the form text in base64 format. I only worked with small pictures and even in those cases a lot of many was needed. So I decided to store de picture in the server and store the link in the smart contract. Back then I wasn't aware of the IPFS protocol which is the solution for this problem.

3. Backend (php and mysql)

   Not always the Metamask extension is present in all the browser, therefore I had to have some fallback in a backend for servig the same information as you were using the extension. That's why a backend was needed.

Working with ERC20

When you send ERC20 tokens to someone you don't send a transaction to that person's address. Instead you have to send a transaction to the smart contract implmenting that Token, and specify the address destination along with the amount you wanna send. Therefore, the smart contract receives a transaction signed by you, the owner of the tokens to be transfered, so the operation can be done directly.

However, when you are consuming a service from a smart contract and you have to pay with ERC20 Tokens, you will have to send two transactions. The first one goes to the Token's contract to to approve the debit from the app. The second one is requested by the app once you consume the service.

---

References:

• web3.js hitgub
• web3.js 1.0 doc
• web3.js 0.2x.x doc