<html>
<head>
    <meta charset="utf-8" />
    <title>Get All Fungible Transactions</title>
</head>
<body>
    <div id='form'>
        <h2>Get All Fungible Transactions</h2>
        <label for="address">Address:</label>
        <input type="text" value="0x78E851C35326c9296485E9720D85CB3Bd153b428" id="address" placeholder="Enter address">
        <br>
        <button id="get">Get Transactions</button>
    </div>
    <div id="result"></div>
</body>
</html>

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

#form {
  margin-bottom: 10px;
}

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 {
  font-size: 14px;
}

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

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}


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 });

    try {
        const address = addressInput.value;

        // Get all fungible transactions
        const txs = await tatum.token.getAllFungibleTransactions({ addresses: [address] });

        // Generate the table for displaying transactions
        const table = document.createElement('table');
        table.innerHTML = `
            <tr>
                <th>Block Number</th>
                <th>Hash</th>
                <th>Transaction Type</th>
                <th>Transaction Subtype</th>
                <th>Transaction Index</th>
                <th>Token Address</th>
                <th>Token ID</th>
                <th>Amount</th>
                <th>Timestamp</th>
                <th>Address</th>
                <th>Counter Address</th>
            </tr>
        `;

        for (const transaction of txs.data) {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${transaction.blockNumber}</td>
                <td>${transaction.hash}</td>
                <td>${transaction.transactionType}</td>
                <td>${transaction.transactionSubtype}</td>
                <td>${transaction.transactionIndex}</td>
                <td>${transaction.tokenAddress || ''}</td>
                <td>${transaction.tokenId || ''}</td>
                <td>${transaction.amount}</td>
                <td>${transaction.timestamp}</td>
                <td>${transaction.address}</td>
                <td>${transaction.counterAddress || ''}</td>
            `;
            table.appendChild(row);
        }

        // Clear previous result
        resultContainer.innerHTML = '';

        // Append the table to the result container
        resultContainer.appendChild(table);
    } 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.