web3 - dApps

1 / 36
Summary
During this chapter we will see

what is a dApps
work with javascript to access the blockchain
time: 7h

2 / 36
dApps

3 / 36
dApps
In the previous chapter we have seen how to basically create a contract, what
is this language called solidity and how the blockchain ecosystem works

Yet you cannot expect user to use some CLI to use your services, send and
get information and display them. For that you need to create a frontend
interface that you can customize aka HTML, CSS and JavaScript (+any
flavored framework)

4 / 36
dApps
But first before jumping into the code, what is a dApp?

Decentralized Application
operate autonomously thanks to smart contracts
run on a decentralized computing aka blockchain
without human intervention
ownership is assured by tokens
which are distributed by an algorithm

5 / 36
dApps
dApps are divided into numerous categories

finance
game
governance
media
exchange
and a lot more

6 / 36
dApps

7 / 36
dApps
Ok great! But why dApps can be useful ? How can we create and use them ?

As dapps are decentralized, they can’t be controlled by a single person or

entity. Dapps also often have the following features:

They are open-source and operate on their own without anyone entity
controlling them.
Their data and records are public.
They use a cryptographic token to help keep their network secure.

8 / 36
dApps
dApps have several exciting aspects:

Censorship-resistant - With no single point of failure, it’s very difficult for

governments or powerful individuals to control the network.
No downtime - Relying on a peer-to-peer system ensures that the
dapps continue to work even if individual computers or parts of the
network go down.
Blockchain-based - As they are made using smart contracts, they can
easily integrate cryptocurrencies into the basic functionalities of the
dapp.
Open-source - Open-source dapps encourage the widespread
development of the dapp ecosystem and enable developers to build
better dapps with more useful or interesting functions.
9 / 36
dApps
While dapps promise to solve a lot of the problems faced by regular apps,
there are also some disadvantages.

Hacks - As many dapps are run on open-source smart contracts,

hackers have the opportunity to review code and probe the networks
looking for weaknesses. This has led to a spate of hacks on popular
dapps.
Usability - A lot of dapps have poor user interfaces, something that has
drive many users away. You can read all our reviews on these services
on our reviews page. However, this is something that’s improving as
time goes on.
Users - As with many Web 2.0 apps, the more users a dapp has, the
more effective the network is at delivering those services. This is often
10 / 36
referred to as the network effect. Dapps struggle from low user
numbers, which can make them less interactive. It can also make them
less secure, as a dapp's security is often dependent on user numbers.

11 / 36
dApps
While dApps can be about everything, the three main concepts being used
can be resumed as

DeFi : Decentralized Finance

DAO : Decentralized Autonomous Organization
GameFi : Gaming and Decentralized Finance

12 / 36
dApps
Exercise:

Spend a few minutes searching and then discussing about dApps.

what are some big dApps in the fields we just listed ?

what do you think of the impact of dApps?
are you familiar with this ecosystem ?

13 / 36
dApps
Now that we know a bit more about the dApps landscape let's see how we
can use the web technologies to interact with the blockchain.

We will split that in two parts

interact with the wallet

interact with some smart contract

14 / 36
dApps
For a basic setup you don't need to install a lot of tooling. Your favorite IDE
and some knowledge about HTML, CSS and JavaScript are enough. But you
can also use React, Angular or any others frontend framework!

When working in the web3 sphere, there is two major package we can use,
namely web3.js and ether.js. Both provide almost the same
functionalities so you can use which ever you want.

In this first part I will be using web3.js. Later on I will switch with ether.js so
you can see how both are working.

15 / 36
dApps
Interaction with the wallet of your user is quite simple. If you followed the
courses with attention - and saw how Metamask works - you should already
be think of this few steps

connect wallet to website

allow needed authorization
directly read information
ask permission / cost when writing information

16 / 36
dApps
All the code below is used with React

import Web3 from "web3"; // import the package

let provider = window.ethereum; // setup your
provider to be ethereum
const web3 = new Web3(provider) // instanciate web3

And you are all setup ! With only 3 lines of code you are already working with
some concepts of the blockchain.

Now we want to directly work with the wallet and get all the information we
could need when building a dApp

17 / 36
dApps
Request the list of all accounts

web3.eth.requestAccounts([callback]) // return an
array of accounts

18 / 36
dApps
Get the chainid (useful to check you are on the good network)

web3.eth.getChainId([callback]) // return a number

corresponding to the chain id

19 / 36
dApps
Get the chainid (useful to check you are on the good network)

web3.eth.getBalance([callback]) // return your

number of tokens (in WEI)

20 / 36
dApps
A lot of time, you will need to transform some data before querying the wallet
or after to display a better output to your users.

For that web3.js also export a list of functionalities that are really useful.

For example, in the previous example we do have our balance in WEI which
is a really big number. Not really useful to display that to our user. How can
we change that ?

21 / 36
dApps
Coming from the util module in web3.js you can simply use the function
fromWei()

Web3.utils.fromWei()

22 / 36
dApps
Exercise :

Create a front end application (read only for now) which allow you to interact
with you wallet

list your accounts

display the content of your account
add a button to choose the unity used to display the value (Wei or
human readable)

23 / 36
dApps
Now that you are able to query and request information from your wallet how
can you interact with your smart contract deployed on a blockchain ?

As you remember there is two type of functions in a smart contract:

you can read an information (call a getter)

you can write an information (call a setter)

24 / 36
dApps
But first you need to "access" you contract. For that you can use the
contract method from web3.js.

const NameContract =
web3.eth.Contract(contract_abi, contract_address);

It requires two arguments:

the ABI of the contract

the address of the contract

25 / 36
dApps
What is the ABI of the contract ?

Application Binary Interface

An interface between two binary program modules. Often, one of these
modules is a library or operating system facility, and the other is a
program that is being run by a user.
Like a REST API but in binary - and for low level operation

26 / 36
dApps
Both information are available in Remix under the Deploy contract
tab once your contract is deployed. The address is directly visible but
for the ABI you need to check the options and copy/past

27 / 36
dApps
A

{
constant: true,
inputs: [ { name: '_owner', type: 'address'
} ],
name: 'balanceOf',
outputs: [ { name: 'balance', type:
'uint256' } ],
payable: false,
stateMutability: 'view',
type: 'function'
}

28 / 36
29 / 36
dApps
A basic ABI for some ERC20 token (most of the token based on Ethereum
like FTM) would be somewhat similar to the previous example

display a list of input and output

written in json format

This code is what allow your JavaScript code to know what is available on
your smart contract. And with the address the web3.js client - through
Metamask - knows how to reach this contract

30 / 36
dApps
Once initialized, we can call any of the methods of our smart contract using
either the call() or send() methods.

NameContract.methods.getName().call();
NameContract.methods.setName("some data").send();

31 / 36
dApps
The difference between the call() and send() methods has to do with the type
of function they are calling and their effect. Solidity functions can be divided
into two categories:

Functions that alter the state of the contract

Functions that do not alter the state of the contract

32 / 36
dApps
The reason we have two separate methods for calling functions that do or do
not alter the state of a smart contract is because the former requires a
transaction on the blockchain and the expense of ether in order to be
effective.

The ether required to execute a smart contract function is called “gas” and it is
a transaction that the user of the application will have to accept. If the user is
using an ethereum wallet such as the Metamask plugin in their browser, they
will have to accept the expense of the transaction via a popup window.

33 / 36
dApps
Example:

erc20Contract = new web3.eth.Contract(

erc20Abi,
'0x4E15361FD6b4BB609Fa63C81A2be19d873717870'
);
erc20Contract.methods
.balanceOf(account)
.call()
.then()

34 / 36
dApps
Exercise :

Now you can interact directly with your contract and every contracts you can
find ! Try building an interface for your smart contract and add multiples
functionalities. You want to be able to read and write multiples values Why not
create an army of pokemons for example ?

35 / 36
dApps
Exercise : review all

To practice a bit more, let's review what we saw in this chapter! You can
continue to use cryptozombie to learn more about implementation

You can finish all the lesson of the first chapter

36 / 36