refactor block and transaction details pages

explorer/src/lib/components/block-details/BlockDetails.css

@@ -1,23 +1,9 @@
-.block-details {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.block-details__header {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.block-details__header-heading {
-  text-transform: uppercase;
-  font-size: 1.5rem;
-  font-weight: 400;
-}
-
-.block-details__block-height {
-  display: none;
+.block-details__list {
+  display: grid;
+  grid-template-columns: 1fr;
+  font-size: 0.875rem;
+  column-gap: 1.875rem;
+  padding: 0 1.125rem;
 }
 
 .block-details__list-anchor {
@@ -33,13 +19,6 @@
   width: 12.5rem;
 }
 
-.block-details__list {
-  display: grid;
-  grid-template-columns: 1fr;
-  font-size: 0.875rem;
-  column-gap: 1.875rem;
-}
-
 .block-details__state-hash {
   padding-top: 0.625rem;
 }

explorer/src/lib/components/block-details/BlockDetails.svelte

@@ -2,28 +2,46 @@
 
 <script>
   import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
-  import { AppAnchor, ListItem } from "$lib/components";
-  import { Button, Card, Icon, ProgressBar } from "$lib/dusk/components";
-  import { createValueFormatter } from "$lib/dusk/value";
+  import { AppAnchor, DataCard, ListItem } from "$lib/components";
+  import { Icon, ProgressBar } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
+  import { createValueFormatter } from "$lib/dusk/value";
   import {
     calculateAdaptiveCharCount,
     getRelativeTimeString,
+    makeClassName,
     middleEllipsis,
   } from "$lib/dusk/string";
   import { onMount } from "svelte";
   import "./BlockDetails.css";
 
-  /** @type {*} */
+  /** @type {string | Undefined} */
+  export let className = undefined;
+
+  /** @type {Block} */
   export let data;
 
+  /** @type {Error | null}*/
+  export let error;
+
+  /** @type {Boolean} */
+  export let loading;
+
   const formatter = createValueFormatter("en");
 
-  /** @type {number} */
+  /** @type {Number} */
   let screenWidth = window.innerWidth;
 
-  /** @type {HTMLElement}*/
-  let blockList;
+  /** @type {string}*/
+  let blockHeight;
+
+  $: classes = makeClassName(["block-details", className]);
+
+  $: {
+    if (data) {
+      blockHeight = formatter(data.header.height);
+    }
+  }
 
   onMount(() => {
     const resizeObserver = new ResizeObserver((entries) => {
@@ -32,22 +50,21 @@
       screenWidth = entry.contentRect.width;
     });
 
-    resizeObserver.observe(blockList.children[1]);
+    resizeObserver.observe(document.body);
 
     return () => resizeObserver.disconnect();
   });
 </script>
 
-<Card className="block-details">
-  <header slot="header" class="block-details__header">
-    <h3 class="block-details__header-heading">
-      Block Details <span class="block-details__block-height">
-        - #{formatter(34526)}</span
-      >
-    </h3>
-    <Button on:click={() => history.back()} text="Back" variant="secondary" />
-  </header>
-  <dl class="block-details__list" bind:this={blockList}>
+<DataCard
+  {data}
+  {error}
+  {loading}
+  className={classes}
+  title="Block Details - #{blockHeight}"
+  button={{ action: () => history.back(), label: "Back" }}
+>
+  <dl class="block-details__list">
     <!-- BLOCK HASH -->
     <ListItem tooltipText="The hash for the header of the block">
       <svelte:fragment slot="term">block hash</svelte:fragment>
@@ -85,11 +102,11 @@
     <ListItem tooltipText="The date and time the block was created">
       <svelte:fragment slot="term">timestamp</svelte:fragment>
       <time
-        datetime={new Date(data.header.ts * 1000).toISOString()}
+        datetime={data.header.date.toISOString()}
         class="block-details__list-timestamp"
         slot="definition"
       >
-        {getRelativeTimeString(new Date(data.header.ts * 1000), "long")}
+        {getRelativeTimeString(data.header.date, "long")}
       </time>
     </ListItem>
 
@@ -163,4 +180,4 @@
       >
     </ListItem>
   </dl>
-</Card>
+</DataCard>

explorer/src/lib/components/blocks-card/BlocksCard.svelte

@@ -1,8 +1,9 @@
 <svelte:options immutable={true} />
 
 <script>
-  import { Alert, BlocksList, BlocksTable, DataCard } from "$lib/components";
+  import { BlocksList, BlocksTable, DataCard } from "$lib/components";
   import { makeClassName } from "$lib/dusk/string";
+  import { goto } from "$lib/navigation";
 
   /** @type {string | Undefined} */
   export let className = undefined;
@@ -16,36 +17,26 @@
   /** @type {Boolean} */
   export let loading;
 
-  /** @type {Boolean} */
-  let hasEmptyData;
-
   /** @type {number} */
   let clientWidth;
 
-  $: {
-    hasEmptyData = Array.isArray(blocks) && blocks.length === 0;
-  }
-
   $: classes = makeClassName(["blocks-card", className]);
 </script>
 
 <svelte:window bind:outerWidth={clientWidth} />
 <DataCard
+  data={blocks}
+  {error}
+  {loading}
   className={classes}
   title="Blocks"
-  action={{ href: "/blocks", label: "All Blocks" }}
+  button={{ action: () => goto("/blocks"), label: "All Blocks" }}
 >
-  {#if error || hasEmptyData}
-    <Alert on:retry {error} {hasEmptyData} />
-  {:else if blocks}
-    {#if clientWidth > 768}
-      <BlocksTable data={blocks} />
-    {:else}
-      <div class="blocks-mobile">
-        {#each blocks as block (block)}
-          <BlocksList data={block} />
-        {/each}
-      </div>
-    {/if}
+  {#if clientWidth > 768}
+    <BlocksTable data={blocks} />
+  {:else}
+    {#each blocks as block (block)}
+      <BlocksList data={block} />
+    {/each}
   {/if}
 </DataCard>

explorer/src/lib/components/blocks-list/BlocksList.css

@@ -1,3 +1,7 @@
+.block-details__list-link {
+  text-decoration: none;
+}
+
 .dusk-progress-bar.blocks-list__gas-used {
   width: 60%;
 }

explorer/src/lib/components/blocks-list/BlocksList.svelte

@@ -1,7 +1,7 @@
 <svelte:options immutable={true} />
 
 <script>
-  import { DataGuard, DetailList, ListItem } from "$lib/components";
+  import { AppAnchor, DataGuard, DetailList, ListItem } from "$lib/components";
   import { Badge, ProgressBar } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
   import { getRelativeTimeString } from "$lib/dusk/string";
@@ -21,7 +21,11 @@
   >
     <svelte:fragment slot="term"># block</svelte:fragment>
     <svelte:fragment slot="definition"
-      >{formatter(data.header.height)}</svelte:fragment
+      ><AppAnchor
+        className="block-details__list-link"
+        href={`/blocks/block?id=${data.header.hash}`}
+        >{formatter(data.header.height)}</AppAnchor
+      ></svelte:fragment
     >
   </ListItem>
 

explorer/src/lib/components/blocks-table/BlocksTable.css

@@ -1,5 +1,4 @@
 .block__link {
-  color: var(--primary-color);
   text-decoration: none;
 }
 

explorer/src/lib/components/data-card/DataCard.svelte

@@ -1,32 +1,56 @@
 <svelte:options immutable={true} />
 
 <script>
+  import { Alert } from "$lib/components";
   import { Button, Card } from "$lib/dusk/components";
   import { makeClassName } from "$lib/dusk/string";
-  import { goto } from "$lib/navigation";
 
   import "./DataCard.css";
 
-  /** @type {string}*/
+  /** @type {Block[] | Transaction[] | Block | Transaction}*/
+  export let data;
+
+  /** @type {Error | null}*/
+  export let error;
+
+  /** @type {Boolean} */
+  export let loading;
+
+  /** @type {String}*/
   export let title;
 
-  /** @type { {label:string, href:string} }*/
-  export let action;
+  /** @type {{action:(e: MouseEvent) => void, label: String}}*/
+  export let button;
 
   /** @type {string | Undefined} */
   export let className = undefined;
 
+  /** @type {Boolean} */
+  let hasEmptyData;
+
   $: classes = makeClassName(["data-card", className]);
+
+  $: {
+    hasEmptyData = Array.isArray(data) && data.length === 0;
+  }
 </script>
 
 <Card className={classes}>
   <header slot="header" class="data-card__header">
     <h1 class="data-card__header-title">{title}</h1>
-    <Button
-      on:click={() => goto(action.href)}
-      text={action.label}
-      variant="secondary"
-    />
+    {#if button}
+      <Button
+        on:click={button.action}
+        text={button.label}
+        variant="secondary"
+      />
+    {/if}
   </header>
-  <slot />
+  {#if loading && data === null}
+    <p>Loading...</p>
+  {:else if error || hasEmptyData}
+    <Alert on:retry {error} {hasEmptyData} />
+  {:else if data}
+    <slot />
+  {/if}
 </Card>

explorer/src/lib/components/detail-list/DetailList.css

@@ -3,4 +3,5 @@
   grid-template-columns: 1fr 1fr;
   font-size: 0.75rem;
   column-gap: 1.125rem;
+  padding-bottom: 0.625rem;
 }

explorer/src/lib/components/transaction-details/TransactionDetails.css

@@ -1,19 +1,9 @@
-.transaction-details {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.transaction-details__header {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.transaction-details__header-heading {
-  text-transform: uppercase;
-  font-size: 1.5rem;
-  font-weight: 400;
+.transaction-details__list {
+  display: grid;
+  grid-template-columns: 1fr;
+  font-size: 0.875rem;
+  column-gap: 1.875rem;
+  padding: 0 1.125rem;
 }
 
 .transaction-details__status,
@@ -29,13 +19,6 @@
   width: 12.5rem;
 }
 
-.transaction-details__list {
-  display: grid;
-  grid-template-columns: 1fr;
-  font-size: 0.875rem;
-  column-gap: 1.875rem;
-}
-
 .transaction-details__payload {
   margin-top: 0.625rem;
   padding: 0.625rem 0.875rem;