<html>
<head>
    <meta charset="utf-8" />
    <title>Get Token Balance</title>
</head>
<body>
    <div id='form'>
        <h2>Get Token Balance</h2>
        <label for="address">Address:</label>
        <input type="text" id="address" value="0x78E851C35326c9296485E9720D85CB3Bd153b428" placeholder="Enter address">
        <br><br>
        <button id="get">Get Balance</button>
    </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;
}

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

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

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
    font-size: 16px;
}


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

const button = document.getElementById("get");
const addressInput = document.getElementById('address');
const resultContainer = document.getElementById('result');

button.addEventListener("click", async () => {
    const tatum = await TatumSDK.init({ network: Network.ETHEREUM });
    const address = addressInput.value;
    console.log(address);

    // Get token balance
    const res = await tatum.token.getBalance({ addresses: [address] });
    console.log(res);

    // Display the result as a table
    const balanceData = res.data;
    let tableHTML = '<table>';
    tableHTML += '<tr><th>Chain</th><th>Token Address</th><th>Type</th><th>Last Updated Block Number</th><th>Address</th><th>Balance</th></tr>';
    balanceData.forEach(item => {
        tableHTML += '<tr>';
        tableHTML += `<td>${item.chain}</td>`;
        tableHTML += `<td>${item.tokenAddress}</td>`;
        tableHTML += `<td>${item.type}</td>`;
        tableHTML += `<td>${item.lastUpdatedBlockNumber}</td>`;
        tableHTML += `<td>${item.address}</td>`;
        tableHTML += `<td>${item.balance}</td>`;
        tableHTML += '</tr>';
    });
    tableHTML += '</table>';

    resultContainer.innerHTML = tableHTML;
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.