<html>
<head>
    <meta charset="utf-8" />
    <title>Get all NFTs in the NFT collection
</title>
    <script type="module" src="./app.js"></script>
</head>

<body>
  <div id='form'>
    <h2>Enter Colletion Address : </h2>
    <input type="text" id="address" placeholder="Enter collection address" value='0x524cab2ec69124574082676e6f654a18df49a048'/>
    <button id="check-balance">Fetch NFT's</button>
  </div>
  <div id="total-nfts"></div>
  <div id="balance-container">
  </div>
</body>

</html>
body {
  font-family: Arial, sans-serif;
  background-color: white;
  color: #4f37fd;
  text-align: center;
}

input[type="text"] {
  padding: 5px;
  font-size: 16px;
  border-radius: 4px;
  border: 2px solid #2ccd9a;
}

#check-balance {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  border: none;
  background-color: #2ccd9a;
  color: white;
  cursor: pointer;
}

#balance-container {
  margin-top: 10px;
  font-size: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#balance-container div {
  flex: 0 0 24%;
  margin: 0.5em;
  box-sizing: border-box;
}

#balance-container img {
  width: 100%;
  height: auto;
}
import {TatumSDK, Network, Ethereum} from "https://esm.sh/@tatumio/tatum";

const button = document.getElementById("check-balance");
const addressInput = document.getElementById('address');
const balanceContainer = document.getElementById('balance-container');
const totalNFTs = document.getElementById('total-nfts');

button.addEventListener("click", async () => {
  const tatum = await TatumSDK.init<Ethereum>({ network: Network.ETHEREUM });
  const balance = await tatum.nft.getNftsInCollection({
    collectionAddress: [addressInput.value],
  });

  // Remove previous entries
  balanceContainer.innerHTML = '';
  
  // Display the total number of NFTs found
  totalNFTs.textContent = `Total Number of NFTs Found: ${balance.data.length}`;

  // Sort the array so NFTs without metadata images are at the end
  const sortedBalanceData = balance.data.sort((a, b) => (b.metadata && b.metadata.image) ? 1 : -1);

  // Create a new entry for each NFT
  sortedBalanceData.forEach(nft => {
    const entry = document.createElement('div');
    const image = document.createElement('img');
    const name = document.createElement('p');
    
    // Create a new Image object
    const imgObj = new Image();

    // Set a loading image
    image.src = 'https://loading.io/spinners/dual-ring/lg.dual-ring-loader.gif'; // Use any loading image or gif you prefer

    imgObj.onload = function() {
      // Once the image is loaded, replace the source of the image element
      image.src = imgObj.src;
    }

    imgObj.onerror = function() {
      // If there is an error loading the image, replace the source with the unavailable image
      image.src = 'https://user-images.githubusercontent.com/10515204/56117400-9a911800-5f85-11e9-878b-3f998609a6c8.jpg';
    }

    // If there is a metadata image, load the image
    if (nft.metadata && nft.metadata.image) {
      imgObj.src = nft.metadata.image;
    } else {
      // If there is no metadata image, set the image as not available
      image.src = 'https://user-images.githubusercontent.com/10515204/56117400-9a911800-5f85-11e9-878b-3f998609a6c8.jpg';
    }

    // If there is a metadata name, use it. Otherwise, use 'Name not given'
    name.textContent = nft.metadata && nft.metadata.name ? nft.metadata.name : 'Name not given';
    
    entry.appendChild(image);
    entry.appendChild(name);
    balanceContainer.appendChild(entry);
  });
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.