Build a DApp to send digital tokens
A DApp is basically just an application that doesn have a backend system controlled by a single
point of contact. That means, the outlook of the application is just like any other application, but
unlike the tradition; the backend works on blockchain.
There are 2 main components while building a DApp:
a. User Interface: could be as simple as using HTML/CSS and JavaScript
b. Smart contracts: smart contracts are the backend logic of a DApp. They keep track of
the tokens, balances, transactions etc.,.
To access or use any DApp, we don use email IDs and passwords for authentication. Instead,
we use decentralized wallets that use keys for authentication. Some of the very popularly used
decentralized wallets are Metamask, Brave Wallet, Coinbase wallet. In this experiment, we will
use Metamask.
Refer the GitHub repository: https://github.com/v4rsh1th/apex when you are stuck at any point.
Part 0: Setup
1. Node.js installation: https://nodejs.org/
2. Metamask wallet installation: MetaMask
3. A nice text editor like Visual Studio Code
Part 1: Developing the user interface
We are building a DApp that runs on a smart contract that lets us transfer digital tokens from our
wallet to a recipientàwallet.
1. Build a user interface.
In a DApp, we don use any email IDs or passwords for authentication, instead we have our
own decentralized wallets that work as our authentication tool. Create your wallet on
Metamask.
2. In the root, create a new directory with the name: ²ontend Move into the directory and start
creating a new React application by typing this in the terminal:
npx create-react-app .
You will see the file structure like this:
3. After the user is authenticated, since we are building the application for transferring tokens,
build the UI component with two inputs: Recipientàwallet address and amount of tokens being
sent.
4. Then a button which says ånd it acts as a submit button and fires up the Metamask again
for transaction confirmation.
Part 2: Building a smart contract
This is the backbone of our DApp, we are building a smart contract that transfers tokens.
Fortunately, it is very easy to write smart contracts and deploy them. Smart contracts are
generally written in Solidity programming language which is developed by Ethereum foundation.
It shares a similar syntax with that of JavaScript. There is no need to start writing everything from
scratch because a lot of open-source libraries are already available which provide us with a
structure to get started.
We are using the !rdhat,ibrary, it is an Ethereum development environment.
1. Make sure to have Node.js installed on your computer.
2. In the root directory create a new folder with the name ¡ckendàmove into the folder and
run npm install –save-dev hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai
@nomiclabs/hardhat-ethers ethers to install the hardhat library in your project. It downloads
the hardhat package into your project.
You will see the file structure similar to the one in the picture.
3. After the installation is done, run npx hardhat for executing the library pack.
You should see the content in the picture on your terminal. Choose òeate a JavaScript project¡nd select the default options at each step.
Now, the file structure will look like this:
4. In the ïntracts&older, we write all of our smart contracts. You will see a file with the name
/ck.sol(or with any other file name). Delete the file, we don need it.
5. Create a new file: 2ansactions.sol(or any name!)
6. Write a smart contract that transfers tokens in Solidity.
a. Choose the version of Solidity that we are going to use: pragma solidity ^0.8.0; It
gives a warning message that we need a license. Type:
// SPDX-License-Identifier: MIT on the first line.
b. Create a contract: 2ansactionsŠSyntax: contract Transactions { . . . . }
c. Create a function: ddToFunction()“yntax: function addToBlockchain() public { . . . . }
This is the full smart contract:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Transactions {
uint256 transactionCount;
event Transfer(address from, address receiver, uint amount, uint256 timestamp);
struct TransferStruct {
address sender;
address receiver;
uint amount;
uint256 timestamp;
}
TransferStruct[] transactions;
function addToBlockchain(address payable receiver, uint amount) public {
transactionCount += 1;
transactions.push(TransferStruct(msg.sender, receiver, amount, block.timestamp));
emit Transfer(msg.sender, receiver, amount, block.timestamp);
}
function getAllTransactions() public view returns (TransferStruct[] memory) {
return transactions;
}
}
7. Now, the smart contract needs to be deployed to the Ethereum network. We are going to
deploy the contract on an Ethereum Testnet called ïerli Itàeasy to deploy the contract since
we are using the Hardhat development package.
8. To deploy the smart contract, in the ãripts&older, create a new file with the name
%ploy.js This file will contain just the simple JavaScript code to deploy it to a network.
const main = async () => {
const Transactions = await hre.ethers.getContractFactory(“Transactions”);
const transactions = await Transactions.deploy();
await transactions.deployed();
console.log(“Transactions deployed to:”, transactions.address);
};
const runMain = async () => {
try {
await main();
process.exit(0);
} catch (error) {
console.error(error);
process.exit(1);
}
};
runMain();
9. In the !rdhat.config.js&ile, we need to write down some parameters to successfully deploy
the contract. It takes the private key of the wallet you are using while deploying the smart
contract and the RPC of the Ethereum network i.e., Goerli
10. There are platforms which provide us the API endpoints/RPC for the Ethereum networks.
One of the most used platforms is nfura Create an account on Infura. Then, you will be
redirected to your Dashboard. You will see an option: òeate a Web3 project”hen, you will see a prompt:
Select åb3 API (Formerly Ethereum) option and type your projectàname. Hit CREATE.
11. Then, you will see ¥twork Endpoints In Ethereum, select Goerli and copy the URL.
2350. More on setting up, writing and deploying the smart contracts can be found in the official
documentation: https://hardhat.org/hardhat-runner/docs/getting-started
12. In the hardhat.config.js file, write the following code:
require(“@nomiclabs/hardhat-waffle”);
module.exports = {
solidity: ‘0.8.0’,
networks: {
goerli: {
url: ”
Purchase answer to see full
attachment