Mastering ERC20 Tokens: A Comprehensive Guide for Web3 Developers

10 min readMay 1, 2024

A. Introduction

In the ever-evolving world of blockchain, creating tokens has become as essential as adding avocado to toast! ERC20 tokens, the “cool kids” on the Ethereum blockchain, are the go-to for making fungible tokens with all the right features. Mastering ERC20 development is like unlocking a secret level for blockchain devs, opening doors to building decentralized apps and adding sparkle to the Web3 world.

This guide is your trusty sidekick, here to help you navigate the world of ERC20 token development, all from the comfort of your offline development cave. By following along, you’ll learn how to create, deploy, and play with ERC20 tokens locally, peeling back the layers of blockchain like a pro.

So, whether you’re a seasoned developer looking to level up your blockchain game or a curious newbie eager to dive into the world of token development, this guide has your back. Get ready to whip up some Web3 tokens with swagger! HAHAHAHA

B. Background

The blockchain boom has turned industries upside down, offering decentralized solutions that are as clear as a freshly cleaned window. At the core of this revolution are smart contracts, the digital maestros of agreements, written in code and executing themselves. Ethereum, the cool kid on the blockchain block, brought us smart contracts, letting developers create dApps and digital goodies.

Enter ERC20, the superhero standard for creating digital tokens on Ethereum. These tokens follow rules that make them super compatible with any app or platform that speaks ERC20. They’re the backbone of ICOs and the lifeblood of DeFi, gaming, and digital collectibles.

Creating ERC20 tokens is like baking a cake: you need to understand Ethereum’s blockchain, smart contracts, and token standards. While many developers are used to deploying smart contracts on public testnets or the Ethereum mainnet, cooking up tokens in an offline kitchen is safer and lets you experiment without setting anything on fire.

In this guide, we’ll show you how to whip up some ERC20 tokens locally using the Hardhat development environment. By the end, you’ll have hands-on experience in token development, ready to strut your stuff in the Web3 world with flair and confidence.

C. Requirements: Software and Hardware Needed for Developing ERC20 Tokens Locally

To develop ERC20 tokens locally, you will need the following software and hardware:

Operating System: Any major operating system such as Windows, macOS, or Linux. However, for the purpose of this guide, we will use Ubuntu Linux.
Text Editor: A code editor such as Visual Studio Code, Atom, or Sublime Text for writing and editing Solidity smart contracts.
Node.js and npm: Node.js is a JavaScript runtime that allows you to run JavaScript on the server-side. npm is a package manager for Node.js packages.
Hardhat: A development environment for Ethereum smart contracts. Hardhat provides a built-in Ethereum network for testing and deploying smart contracts.
Ganache: A personal blockchain for Ethereum development that you can use to test your smart contracts locally.
Solidity Compiler: A Solidity compiler such as solc, which is included with Hardhat, to compile your Solidity smart contracts into bytecode.
Web3.js: A library that allows you to interact with the Ethereum blockchain using JavaScript. Web3.js will be used to deploy and interact with your ERC20 token contract.
MetaMask: A cryptocurrency wallet and gateway to blockchain apps. MetaMask will be used to interact with your ERC20 token contract through a web browser.
Terminal: A terminal or command line interface for running commands and scripts.
Internet Connection: A stable internet connection is required to download software packages and interact with the Ethereum blockchain.

By having these software and hardware requirements in place, you will be able to successfully develop ERC20 tokens locally and gain valuable experience in blockchain development.

D. Development Steps

Step 1: Set Up Hardhat Project

Install Node.js and npm from their official website nodejs.org
Create a project directory and navigate into it
Initialize the npm project by running

npm init -y

4. Install Hardhat by running

npm install --save-dev hardhat

Step 2: Configure Hardhat

Create a file named `hardhat.config.js` in your project directory and set the permissions to allow access only to the user

echo "" > hardhat.config.js

2. Configure the file with the following settings using a text editor:

require('@nomiclabs/hardhat-waffle');
module.exports = {
  solidity: "0.8.20",
  networks: {
    hardhat: {
      chainId: 1337
    }
  }
};

Step 3: Create ERC-20 Smart Contract

Create a directory named contracts inside your project directory

mkdir contracts
cd contracts

2. Within the contracts directory, generate a file named Token.sol with permissions restricted to the user

echo "" > Token.sol

3. Define your crypto token contract in the Token.sol file using a text editor:

// contracts/Token.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

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

contract Token is ERC20 {
    constructor() ERC20("MyToken", "MTK") {
        _mint(msg.sender, 1000000 * (10 ** decimals()));
    }
}

4. Install OpenZeppelin Contracts with the command

npm install @openzeppelin/contracts

Step 4: Deploy Contract to Local Network

Create a directory named scripts inside your project directory

mkdir scripts
cd scripts

2. Within the scripts directory, generate a file named deploy.js with permissions restricted to the user

echo "" > deploy.js

3. Configure the file with the following settings using a text editor:

// scripts/deploy.js
async function main() {
    const Token = await ethers.getContractFactory("Token");
    const token = await Token.deploy();
    console.log("Token deployed to:", token.address);
}

main()
    .then(() => process.exit(0))
    .catch((error) => {
        console.error(error);
        process.exit(1);
    });

4. Run the local Hardhat network in terminal with the command

Terminal 1

npx hardhat node

5. Deploy Smart Contract. Use the command in the new terminal to deploy the smart contract to the local network

Terminal 2

npx hardhat run scripts/deploy.js --network localhost

6. Upon successful deployment of the token on Hardhat, the contract address will be displayed. Don’t get too excited thinking your token is strolling down the streets of Paris! Here, ‘Paris’ is just a fun codename for a specific version of the Ethereum Virtual Machine (EVM) haha

Step 5: Connect with MetaMask

Add a custom network in MetaMask using the RPC URL and Chain ID from the Hardhat configuration ( http://127.0.0.1:8545/ and 1337)

2. Import MetaMask account using the private key provided by Hardhat when running

! Don’t run this command twice, because in the previous stage we already ran it in Terminal 1, okay?

Terminal 1

npx hardhat node

3. Obtain the address associated with the private key and import it into MetaMask for further use. Private key is a confidential information that should not be disclosed, especially when running `npx hardhat node`, as it provides full access to the associated Ethereum account

4. Click on the “Account” icon at the top center of the initial MetaMask display

5. “Add Account or Hardware Wallet” and Select “Import Account”

6. Paste the private key you have obtained, select one of the private keys, and finally, Import

7. A new account will appear with an initial balance that matches the amount of ETH held by the account on your Hardhat node

Step 6: Interact with the Contract using a DApp

Create a simple user interface (UI) with JavaScript, HTML and CSS your project directory

mkdir ui
cd ui
touch app.js index.html style.css

2. The crypto-wallet project consists of an `app.js` for additional interaction logic if needed, `index.html` file for the page layout, and `style.css` for visual styling

3. In an app.js file, add elements to display information and buttons to interact with smart contracts. Example:

// Initializing Web3.js
let web3 = new Web3(Web3.givenProvider || "http://localhost:8545");

// Define contract ABI and contract address
let contractABI = [
          'Define contract ABI'
];
let contractAddress = 'Define contract address';

// Set provider for your contract
let contract = new web3.eth.Contract(contractABI, contractAddress);

// Function to interact with the contract
function interactWithContract() {
    let functionName = document.getElementById("functionName").value;
    let functionParams = document.getElementById("functionParams").value;
    
    // Call contract function
    contract.methods[functionName](functionParams).call()
        .then(result => {
            document.getElementById("result").innerText = result;
        })
        .catch(error => {
            console.error(error);
            document.getElementById("result").innerText = "Error interacting with contract.";
        });
}

4. In an HTML file, add elements to display information and buttons to interact with smart contracts. Example:

<!DOCTYPE html>
<html>
<head>
    <title>DApp UI</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>DApp UI</h1>
    <form id="interactionForm">
        <label for="contractAddress">Contract Address:</label>
        <input type="text" id="contractAddress" name="contractAddress"><br><br>
        <label for="functionName">Function Name:</label>
        <input type="text" id="functionName" name="functionName"><br><br>
        <label for="functionParams">Function Parameters:</label>
        <input type="text" id="functionParams" name="functionParams"><br><br>
        <button type="button" onclick="interactWithContract()">Interact with Contract</button>
    </form>
    <div id="result"></div>
    <script src="https://cdn.jsdelivr.net/npm/web3@1.0.0/dist/web3.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

5. In an CSS file, add buttons to interact with smart contracts. Example:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
    text-align: center;
}

form {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#result {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 3px;
}

6. Use Web3.js to interact with the smart contract on the local network. Make sure you have adjusted the contract address (contractAddress) and contract ABI (abi) to match your own smart contract

7. Contract ABI are like treasure chests in artifact directories, storing all the compiled goodies, including ABIs, for easy access during development and deployment in frameworks like Truffle or Hardhat

8. Run your application and ensure MetaMask is connected to your Hardhat network. To install http-server globally if it’s not installed yet, use the command

npm install -g http-server
cd (path_to_your_project)
http-server

9. Run your project’s application with a browser

10. Add functions to transfer tokens, view balances, etc

E. Example Usage

ERC20 tokens can be used in various applications and blockchain projects. Here are some examples of how ERC20 tokens are commonly used:

Crowdfunding and ICOs: Imagine buying tokens for a new project with ETH, and in return, you get a virtual stake in the project! It’s like buying a ticket to a future success party!
Decentralized Exchanges (DEXs): Trading ERC20 tokens on platforms like Uniswap is as easy as swapping stickers with friends, but with the potential for profit!
Staking and Yield Farming: Stake your tokens and watch them grow like plants in a garden! Or provide liquidity and become a farmer in the world of DeFi!
Gaming and Digital Collectibles: Play games, earn tokens, and collect unique digital items that can be traded or used in various games. It’s like having a treasure trove of virtual goodies!
Governance and Voting: Holders can use their tokens to vote on project decisions. It’s like having a say in how your favorite show should end!
Asset Tokenization: Tokenize real-world assets like art or real estate, turning them into digital tokens that can be bought, sold, and traded easily. It’s like owning a piece of the Mona Lisa without the security guards!
Cross-Border Payments: Send tokens to anyone in the world with an Ethereum address, and they’ll receive it almost instantly. It’s like sending an email, but with money!

These examples show how ERC20 tokens can be fun, versatile, and useful in various blockchain applications, making them an integral part of the Ethereum ecosystem.

F. Conclusion:

By following the above steps, you can create your own ERC-20 crypto token using Hardhat and connect it to MetaMask. Make sure to perform thorough testing and security checks before deploying to a production environment.

G. References:

For further learning, readers are encouraged to explore the following resources:

Ethereum Developer Documentation
OpenZeppelin Contracts Documentation

H. GitHub Project Link:

For those interested in exploring the code and related projects, the GitHub repository for learning Web3 and DApp development can be found at the following link:

ethereumbook/ethereumbook: This repository contains code examples and other resources supporting the book “Mastering Ethereum” by Andreas M. Antonopoulos and Gavin Wood.
ChainSafe/web3.js: Web3.js is a popular JavaScript library used for interacting with Ethereum nodes. This repository contains the source code and documentation for Web3.js.
ethereum/dapp-bin: This repository contains a collection of contracts and decentralized applications (DApps) built on top of Ethereum.
OpenZeppelin/openzeppelin-contracts: OpenZeppelin Contracts is a library of secure and tested standard Ethereum contracts. This repository contains smart contracts that you can use and learn from.
trufflesuite/truffle: Truffle is a development framework for Ethereum that provides tools and development environments for building Ethereum applications. This repository contains the source code and documentation for Truffle.