How to use dApps

If you’re new to blockchain tech & decentralized finance (defi) you might be confused when you first stumble upon a decentralized application (dApp). What is a dApp & how do I use it? Have no fear, it is really simple, and in this post we will explain the process that is involved to use and interact with almost all decentralized applications.

Anatomy of a dapp

Let’s first quickly go through the anatomy of a dApp. By understanding what a dApp actually is and how it works behind all that good-looking ux, it will be easier to understand how and why you interact with it in a certain way.

We can divide a dApp into three distinct parts. Let’s now go through them one by one and then explain how they all fit together.

1. Blockchain

Every dApp gets its name (decentralized application) from the simple fact that it runs on a blockchain. Blockchains as you probably already know work in a decentralized fashion where many nodes, usually in many different locations cooperate to secure the network. Right now the most popular blockchains to deploy a dApp to is Ethereum, Binance smart chain & Polygon. These are all EVM (Ethereum virtual machine)-compatible blockchains.

2. Smart contract

Every dApp has at least one smart contract, sometimes more. Smart contracts are nothing but code (logic) running on the blockchain. Smart contracts can be written in multiple programming languages but the most popular & common one is Solidity. Smart contracts resemble classes in object-oriented languages like JavaScript, C++, etc… and therefore have their own methods, properties & states.

You could consider smart contracts as the backend of a dApp. This is where the brains of the dApp exist and to invoke a function or method in a smart contract you send a transaction to it.

3. User interface

End users, like yourself, will probably be using a user interface to interact with the dApp. User interfaces for dApps are almost always created as a web application using HTML, CSS & JavaScript. This is the visual part of the dApp but contains absolutely no logic that is needed for the dApp to function. Remember, all logic is deployed to the blockchain as one or more smart contracts. The ux is only there to facilitate the process of using the functionality of the dApp & to invoke the functionality that exists in the smart contract by sending transactions to it.

Stitching it together

Now that you have a good overall picture of what a dApp is. You might be asking yourself, well how would I interact with the dApp if the user interface disappears? Hopefully, it won’t come to that, but if that happens there are multiple ways to go about it.

Interacting with dApp without the user interface

Either you create your own ux and connect it to the smart contracts that run the dApp by using something like the web3 library. Or you go to a block explorer like etherscan or bscscan and invoke the functionality of the dApp manually from there. Obviously, you will need to know the address of the smart contract that you want to interact with on the blockchain and you will also need to have some knowledge about the smart contract itself, like what methods and properties it has. But obviously, this is neither easy nor fun so keep that in mind if you deposit funds or interact with dApps — if the user interface goes offline you need to understand how to manually interact with the smart contract.

How the web application connects to the smart contract(s)

You might also be wondering how the web application talks to the brain (smart contracts) of the dApp. For this, the web application would need to connect to a blockchain node, something that is not possible by default in most web browsers today. Because of this, most users will be using wallet software like MetaMask or TrustWallet.

While MetaMask is a plugin that you can install and attach to your browser as an extension, Trust Wallet is an app that you can install on your phone. Both of these softwares will be injecting some pieces of JavaScript into every page you visit with your browser. This enables web applications to use this JavaScript to interact with the wallet & invoke functionality that it has, for example opening a prompt that asks you to sign something or confirm otherwise.

Using a dApp

Alright, finally let’s discuss how to interact & use dApps. You will need to install some compatible wallet software as previously mentioned. If you’re on a desktop computer MetaMask is probably the software that you want to use. We have written a tutorial on how to get started with MetaMask, you can find it over here. If you’re using a smartphone we would recommend either the MetaMask app or the Trust Wallet app.

The process

• 1. No matter what dApp you use the process will be fairly similar. You will often find a “connect” button in the dApp ux. When you click this you will connect & allow the web application to read some information from your wallet. Usually, this information will be what accounts you have, what network you are connected to, etc… If you don’t find any connect button you might get prompted to connect like in this example:

• 2. You will perform some kind of action, for example depositing funds into a vault or approving a smart contract to transfer your funds. Whenever you perform an action that involves you signing with your private key you will get prompted like the approve example below:

Unfortunately, it’s impossible to create a tutorial that fits all the dApp user interfaces out there. But the process is always very similar and it involves the two steps above. Remember the diagram from above that showcased the flow of a transaction from the dApp through MetaMask or TrustWallet and how it gets published to the blockchain through a node. This is the flow that all actions in a dApp will take. The only thing that differs is the logic that will get invoked once you press a button in the ux and send off the transaction by confirming it in your MetaMask or TrustWallet prompt.