<meta charset="utf-8" />
    <title>Get the metadata of a specific NFT
    <script type="module" src="./app.js"></script>

  <div id='form'>
    <h2>Get the metadata of a specific NFT: </h2>
    <input type="text" id="address" placeholder="Enter collection address" value="0x789e35a999c443fe6089544056f728239b8ffee7"/>
    <input type="text" id="tokenId" placeholder="Enter tokenId" value='115'/>
    <button id="check-txs">Fetch metadata</button>
  <div id="result">
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://cdn.skypack.dev/@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 metadata: ResponseDto<NftTransaction[]> = await tatum.nft.getNftMetadata({
      tokenId: tokenId.value,
      tokenAddress: address.value // replace with your collection

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

    // Display the TX's of NFT
    resultContainer.innerHTML = `NFT metadata: ${JSON.stringify(metadata.data, 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.