Overview

Making a dApp that requires ERC20 token data can be tedious since there are numerous tokens, and one needs to query each token contract to get the data. This guide will show how we can build a ERC20 token balance app with QuickNode Token API.

What You Will Need

Node v14 or later.
Knowledge of HTML, CSS, JavaScript & React.
Ethers.js & TailwindCSS libraries.
A QuickNode Ethereum node with Token API.
A code editor (i.e., VScode).

What You Will Do

Learn about the traditional method of fetching ERC20 token data.
Learn about QuickNode Token API and its different methods.
Boot a QuickNode Ethereum node with Token API.
Create a React app to display ERC20 token balances of a particular wallet using QuickNode Token API and Ethers.js library along with Tailwind CSS for styling.

The Traditional way

To get token data like the balance for a specific ERC20 token, one needs to query the smart contract of that particular token. Multiple smart contracts need to be queried when you want to obtain data for multiple tokens. In this process, one needs to query the contract with the help of contract ABI; this creates a lot of redundant code, which also needs to be maintained. Learn how to get token balances using this method in this guide.

QuickNode Token API makes this process very easy and short. In the next section, we will learn more about the Token API and its methods.

What is QuickNode's Token API?

QuickNode Token API is an API using which a user can get token metadata, balances, and transfer histories of ERC20 tokens for a wallet on the Ethereum mainnet. While using the Token API, the user must make a method call to the QuickNode RPC without the need to query smart contracts. The following are the methods of QuickNode Token API:

qn_getTokenMetadataByContractAddress: A user can get metadata of a specific ERC20 by using that token's contract address.
qn_getTokenMetadataBySymbol: Using this method, a user can get metadata of a specific ERC20 by using that token's symbol (WETH, USDT, MATIC, etc).
qn_getWalletTokenBalance: A user can get all the ERC20 tokens of a wallet address along with their balances.
qn_getWalletTokenTransactions: The transfer history of a particular ERC20 token for a wallet address can be retrieved; the wallet address and the token's contract address need to be used as parameters.

Now that we have learned about QuickNode Token API, let us boot a QuickNode Ethereum mainnet endpoint and create a small Token app in the upcoming sections.

How to create an ERC20 Token Balance App with QuickNode Token API

Now that we know about the Token API and have a QuickNode RPC with Token API let us create a small React app to show balances of ERC20 tokens for a given address. To do so, let us install some libraries/dependencies we will use.

Copy-paste the following into your terminal/command prompt

how to create an erc20 token balance app with quicknode token api

Copy

npx create-react-app token_wallet

npx create-react-app token_wallet

This will create a new directory, token_wallet, with the required React components.

We will need ethers.js to connect our QuickNode node to the React app and Tailwind CSS for styling our React app. Go to the recently created directly and copy-paste the following in your terminal/command prompt to install ethers and Tailwind CSS:

how to create an erc20 token balance app with quicknode token api

Copy

cd token_wallet
npm install ethers
npx tailwindcss init -p

cd token_wallet
npm install ethers
npx tailwindcss init -p

We need to let Tailwind know about the file's path, which needs styling, so open your project directory in a code editor, open the tailwind.config.js file, and modify the config to look like this:

how to create an erc20 token balance app with quicknode token api

Copy

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

After saving the above file, navigate to src/index.js in your code editor and add the following line between lines 9 and 10:

how to create an erc20 token balance app with quicknode token api

Copy

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />

This will import Tailwind's utility classes.

The app we are creating will have a form input field and a submit button. Once an address is input and the button is clicked, using the Token API, ERC20 token data will be retrieved for the imputed address and displayed

Start building by going to src/app.js in your code editor and pasting the following code:

how to create an erc20 token balance app with quicknode token api

Copy

import { useState } from 'react';
import { ethers, utils } from "ethers";

function App() {
  //State variables
  const [tokens, setTokens] = useState([])
  const [address, setAddress] = useState('')
}
export default App;

import { useState } from 'react';
import { ethers, utils } from "ethers";

function App() {
  //State variables
  const [tokens, setTokens] = useState([])
  const [address, setAddress] = useState('')
}
export default App;

In the above code, on

Line 1-2: we're importing the React useState hook to track our input wallet address and ethers library to connect our app with the Ethereum blockchain using QuickNode.

Line 4-7: Starting our React app named App and declaring two state variables to store token data and another to store input address, respectively.

Now add the following on line 9:

how to create an erc20 token balance app with quicknode token api

Copy

  //Function to handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    setAddress(address);
    fetchTokens() 
    .then(data => {
      setTokens(data.assets)
    })
    .catch(err => setTokens([]))
  }

  //Function to fetch tokens
  const fetchTokens = async () => {
    if (!utils.isAddress(address)){
      alert('Please enter a valid Ethereum wallet address')
      return;
    }
    const provider = new ethers.providers.JsonRpcProvider("YOUR-QUICKNODE-HTTP-URL-HERE");
    const tokens = await provider.send("qn_getWalletTokenBalance", {
      wallet: address,
      contracts: [
        '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', //WETH
        '0xdAC17F958D2ee523a2206206994597C13D831ec7', //USDT
        '0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0', //MATIC
        '0xC18360217D8F7Ab5e7c516566761Ea12Ce7F9D72', //ENS
      ]
    });
    return tokens
  }

  //Function to handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    setAddress(address);
    fetchTokens() 
    .then(data => {
      setTokens(data.assets)
    })
    .catch(err => setTokens([]))
  }

  //Function to fetch tokens
  const fetchTokens = async () => {
    if (!utils.isAddress(address)){
      alert('Please enter a valid Ethereum wallet address')
      return;
    }
    const provider = new ethers.providers.JsonRpcProvider("YOUR-QUICKNODE-HTTP-URL-HERE");
    const tokens = await provider.send("qn_getWalletTokenBalance", {
      wallet: address,
      contracts: [
        '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', //WETH
        '0xdAC17F958D2ee523a2206206994597C13D831ec7', //USDT
        '0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0', //MATIC
        '0xC18360217D8F7Ab5e7c516566761Ea12Ce7F9D72', //ENS
      ]
    });
    return tokens
  }

Replace YOUR-QUICKNODE-HTTP-URL-HERE with QuickNode's HTTP Provider link we got in the last step.

In the above code, on

Line 10-18: We're writing a function handleSubmit to handle the form submission event; basically, it is changing the state of the address variable to store the imputed address's value, then calling the function fetchTokens, then changing the state of the tokens variable to store token data.

Line 20-37: A function fetchTokens to fetch tokens. First, an if statement to check if the input address is a valid Ethereum address or not using the ethers isAddress function. Then connecting to QuickNode Ethereum node. Making a Token API call to get wallet tokens by passing the address as a parameter along contract addresses of WETH, USDT, MATIC, and ENS to get these specific token's data. Then Returning tokens

On line 38, paste the following code:

how to create an erc20 token balance app with quicknode token api

Copy

//JSX code
  return(
    <div className="h-screen w-screen justify-center space-x-3">  
      <div className="flex justify-center space-x-3 w-screen h-14 mt-10">
        <form 
            onSubmit={handleSubmit}
            className="w-4/12 h-15 relative block overflow-hidden rounded-md border border-gray-200 px-3 pt-3 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600 dark:border-gray-700 dark:bg-gray-800"> 
            <input
                onChange={e => setAddress(e.target.value)}
                type="text"
                placeholder="Enter your Address here 🎯"
                className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
            />
            <button
            type='submit'
            className="rounded-lg top-1 right-1 bottom-1 border absolute w-12 justify-center bg-blue-400 text-white p-3 font-bold uppercase"
            >
            GO
            </button>
        </form>
      </div>
      <div className="relative top-4/12 left-1/4 overflow-x-auto justify-center space-x-3 w-6/12 h-140 m-10">
        <table className="min-w-full divide-y-2 divide-gray-200 text-sm">
          <thead>
            <tr>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-1000">
                Name
              </th>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
                Symbol
              </th>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
                Balance
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {tokens.map((token, index) => (
              <tr key={index}>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.name}</td>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.symbol}</td>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{utils.formatUnits(token.amount, token.decimals)}</td>
              </tr>
            ))}  
          </tbody>
        </table>
      </div>
    </div>
  );

//JSX code
  return(
    <div className="h-screen w-screen justify-center space-x-3">  
      <div className="flex justify-center space-x-3 w-screen h-14 mt-10">
        <form 
            onSubmit={handleSubmit}
            className="w-4/12 h-15 relative block overflow-hidden rounded-md border border-gray-200 px-3 pt-3 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600 dark:border-gray-700 dark:bg-gray-800"> 
            <input
                onChange={e => setAddress(e.target.value)}
                type="text"
                placeholder="Enter your Address here 🎯"
                className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
            />
            <button
            type='submit'
            className="rounded-lg top-1 right-1 bottom-1 border absolute w-12 justify-center bg-blue-400 text-white p-3 font-bold uppercase"
            >
            GO
            </button>
        </form>
      </div>
      <div className="relative top-4/12 left-1/4 overflow-x-auto justify-center space-x-3 w-6/12 h-140 m-10">
        <table className="min-w-full divide-y-2 divide-gray-200 text-sm">
          <thead>
            <tr>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-1000">
                Name
              </th>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
                Symbol
              </th>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
                Balance
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {tokens.map((token, index) => (
              <tr key={index}>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.name}</td>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.symbol}</td>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{utils.formatUnits(token.amount, token.decimals)}</td>
              </tr>
            ))}  
          </tbody>
        </table>
      </div>
    </div>
  );

The above code is basic HTML in JS (JSX) and Tailwind styling. The few worth noting lines are:

Line 44: Calling the handleSubmit function on form submission.

Line 47: Getting the current value of the input field and setting it to setAddress.

Line 79: Mapping the token data in the tokens array.

Line 81: Printing the token's name, symbol, and balance (formatting the units based on that token's decimal values).

Note: The app will only display balances of tokens which me added in the contracts section of the RPC.

Save the file, and the final file should look like this:

how to create an erc20 token balance app with quicknode token api

Copy

import { useState } from 'react';
import { ethers, utils } from "ethers";

function App() {
  //State variables
  const [tokens, setTokens] = useState([])
  const [address, setAddress] = useState('')

  //Function to handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    setAddress(address);
    fetchTokens() 
    .then(data => {
      setTokens(data.assets)
    })
    .catch(err => setTokens([]))
  }

  //Function to fetch tokens
  const fetchTokens = async () => {
    if (!utils.isAddress(address)){
      alert('Please enter a valid Ethereum wallet address')
      return;
    }
    const provider = new ethers.providers.JsonRpcProvider("YOUR-QUICKNODE-HTTP-URL-HERE");
    const tokens = await provider.send("qn_getWalletTokenBalance", {
      wallet: address,
      contracts: [
        '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', //WETH
        '0xdAC17F958D2ee523a2206206994597C13D831ec7', //USDT
        '0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0', //MATIC
        '0xC18360217D8F7Ab5e7c516566761Ea12Ce7F9D72', //ENS
      ]
    });
    return tokens
  }
  
  //JSX code
  return(
    <div className="h-screen w-screen justify-center space-x-3">  
      <div className="flex justify-center space-x-3 w-screen h-14 mt-10">
        <form 
            onSubmit={handleSubmit}
            className="w-4/12 h-15 relative block overflow-hidden rounded-md border border-gray-200 px-3 pt-3 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600 dark:border-gray-700 dark:bg-gray-800"> 
            <input
                onChange={e => setAddress(e.target.value)}
                type="text"
                placeholder="Enter your Address here 🎯"
                className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
            />
            <button
            type='submit'
            className="rounded-lg top-1 right-1 bottom-1 border absolute w-12 justify-center bg-blue-400 text-white p-3 font-bold uppercase"
            >
            GO
            </button>
        </form>
      </div>
      <div className="relative top-4/12 left-1/4 overflow-x-auto justify-center space-x-3 w-6/12 h-140 m-10">
        <table className="min-w-full divide-y-2 divide-gray-200 text-sm">
          <thead>
            <tr>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-1000">
                Name
              </th>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
                Symbol
              </th>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
                Balance
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {tokens.map((token, index) => (
              <tr key={index}>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.name}</td>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.symbol}</td>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{utils.formatUnits(token.amount, token.decimals)}</td>
              </tr>
            ))}  
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default App;

import { useState } from 'react'; import { ethers, utils } from "ethers"; function App() { //State variables const [tokens, setTokens] = useState([]) const [address, setAddress] = useState('') //Function to handle form submission const handleSubmit = (e) => { e.preventDefault(); setAddress(address); fetchTokens() .then(data => { setTokens(data.assets) }) .catch(err => setTokens([])) } //Function to fetch tokens const fetchTokens = async () => { if (!utils.isAddress(address)){ alert('Please enter a valid Ethereum wallet address') return; } const provider = new ethers.providers.JsonRpcProvider("YOUR-QUICKNODE-HTTP-URL-HERE"); const tokens = await provider.send("qn_getWalletTokenBalance", { wallet: address, contracts: [ '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', //WETH '0xdAC17F958D2ee523a2206206994597C13D831ec7', //USDT '0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0', //MATIC '0xC18360217D8F7Ab5e7c516566761Ea12Ce7F9D72', //ENS ] }); return tokens } //JSX code return( <div className="h-screen w-screen justify-center space-x-3"> <div className="flex justify-center space-x-3 w-screen h-14 mt-10"> <form onSubmit={handleSubmit} className="w-4/12 h-15 relative block overflow-hidden rounded-md border border-gray-200 px-3 pt-3 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600 dark:border-gray-700 dark:bg-gray-800"> <input onChange={e => setAddress(e.target.value)} type="text" placeholder="Enter your Address here 🎯" className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm" /> <button type='submit' className="rounded-lg top-1 right-1 bottom-1 border absolute w-12 justify-center bg-blue-400 text-white p-3 font-bold uppercase" > GO </button> </form> </div> <div className="relative top-4/12 left-1/4 overflow-x-auto justify-center space-x-3 w-6/12 h-140 m-10"> <table className="min-w-full divide-y-2 divide-gray-200 text-sm"> <thead> <tr> <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-1000"> Name </th> <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900"> Symbol </th> <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900"> Balance </th> </tr> </thead> <tbody className="divide-y divide-gray-200"> {tokens.map((token, index) => ( <tr key={index}> <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.name}</td> <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.symbol}</td> <td className="whitespace-nowrap px-4 py-2 text-gray-900">{utils.formatUnits(token.amount, token.decimals)}</td> </tr> ))} </tbody> </table> </div> </div> ); } export default App;

import { useState } from 'react';
import { ethers, utils } from "ethers";

function App() {
  //State variables
  const [tokens, setTokens] = useState([])
  const [address, setAddress] = useState('')

  //Function to handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    setAddress(address);
    fetchTokens() 
    .then(data => {
      setTokens(data.assets)
    })
    .catch(err => setTokens([]))
  }

  //Function to fetch tokens
  const fetchTokens = async () => {
    if (!utils.isAddress(address)){
      alert('Please enter a valid Ethereum wallet address')
      return;
    }
    const provider = new ethers.providers.JsonRpcProvider("YOUR-QUICKNODE-HTTP-URL-HERE");
    const tokens = await provider.send("qn_getWalletTokenBalance", {
      wallet: address,
      contracts: [
        '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', //WETH
        '0xdAC17F958D2ee523a2206206994597C13D831ec7', //USDT
        '0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0', //MATIC
        '0xC18360217D8F7Ab5e7c516566761Ea12Ce7F9D72', //ENS
      ]
    });
    return tokens
  }
  
  //JSX code
  return(
    <div className="h-screen w-screen justify-center space-x-3">  
      <div className="flex justify-center space-x-3 w-screen h-14 mt-10">
        <form 
            onSubmit={handleSubmit}
            className="w-4/12 h-15 relative block overflow-hidden rounded-md border border-gray-200 px-3 pt-3 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600 dark:border-gray-700 dark:bg-gray-800"> 
            <input
                onChange={e => setAddress(e.target.value)}
                type="text"
                placeholder="Enter your Address here 🎯"
                className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
            />
            <button
            type='submit'
            className="rounded-lg top-1 right-1 bottom-1 border absolute w-12 justify-center bg-blue-400 text-white p-3 font-bold uppercase"
            >
            GO
            </button>
        </form>
      </div>
      <div className="relative top-4/12 left-1/4 overflow-x-auto justify-center space-x-3 w-6/12 h-140 m-10">
        <table className="min-w-full divide-y-2 divide-gray-200 text-sm">
          <thead>
            <tr>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-1000">
                Name
              </th>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
                Symbol
              </th>
              <th
                className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
                Balance
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {tokens.map((token, index) => (
              <tr key={index}>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.name}</td>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{token.symbol}</td>
                <td className="whitespace-nowrap px-4 py-2 text-gray-900">{utils.formatUnits(token.amount, token.decimals)}</td>
              </tr>
            ))}  
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default App;

Start the application by running the following:

how to create an erc20 token balance app with quicknode token api

Copy

npm start

npm start

It should look something like this.

Paste an address in the input field and click on GO; you should see the balances of tokens.

Get the entire code from this GitHub repo.

Conclusion

You are fantastic if you made it till here. In this tutorial, we learned about QuickNode Token API and created a ERC20 token balance app using the Token API.

Make more out of the Token API with its various methods. Join our Discord if you have any questions, or reach out to us via Twitter.

We ❤️ Feedback!

If you have any feedback or questions on this guide, let us know. We'd love to hear from you!

How to generate a new Ethereum address in PHP

Published: Mar 5, 2021
Updated: Sep 9, 2022

PHP is very popular in developing the backend of websites or web applications. PHP has a huge crowd of developers trusting it as their go-to language. In this guide, we will see how we can...

How to do a non-custodial transaction with QuickNode

Published: Jun 19, 2021
Updated: Sep 9, 2022

Private keys are one of the most sensitive pieces of data when it comes to cryptography and the blockchain. However, there has always been debate/confusion about choosing between custodial...

How to stream pending transactions with ethers.js

Published: Feb 13, 2021
Updated: Sep 21, 2022

Here is a video representation of this guide if you prefer to watch instead of read[yt:YjQj6uk9M98]On ethereum, before being included in a block,...

How to generate a new Ethereum address in Ruby

Published: Feb 20, 2021
Updated: Sep 9, 2022

With high usage in web applications and straightforward syntax, Ruby is used by a vast number of people. This guide will cover creating an Ethereum address in Ruby using

How to Set Up a Near Project from Scratch

Published: Jan 27, 2022
Updated: Sep 9, 2022

In this tutorial we will look at how we can setup a basic NEAR project from scratch, installing and configuring dependencies and customizing the project to work well with...

Estimating gas price using pending transactions in Python

Published: Feb 20, 2021
Updated: Sep 9, 2022

To send a transaction on the Ethereum network, you need to pay fees for including the transaction in a block as well as the computation necessary in the transaction; this fee is called gas....

How to Build an NFT Gallery using React and QuickNode's NFT API

Published: Jul 11, 2022
Updated: Sep 9, 2022

Ever wanted to get a list of all the owners of a particular NFT collection? Or wanted to fetch all the metadata for an NFT collection? From experience, you may know that compiling all this NFT...

Como crear y lanzar un ERC-721 (NFT)

Published: Dec 27, 2021
Updated: Sep 9, 2022

Coleccionables digitales que son compatibles con ERC-721 se han vuelto muy populares desde el lanzamiento de Cryptokitties y han ganado adopción...

How to Build Your DApp Using The Modern Ethereum Tech Stack: Hardhat and EthersJs

Published: Dec 21, 2021
Updated: Sep 9, 2022

When building a smart contract on the Ethereum blockchain, new developers tend to reach out to tools like truffle and web3.js in building their smart contracts. This tutorial will look at how...

How to connect to Ethereum network using Java / Web3j

Published: Oct 23, 2020
Updated: Sep 9, 2022

We can say that Java is one of the most versatile languages out there, and it continues to be relevant in today's time. Java is so popular because of its massive user base and use cases. In...

How to Access Bitcoin Mempool

Published: Aug 16, 2021
Updated: Sep 21, 2022

Bitcoin is the father of blockchain technology. With Bitcoin started a new era of blockchain and decentralization. Bitcoin enabled everyone to make the peer-to-peer transactions they enjoy...

How to connect to Ethereum network with ethers.js

Published: Apr 27, 2020
Updated: Sep 9, 2022

When someone thinks of developing a dApp the first tool that comes to their mind is web3.js which is pretty common because of its popularity in the community and wide use cases, dApp...

How to Create and Deploy a Clarity Smart Contract on the Stacks Blockchain

Published: Aug 19, 2022
Updated: Sep 9, 2022

Stacks is an open-source layer-1 blockchain that utilizes the Proof of Transfer (PoX) consensus mechanism. The Stacks blockchain leverages Bitcoin's security and allows direct read access to...

How to Mint an NFT on Polygon with Ethers.js

Published: Mar 28, 2022
Updated: Oct 19, 2022

This guide demonstrates how to mint an NFT on the Polygon blockchain using the Ethers.js library and our Factory ERC-1155 contract we built in an earlier

How to access Ethereum Mempool

Published: Oct 15, 2020
Updated: Sep 15, 2022

On Ethereum, when a transaction is sent, before being added to a block, it resides in what is called a Mempool. To receive information about this transaction, the Mempool must be queried. This...

The Web3 Developer Stack

Published: Jul 3, 2021
Updated: Sep 15, 2022

A developer stack is a bag of technologies a developer possesses. For example, MEAN (MongoDB, Express.js, AngularJS/Angular, and Node.js) and MERN (MongoDB, Express.js, React, and Node.js) are...

How to Mint NFTs on the Stacks Blockchain

Published: Aug 19, 2022
Updated: Sep 9, 2022

Stacks is an emerging blockchain secured by Bitcoin and with native support for smart contracts. Our previous Stacks guide demonstrated

How to Mint an NFT Collection using thirdweb

Published: May 13, 2022
Updated: Sep 21, 2022

Building on web3 is sometimes seen as a challenge greater than building on web2. The majority of web2 development features and technologies are well-documented and have stood the test of time,...

Introduction to Scaffold-ETH 🏗

Published: Oct 7, 2021
Updated: Sep 9, 2022

Developing applications involves juggling several moving pieces like front-ends, back-ends, and databases. But developing a decentralized application on a blockchain adds a few more elements...

How to generate a new Bitcoin address in JavaScript

Published: Jun 26, 2021
Updated: Sep 9, 2022

To do any type of transaction on the Bitcoin blockchain, you’ll need a public key or a Bitcoin address. In this guide, we’ll cover how to generate a new Bitcoin address in JavaScript using

How to Create a dApp on Avalanche's Fuji Testnet with QuickNode

Published: Jun 1, 2022
Updated: Sep 9, 2022

Avalanche is an open-source, proof-of-stake blockchain with smart contract functionality that uses the Snow family of consensus protocols. The Avalanche...

How to create your own DAO with Aragon

Published: Aug 8, 2021
Updated: Sep 9, 2022

Blockchain provides us with the power of decentralization. Decentralization means the transfer of power to users/members rather than having a single centralized authority governing everything;...

How to Connect Your Dapp With MetaMask Using Ethers.js

Published: Dec 13, 2021
Updated: Nov 14, 2022

In our dApp, we will have a simple react user interface that has a material button asking the user to connect to MetaMask. And if they do not have an account, they can create one or log in to...

How to re-send a transaction with higher gas price using ethers.js

Published: Sep 23, 2020
Updated: Sep 9, 2022

Sometimes, you submit a transaction on Ethereum without enough gas due to network congestion or too many pending transactions offering a higher gas price than you have offered on your...

How to connect to Ethereum using PHP

Published: Jun 11, 2021
Updated: Sep 9, 2022

PHP is a very popular choice among developers and has a vast community due to its long presence in web development. In this guide, we’ll cover how to connect to Ethereum with PHP using the

How to use Subspace with QuickNode

Published: Sep 8, 2020
Updated: Sep 9, 2022

In this guide, we'll understand a bit about reactive development and how to use Subspace with QuickNode.JavaScript is the programming language behind most of the internet apps and...

How to connect to Ethereum network with Web3.js

Published: May 12, 2020
Updated: Sep 9, 2022

Libraries and frameworks make the development process a lot easier and faster. When it comes to Ethereum development, Web3.js is the go to...

How to Build a One-Click Sign in Using MetaMask with PHP's Laravel

Published: Nov 2, 2021
Updated: Sep 9, 2022

Social logins: we have all seen them, we have all used them. "Login with Facebook". "Login with Github".If you have been around the Web3 community you may have come across a...

How to generate a new Ethereum address in Go

Published: Feb 13, 2021
Updated: Sep 9, 2022

Golang is very popular among backend developers for building infrastructures and microservices. Go is a procedural programming language. Developed in 2007 by...

How to generate a new Ethereum address in Python

Published: Feb 6, 2021
Updated: Sep 9, 2022

Python is one of the most versatile programming languages out there with an abundance of use cases; We can build many applications with Python from client-side to back end. In this guide, we...

How to generate a new Ethereum address in JavaScript

Published: Feb 13, 2021
Updated: Sep 9, 2022

When it comes to programming, there’s hardly anyone who has not used or heard about JavaScript. JavaScript was initially...

How to connect to the Ethereum network using Python with Web3.py

Published: Apr 5, 2020
Updated: Sep 23, 2022

You can build Ethereum applications in different programming languages. In this article, we will connect to the Ethereum network using...

How to Lazy Mint an NFT on Rarible with Rarepress

Published: Feb 23, 2022
Updated: Sep 9, 2022

NFTs are great for creators to monetize their artwork and for people to get ownership of an item. But since gas prices are usually high given the highly in-demand space on Ethereum, minting an...

How to Fetch Transaction History on Ethereum using Web3.py

Published: Jun 3, 2022
Updated: Oct 20, 2022

If you are building on Ethereum, you may run into scenarios where you need to fetch transaction history for a given address. Unfortunately, the current design for Ethereum lacks an easy way to...

Integrate Your Svelte App with a Smart Contract

Published: Dec 20, 2021
Updated: Oct 20, 2022

Today we will be building a sample app in Svelte, and connecting it to a smart contract that we deploy on the Ropsten Network.Our frontend will be able to do the...

How to get the balance of an ERC-20 token

Published: Jun 14, 2021
Updated: Sep 21, 2022

When a new token is made on the Ethereum network, it usually follows a specification. The most popular of which is the ERC20...

How to Build an ERC20 Token Balance App with QuickNode Token API

Overview

What You Will Need

What You Will Do

The Traditional way

What is QuickNode's Token API?

Booting QuickNode endpoint with Token API

How to create an ERC20 Token Balance App with QuickNode Token API

Conclusion

Related articles 36