Digital collectibles (or NFTs, which stands for “non-fungible tokens”) have arguably been one of the biggest breakthrough applications of web3. If you’re a creator building with digital collectibles, however, you’ve probably noticed that working with them from code can be complicated! Creating NFTs, minting NFTs, writing smart contracts … even something as simple as building a dapp to view them all from a wallet can be difficult. This is where comes in. Infura’s new NFT API With this API, you can replace a lot of tedious code with a single API call. Build a digital collectibles marketplace, mint digital art, do any-NFT-thing you want, and all (including the Ethereum blockchain, Polygon, zkEVM, and more). on the chain of your choice It’s really easy to create something beautiful with just a few lines of code! In this tutorial, we’ll walk through the process of creating a simple dapp that allows you to view digital collectibles owned by a particular wallet address (similar to or ). OpenSea Rarible In the first part, we’ll walk through a step-by-step guide to writing a simple Node script that outputs ownership information to the terminal. In the second part, we’ll build on top of our script and launch a full-blown React app. Part 1: The Digital Collectible Ownership Script Step 1: Install NPM and Node Our project will be built with Node and npm. If you don’t have these installed on your local machine, you can do so . here To ensure everything is working correctly, run the following command: $ node -v If all goes well, you should see a version number for Node. Step 2: Sign Up for an Infura Account Next, we need access to the Infura NFT API. This allows us to access digital collectible ownership information for a wallet address. Sign up for a free Infura account . Once you’ve created your account, navigate to the and Create New Key. here dashboard For the network, choose and name it . Web3 API, NFT Viewer Once you click on , Infura will generate an API key for you, and give you access to its NFT API endpoints. Create The NFT API is in open beta and can be accessed from . To authenticate requests to this API, we’ll need a username and a password. https://nft.api.infura.io/ The username is the API key that you see at the top of your project page. The password is the API secret which can be obtained by navigating to the tab of your project. Security Step 3: Create a Node Project and Install Dependencies Let’s set up an empty project repository by running the following commands: $ mkdir nft-ownership && cd nft-ownership
$ npm init -y In order to make HTTP requests, we will use the Axios library. Install this by running: $ npm install axios Step 4: Write the Ownership Script To reiterate, we want to extract a list of all NFTs (and their associated metadata) for any given wallet address. If you look at the , you will see that this information is readily available to us through a single call to an endpoint listed under the Metadata section. The only thing we need to supply is the wallet address. Infura API documentation Create a new file called , and add the following code: index.js const axios = require('axios')

// Wallet address
const walletAddress = "0x0a267cf51ef038fc00e71801f5a524aec06e4f07"

// Set chain ID to 1 for Ethereum
const chainId = "1"

// Infura NFT API URL
const baseUrl = "https://nft.api.infura.io"
const url = `${baseUrl}/networks/${chainId}/accounts/${walletAddress}/assets/nfts`

// Configure the request
const config = {
    method: 'get',
    url: url,
    auth: {
        username: '<-- INFURA API KEY –>',
        password: '<-- INFURA API SECRET →',
    }
};

// Make request to NFT API
axios(config)
    .then(response => {
        console.log(response['data'])
    })
    .catch(error => console.log('error', error)); Run the script using the following command: $ node index.js You should see an output that looks something like this: {
  total: 44,
  pageNumber: 1,
  pageSize: 100,
  network: 'ETHEREUM',
  account: '0x0a267cf51ef038fc00e71801f5a524aec06e4f07',
  cursor: null,
  assets: [
    {
      contract: '0xb94c3fd0016888bab09dbc229f9397294e828a54',
      tokenId: '0',
      supply: '1',
      type: 'ERC1155',
      metadata: [Object]
    },
   …
    {
      contract: '0x030d5ffc1f8a64c58a040e0216b96e52c5cbe569',
      tokenId: '612',
      supply: '1',
      type: 'ERC721',
      metadata: [Object]
    }
  ]
} That was really simple! Now we have all the digital collectibles owned by the wallet in one single call. Infura also conveniently sends us the associated metadata information, such as title, description, image URL, and so on. Now that we know how to use the API to get NFT ownership information, let’s build an app on top of this script. Part 2: The Digital Collectibles Viewer App Step 1: Download the Starter Repository We have a React repository already made available to you which implements several styles to make our app look pretty. . You can download it here Note that we will be writing all the logic of the app from scratch. Step 2: Add the Infura Credentials In the folder, create a new folder called , and add a file called . In this file, add the following code: src data constants.js const API_KEY = "<-- INFURA API KEY –>";
const API_SECRET = "<-- INFURA API SECRET –>"

export { API_KEY, API_SECRET } Step 3: Write the App Logic We are now ready to write the main app in logic in the file. App.js This is how our app works: The user enters a wallet address in a form and clicks . Submit The app takes the wallet address and uses code from Part 1 to get all NFTs owned by the address. The API response is cleaned, and then finally displayed on the app. Add the following code: import { useState } from 'react';
import './App.css';
import axios from 'axios';

// Get Infura API credentials
import { API_KEY, API_SECRET } from './data/constants';

function App() {

  // Variable that stores wallet address from form
  const [walletAddress, setWalletAddress] = useState('');

  // Variable that stores response from the NFT API
  const [nfts, setNfts] = useState([]);

  // Input handler
  const walletHandler = (e) => {
    setWalletAddress(e.target.value);
  }

  // Form handler that issues requests to NFT API
  const formHandler = async (e) => {

    // Prevent page refresh on form submit
    e.preventDefault();

    if (walletAddress.length > 0) {
      // Set chain ID to 1 for Ethereum
      const chainId = "1"

      // Infura NFT API URL
      const baseUrl = "https://nft.api.infura.io"
      const url = `${baseUrl}/networks/${chainId}/accounts/${walletAddress}/assets/nfts`

      // Configure the request
      const config = {
        method: 'get',
        url: url,
        auth: {
          username: API_KEY,
          password: API_SECRET,
        }
      };

      // Issue request to API
      const response = await axios(config);

      // Filter list based on availability of metadata
      let nftList = response['data']['assets'];
      nftList = nftList.filter(x => x['metadata'] !== null)
      nftList = nftList.filter(x => x['metadata']['image'] !== null && x['metadata']['name'] !== null)

      // Set nfts variable to cleaned list
      setNfts(nftList);

    }
  }

  return (
    <div className="App">
      <h1>NFT Viewer</h1>

      {/* Wallet Address Form */}
      <form className='wallet-form' onSubmit={formHandler}>
        <input type='text' value={walletAddress} onChange={walletHandler} required></input>
        <button type='submit'>Submit</button>
      </form>

      {/* NFT Viewer Main Dashboard */}
      <div className='nft-dashboard'>
        {nfts.map(nft => {
          return <div className='nft'>
            <img src={nft['metadata']['image']}
              alt={nft['metadata']['name']}
              key={nft['metadata']['name']}></img>
            <p>{nft['metadata']['name'].slice(0, 35)}</p>
          </div>
        })}
      </div>
    </div >
  );
}

export default App; We’re all set! Deploy the app on localhost by running: $ npm start We visit in our browser, and this is what we see: http://localhost:3000 If you input an address and click submit, you should see the page populate with NFTs. Here is a snapshot of the NFT collection owned by the address we used in Part 1: Conclusion Digital collectibles have exploded in popularity over the last several years, and have created amazing business opportunities in the form of escrows, marketplaces, and analytics. Normally, it would be extremely difficult for NFT creators to extract useful data about digital collectibles and ownership from the blockchain. But with the advent of tools like Infura’s NFT API, working with digital collectibles has never been easier. Combine it with other tools, such as (a suite of development tools) and (a digital wallet), and you’re well on your way. Truffle MetaMask We’ve seen how we can build a digital collectibles platform user profile page from scratch in less than 20 lines of code. But we’ve explored only one use of Infura's new API. There are — such as creating your own digital collectibles, storing them, optimizing gas fees, and more. Have fun! lots of others to explore

2022 - HackerNoon Contributor of the Year - Engineering

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Jobs

2022 - HackerNoon Contributor of the Year - Kubernetes

2022 - HackerNoon Contributor of the Year - Npm

2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Jobs

Nominated for 2022 - HackerNoon Contributor of the Year - Npm

Nominated for 2022 - HackerNoon Contributor of the Year - Kubernetes

Nominated for 2022 - HackerNoon Contributor of the Year - Engineering

Too Long; Didn't Read

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

How to Create an NFT Viewer With Infura's New NFT API

How to Create an NFT Viewer With Infura's New NFT API

Too Long; Didn't Read

Alvin Lee

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Create an NFT Viewer With Infura's New NFT API

Too Long; Didn't Read

Alvin Lee

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES