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

<body>
  <div id='form'>
    <h2>Show the NFT history of a wallets: </h2>
    <input type="text" id="addresses" placeholder="Enter wallet addresses" value="0x114fEB043391dEb4A339714a13127fFe85F0B3fD"/>
    <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://cdn.skypack.dev/@tatumio/tatum";

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

  button.addEventListener("click", async () => {
    const tatum = await TatumSDK.init<Ethereum>({ network: Network.ETHEREUM });
       console.log("test");        
    const txs: ResponseDto<NftTransaction[]> = await tatum.nft.getAllNftTransactionsByAddress({
      addresses: JSON.parse(addresses.value.replace(/'/g, '"')), 
    });
    console.log("test"); 
    console.log(txs);
    
    // 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.