<html>
<head>
    <meta charset="utf-8" />
    <title>Get Token Metadata</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id='form'>
        <h2>Get Token Metadata</h2>
        <label for="token-address">Token Address:</label>
        <input type="text" id="token-address" placeholder="Enter token address" value="0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48">
        <br>
        <button id="get">Get Metadata</button>
    </div>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>

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

#form {
    margin-bottom: 10px;
}

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

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

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

const button = document.getElementById("get");
const tokenAddressInput = document.getElementById('token-address');
const resultContainer = document.getElementById('result');

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

    try {
        const tokenAddress = tokenAddressInput.value;

        // Get token metadata
        const result = await tatum.token.getTokenMetadata({ tokenAddress });

        // Display the result
        resultContainer.innerHTML = `
            <p>Symbol: ${result.data.symbol}</p>
            <p>Name: ${result.data.name}</p>
            <p>Supply: ${result.data.supply}</p>
            <p>Decimals: ${result.data.decimals}</p>
            <p>Token Type: ${result.data.tokenType}</p>
            <p>Cap: ${result.data.cap}</p>
        `;
    } catch (error) {
        console.error(error);
        resultContainer.innerHTML = `
            <p>Error: ${error.message}</p>
        `;
    }
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.