<html>
<head>
    <meta charset="utf-8" />
    <title>Retrieve the owner of the NFT
</title>
    <script type="module" src="./app.js"></script>
</head>

<body>
  <div id='form'>
    <h2>Retrieve the owner of the NFT
: </h2>
    <input type="text" id="address" placeholder="Enter collection address"/>
    <input type="text" id="tokenId" placeholder="Enter tokenId"/>
    <div>
    <button id="check-txs">Get owner</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://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 owner: ResponseDto<NftTransaction[]> = await tatum.nft.getNftOwner({
      tokenId: tokenId.value,
      tokenAddress: address.value // replace with your collection
    });

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

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