For AI agents: a documentation index is available at /llms.txt. A markdown version of this page is available at the same URL with .md appended (or via Accept: text/markdown).
Skip to main content

Retrieve and display ERC-721 and ERC-1155 tokens

In this tutorial, you'll retrieve and display ERC-721 and ERC-1155 tokens using the Web3 JavaScript library.

Prerequisites​

Steps​

1. Create a project directory​

Create a new directory for your project. This can be done from the command line:

mkdir retrieveBalance

Change into the new directory:

cd retrieveBalance

2. Install required packages​

Install the web3 package in the project directory:

npm install web3
info

This example has been written for web3js v4.x. It may not work for earlier versions.

3. Set up the script​

Create a file called retrieveBalance.js. At the top of the file, add the following lines to import the web3.js library and connect to the Infura HTTPS endpoint:

const { Web3 } = require('web3')

const web3 = new Web3(
  new Web3.providers.HttpProvider('https://mainnet.infura.io/v3/<YOUR-API-KEY>')
)

Replace <YOUR-API-KEY> with your Infura API key.

4. Set the ABI​

For ERC-721 NFTs, use the tokenURI function, which is part of the ERC-721 standard. This function retrieves a token's metadata so you can view it. For ERC-1155, use the uri method.

Note the tokenURI and uri methods are optional for contracts. However, these methods are the only standardized onchain way of seeing NFT metadata without using a third-party API.

Define the ABI for the respective method by adding the following to the script:

const tokenURIABI = [
  {
    inputs: [
      {
        internalType: 'uint256',
        name: 'tokenId',
        type: 'uint256',
      },
    ],
    name: 'tokenURI',
    outputs: [
      {
        internalType: 'string',
        name: '',
        type: 'string',
      },
    ],
    stateMutability: 'view',
    type: 'function',
  },
]

5. Request the metadata​

Define the ABI for the respective method by adding the following to the script:

const tokenContract = '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d'
const tokenId = 101

tokenContract is the address of the token contract, and tokenId is the ID of the specific token to display.

Define the contract using web3.eth.Contract(), passing the ABI and contract address as parameters:

const contract = new web3.eth.Contract(tokenURIABI, tokenContract)

Next, create an async function that interacts with the smart contract.

This calls the ABI function defined in step 4.

async function getNFTMetadata() {
  const result = await contract.methods.tokenURI(tokenId).call()

  console.log(result) // ipfs://QmeSjSinHpPnmXmspMjwiXyN6zS4E9zccariGR3jxcaWtq/101
}

getNFTMetadata()

6. Run the script​

Run the script using the following command:

node retrieveBalance.js

Complete code overview​

const { Web3 } = require('web3')

const web3 = new Web3(
  new Web3.providers.HttpProvider('https://mainnet.infura.io/v3/<YOUR-API-KEY>')
)

const tokenURIABI = [
  {
    inputs: [
      {
        internalType: 'uint256',
        name: 'tokenId',
        type: 'uint256',
      },
    ],
    name: 'tokenURI',
    outputs: [
      {
        internalType: 'string',
        name: '',
        type: 'string',
      },
    ],
    stateMutability: 'view',
    type: 'function',
  },
]

const tokenContract = '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d' // BAYC contract address
const tokenId = 101 // A token we'd like to retrieve its metadata of

const contract = new web3.eth.Contract(tokenURIABI, tokenContract)

async function getNFTMetadata() {
  const result = await contract.methods.tokenURI(tokenId).call()
  console.log(result)
}

getNFTMetadata()
Last updated on