<html>

<head>
    <meta charset="utf-8" />
    <title>My First Tatum DApp</title>
    <script type="module" src="./app.js"></script>
</head>

<body>
  <div style="display:block;" style="visibility: visible;" id='form'>
    <h2>Nft You want to check for</h2>
    <input type="text" id="token" placeholder="Enter contract address"
        value="0xbd3531da5cf5857e7cfaa92426877b022e612cf8" />
    <h2>Address you want to check for</h2>
    <input type="text" id="address" placeholder="Enter wallet address"
        value="0x5329c8466E5CD1A614e7C9A2b4eCc0dEF0b98546" />
    <button id="check-owner">Check Ownership</button>
    <div id="balance"></div>
  </div>
  
  <div style="display:none;" id="success" class="container">
        <h2>Congratulations! </h2>
        <p>You are eligible to access this content.</p>
        <img src="https://media.giphy.com/media/11sBLVxNs7v6WA/giphy.gif" alt="Celebration" width="200"><br>
    <button id="back">Go Back</button>
    </div>
  
  <div  style="display:none;" id="fail" class="container" class="container">
        <h2>Sorry! </h2>
        <p>You are do not have access to this exclusive content.</p>
        <img src="https://i.gifer.com/origin/40/40ec1595410aa1c9b084467eb8f037dc_w200.gif" alt="Sad face" width="130"><br>
    <button id="fback">Go Back</button>
    </div>
  
</body>

</html>
body {
  font-family: Arial, sans-serif;
  background-color: white;
  color: #4f37fd;
  text-align: center;
}

h1 {
  margin-top: 10px;
}

input[type="text"] {
  padding: 5px;
  font-size: 16px;
  border-radius: 4px;
  border: 2px solid #2ccd9a;
}

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

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

import { TatumSDK, Network } from "https://cdn.skypack.dev/@tatumio/tatum";

const button = document.getElementById("check-owner");
const back = document.getElementById("back");
const fback = document.getElementById("fback");
const addressInput = document.getElementById('address');
const contractAddress = document.getElementById('token');
const success = document.getElementById('success');
const fail = document.getElementById('fail');
const form = document.getElementById('form');

button.addEventListener("click", async () => {
  console.log(addressInput.value);
  const tatum = await TatumSDK.init({ network: Network.ETHEREUM });
  const isOwner = await tatum.nft.checkNftOwner({
            tokenAddress: contractAddress.value,
            tokenId: 4845,
            owner: addressInput.value
        });
  form.style.display = 'none';
  console.log(isOwner);
  if (isOwner) {
    success.style.display = 'block';
        }
        else {
    fail.style.display = 'block';
        }
});


back.addEventListener("click", async () => {
  form.style.display = 'block';
  success.style.display = 'none';
  fail.style.display = 'none';
});

fback.addEventListener("click", async () => {
  form.style.display = 'block';
  success.style.display = 'none';
  fail.style.display = 'none';
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.