More human-readably

app.js

@@ -14,6 +14,11 @@ let blocks = [];
 let provider;
 let signer;
 
+function shortenAddress(address, chars = 4) {
+    const start = address.slice(0, chars + 2); // Keep the '0x' prefix and the first few characters
+    const end = address.slice(-chars); // Keep the last few characters
+    return `${start}...${end}`;
+}
 
 document.getElementById('connect-button').addEventListener('click', async () => {
     if (typeof window.ethereum !== 'undefined') {
@@ -34,7 +39,7 @@ document.getElementById('connect-button').addEventListener('click', async () =>
             // Hide the connect button after successful connection
             document.getElementById('connect-alert').style.display = 'none';
 
-            appendAlert(`Succefully connected to Metamask account ${signer.getAddress()}!`, 'success');
+            appendAlert(`Succefully connected to Metamask account ${await shortenAddress(signer.getAddress())}!`, 'success');
         } catch (error) {
             console.error('Error connecting to MetaMask:', error);
             appendAlert('An internal error ocurred...', 'danger');
@@ -65,17 +70,17 @@ async function updateBlocks(depth, startFrom=0, clear=true) {
         let block = await provider.getBlock(latestBlockNumber - i);
         let blockN = blocks.length;
         blocks.push(block.number);
-
+
+        let date = new Date(block.timestamp * 1000);
+
         // Display block
         blockDetailsDiv.innerHTML += `
             <div class="block card shadow-lg p-3 mb-3 mt-3 rounded bg-secondary-subtle" id="block-${blockN}">
                 <button class="card-header" id="block-${blockN}-title" onclick="showTransactions(${blockN})"><h5>Block ${block.number}</h5></button>
                 <div class="card-body">
-                    <p class="card-text"><strong>${block.transactions.length}</strong> txns. <strong>Hash:</strong> ${block.hash}.</p>
-                    <p class="card-text"><strong>By:</strong> ${block.miner}. <strong>At </strong> ${new Date(block.timestamp * 1000).toLocaleString()}</li>
+                    <p class="card-text"><strong>${block.transactions.length}</strong> txns. <strong>Hash:</strong> ${shortenAddress(block.hash)}.</p>
+                    <p class="card-text"><strong>By:</strong> ${shortenAddress(block.miner)}. <strong>At </strong> ${formatDistanceToNow(date)}</li>
                 </div>
-                <ul id="block-${blockN}-txns" class="list-group list-group-flush">
-                </ul>
             </div>
         `;
 
@@ -86,17 +91,12 @@ async function updateBlocks(depth, startFrom=0, clear=true) {
     }
 }
 
-function shortenAddress(address, chars = 4) {
-    const start = address.slice(0, chars + 2); // Keep the '0x' prefix and the first few characters
-    const end = address.slice(-chars); // Keep the last few characters
-    return `${start}...${end}`;
-}
-
 async function showTransactions(blockN) {
-    let blockTxns = document.getElementById(`block-${blockN}-txns`);
+    let blockTxns = document.getElementById('txn-details');
     let blockId = blocks[blockN];
     let updBlock = await provider.getBlockWithTransactions(blockId);
 
+    // Clear the transactions
     blockTxns.innerHTML = '';
 
     for(let i = 0; i < updBlock.transactions.length; i++) {
@@ -110,17 +110,20 @@ async function showTransactions(blockN) {
             <strong>To:</strong> ${shortenAddress(tx.to)}</p>
             `;
         } else {
+            // If there's data or address is 0x0, it's a contract interaction/creation
             content = `
-            <p>${ethers.utils.formatEther(tx.value)} ETH. <strong>Contract.</strong>.</p>
+            <p>${ethers.utils.formatEther(tx.value)} ETH. <strong>Contract</strong>.</p>
             <p><strong>From:</strong> ${shortenAddress(tx.from)}.
             <strong>To:</strong> ${shortenAddress(tx.to)}</p>
             `;
         }
 
         blockTxns.innerHTML += `
-            <li class="list-group-item">
-                ${content}
-            </li>
+            <div class="block card shadow-lg p-3 mb-3 mt-3 rounded bg-secondary-subtle">
+                <div class="card-body">
+                    ${content}
+                </div>
+            </div>
         `;
     }
 }

index.html

@@ -4,8 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ethereum Block Explorer</title>
-    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
-        type="application/javascript"></script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 <body>
@@ -15,15 +13,22 @@
         <div class="alert alert-primary"> You must <button class="btn btn-outline-primary" id="connect-button">Connect to MetaMask</button> to be able to continue! </div>
     </div>
 
-    <div id="block-details" class="container">
-        <h3 class="d-block m-5"> No blocks here yet... </h3>
+    <div class="row">
+        <div id="block-details" class="container col">
+           <h3 class="d-block m-5"> No blocks here yet... </h3>
+        </div>
+        <div id="txn-details" class="container col">
+            <h3 class="d-block m-5"> Transactions will show here... </h3>
+        </div>
     </div>
 
     <div class="d-flex justify-content-center">
         <button id="fetch-more" class="btn btn-outline-secondary">Fetch more blocks</button>
     </div>
 
-    <script src="app.js?v=0.0.2"></script>
+    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/date-fns.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script src="app.js?v=0.0.2"></script>
 </body>
 </html>