Overview

ERC20 tokens are widely used on the Ethereum blockchain. Ethers.js is a library that allows you to interact with the Ethereum blockchain and smart contracts, including ERC20 tokens. In this guide, we will cover how to connect to an Ethereum wallet, check token balances, transfer tokens, and approve token spending using Ethers.js.

1. Setting Up Your Project

First, create a new project and install Ethers.js:

        
            npx create-react-app my-erc20-app
            cd my-erc20-app
            npm install ethers
            

2. Connecting to an Ethereum Wallet

To interact with ERC20 tokens, you need to connect to an Ethereum wallet (like MetaMask). Below is an example of how to connect to a wallet using Ethers.js:

        
            // src/App.js
            import React, { useEffect, useState } from 'react';
            import { ethers } from 'ethers';

            function App() {
                const [account, setAccount] = useState(null);
                const [provider, setProvider] = useState(null);

                useEffect(() => {
                    const connectWallet = async () => {
                        if (window.ethereum) {
                            const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                            setAccount(accounts[0]);
                            const provider = new ethers.providers.Web3Provider(window.ethereum);
                            setProvider(provider);
                        } else {
                            alert("Please install MetaMask!");
                        }
                    };
                    connectWallet();
                }, []);

                return (
                    

                        
ERC20 Token Interaction

                        {account ? 
Connected account: {account}
 : Connect Wallet}
                    

                );
            }

            export default App;
            

3. Interacting with ERC20 Tokens

To interact with an ERC20 token, you need its contract address and ABI (Application Binary Interface). Below is the standard ERC20 ABI:

        
            const erc20Abi = [
                "function balanceOf(address owner) view returns (uint256)",
                "function transfer(address to, uint256 value) returns (bool)",
                "function approve(address spender, uint256 value) returns (bool)",
                "function allowance(address owner, address spender) view returns (uint256)"
            ];
            

4. Checking Token Balance

Once you have the contract address and ABI, you can create a contract instance and check the token balance:

        
            const tokenAddress = "TOKEN_CONTRACT_ADDRESS"; // Replace with your token contract address

            const checkBalance = async () => {
                if (provider && account) {
                    const tokenContract = new ethers.Contract(tokenAddress, erc20Abi, provider);
                    const balance = await tokenContract.balanceOf(account);
                    console.log("Token Balance:", ethers.utils.formatUnits(balance, 18)); // Assuming 18 decimals
                }
            };
            

5. Transferring Tokens

You can also transfer tokens to another address using the `transfer` function:

        
            const transfer = async (to, amount) => {
                if (provider && account) {
                    const signer = provider.getSigner();
                    const tokenContract = new ethers.Contract(tokenAddress, erc20Abi, signer);
                    const tx = await tokenContract.transfer(to, ethers.utils.parseUnits(amount, 18)); // Assuming 18 decimals
                    await tx.wait();
                    console.log("Transfer successful:", tx);
                }
            };
            

6. Approving Token Spending

To allow another address (like a smart contract) to spend your tokens, you can use the `approve` function:

        
            const approveSpending = async (spender, amount) => {
                if (provider && account) {
                    const signer = provider.getSigner();
                    const tokenContract = new ethers.Contract(tokenAddress, erc20Abi, signer);
                    const tx = await tokenContract.approve(spender, ethers.utils.parseUnits(amount, 18)); // Assuming 18 decimals
                    await tx.wait();
                    console.log("Approval successful:", tx);
                }
            };
            

Conclusion

In this guide, we covered how to interact with ERC20 tokens using Ethers.js. We set up a project, connected to an Ethereum wallet, checked token balances, transferred tokens, and approved token spending. This knowledge is essential for building decentralized applications that utilize ERC20 tokens on the Ethereum blockchain.