Decentralized Applications

While it might be interesting to interact with our smart contracts using web3.js or Truffle tests, it's unlikely that this will attract many real-world users. In order for our application to be useful, it needs to have a user-friendly interface. That’s why, in this lesson, we'll learn how to build a web frontend for our smart contract. Using this web application, users will be able to get the current state of an auction and interact with it, for example, by sending bids to it.

Application's architecture

What we'll build in this chapter is called a decentralized application (dapp). We’ve already seen an example of a dapp in the first chapter when we were using the Ethereum Name Service application. Now, we'll see how to implement one ourselves.

The major difference between a dapp and a regular application is that, in the latter, all data is stored in a centralized database (or multiple data stores) owned by a particular organization. To do anything with this data, a web application running in a browser sends requests to servers providing the application’s functionality.

In the case of a dapp, the web application interacts with an Ethereum network directly without intermediaries. The data and code are not controlled by any particular organization and are stored on an Ethereum network as smart contracts. To interact with the network, a user would need to sign and send a transaction using a private key they control.

The role of MetaMask

As we’ve mentioned before, to access a decentralized application, a user needs to have MetaMask or a similar plug-in installed on their browser. Let’s take a closer look at what role it plays in a decentralized application.

To access the Ethereum network, a web application running in a browser would need to use a library like web3.js. This library will use a provider from MetaMask that's connected to an Ethereum network. When our application tries to call a method or send a transaction, Web3 will use a provider from MetaMask to send a request to Ethereum.

To access an Ethereum network from a web frontend, all we need to do is create an instance of Web3 and set the correct provider that it'll use to interact with an Ethereum network. This is similar to how we were using web3.js providers in the previous chapters, the difference being that previously we were using a provider that used the JSON-RPC API to interact with an Ethereum client. Now, we use a provider object configured by MetaMask.

If a user changes the network in MetaMask, e.g., from the Mainnet to Ganache, MetaMask’s provider will be reconfigured to communicate with the new network. Since Web3 is using this provider, it'll send all subsequent requests to the new network the user has selected.

When MetaMask is installed on a browser, it adds its provider to the window object, a global object available to all JavaScript code running in a browser. The provider is stored in the window.ethereum field that we can use to initialize Web3.

Once we have a Web3 instance configured with the correct provider, we can call methods on Ethereum smart contracts and send transactions just as we did in the previous chapters.

Tech stack

To build a web frontend for our application, we'll use a combination of popular web libraries and frameworks.

• React: This is a popular JavaScript library for building user interfaces.

• Material UI: This is a library of React components. It'll help us build a UI quickly and avoid writing any CSS.

• React Router: This is a library that allows building a multi-page React application, where every page has its own URL.

We don’t need to use these technologies when building a dapp. We’ve just selected them because many people are likely to have some familiarity with them. We can develop a dapp using any other popular libraries or frameworks, or without using any framework at all.

Summary

In this lesson, we learned the difference between a decentralized application and a regular application. We also learned about the role of MetaMask in decentralized applications, and we saw how to configure web3.js to work with MetaMask.