<html>
<head>
    <meta charset="utf-8" />
    <title>Trace the history of a specific NFT
</title>
    <script type="module" src="./app.js"></script>
</head>

<body>
  <div id='form'>
    <h2>Trace the history of a specific NFT: </h2>
    <input type="text" id="address" placeholder="Enter collection address" value="0x524cab2ec69124574082676e6f654a18df49a048"/>
    <input type="text" id="tokenId" placeholder="Enter tokenId" value="16238"/>
    <div>
    <button id="check-txs">Fetch TX's</button>
    </div>
  </div>
  <div id="result">
  </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;
  margin-bottom: 10px;
}

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

#result {
    margin-top: 10px;
    font-size: 20px;
}


import { TatumSDK, Network, Ethereum, ResponseDto, NftTransaction } from "https://esm.sh/@tatumio/tatum";

  const button = document.getElementById("check-txs");
  const tokenId = document.getElementById('tokenId');
  const address = document.getElementById('address');
  const resultContainer = document.getElementById('result');

  button.addEventListener("click", async () => {
    const tatum = await TatumSDK.init<Ethereum>({ network: Network.ETHEREUM });

    const txs: ResponseDto<NftTransaction[]> = await tatum.nft.getAllNftTransactions({
      tokenId: tokenId.value,
      tokenAddress: address.value // replace with your collection
    });

    // Remove previous entries
    resultContainer.innerHTML = '';

    // Display the TX's of NFT
    resultContainer.innerHTML = `NFT TX's Found: ${JSON.stringify(txs, null, 2)}`;
  
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.