Web3: How and Why to Write Frontend Applications

Web3 has lately, without any doubt, become an often mentioned term. What does this decentralized internet of the future bring to you, developers, and users, and how to use it to your advantage? In this article, we will take a look at what the possibilities of web 3.0 are in terms of frontend and we will explore a specific example of how to use it in app development.

Web x.0

We can understand web3 (or web 3.0) as a technological concept of direct communication of the web with blockchain as well as another direction where the whole web world and therefore internet is headed.

Web3 is therefore the next step after web 1.0 which was typical with its static content created just by developers/creators of the web and subsequently web 2.0 which is the web as we know it today. For the web 2.0, it is typical that the applications are interactive and can be maintained and filled with content by users themselves. This means that a lot of blogs, editorial systems, collaborative platforms, social networks and other web apps are being created.

Web 2.0 is therefore mostly created by users, but in the background, there are centralized services operated by authorities that not only own all user data, but they have permanent control over the data as well as the applications themselves.

Web3

The main topic of web 3 is therefore decentralization and independence of any central authorities. Frontend web3 applications or DApps (decentralized apps) are therefore not connected to a regular backend server or database, instead they are communicating directly with blockchain.

A typical web3 application has the following parts:

• frontend – based on input from user, it creates and sends requests to smart contracts, 
• wallet – it signs transactions and sends them to blockchain,
• smart contracts – includes the main business logic of the app.

How to create a simple frontend DApp

The following part is focused on a practical demonstration of connecting the frontend to a MetaMask crypto wallet and of basic communication with smart contract.

Crypto Wallets

Crypto wallets play a key role in web3 because apart from the wallet functionality, they also serve as an online identity which allows the user to authenticate themselves and pay without the need to contact regular payment or identification services.

For the purpose of this demonstration, we will use the wallet MetaMask. In case you don’t have an existing MetaMask wallet, download an extension to your Chrome browser and create your own wallet. After the successful creation, you should see your wallet as well as your balance. 

Connecting web3 application with the wallet

For the connection of the crypto wallet to React application, we will use DAppProvider from the library @usedapp/core, which will create the needed context and therefore allow calling other methods from this library inside nested elements, which in the following demonstration will be the App component.

The provided context will allow calling individual functions from the @usedapp/core inside the component. This will allow us to communicate with the wallet or a smart contract. The auxiliary prefix use suggests that it will be React Hooky, which ensures that data in the component will be always up to date. Thanks to the hooks, we will receive the needed information from the wallet, which will then be formatted using the @ethersproject/units library to a readable value. In the wallet, we can easily switch between accounts whose value will be automatically mirrored in your web3 application.

Communication of dApp with smart contract

For testing of the methods that smart contract is offering, we will use the web IDE Remix. It works very similarly to for example Postman for testing REST API. It allows us to connect to a smart contract published on a specified address and call specific methods with entered inputs.

In the picture, you can see two types of methods which are RPC call (blue) where data is only read and transactions (orange) where the network status is modified.

Connection of web3 application with smart contract

The above-mentioned library @usedapp/core offers again through custom hooks an interface for the RPC calls as well as for transactions.

For calling RPC call methods, we will use useContractCall, which takes as arguments:

• interface of the smart contract created using an ABI file (JSON definition and description of provided methods),
• address where the smart contract is running,
• name of method (balanceOf),
• specific arguments of the selected method.

In the following demonstration, this hook returns directly a field where at first position there is the balance of your account in the specific application.

For calling a transaction, we have to use a declarative approach using hook useContractFunction, where we have to create a contract object and transfer the name of the method. This hook returns the status of the transaction including any possible error and a specific function.

By calling the method transaction, your crypto wallet is automatically contacted and it receives information about the induced transaction and offers you to confirm or reject it. This way, the transaction is secure and it is managed by your wallet and not the given application.

For monitoring of all interactions of a web3 application with a smart contract can use the service EtherScan, where you can just enter the address of the smart contract directly in the URL https://etherscan.io/address/ and you have a perfect overview about what is happening inside the application.

Web3: a new era of web apps

Web 3.0 represents a new concept of architecture as well as a business model of web apps. Thanks to direct communication of the frontend application with blockchain, there is no necessity to entrust private keys or tokens to the operators of the service, all is under the control of the user.

We went over a demonstration of a frontend application connected to Ethereum blockchain. We are using this way to develop web3 apps in Ackee, so if you are looking for developers for your project, do not hesitate to contact us!

A separate topic beyond the scope of this article is how to write “backend” or the mentioned smart contract which the web3 frontend application communicates with. This is something that our sister company Ackee Blockchain can help you with.