fangjun

Posted on Feb 13, 2022 • Edited on Jul 13, 2022

Web3 Tutorial : build your first DAPP with Remix and Etherscan

#blockchain #web3 #dapp #solidity

In this tutorial with 7 detailed tasks, we will build a DApp step by step.

Task 1: Preparation for building smart contract
Task 2: Remix IDE - online development environment
Task 3: Greeter.sol - First semi-DApp with Remix
Task 4: ERC20 Token - Second semi-DApp
Task 5: Understanding approve, allowance and transferFrom
Task 6: Deploy to public testnet Ropsten
Optional Task 7: Deploy and verify on Polygon

DApp is a web-app with logic in on-chain smart contracts which users can access through their wallet. Ethereum.org explains:

A decentralized application (dapp) is an application built on a decentralized network that combines a smart contract and a frontend user interface.

So we may have a simple definition of DAPP:

DApp =

Smart Contract (on blockchain) +

User Interface (web-app running on server) +

Wallet (controlled by a user in browser and mobile app)

DAPP = Smart Contract + Web APP + Wallet(user-controlled).

I would like to call what we build in this 7-step tutorial "semi-DApp", as we will focus on smart contracts while relying on Remix IDE or Etherscan as the user interface. We will build our own web-app using React/Next.js that works with smart contracts and wallet later.

Prerequisites: knowledge and tools

To build DApp, you need some basic knowledge and tools beforehand.

Knowledge needed:

Blockchain basics
Ethereum basics
Wallet usage
Solidity language
ERC20 & ERC721 token standard

Tools needed:

Remix IDE online
MetaMask (Wallet browser extension)
Node.js, yarn, TypeScript
OpenZeppelin (Solidity token library)
Etherscan and other block explorers

But take it easy, we will try to explain when we encounter them.

Let's start our journey.

Task 1: Preparation for building smart contract

We need tedious preparation to have all the needed tools set:

Install MetaMask and create an account
Hardhat local testnet
Remix IDE settings

Task 1.1 Install MetaMask and create account

In this sub-task, we will install MetaMask, create a wallet and write down mnemonics (phrase) with pen and paper.

Download and install MetaMask extension from Chrome extension store.
Create a wallet by following the instructions of MetaMask. Do write down mnemonics (seed phrases) with pen and paper.
Get to know basic usages of MetaMask: 1) switch Network, 2)add or edit Network, 3) add account 4)change account.

You can also use MetaMask in other browsers such as Firefox, Brave and Edge.

Task 1.2 Run a local testnet by Hardhat

We will use Hardhat which is an Ethereum development environment to run a local testnet. You can also use Ganache by truffle.

To use Hardhat, you need to have node.js and yarn in your computer.

STEP 1: make a directory and install hardhat in it

mkdir hhproject && cd hhproject
mkdir chain && cd chain
yarn add hardhat

STEP 2: create a sample Hardhat project

yarn hardhat
//choose: Create an advanced sample project that uses TypeScript

A hardhat project is created with a sample smart contract "Greeter.sol" that we will use in Task 3.

STEP 3: run Hardhat Network (local testnet) in stand-alone mode

yarn hardhat node

A local testnet will is running (chainId: 31337):

Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

It gives us 20 accounts each filled with 10000.0 test ETH. These accounts are generated with mnemonics test test test test test test test test test test test junk. Do not send mainnet ETH, token or NFT to these accounts.

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (10000 ETH)
...

We will organize our project directory as follows (we don't use the webapp sub directory in this tutorial):

- hhproject
  - chain  (working dir for hardhat)
  - webapp (working dir for Next.js app later)

Task 1.3 switch MetaMask network to local testnet

Make sure Hardhat Network local testnet is still running and change network settings:

STEP 1: In MetaMask browser extension, click the network selector on the top bar. Switch the network from mainnet to localhost 8545.
STEP 2: Click the Account icon on the topbar and go to "Settings/Network/". Choose "localhost 8445".

Two useful Notes on MetaMask usage:

make sure Chain ID is 31337. It may be "1337" by default. You can edit the network parameters in MetaMask > Settings > Networks.
if you can't see public and local testnet in MetaMask, you can open it in MetaMask > Settings > Advanced > Show test networks.

Task 1.4 Add/Import account to MetaMask

STEP 1: Click Account icon in the top bar and choose "Import Account". Import Account with Private Key of local testnet Account #0.

Private Key of Account #0 is:

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

STEP 2: Switch to the added Account with address: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266.

There is 10000.0 test ETH in this account which can be used in this ethereum local testnet.

Task 2: Remix IDE - online smart contract development environment

Remix IDE: https://remix.ethereum.org/

Remix Ethereum IDE (Remix IDE) is the online development environment for Ethereum. Introduction from Remix IDE docs:

Remix is used for the entire journey of contract development as well as act as a playground for learning and teaching Ethereum.

Remix IDE is a powerful open source tool that helps you write Solidity contracts straight from the browser.

Remix IDE has modules for testing, debugging and deploying of smart contracts and much more.

Task 2.1 Have a look at Remix IDE

Take a look at Remix IDE components we will use:

1) Editor: Open File Explorer of Remix IDE, and click a sample smart contract file "1_Storage.sol"

2) Solidity Compiler: where we compile smart contracts

3) Deploy and Run Transactions: where we deploy smart contracts and interact with smart contracts.

4) Unit Test: the plugin for unit test using Solidity. If not installed, add from plugin button in the bottom-left.

File structure in Remix IDE workspace:

contracts/
scripts/
tests/

There are several sample smart contracts as well as deploy scripts in JavaScript and Unit Test scripts in Solidity in the default workspace of Remix IDE.

Task 2.1 Change Environment to Injected Web3 in Remix

In this sub-task, we will change the "Environment" in Remix "Deploy & Run" tab.

STEP 1: make sure MetaMask network is switched to "localhost 8545" and switch account to 0xf39f...2266
STEP 2: change Environment from default Javascript VM(London) to Injected Web3. We told Remix IDE to use injected ethereum provider provided by MetaMask.
SETP 3: check the account in this tab. It should be changed to 0xf39f...2266 same as MetaMask.

Task 2.2 Compile a sample smart contract

It is intuitive to compile a smart contract in Remix IDE. Compile in 3 steps:

STEP 1: In the Editor tab select a smart contract such as "1_Storage.sol".
STEP 2: In Solidity Compiler tab, compile the selected smart contract. Leave the options as default.
- Compiler: 0.8.7+commit.e28d00a7
- Language: Solidity
- EVM Version: Compiler default
STEP 3: Click Compile button. The selected smart contract will be compiled.

Compiled results (artifacts) are stored in the artifacts directory.

Task 2.3 Run unit test

Remix IDE support unit test written in solidity with a plugin.

STEP 1: In Plugin Manager, install "Solidity unit testing" plugin if it is not installed and activated yet.
STEP 2: In Unit Test tab, select test/4_Ballot_test.sol and click "Run" button.

Note: We usually run unit test in Javascript in popular Ethereum development environments like Truffle and Hardhat. We will skip unit test in this tutorial in the following tasks.

We call the smart contract development circle "Compile - Test - Deploy" and will do deployment in the next sub-task.

Task 2.4 Deploy to testnet provided by Remix IDE

Remix IDE also provides a testnet with EVM (ethereum virtual machine) based on @ethereumjs/vm EVM implementation (github repo link).

First, we will try to deploy a smart contract to JavaScript VM(London) provided with Remix IDE.

STEP 1: change environment to JavaScript VM(London).
STEP 2: It provides several test accounts on the node. We will use account "0x5B3...eddC4" as the deployer.
STEP 3: click "deploy" button.

As the account is controlled by the script (it has the private key), we don't need to confirm the transaction in wallet.

Once deployment is completed, a transaction receipt will be logged on the Remix IDE console at the bottom right of the screen.

The deployed contract will be displayed in the left bottom of the screen. We can interact with it.

"store" a number, such as 100
"retrieve", get 100

Task 2.5 Deploy to injected testnet provide by MetaMask

In this sub-task, we will deploy the sample smart contract to the injected testnet provided by MetaMask. It is the local testnet we are running on:

HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

Let us try to deploy a smart contract to local testnet with MetaMask. In this scenario, the script doesn't have the private key. The private key is controlled by MetaMask. The user will need to confirm the transaction in his MetaMask wallet.

STEP 1: In "Deploy & Run" tab, change the environment to "Injected Web3".
STEP 2: check if the account is "0xf39...92266" same as the MetaMask.
STEP 3: click "deploy" button.
STEP 4: confirm in the popup of MetaMask wallet.

The returned receipt of the transaction is:

status  true Transaction mined and execution succeed
transaction hash    0xb4f72c274fdd6bd600e05f5eb0c6c9edc45c61743c732aab867cc50d4719c754
from    0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
to  Storage.(constructor)
...

You can see that the transaction was sent from address: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266.

Task 2.6 Interact with the smart contract

We can call functions/methods of a smart contract in Remix IDE. There are two kinds of methods of smart contract: read-only and state-change.

Deep blue button is for read-only methods.
Orange button is for state-change methods. To send state-change methods to blockchain network, users are required to confirm this kind of action in their wallet and pay gas fee.

Let's interact with the smart contract.

STEP 1: set number as "100" and click "store" button.

This will send a transaction to the blockchain which needs confirmation in MetaMask.

STEP 2: confirm the transaction.
STEP 3: click "retrieve" button.

"retrieve" is a read-only call which don't need confirmation in MetaMask. Users don't need to pay gas fee to call read-only functions.

The result will be displayed on the screen.

Details of Write (send) and Read (call) are logged in the Remix IDE console.

After you finish Task 1 and Task 2, you are fully prepared for the DApp development journey.

Task 3: Greeter - First semi-DApp with Remix

In Task 3, we will begin to build your first DAPP using:

Remix IDE
Hardhat local testnet
"Greeter.sol" smart contract

We will not build webapp front-end by ourselves in this tutorial. Instead, we use Remix IDE as a web user interface to interact with smart contracts.

Task 3.1 Sample contract "Greeter.sol"

There is a smart contract "Greeter.sol" in hardhat sample project. Let's create a file "contracts/Greeter.sol" in Remix IDE and copy the Greeter.sol in the hardhat project directory to it.

//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;
    }
}

console.log() in solidity is a Hardhat only feature which can only be used in Hardhat Network local testnet.

There are also deployment scripts and unit test scripts in hardhat project. We will not need those scripts in Remix IDE.

Task 3.2 Compile Greeter.sol

Switch to "Solidity Compiler" tab in Remix IDE.

Compile "Greeter.sol"

Once it is compiled successfully, you will see "Compilation Details" in Remix IDE.

We can also copy "ABI" and "Bytecode" to view if you are interested in them.

These files are stored in the contract/artifacts directory.

Task 3.3 Test

We skip unit test here again.

Task 3.4 Deploy

There are deployment scripts in Remix IDE which we can use by default. We don't need to make any changes.

Go to Deploy and Run Tab in Remix IDE. Deploy "Greeter.sol" in 9 steps:

STEP 1: make sure "Greeter.sol" has already been compiled successfully.
STEP 2: make sure MetaMask switched to localhost network and account switched to the related hardhat account.
STEP 3: make sure Environment changed to "Injected Web3". And the Account is the related hardhat testnet account.
STEP 4: leave Gas Limit and Value as default.
STEP 5: choose Contract: "Greeter - contract/Greeter.sol"
STEP 6: leave deploy variable string_greeting to be blank or input any string you like.
STEP 7: click Deploy button.
STEP 8: confirm the transaction in MetaMask popup.
STEP 9: check deploy transaction receipt in Remix IDE console.

status  true Transaction mined and execution succeed
from    0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
to  Greeter.(constructor)
gas 505392 gas
transaction cost    505392 gas 
input   0x608...00000
decoded input   {
    "string _greeting": "My first DAPP"
}

Task 3.5 Interact with the deployed smart contract

STEP 1: get the initial greet which is set in the deployment process by clicking the greet Deep Blue button.
STEP 2: setGreeting to "My first Dapp", and confirm in MetaMask popup.
STEP 3: get greet again. It should be: "My first Dapp".

We finished our first DAPP - Smart contract + web interface + MetaMask wallet.

In the next task, we will write an ERC20 token smart contract using popular solidity library OpenZeppelin.

Task 4: Second semi-DApp - ERC20 Token

The most common use case of DApp is based on tokens (ERC20, ERC721, ERC1155) on ethereum as assets.

We will not write a token smart contract from scratch. Instead, we will inherit from popular solidity library OpenZeppelin. The best practice of token smart contract development is using verified ones instead of reinventing the wheel.

Task 4.1 ERC20 using OpenZeppelin

Write an ERC20 token "ClassToken" (symbol:CLT) in "contracts/ClassToken.sol"

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/ERC20.sol";

contract ClassToken is ERC20 {
        constructor() ERC20("ClassToken", "CLT") {
        _mint(msg.sender, 10000*1e18);
        }
}

Please note that we import OpenZeppelin from a GitHub file. In local development environments like Hardhat or Truffle, we install @openZeppelin/contracts and import like this:

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

Information about this ERC20 token:

Name and symbol: ClassToken, CLT
Decimals: 18
InitialSupply: 10000.0 CLT, mint to deployer(msg.sender)

Task 4.2 Compile

Compile "ClassToken.sol" in Remix Compile Tab.

Task 4.3 Test

We skip unit test here again.

Task 4.4 Deploy

In Deploy and Run Tab, deploy to local testnet.

Click Deploy button.

The deployed smart contract is shown on the left panel. Click to show the functions we can "call" or "send".

ERC20 is a smart contract standard for token. It has standardized interface (OpenZeppelin docs):

FUNCTIONS

name()
symbol()
decimals()
totalSupply()
balanceOf(account)
transfer(recipient, amount)
allowance(owner, spender)
approve(spender, amount)
...

Task 4.5 Read token information

There are several read-only functions of ERC20 Standard token smart contract.

decimals(), 18
name, ClassToken
symbol, CLT
initialSupply, 10000000000000000000000, which means 10000.0 CLT token.

We can query token balance of an address by calling balanceOf:

input: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
output: 10000000000000000000000, which means 10000.0 CLT token.

Task 4.6 Send token by calling `transfer`

Click the arrow of transfer button, enter inputs:

input: recipient 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (Account #1)
input: amount 100000000000000000000 (100.0 CLT)

Confirm the transaction in MetaMask popup. Once successful, the receipt of the transaction will be displayed on Remix IDE console.

Get the balance of CLT of addresses:

0x70997970c51812dc3a010c7d01b50e0d17dc79c8
100000000000000000000 (100.0 CLT)
0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
9900000000000000000000 (9900.0 CLT)

The PrivateKey of 0x70997970c51812dc3a010c7d01b50e0d17dc79c8(Account #1) is 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d

You can add this account (Account #1) and token to MetaMask to interact with ERC20 smart contract from this account.

Task 4.7 Add token to MetaMask

MetaMask may not display ClassToken(CLT) on assets list automatically. We need to add it to assets list with contract address(token address).

You can click "import tokens" to add. We will input the token smart contract address: 0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9. Please input the address of your deployed ClassToken.

CLT is in asset list in MetaMask now. You can see the balance of CLT and you can send CLT to others using MetaMask.

Useful Tips: reset MetaMask account nonce

When we play with localhost and MataMask several times, we can mess with the nonce (transaction count). Sometimes we can't send transactions with a messed nonce. When encountering this problem, you can reset MetaMask account nonce as follows:

Go to MetaMask > Setting > Advanced
Reset Account

Explanation by MetaMask:

Resetting your account will clear your transaction history. This will not change the balances in your accounts or require you to re-enter your Secret Recovery Phrase.

Task 5: Understanding approve, allowance and transferFrom

Task 5.1 Understanding transferFrom

There is an ingenious design in ERC20 token standard:

approve
transferFrom
allowance

What can we do with it:

you can grant another person an amount of token he can use by sending approve()
he can use the allowance by sending transferFrom()
everyone can check the allowance by calling allowance()

There are also two helpers decreaceAllowance() and increaseAllowance() in OpenZeppelin ERC20 implementation.

The definition of TransferFrom is:

transferFrom(address sender, address recipient, uint256 amount)

Let's play with the "approve-transferFrom" design.

5.2 try approve and transferFrom

We will use 3 accounts: Account #0, #1, #2. The private key of Account #1 #2 is:

Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8
Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d

Account #2: 0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC
Private Key: 0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a

STEP 1: import Account #1 and #2 to MetaMask

STEP 2: MetaMask in Account #0, approve Account #1 with 1000.0 CLT. Send approve():

spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#0
amount: 1000000000000000000000 (1000.0 CLT)

amount is uint256 with 18 decimals.

STEP 3: check allowance. Call allowance():

owner:0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#1

result is: 1000000000000000000000 (1000.0 CLT)

STEP 4: switch to Account#1

STEP 5: MetaMask in Account #1. Account #1 send TransferFrom() to sends token from Account #0 to Account #2:

sender: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
recipient: 0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC Account#2
amount: 500000000000000000000 (500.0 CLT)

STEP 6: check allowance again. The result is:

500000000000000000000 (500.0 CLT)

STEP 7: switch to Account#0 in MetaMask

STEP 8: set allowance to 0 approve() (called by Account#0):

spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#0
amount: 0

STEP 9: check allowance. Call allowance():

owner:0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#1

The result will be 0.

A security note from OpenZeppelin docs you should know:

Beware that changing an allowance with this method brings the risk that someone may use both the old and the new allowance by unfortunate transaction ordering. One possible solution to mitigate this race condition is to first reduce the spender’s allowance to 0 and set the desired value afterwards: https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729

In the next task, we will deploy "ClassToken" to public testnet such as Ropsten and Rinkeby. You can also try to deploy it to polygon, BSC(BNB Chain) and other EVM-compatible chains, as well as L2s (Layer-2) like Optimism and Arbitrum.

Task 6: Deploy to public testnet Ropsten

To deploy a smart contract to Ropsten test network, you need "Ropsten test ETH" in wallet. You can get from faucet: https://faucet.metamask.io/

Etherscan provide a block explorer for Ropsten: https://ropsten.etherscan.io/

Task 6.1 Compile / Test / Deploy

Deploy smart contract to Ropsten testnet in 5 steps:

STEP 1: switch MetaMask to Ropsten network and switch to your own account.

Note: don't use account provide by Hardhat testnet. Account #0, #1 are default accounts generated by Hardhat and many people know their private key.

STEP 2: Get test ETH (Ropsten testnet) at faucet for your account. You will need "test ETH" to pay gas fee.
STEP 3: In Remix IDE Deploy & Run Tab, make sure that the environment is "Injected Web3" connecting to network Ropsten (3) network.
STEP 4: Click Deploy Button and confirm in MetaMask popup. The deployment to public testnet Ropsten may take one or two minutes.
STEP 5: Once the smart contract is deployed successfully, you can view the transaction details at block explorer: https://ropsten.etherscan.io/

Task 6.2 Interact with contract in Remix

We can interact from Remix IDE just like Task 4.5-7.

Read token information
transfer token
add token to MetaMask and transfer between accounts.

You can view these transactions on https://ropsten.etherscan.io/ .

Task 6.3 Verify contract on Etherscan (API key needed)

We can interact with a smart contract directly when it is verified on Etherscan.

In sub-task 6.3 and 6.4, we will verify our smart contract on https://ropsten.etherscan.io/ and interact with it.

STEP 1: create an account at Etherscan.io
STEP 2: get API key at: https://etherscan.io/myapikey
STEP 3: In Remix IDE Plugin Manager, search and add "Etherscan - Contract Verification"
STEP 4: In "Etherscan - Contract Verification" plugin, input etherscan API key.
STEP 5: Verify the contract. Waiting for the verification to be completed.

Please note that "Verify" means two things:

We will publish the source code on etherscan.
The code is verified the same as the compiled and deployed code.

Task 6.4 Interact with contract on Etherscan

Once verified successfully, you can interact with smart at https://ropsten.etherscan.io/

STEP 1: click "Code" button. You can read the open source code.
STEP 2: click "Read Contract" button. We can call read-only functions of this ERC20 smart contract.
STEP 3: click "Write Contract" button.
STEP 4: connect to Web3. Before we can call state-change functions of the contract, we need to "connect to Web3" with MetaMask wallet first. Connect to MetaMask in the popup.
STEP 5: click "transfer", input variable, and confirm in the MetaMask popup.

To deploy smart contract and verify it on Ethereum mainnet is almost the same.

In the next optional task, we will deploy and verify contract on Polygon. The process is a little different.

Optional Task 7: Deploy and verify on Polygon

We will try to deploy to Polygon mainnet in Task 7.1-7.3. You need MATIC token on Polygon network to pay for gas fee.

You can add Polygon mainnet to your MetaMask using Chainlist.org.

Optional Task 7.1 Deploy contract to Polygon mainnet (MATIC needed)

To deploy contract to Polygon mainnet is almost the same as to Ropsten testnet.

Switch MetaMask network to Polygon mainnet
Deploy in Environment "Injected Web3" (Connect to Custom(137) network). It may take a few minutes.
View contract at polygon's block explorer : https://polygonscan.com/

polygonscan.com is also built by the Etherscan team.

Optional Task 7.2 Verify contract on Polygonscan （website）

There is no handy plugin to verify contract on Polygonscan.com in Remix IDE. You can do it manually in 8 steps:

STEP 1: Create an account at polygonscan.com
STEP 2: Search by the deployed contract address and go to contract page.
STEP 3: Click "Contract" tab on that page. There is only ByteCode in it. Click the "Verify and Publish" link to verify.
STEP 4: Fill the form to verify contract.

Compile Type choose: Solidity(Single File)
Compiler Version: choose the same one as that in Remix IDE compiler Tab

We need some help to make our smart contract into a single file as we inherited ClassToken from OpenZeppelin ERC20 contract and they are in several files now. There is Remix IDE plugin Flattener we can use here.

STEP 5: Backup ClassToken.sol first as Flattener will change it.
STEP 6: In Flattener Plugin, click button "Flatten contracts/ClassToken.sol". It will make the smart contract which inherits from OpenZeppelin ERC20 to one file. This process is called "Flatten".
STEP 7: paste the flattened contract code to polygonscan explorer verify page.
STEP 8: wait the verify process to be completed. It will take about a minute depending on the polygon network status.

Optional Task 7.3 Interact with contract on Polygonscan block explorer

Once the contract is verified on Polygonscan, you can interact with it just like Task 6.4

After completing these tasks in this tutorial, you already know how to compile, deploy and interact smart contract with the help of Remix IDE and Etherscan on local testnet, public testnet Ropsten and Polygon mainet.

The smart contract, Remix IDE / Etherscan and MetaMask wallet together are DApp(or Semi-DApp in this tutorial): smart contract on chain, web app based on Remix IDE / Etherscan, MetaMask wallet controlled by the user.

I will publish another two tutorials to build DApp with smart contract and real web front-end user interface using Node.js, Ethers.js and Web3-React. Then we will have a real DApp instead of a semi-DAPP here.

Useful Notes: The magic behind DApps

The most magical part behind DApps is the immutable data layer which can be computed with smart contracts which can only be triggered by user wallet. Quote from ethereum.org:

DApps have their backend code (smart contracts) running on a decentralized network and not a centralized server. They use the Ethereum blockchain for data storage and smart contracts for their app logic.

A smart contract is like a set of rules that live on-chain for all to see and run exactly according to those rules. Imagine a vending machine: if you supply it with enough funds and the right selection, you'll get the item you want. And like vending machines, smart contracts can hold funds much like your Ethereum account. This allows code to mediate agreements and transactions.

Once DApps are deployed on the Ethereum network you can't change them. DApps can be decentralized because they are controlled by the logic written into the contract, not an individual or a company.

Tutorial List:

6. Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin(7 Tasks)

https://dev.to/yakult/tutorial-write-upgradeable-smart-contract-proxy-contract-with-openzeppelin-1916

7. Tutorial: Build an NFT marketplace DApp like Opensea(5 Tasks)

https://dev.to/yakult/tutorial-build-a-nft-marketplace-dapp-like-opensea-3ng9

If you find this tutorial helpful, follow me at Twitter @fjun99