From Wallet to Web: Displaying NFT Holdings with Covalent's NFT Endpoints

Introduction

Non-fungible tokens (NFTs) have rapidly gained popularity in recent years, emerging as a new way to represent digital assets, such as art, collectibles, and virtual real estate. Each NFT is unique and indivisible, making them different from cryptocurrencies like Bitcoin or Ethereum. As the NFT market continues to grow, so does the opportunity for developers to access and display NFT holdings within their applications.

Covalent's NFT endpoints provide a powerful and efficient solution for developers looking to display NFT holdings. The Covalent API offers comprehensive NFT data across various blockchain networks, simplifying the process of creating visual representations of NFTs in a wallet. This guide will show you how to utilize Covalent's NFT endpoints to create visual representations of NFT holdings in a wallet!

(Est time to follow along: 10 mins)

Prerequisite

• Basic familiarity with Node.js

• Fetching data using APIs

Use Cases for Developers

NFTs are extremely versatile, so there are multiple use cases for displaying NFT holdings. Here are some popular ones:

1. Wallets: Developers can create web applications that allow users to view and manage their NFT holdings more efficiently. By displaying NFT holdings, users can track their assets, evaluate their portfolios, and make informed decisions about buying, selling, or trading NFTs.

2. NFT marketplaces: Displaying NFT holdings is essential for NFT marketplaces where users can buy, sell and trade digital assets. Developers can create visually appealing and interactive platforms that showcase NFTs in an organized manner, making it easy for users to browse, search, and filter through available items.

3. Gaming and metaverse: For games or virtual worlds that utilize NFTs as in-game assets, developers can display players' NFT holdings as part of their inventory or character profile. This allows players to manage their digital assets, trade with other players, and understand the value of their in-game items.

4. Social media: Developers can create widgets or plugins that enable users to showcase their NFT collections on social media platforms or personal websites. This can help NFT collectors share their acquisitions, foster discussions, and gain exposure in the community. One popular use case here is the profile picture (PFP), where users display their NFTs as their avatars on social media platforms.

5. Creator portfolios: Developers can build websites for artists and creators that display their NFT artwork, providing an online gallery to showcase their creations, share their stories, and potentially sell or promote their work.

And more!

Covalent's Core Rendering Endpoints

The term "Core Rendering" refers to the primary purpose of these endpoints, which is to fetch and display NFT data. These endpoints allow developers to render NFT holdings, including detailed metadata, images, and other relevant information, within their applications. Under the NFT umbrella, there are also Ownership & Token Gating endpoints and coming soon market data endpoints.

What makes Covalent’s NFT endpoints unique?

1. Rich metadata: Each endpoint response contains a wealth of information about the NFT, such as contract details, token information, external data, and image URLs in various sizes. This level of detail is often unavailable in alternate APIs, especially standard RPC responses.

2. Standardized format: The API response follows a consistent JSON structure, which simplifies parsing and integration into applications. Other APIs can vary in terms of response structure, making it more challenging for developers to work with.

3. Caching and optimization: The API response indicates whether the asset and image data are cached, ensuring faster and more reliable access to off-chain data. This is because Covalent has downloaded the NFT metadata, assets and other related information and cached them on our side for the best developer experience. Check out our data coverage here.

4. User-friendly: The Covalent API is designed to be easily understood by developers, with descriptive field names and a clear organization of data.

5. Cross-chain compatibility: The Covalent API can be used across different blockchain networks, providing a unified way to access NFT data from various chains. This makes it much more efficient than RPCs, which are often chain-specific, requiring developers to adapt their code for each blockchain they want to support.

Fetching NFT Data from Covalent

{
  "contract_name": "SuperRare",
  "contract_ticker_symbol": "SUPR",
  "contract_address": "0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0",
  "supports_erc": [
    "erc20",
    "erc721"
  ],
  "balance": "1",
  "balance_24h": "1",
  "type": "nft",
  "nft_data": [
    {
      "token_id": "10835",
      "token_url": "https://ipfs.pixura.io/ipfs/QmaH9AB84oLMNVs5XjVjfXVR9yu3WttBBfymcgn8d2vb3o/metadata.json",
      "original_owner": "0x9d805c5a5edede3db1b42bb1b2cc9e8aacfc83b1",
      "external_data": {
        "name": "Invisible Heroes",
        "description": "Digital adaptation of the original art piece on panel and acrylic colors commissioned to our studio.",
        "asset_url": "https://nftassets.covalenthq.com/540413092766294ce5c6d6e09e57c90d1bee4dd17c6017c4de785cd9d9276a81.gif",
        "asset_file_extension": "gif",
        "asset_mime_type": "image/gif",
        "asset_size_bytes": "6718548",
        "image": "https://nftassets.covalenthq.com/540413092766294ce5c6d6e09e57c90d1bee4dd17c6017c4de785cd9d9276a81.gif",
        "image_256": "https://nftassets.covalenthq.com/cdn-cgi/image/width=256,fit/540413092766294ce5c6d6e09e57c90d1bee4dd17c6017c4de785cd9d9276a81.gif",
        "image_512": "https://nftassets.covalenthq.com/cdn-cgi/image/width=512,fit/540413092766294ce5c6d6e09e57c90d1bee4dd17c6017c4de785cd9d9276a81.gif",
        "image_1024": "https://nftassets.covalenthq.com/cdn-cgi/image/width=1024,fit/540413092766294ce5c6d6e09e57c90d1bee4dd17c6017c4de785cd9d9276a81.gif",
        "animation_url": null,
        "external_url": null,
        "attributes": []
      },
      "asset_cached": true,
      "image_cached": true
    }
  ],
  "last_transfered_at": "2020-06-14T15:39:57Z"
},

Parsing and Displaying NFT Data

To render this user's NFT holdings, you can loop through the items in the API response and extract the relevant information for each NFT. Here's a simple example using Node.js:

npm install jsdom
npm install node-fetch

const fetch = require('node-fetch');
const { JSDOM } = require('jsdom');

const apiUrl = 'https://api.covalenthq.com/v1/eth-mainnet/address/{walletAddress}/balances_nft/?key={your_API_key}';

fetch(apiUrl)
  .then(response => response.json())
  .then(apiResponse => {
    const nftHoldings = apiResponse.data.items;

    const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
    const document = dom.window.document;

    nftHoldings.forEach((nft) => {
      if (nft.nft_data && nft.nft_data[0] && nft.nft_data[0].external_data) {
        const contractName = nft.contract_name;
        const tokenSymbol = nft.contract_ticker_symbol;
        const tokenId = nft.nft_data[0].token_id;
        const name = nft.nft_data[0].external_data.name;
        const description = nft.nft_data[0].external_data.description;
        const imageUrl = nft.nft_data[0].external_data.image;

        // Create and display HTML elements for each NFT
        const nftElement = document.createElement('div');
        const titleElement = document.createElement('h2');
        const descriptionElement = document.createElement('p');
        const imageElement = document.createElement('img');

        titleElement.textContent = `${name} (${tokenSymbol})`;
        descriptionElement.textContent = description;
        imageElement.src = imageUrl;

        nftElement.appendChild(titleElement);
        nftElement.appendChild(descriptionElement);
        nftElement.appendChild(imageElement);

        document.body.appendChild(nftElement);
      }
    });

    console.log(dom.serialize());
  })
  .catch(error => console.error('Error fetching data:', error));

This script will create and display HTML elements for each NFT in the response data, and output the resulting HTML to the console. Note that this approach is typically used for server-side rendering or testing, rather than serving the HTML directly to a client.

Here is an example of how you can display NFT information on a webpage using HTML, CSS, and JavaScript:

1

Open a text editor like Notepad, Visual Studio Code, or any other text editor you prefer.

2

Create a new file and paste the HTML from the console into it.

3

Save the file with a .html extension, for example, nft-preview.html.

4

Locate the saved file on your computer and open it with your preferred web browser (Google Chrome, Mozilla Firefox, etc.).

5

You should now see the NFT holdings preview rendered in the browser like this:

The appearance of this preview is quite basic as no styling has been applied. To improve the design, you can add CSS styles to the HTML file.

Conclusion

In summary, NFTs have become a significant part of the digital asset landscape, with numerous use cases for developers to display and interact with NFT holdings. Covalent's NFT endpoints offer a comprehensive and efficient solution for developers looking to showcase NFT holdings in their applications, providing rich metadata and standardized API responses across various blockchain networks. By following this guide, developers can leverage Covalent's API to create visually appealing and interactive applications that unlock the potential of NFTs and contribute to the growth and maturation of the NFT ecosystem.