JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Ethereum Address Lookup</title>
    <script src="https://unpkg.com/[email protected]/dist/ethers.min.js"></script>
  </head>
  <body>
    <h1>Ethereum Address Lookup</h1>
    <input type="text" id="address" placeholder="Enter public Ethereum address">
    <button id="lookup" onclick="lookupAddress();">Lookup Address</button>
    <div id="result"></div>
    
    <script>
      const XEN_ADDRESS = '0x06450dEe7FD2Fb8E39061434BAbCFC05599a6Fb8';
      const etherscanApiKey = 'P4UJHPNS87ST8N6KAV9TEZGV68BH5Q1N9X';
      
      async function lookupAddress() {
        // Get the address entered by the user
        const address = document.getElementById('address').value;
        
        // Get the list of transactions using Etherscan API
        const transactions = await getTransactionList(address);
        
        // Filter transactions to get only transactions to XEN contract
        const XENTransactions = transactions.filter(transaction => transaction.to == XEN_ADDRESS);
        
        // Build the table
        const table = buildTable(XENTransactions);
        
        // Display the table
        document.getElementById('result').innerHTML = table;
      }
      
      // Get the list of all transactions for a given address
      async function getTransactionList(address) {
        const url = `https://api.etherscan.io/api?module=account&action=txlist&address=${address}&apikey=${etherscanApiKey}`;
        const response = await fetch(url);
        const json = await response.json();
        return json.result;
      }
      
      // Build the HTML table from the list of transactions
      function buildTable(transactions) {
        let table = '<table><tr><th>Transaction Hash</th><th>From</th><th>To</th><th>Value</th></tr>';
        transactions.forEach(transaction => {
          table += `<tr><td>${transaction.hash}</td><td>${transaction.from}</td><td>${transaction.to}</td><td>${transaction.value}</td></tr>`;
       ...