0

I want to show the most current NFT from a collection on a website.

Is this possible with web3.js?

I have a working example how to load all NFTs from a collection which are owned by a certain wallet account.

But I want to load only the most current NFT from a collection regardless which wallet account is the owner of the NFT.

Here is the working example I have:

import SpacePunksTokenABI from "./space_punks_token.js"

document.addEventListener("DOMContentLoaded", () => {
  const web3 = new Web3(window.ethereum)

  document.getElementById("load_button").addEventListener("click", async () => {
    const contract = new web3.eth.Contract(SpacePunksTokenABI, "0x45DB714f24f5A313569c41683047f1d49e78Ba07")
    const walletAddress = document.getElementById("wallet_address").value
    contract.defaultAccount = walletAddress
    const spacePunksBalance = await contract.methods.balanceOf(walletAddress).call()
    
    document.getElementById("nfts").innerHTML = ""

    for(let i = 0; i < spacePunksBalance; i++) {
      const tokenId = await contract.methods.tokenOfOwnerByIndex(walletAddress, i).call()

      let tokenMetadataURI = await contract.methods.tokenURI(tokenId).call()

      if (tokenMetadataURI.startsWith("ipfs://")) {
        tokenMetadataURI = `https://ipfs.io/ipfs/${tokenMetadataURI.split("ipfs://")[1]}`
      }

      const tokenMetadata = await fetch(tokenMetadataURI).then((response) => response.json())

      const spacePunkTokenElement = document.getElementById("nft_template").content.cloneNode(true)
      spacePunkTokenElement.querySelector("h1").innerText = tokenMetadata["name"]
      spacePunkTokenElement.querySelector("a").href = `https://opensea.io/assets/0x45db714f24f5a313569c41683047f1d49e78ba07/${tokenId}`
      spacePunkTokenElement.querySelector("img").src = tokenMetadata["image"]
      spacePunkTokenElement.querySelector("img").alt = tokenMetadata["description"]

      document.getElementById("nfts").append(spacePunkTokenElement)
    }
  })
})

1 Answer 1

0

I found a way to display all NFTs from a collection on a HTML page with OpenSea API:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show NFTs from collection</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap" rel="stylesheet">

    <style>
        @keyframes gradient {

            0%,
            to {
                background-position: 0 50%
            }

            50% {
                background-position: 100% 50%
            }
        }

        * {
            color: white;
            font-family: "Source Sans 3", Helvetica, Arial, sans-serif;
            font-size: 1.25rem;
            -webkit-font-smoothing: antialiased;
            font-weight: 400;
            letter-spacing: .05rem;
            line-height: 1.5rem;
            margin: 0;
            padding: 0;
            /* Remove blue highlight of button on mobile */
            -webkit-tap-highlight-color: transparent;
            text-rendering: optimizeLegibility;
        }

        body {
            background-color: gray;
            margin: 0;
            padding: 0;
        }

        #bg {
            animation: gradient 10s ease infinite;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-position: top center;
            background-size: 200% 200%;
            height: 100%;
            position: fixed;
            width: 100%;
        }

        #nfts {
            height: 100%;
            margin: auto;
            position: absolute;
            text-align: center;
            top: 20px;
            width: 100%;
        }

        img {
            border: 5px dotted white;
            height: 50vw;
            width: 50vw;
        }
    </style>

    <script>
        const CONTRACT_ADDRESS = "0xE29F8038d1A3445Ab22AD1373c65eC0a6E1161a4"; // BoredApeYachtClub -SEPOLIA
        let page = "";
        let nfts = null;
        getNfts();
        async function getNfts() {
            try {
                const response = await fetch(`https://testnets-api.opensea.io/api/v2/chain/sepolia/contract/${CONTRACT_ADDRESS}/nfts?limit=10${page}`, {
                    method: "GET",
                    headers: {
                        'Accept': 'application/json',
                        'X-API-KEY': ''
                    }
                });
                const result = await response.json();
                console.log("Success:", result);
                nfts = result.nfts;
                // If there is a next page call getNfts() with page endpoint
                if (result.next) {
                    console.log(result.next);
                    page = "&next=" + result.next;
                    getNfts();
                }
                appendNfts();
            } catch (error) {
                console.error("Error:", error);
            }
        }
        function appendNfts() {
            for (let index = 0; index < nfts.length; index++) {
                const nftElement = document.getElementById("nft_template").content.cloneNode(true);
                nftElement.querySelector("h1").innerText = "#" + nfts[index].identifier + " - " + nfts[index].name;
                nftElement.querySelector("a").href = `https://testnets.opensea.io/assets/sepolia/0xcf96edb0b569e2152118e01bc2458881c4807aa9/${nfts[index].identifier}`;
                nftElement.querySelector("img").src = nfts[index].image_url;
                nftElement.querySelector("img").alt = nfts[index].description;
                document.getElementById("nfts").append(nftElement);
            }
        }
    </script>
</head>

<body>
    <div id="bg"></div>
    <div id="nfts" class=""></div>
    <template id="nft_template">
        <section>
            <h1 class=""></h1><br>
            <a href="" target="_blank">
                <img class="" src="" alt="" onload="this.style.height='auto';this.style.border='none'" onerror="">
            </a>
        </section><br>
    </template>
</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.