Arcana's Guide to Building your First Dapp
Getting Started Developer's Corner

Arcana's Guide to Building your First Dapp

Ronak Kadhi
Ronak Kadhi

The process of cooking, much akin to how you develop a dapp, comprises several steps. Although each step may require you to invest a significant amount of energy, the end result is generally worth it. In this blog post, put together by our Developer Evangelist Jobin, we walk you through the process of building a dapp. But before we begin on the process of building a dapp, let's quickly revisit the definition of a dapp and what it exactly means.

What is a Dapp?

A Dapp or decentralized application, like the name implies, is an application built on a decentralized network. It is made up of a smart contract and a user interface (which is the frontend). While the smart contract is the logic behind the dapp, the user interface allows the user to interact with the application.

Here's what we are cooking today!  

Something really delicious and welcoming– a Status Dapp which helps you share your status with your web3 buddies. So here's the complete list of ingredients that go into making a dapp:

  • An Ethereum Development environment - Hardhat
  • A crypto wallet - Metamask
  • A Javascript library to interact with Blockchain - Ethers js
  • A Javascript library for building the user interface - React js
  • Javascript with syntax for types - Typescript
  • A Web3 framework for building Dapps - web3-react npm package
  • And a couple of other packages and tools such command-line terminal, Nodejs, GitHub, and git CLI tools.

Setting up your kitchen (Environment)

Let’s start by setting up our development environment or the working space to build our dapp. Start off by installing the tools we need. Download and install the latest version of node js using this link: https://nodejs.org/en/download/

Next, install git using this link and the instructions: https://bit.ly/3NaeOYB  

Finally, install MetaMask using a compatible browser: https://metamask.io/download/

Now let's setup the project using the terminal.

Here are the commands:

Code Snippet for the dApp building tutorial
Code Snippet for the dApp building tutorial. GitHub Gist: instantly share code, notes, and snippets.
git clone https://github.com/arcana-network/Your-First-dApp
//git clone is the command used to copy a project repository from Github into your local computer directory.

cd Your-First-dApp
//cd lets you change the directory, basically, get in or out of a directory.

Now, let’s install some of the packages required for our blockchain part:

npm install hardhat @nomiclabs/hardhat-ethers @nomiclabs/hardhat-etherscan @nomiclabs/hardhat-waffle @typechain/ethers-v5 @typechain/hardhat @types/chai @types/mocha @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser chai dotenv eslint ethereum-waffle ethers hardhat hardhat-gas-reporter solhint solidity-coverage ts-node typechain typescript --save-dev
//npm install lets you install packages & —save-dev 

Now, let’s install the packages required for our front-end part:

Now that we have got all our packages, tools (ingredients), and development environment (kitchen) set up, let’s get the secret recipe– the logic behind the dapp, which in this case is the smart contract.

We are going to use the “Greeter” smart contract, which comes pre-included when you initialize a Hardhat project. The greeter contract lies inside contracts/Greeter.sol and is written in solidity language.

The smart contract code looks something like this:

Code Snippet for dApp building tutorial
Code Snippet for dApp building tutorial. GitHub Gist: instantly share code, notes, and snippets.
//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;
import "hardhat/console.sol";
contract Greeter {
  string private greeting;
  constructor(string memory _greeting) {
    console.log("Deploying a Greeter with greeting:", _greeting);
    greeting = _greeting;
  }
  function greet() public view returns (string memory) {
    return greeting;
  }
  function setGreeting(string memory _greeting) public {
    console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
    greeting = _greeting;
  }
}

Finally, with all the packages, tools, development environment, and smart contract in place, it’s time for us to compile the smart contract so that we can start interacting with it.

Simply put, compiling is like cooking the food using all the ingredients and the recipe so that we can serve and eat it.

Following is the command to compile the smart contract:

This will output a success message like the following:

Although you may want to eat your favorite dish right off the cooking pot, it is wise to serve it in a plate and taste it before diving in. So when it comes to interacting with our smart contract, we need a blockchain network (Ethereum in this case) running locally. The blockchain will serve as the platform (or the plate) to help you interact with your smart contract. So use the following command and start a local blockchain node:

Doing so will output a message similar to following one:

The image clearly shows that a local blockchain (Ethereum) node is running on an address (here http://127.0.0.1:8545/).

This node has a total of 20 dummy accounts with test Ethers. You can access these accounts using their respective account address and private key. Make sure that you take note of the warning and not send any funds to these dummy accounts.

Now that the node is running, the frontend part of our project can be deployed. In other words, its time to serve and relish the food you prepared. That being said, the current terminal cannot be used to run any further commands as the node is running on it. Simply fire up a new window of your terminal & cd into the project directory (which is Your-First-dApp).

Once you're in the project directory, run the following command to finally deploy your frontend code which'll help you interact with your smart contract or your blockchain party of the project:

The output will perhaps look like this:

You can access your deployed frontend with a browser using the local address. In this case, http://localhost:3000.

Here's how the deployed frontend of our Status dapp project may look like:

Looks totally cool. Doesn't it? Now you can start interacting with your dapp. Just make sure that you're through with all the initial setup for your Metamask wallet. If not, please do so using the instructions you can find here: https://medium.com/@alias_73214/guide-how-to-setup-metamask-d2ee6e212a3e

Now, let’s connect our Status dapp to the Metamask wallet using the green connect button which will pop up a Metmask dialog window. It may look something like this:


Here, click ‘Next’, and then click ‘Connect’. On successful connection, you can see a “Connected” status in the Metamask window, like this:

Now that we have connected our dapp to the wallet, we can deploy our “Status Contract” to the Blockchain node. Click the Deploy Status Contract button to do the same. This will pop up a new Metmask dialog window like the image below.

Deploying a smart contract basically is a transaction. Similar to how a bank will charge you for making transactions, blockchains will also charge you a fee for transacting on them. This fee is known as "Gas Fees."

In the window above, you can find the account you are using to complete the transaction along with the amount that has to be paid to deploy the smart contract.

NOTE: As we are doing a personal project, you don't need to shell out your hard-earned money to buy actual Ethers to pay gas fee. Instead you can visit a Token Faucet & get some dummy Ethers deposited to your account. Here is a link to a Ropsten Test network faucet (https://faucet.metamask.io/), using which you can request Ethers.

Please be patient as it takes some time for the balance to reflect in your Metamask account.

After you have the required amount of Ethers in your Metamask wallet, you can confirm the transaction, and wait for a couple of few minutes till the contract is deployed.

Once, the contract is deployed you will see a pop-up message saying  “Greeter deployed to:0x………”.

Also, you will see an updated deployed contract address within the front end of your dapp.

Now that the contract has been deployed, let’s update our new status using the “Update new status” section &  submit it.

This will again pop up a new Metamask dialog window to do a transaction. You can hit confirm to complete the transaction. It will take a couple of minutes for the transaction to complete. You can check the status of your transaction using the Metamask wallet; it may look something like this:

Once the transaction gets completed you will get a pop-up message showing that the new status is……

Also, you can see the updated status in the “You Current Status” section of your front end.

So this brings you to the end of the blog post. You've perhaps successfully learned how to do blockchain transactions.

Additional Reading:

If you wish to cryptographically sign a message, then you can click on the sign option in the dapp. What basically this does is that if you want to share a message with anybody & want to ensure that nobody else tampers with it then you sign it with your key & on receiving the message the recipient can verify whether the message has tampered or not.

When you click on “Sign” it will pop up a new Metamask dialog window, for signature request with the message content itself. You can sign the message, without paying any transaction fees as signing in Blockchain is a gasless process. This is how the window looks:

On signing the message, you will receive a success message in a popup along with the hash, which you can use to verify the authenticity of this message. Here “🙏” is the message by default & if you wish to change it you can edit it in the “/frontend/src/components/SignMessage.tsx” file.



C'est délicieux👏! Great food chef.

Keep Building, Keep Growing!

About Arcana Network

Built for Ethereum and EVM-based chains, Arcana is the web3 infrastructure to easily onboard dApp users and enable user data privacy and ownership. Web3 developers use Arcana’s SDKs for a seamless, familiar user onboarding experience via social authentication and passwordless login. All user data is encrypted, secured with data access fully controlled by the users, and powered by blockchain.

Arcana has raised 2.7Mn USD from some of the leading investors and founders in the ecosystem such as Balaji Srinivasan, Founders of Polygon, Woodstock, Republic Crypto, and Digital Currency Group.

Want to know more about our latest testnet features? Book a demo.

Official Links: Website | Twitter | Discord| Telegram | TG Announcement | Medium | GitHub