<html>
<head>
    <meta charset="utf-8" />
    <title>Get all Tokens a Wallet Holds</title>
    <script type="module" src="./app.js"></script>
</head>

<body>
  <div id='form'>
    <h2>Enter Wallet Address : </h2>
    <input type="text" id="address" placeholder="Enter wallet address"
        value="34xp4vRoCGJym3xR7yCVPFHoCNxv4Twseo" />
    <button id="check-balance">Fetch Tokens</button>
  </div>
  <div id="total-tokens"></div>
  <table id="balance-table">
    <thead>
      <tr>
        <th>Asset</th>
        <th>Balance</th>
      </tr>
    </thead>
    <tbody id="balance-container">
    </tbody>
  </table>
</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;
}

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

#balance-table {
  margin-top: 10px;
  font-size: 20px;
  border: 1px solid #2ccd9a;
  margin-left: auto;
  margin-right: auto;
}

#balance-table th {
  border: 1px solid #2ccd9a;
  padding: 10px;
}

#balance-table td {
  border: 1px solid #2ccd9a;
  padding: 10px;
}

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

const button = document.getElementById("check-balance");
const addressInput = document.getElementById('address');
const balanceContainer = document.getElementById('balance-container');
const totalTokens = document.getElementById('total-tokens');

button.addEventListener("click", async () => {
  const tatum = await TatumSDK.init({ network: Network.BITCOIN });
  const balance = await tatum.address.getBalance({
    addresses: [addressInput.value],
  });
  
  console.log(balance)

  // Remove previous entries
  balanceContainer.innerHTML = '';
  
  // Display the total number of tokens found
  totalTokens.textContent = `Total Number of Tokens Found: ${balance.data.length}`;

  // Create a new entry for each token
  balance.data.forEach(token => {
    const entry = document.createElement('tr');
    const asset = document.createElement('td');
    const balance = document.createElement('td');
    
    // Set asset and balance
    asset.textContent = token.asset || 'N/A';
    balance.textContent = token.balance;

    entry.appendChild(asset);
    entry.appendChild(balance);
    balanceContainer.appendChild(entry);
  });
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.