feat: clean up blocks table

cardano-miners · Apr 17, 2024 · 03e97d0 · 03e97d0
1 parent af83310
commit 03e97d0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/miner/utils.ts b/miner/utils.ts
@@ -37,7 +37,7 @@ export function printExecutionDetails(tx: TxSigned, name: string) {
 
   const remainingMem = MAX_TX_EX_MEM - mem;
   const remainingSteps = MAX_TX_EX_STEPS - steps;
-  const txBytes = tx.txSigned.to_cbor_bytes().length;
+  const txBytes = tx.txSigned.to_bytes().length;
   const remainingTxBytes = MAX_TX_SIZE - txBytes;
   const fee = tx.txSigned.body().fee().toString();
 

diff --git a/src/routes/explorer/+page.svelte b/src/routes/explorer/+page.svelte
@@ -3,6 +3,8 @@
   import { goto } from '$app/navigation';
 
   import type { PageData } from './$types';
+  import { intlFormat } from 'date-fns/intlFormat';
+  import { formatDistance } from 'date-fns/formatDistance';
 
   export let data: PageData;
 
@@ -15,14 +17,23 @@
 
     newPage += delta;
 
-    console.log(newPage);
-
     const query = new URLSearchParams($page.url.searchParams.toString());
 
     query.set('page', newPage.toString());
 
     goto(`?${query.toString()}`);
   }
+
+  function formatHash(value: string) {
+    const regex = /^0{4,}|0{4,}$/g;
+    return value.replace(regex, (match) => `0<sub>${match.length}</sub> `);
+  }
+
+  function makeTarget(target_number: number, leading_zeros: number) {
+    const value = target_number * 16 ** (60 - leading_zeros);
+
+    return value.toString(16).padStart(64, '0');
+  }
 </script>
 
 <div class="flex flex-col gap-12 mt-12 md:mx-0 mx-2">
@@ -33,32 +44,30 @@
   <div class="overflow-x-auto">
     <div class="table w-full text-white overflow-hidden rounded-lg shadow-lg mt-4">
       <div class="table-header-group bg-base-300">
-        <div class="table-cell p-4">Epoch</div>
         <div class="table-cell p-4">Block</div>
-        <div class="table-cell p-4">Leading Zeroes</div>
         <div class="table-cell p-4">Target</div>
         <div class="table-cell p-4">Hash</div>
-        <div class="table-cell p-4">Rewards</div>
+        <div class="table-cell p-4">Epoch</div>
         <div class="table-cell p-4">Time</div>
       </div>
 
       {#each data.blocks as block (block.block_number)}
         <div class="table-row-group bg-base-200">
-          <div class="table-cell p-4 border-t-2 border-gray-800">{block.epoch_time}</div>
           <div class="table-cell p-4 border-t-2 border-gray-800">
             <div class="badge badge-primary">{block.block_number}</div>
           </div>
-          <div class="table-cell p-4 border-t-2 border-gray-800">{block.leading_zeros}</div>
           <div class="table-cell p-4 border-t-2 border-gray-800">
-            {block.target_number}
+            {@html formatHash(makeTarget(block.target_number, block.leading_zeros))}
+          </div>
+          <div class="table-cell p-4 border-t-2 border-gray-800">
+            {@html formatHash(block.current_hash)}
           </div>
           <div class="table-cell p-4 border-t-2 border-gray-800">
-            {block.current_hash}
+            <div class="badge badge-success">{Math.floor(block.block_number / 2016 + 1)}</div>
           </div>
           <div class="table-cell p-4 border-t-2 border-gray-800">
-            <div class="badge badge-success">{50}</div>
+            {intlFormat(block.current_posix_time)}
           </div>
-          <div class="table-cell p-4 border-t-2 border-gray-800">{block.current_posix_time}</div>
         </div>
       {/each}
     </div>