<html>
<head>
    <meta charset="utf-8" />
    <title>Get all Transactions of a Wallet</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="0xCAE83F10d87C0Ac550A86dA8eB4b786085135447" />
    <button id="fetch-transactions">Fetch Transactions</button>
  </div>
  <div id="total-transactions"></div>
  <table id="transaction-table">
    <thead>
      <tr>
        <th>Transaction Hash</th>
        <th>Type</th>
        <th>Amount</th>
        <th>Timestamp</th>
        <th>Counter Address</th>
      </tr>
    </thead>
    <tbody id="transaction-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: 12px;
  border-radius: 4px;
  border: 2px solid #2ccd9a;
}

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

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

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

#transaction-table td {
  border: 1px solid #2ccd9a;
  padding: 10px;
}
import { TatumSDK, Network, Ethereum } from "https://esm.sh/@tatumio/tatum";

const button = document.getElementById("fetch-transactions");
const addressInput = document.getElementById('address');
const transactionContainer = document.getElementById('transaction-container');
const totalTransactions = document.getElementById('total-transactions');

button.addEventListener("click", async () => {
  try {
    console.log("Try");
    const tatum = await TatumSDK.init<Ethereum>({ network: Network.ETHEREUM_SEPOLIA });
    const transactions = await tatum.address.getTransactions({
      address: addressInput.value,
      // transactionTypes: ['native'],
      pageSize: 50,
      page: 0
    });
    console.log(transactions);
  // Remove previous entries
  transactionContainer.innerHTML = '';
  
  // Display the total number of transactions found
  totalTransactions.textContent = `Total Number of Transactions Found: ${transactions.data.length}`;

  // Create a new entry for each transaction
  transactions.data.forEach(transaction => {
    const entry = document.createElement('tr');
    const hash = document.createElement('td');
    const type = document.createElement('td');
    const amount = document.createElement('td');
    const timestamp = document.createElement('td');
    const counterAddress = document.createElement('td');
    
    // Set hash, type, amount, timestamp and counterAddress
    hash.textContent = transaction.hash;
    type.textContent = transaction.transactionType;
    amount.textContent = transaction.amount;
        // Convert the timestamp to a Date and format it
    const date = new Date(transaction.timestamp);
    timestamp.textContent = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;

    // If there is a counter address, use it. Otherwise, use 'Address not given'
    counterAddress.textContent = transaction.counterAddress ? transaction.counterAddress : 'Address not given';
    
    // Append elements to the entry
    entry.appendChild(hash);
    entry.appendChild(type);
    entry.appendChild(amount);
    entry.appendChild(timestamp);
    entry.appendChild(counterAddress);

    // Append the entry to the transactionContainer
    transactionContainer.appendChild(entry);
    });
  }
  catch (error) 
  {
    console.error('An error occurred:', error);  
  }
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.