From cfb9e465095115b08c0079f83abe5eed44e0c3a4 Mon Sep 17 00:00:00 2001
From: Andrea Scartabelli <andrea.scartabelli@gmail.com>
Date: Thu, 1 Aug 2024 12:13:53 +0200
Subject: [PATCH] wip

---
 .../__snapshots__/BlockDetails.spec.js.snap   |  3 +-
 .../__snapshots__/BlocksCard.spec.js.snap     | 20 ++++----
 .../__snapshots__/BlocksList.spec.js.snap     |  2 +-
 .../TransactionDetails.spec.js.snap           |  6 +--
 .../TransactionsCard.spec.js.snap             | 20 ++++----
 .../TransactionsList.spec.js.snap             |  4 +-
 .../block-details/BlockDetails.svelte         | 27 +++++------
 .../components/blocks-list/BlocksList.svelte  | 20 +++-----
 explorer/src/lib/components/index.js          |  1 -
 .../lib/components/rerender/Rerender.svelte   | 15 ------
 .../TransactionDetails.svelte                 | 21 +++++----
 .../transactions-list/TransactionsList.svelte | 31 ++++--------
 .../components/__tests__/RelativeTime.spec.js |  9 ++++
 .../components/__tests__/Rerender.spec.js     |  4 +-
 .../__snapshots__/Rerender.spec.js.snap       |  7 +++
 explorer/src/lib/dusk/components/index.js     |  2 +
 .../relative-time/RelativeTime.svelte         | 47 +++++++++++++++++++
 .../dusk/components/rerender/Rerender.svelte  | 43 +++++++++++++++++
 .../__tests__/__snapshots__/page.spec.js.snap | 30 ++++++------
 .../__tests__/__snapshots__/page.spec.js.snap |  7 ++-
 .../__tests__/__snapshots__/page.spec.js.snap | 30 ++++++------
 .../__tests__/__snapshots__/page.spec.js.snap |  3 +-
 22 files changed, 209 insertions(+), 143 deletions(-)
 delete mode 100644 explorer/src/lib/components/rerender/Rerender.svelte
 create mode 100644 explorer/src/lib/dusk/components/__tests__/RelativeTime.spec.js
 rename explorer/src/lib/{ => dusk}/components/__tests__/Rerender.spec.js (95%)
 create mode 100644 explorer/src/lib/dusk/components/__tests__/__snapshots__/Rerender.spec.js.snap
 create mode 100644 explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte
 create mode 100644 explorer/src/lib/dusk/components/rerender/Rerender.svelte

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
index 20115baa53..7d87b93a24 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
@@ -140,13 +140,12 @@ exports[`Block Details > renders the Block Details component 1`] = `
         class="details-list__definition"
       >
         <time
-          class="block-details__list-timestamp"
+          class="dusk-relative-time block-details__list-timestamp"
           datetime="2024-04-16T20:07:02.000Z"
           slot="definition"
         >
           Tue, 16 Apr 2024 20:07:02 GMT (last month)
           
-           
         </time>
       </dd>
       <dt
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
index 7b1fee6aa4..9ab5e48524 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
@@ -706,7 +706,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:54.000Z"
             slot="definition"
           >
@@ -810,7 +810,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:51.000Z"
             slot="definition"
           >
@@ -914,7 +914,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:47.000Z"
             slot="definition"
           >
@@ -1018,7 +1018,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:45.000Z"
             slot="definition"
           >
@@ -1122,7 +1122,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:42.000Z"
             slot="definition"
           >
@@ -1226,7 +1226,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:39.000Z"
             slot="definition"
           >
@@ -1330,7 +1330,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:35.000Z"
             slot="definition"
           >
@@ -1434,7 +1434,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:32.000Z"
             slot="definition"
           >
@@ -1538,7 +1538,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:29.000Z"
             slot="definition"
           >
@@ -1642,7 +1642,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="block-details__list-timestamp"
+            class="dusk-relative-time block-details__list-timestamp"
             datetime="2024-05-28T14:26:24.000Z"
             slot="definition"
           >
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
index a395af1b15..946786bef6 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
@@ -33,7 +33,7 @@ exports[`Blocks List > renders the Blocks List component 1`] = `
     class="details-list__definition details-list__definition--table"
   >
     <time
-      class="block-details__list-timestamp"
+      class="dusk-relative-time block-details__list-timestamp"
       datetime="2024-04-16T20:07:02.000Z"
       slot="definition"
     >
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
index 165193dc40..555e7c29db 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
@@ -134,13 +134,12 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
         class="details-list__definition"
       >
         <time
-          class="transaction-details__list-timestamp"
+          class="dusk-relative-time transaction-details__list-timestamp"
           datetime="2024-04-16T06:39:09.000Z"
           slot="definition"
         >
           Tue, 16 Apr 2024 06:39:09 GMT (last month)
           
-           
         </time>
       </dd>
       <dt
@@ -461,13 +460,12 @@ exports[`Transaction Details > renders the Transaction Details component with th
         class="details-list__definition"
       >
         <time
-          class="transaction-details__list-timestamp"
+          class="dusk-relative-time transaction-details__list-timestamp"
           datetime="2024-04-16T06:39:09.000Z"
           slot="definition"
         >
           Tue, 16 Apr 2024 06:39:09 GMT (last month)
           
-           
         </time>
       </dd>
       <dt
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
index c21b955d63..7471752e9b 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
@@ -904,7 +904,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:42:20.000Z"
             slot="definition"
           >
@@ -1021,7 +1021,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:42:08.000Z"
             slot="definition"
           >
@@ -1138,7 +1138,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:41:58.000Z"
             slot="definition"
           >
@@ -1255,7 +1255,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:40:57.000Z"
             slot="definition"
           >
@@ -1372,7 +1372,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:40:28.000Z"
             slot="definition"
           >
@@ -1489,7 +1489,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:39:59.000Z"
             slot="definition"
           >
@@ -1606,7 +1606,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:39:13.000Z"
             slot="definition"
           >
@@ -1723,7 +1723,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:01:59.000Z"
             slot="definition"
           >
@@ -1840,7 +1840,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:01:15.000Z"
             slot="definition"
           >
@@ -1957,7 +1957,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
           class="details-list__definition details-list__definition--table"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-05-29T05:00:40.000Z"
             slot="definition"
           >
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
index f22446ceb2..22ca90c48f 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
@@ -33,7 +33,7 @@ exports[`Transactions List > should render the \`TransactionsList\` component in
     class="details-list__definition details-list__definition--table"
   >
     <time
-      class="transaction-details__list-timestamp"
+      class="dusk-relative-time transaction-details__list-timestamp"
       datetime="2024-04-16T06:39:09.000Z"
       slot="definition"
     >
@@ -127,7 +127,7 @@ exports[`Transactions List > should render the \`TransactionsList\` component in
     class="details-list__definition details-list__definition--table"
   >
     <time
-      class="transaction-details__list-timestamp"
+      class="dusk-relative-time transaction-details__list-timestamp"
       datetime="2024-04-16T06:39:09.000Z"
       slot="definition"
     >
diff --git a/explorer/src/lib/components/block-details/BlockDetails.svelte b/explorer/src/lib/components/block-details/BlockDetails.svelte
index 66829b6be8..4ace392e80 100644
--- a/explorer/src/lib/components/block-details/BlockDetails.svelte
+++ b/explorer/src/lib/components/block-details/BlockDetails.svelte
@@ -2,13 +2,8 @@
 
 <script>
   import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
-  import {
-    AppAnchorButton,
-    DataCard,
-    ListItem,
-    Rerender,
-  } from "$lib/components";
-  import { ProgressBar } from "$lib/dusk/components";
+  import { AppAnchorButton, DataCard, ListItem } from "$lib/components";
+  import { ProgressBar, RelativeTime } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import { createValueFormatter } from "$lib/dusk/value";
   import {
@@ -34,6 +29,10 @@
 
   const formatter = createValueFormatter("en");
 
+  /** @type {(date: Date) => string} */
+  const formatDate = (date) =>
+    `${date.toUTCString()} (${getRelativeTimeString(date, "long")})`;
+
   /** @type {Number} */
   let screenWidth = window.innerWidth;
 
@@ -97,15 +96,13 @@
     <!-- TIMESTAMP -->
     <ListItem tooltipText="The date and time the block was created">
       <svelte:fragment slot="term">timestamp</svelte:fragment>
-      <time
-        datetime={data.header.date.toISOString()}
-        class="block-details__list-timestamp"
+      <RelativeTime
+        autoRefresh={true}
+        className="block-details__list-timestamp"
+        date={data.header.date}
+        {formatDate}
         slot="definition"
-      >
-        <Rerender>
-          {`${data.header.date.toUTCString()} (${getRelativeTimeString(data.header.date, "long")})`}
-        </Rerender>
-      </time>
+      />
     </ListItem>
 
     <!-- TRANSACTIONS -->
diff --git a/explorer/src/lib/components/blocks-list/BlocksList.svelte b/explorer/src/lib/components/blocks-list/BlocksList.svelte
index 77ac0d21c2..1cb2a7896d 100644
--- a/explorer/src/lib/components/blocks-list/BlocksList.svelte
+++ b/explorer/src/lib/components/blocks-list/BlocksList.svelte
@@ -1,10 +1,9 @@
 <svelte:options immutable={true} />
 
 <script>
-  import { AppAnchor, DetailList, ListItem, Rerender } from "$lib/components";
-  import { ProgressBar } from "$lib/dusk/components";
+  import { AppAnchor, DetailList, ListItem } from "$lib/components";
+  import { ProgressBar, RelativeTime } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
-  import { getRelativeTimeString } from "$lib/dusk/string";
   import { luxToDusk } from "$lib/dusk/currency";
   import "./BlocksList.css";
 
@@ -44,17 +43,12 @@
       : ""}
   >
     <svelte:fragment slot="term">relative time</svelte:fragment>
-    <time
-      datetime={data.header.date.toISOString()}
-      class="block-details__list-timestamp"
+    <RelativeTime
+      autoRefresh={autoRefreshTimes}
+      className="block-details__list-timestamp"
+      date={data.header.date}
       slot="definition"
-    >
-      {#if autoRefreshTimes}
-        <Rerender>{getRelativeTimeString(data.header.date, "long")}</Rerender>
-      {:else}
-        {getRelativeTimeString(data.header.date, "long")}
-      {/if}
-    </time>
+    />
   </ListItem>
 
   <!-- AVERAGE FEE PAID -->
diff --git a/explorer/src/lib/components/index.js b/explorer/src/lib/components/index.js
index 1be20b9b04..86e43cbe63 100644
--- a/explorer/src/lib/components/index.js
+++ b/explorer/src/lib/components/index.js
@@ -15,7 +15,6 @@ export { default as LatestBlocksCard } from "./latest-blocks-card/LatestBlocksCa
 export { default as LatestTransactionsCard } from "./latest-transactions-card/LatestTransactionsCard.svelte";
 export { default as ListItem } from "./list-item/ListItem.svelte";
 export { default as Navbar } from "./navbar/Navbar.svelte";
-export { default as Rerender } from "./rerender/Rerender.svelte";
 export { default as SearchNotification } from "./search-notification/SearchNotification.svelte";
 export { default as StaleDataNotice } from "./stale-data-notice/StaleDataNotice.svelte";
 export { default as TextboxAndButton } from "./textbox-and-button/TextboxAndButton.svelte";
diff --git a/explorer/src/lib/components/rerender/Rerender.svelte b/explorer/src/lib/components/rerender/Rerender.svelte
deleted file mode 100644
index a9ce0ffd70..0000000000
--- a/explorer/src/lib/components/rerender/Rerender.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  /* eslint-disable svelte/infinite-reactive-loop */
-
-  /** @type {Number} */
-  export let interval = 1000;
-
-  let updateFlag = 0;
-  $: setTimeout(() => {
-    updateFlag ^= 1;
-  }, interval);
-</script>
-
-{#key updateFlag}
-  <slot />
-{/key}
diff --git a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
index 3c7c0c02b8..69e7678243 100644
--- a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
+++ b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
@@ -6,10 +6,9 @@
     DataCard,
     DataGuard,
     ListItem,
-    Rerender,
     StaleDataNotice,
   } from "$lib/components";
-  import { Badge, Card, Switch } from "$lib/dusk/components";
+  import { Badge, Card, RelativeTime, Switch } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
   import {
     createCurrencyFormatter,
@@ -47,6 +46,10 @@
   const currencyFormatter = createCurrencyFormatter("en", "usd", 10);
   const feeFormatter = createFeeFormatter("en");
 
+  /** @type {(date: Date) => string} */
+  const formatDate = (date) =>
+    `${date.toUTCString()} (${getRelativeTimeString(date, "long")})`;
+
   /** @type {number} */
   let screenWidth = window.innerWidth;
 
@@ -115,15 +118,13 @@
     <!-- TIMESTAMP -->
     <ListItem tooltipText="The date and time the transaction was created">
       <svelte:fragment slot="term">timestamp</svelte:fragment>
-      <time
-        datetime={data.date.toISOString()}
-        class="transaction-details__list-timestamp"
+      <RelativeTime
+        autoRefresh={true}
+        className="transaction-details__list-timestamp"
+        date={data.date}
+        {formatDate}
         slot="definition"
-      >
-        <Rerender>
-          {`${data.date.toUTCString()} (${getRelativeTimeString(data.date, "long")})`}
-        </Rerender>
-      </time>
+      />
     </ListItem>
 
     <!-- TYPE -->
diff --git a/explorer/src/lib/components/transactions-list/TransactionsList.svelte b/explorer/src/lib/components/transactions-list/TransactionsList.svelte
index b8b15bf435..9d70456f20 100644
--- a/explorer/src/lib/components/transactions-list/TransactionsList.svelte
+++ b/explorer/src/lib/components/transactions-list/TransactionsList.svelte
@@ -1,20 +1,10 @@
 <svelte:options immutable={true} />
 
 <script>
-  import {
-    AppAnchor,
-    DataGuard,
-    DetailList,
-    ListItem,
-    Rerender,
-  } from "$lib/components";
+  import { AppAnchor, DataGuard, DetailList, ListItem } from "$lib/components";
   import { createValueFormatter } from "$lib/dusk/value";
-  import {
-    calculateAdaptiveCharCount,
-    getRelativeTimeString,
-    middleEllipsis,
-  } from "$lib/dusk/string";
-  import { Badge } from "$lib/dusk/components";
+  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
+  import { Badge, RelativeTime } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import { onMount } from "svelte";
 
@@ -73,17 +63,12 @@
       : ""}
   >
     <svelte:fragment slot="term">relative time</svelte:fragment>
-    <time
-      datetime={data.date.toISOString()}
-      class="transaction-details__list-timestamp"
+    <RelativeTime
+      autoRefresh={autoRefreshTimes}
+      date={data.date}
+      className="transaction-details__list-timestamp"
       slot="definition"
-    >
-      {#if autoRefreshTimes}
-        <Rerender>{getRelativeTimeString(data.date, "long")}</Rerender>
-      {:else}
-        {getRelativeTimeString(data.date, "long")}
-      {/if}
-    </time>
+    />
   </ListItem>
 
   {#if mode === "full"}
diff --git a/explorer/src/lib/dusk/components/__tests__/RelativeTime.spec.js b/explorer/src/lib/dusk/components/__tests__/RelativeTime.spec.js
new file mode 100644
index 0000000000..9c4b528fee
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/RelativeTime.spec.js
@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+
+import { RelativeTime } from "..";
+
+describe("RelativeTime", () => {
+  it.skip("should but still doesn't", () => {
+    expect(true).toBe(false);
+  });
+});
diff --git a/explorer/src/lib/components/__tests__/Rerender.spec.js b/explorer/src/lib/dusk/components/__tests__/Rerender.spec.js
similarity index 95%
rename from explorer/src/lib/components/__tests__/Rerender.spec.js
rename to explorer/src/lib/dusk/components/__tests__/Rerender.spec.js
index 9865f82fbc..4a741c0af4 100644
--- a/explorer/src/lib/components/__tests__/Rerender.spec.js
+++ b/explorer/src/lib/dusk/components/__tests__/Rerender.spec.js
@@ -1,9 +1,11 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { cleanup } from "@testing-library/svelte";
-import { Rerender } from "..";
 
 import { renderWithSimpleContent } from "$lib/dusk/test-helpers";
 
+import { Rerender } from "..";
+
+// TODO rewrite tests
 describe("updates the slot content every second", () => {
   const baseOptions = {
     target: document.body,
diff --git a/explorer/src/lib/dusk/components/__tests__/__snapshots__/Rerender.spec.js.snap b/explorer/src/lib/dusk/components/__tests__/__snapshots__/Rerender.spec.js.snap
new file mode 100644
index 0000000000..1712649963
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/__snapshots__/Rerender.spec.js.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`updates the slot content every second > should render with slot data 1`] = `
+<span>
+  some text
+</span>
+`;
diff --git a/explorer/src/lib/dusk/components/index.js b/explorer/src/lib/dusk/components/index.js
index 0be65f3158..d3066574f1 100644
--- a/explorer/src/lib/dusk/components/index.js
+++ b/explorer/src/lib/dusk/components/index.js
@@ -6,6 +6,8 @@ export { default as Card } from "./card/Card.svelte";
 export { default as Icon } from "./icon/Icon.svelte";
 export { default as NavList } from "./nav-list/NavList.svelte";
 export { default as ProgressBar } from "./progress-bar/ProgressBar.svelte";
+export { default as Rerender } from "./rerender/Rerender.svelte";
+export { default as RelativeTime } from "./relative-time/RelativeTime.svelte";
 export { default as Select } from "./select/Select.svelte";
 export { default as Switch } from "./switch/Switch.svelte";
 export { default as Textbox } from "./textbox/Textbox.svelte";
diff --git a/explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte b/explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte
new file mode 100644
index 0000000000..ba5ca0d51d
--- /dev/null
+++ b/explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte
@@ -0,0 +1,47 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { Rerender } from "..";
+  import { getRelativeTimeString, makeClassName } from "$lib/dusk/string";
+
+  /** @type {boolean} */
+  export let autoRefresh = false;
+
+  /** @type {string | undefined} */
+  export let className = undefined;
+
+  /** @type {Date} */
+  export let date;
+
+  /*
+   * TODO
+   * see if we can avoid the formatter and use slots with props
+   *  -> if we can't think again about the "formatDate" name: I don't like it
+   */
+
+  /** @type {((date: Date) => string) | undefined} */
+  export let formatDate = undefined;
+
+  /** @type {(d: Date) => string} */
+  const defaultFormatter = (d) => getRelativeTimeString(d, "long");
+
+  $: classes = makeClassName(["dusk-relative-time", className]);
+  $: formatter = formatDate ?? defaultFormatter;
+</script>
+
+<time {...$$restProps} class={classes} datetime={date.toISOString()}>
+  {#if autoRefresh}
+    <!-- <Rerender>{formatter(date)}</Rerender> -->
+    <Rerender getValue={() => formatter(date)} />
+  {:else}
+    {formatter(date)}
+  {/if}
+</time>
+
+<!-- <time {...$$restProps} class={classes} datetime={date.toISOString()}>
+  {#if autoRefresh}
+    <Rerender>{formatter(date)}</Rerender>
+  {:else}
+    {formatter(date)}
+  {/if}
+</time> -->
diff --git a/explorer/src/lib/dusk/components/rerender/Rerender.svelte b/explorer/src/lib/dusk/components/rerender/Rerender.svelte
new file mode 100644
index 0000000000..977e28f006
--- /dev/null
+++ b/explorer/src/lib/dusk/components/rerender/Rerender.svelte
@@ -0,0 +1,43 @@
+<script>
+  /* eslint-disable svelte/infinite-reactive-loop */
+
+  import { areSVZ } from "lamb";
+
+  /** @typedef {any} Value */
+
+  /**
+   * If a function is passed the generated value
+   * will be used as the key for the update and as
+   * the default value for the default slot.
+   *
+   * If no function is passed the `updateFlag`
+   * will be used as key.
+   *
+   * @type {(() => Value) | undefined}
+   */
+  export let getValue = undefined;
+
+  /** @type {Number} */
+  export let interval = 1000;
+
+  /** @type {Value} */
+  let value = getValue && getValue();
+
+  let updateFlag = 0;
+
+  $: setTimeout(() => {
+    if (getValue) {
+      const newValue = getValue();
+
+      if (!areSVZ(value, newValue)) {
+        value = newValue;
+      }
+    }
+
+    updateFlag ^= 1;
+  }, interval);
+</script>
+
+{#key getValue ? value : updateFlag}
+  <slot {value}>{value}</slot>
+{/key}
diff --git a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
index 2ed48dfe30..f268c6568a 100644
--- a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
@@ -1049,7 +1049,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:54.000Z"
               slot="definition"
             >
@@ -1153,7 +1153,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:51.000Z"
               slot="definition"
             >
@@ -1257,7 +1257,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:47.000Z"
               slot="definition"
             >
@@ -1361,7 +1361,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:45.000Z"
               slot="definition"
             >
@@ -1465,7 +1465,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:42.000Z"
               slot="definition"
             >
@@ -1569,7 +1569,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:39.000Z"
               slot="definition"
             >
@@ -1673,7 +1673,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:35.000Z"
               slot="definition"
             >
@@ -1777,7 +1777,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:32.000Z"
               slot="definition"
             >
@@ -1881,7 +1881,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:29.000Z"
               slot="definition"
             >
@@ -1985,7 +1985,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:24.000Z"
               slot="definition"
             >
@@ -2089,7 +2089,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:21.000Z"
               slot="definition"
             >
@@ -2193,7 +2193,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:09.000Z"
               slot="definition"
             >
@@ -2297,7 +2297,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:25:58.000Z"
               slot="definition"
             >
@@ -2401,7 +2401,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:25:55.000Z"
               slot="definition"
             >
@@ -2505,7 +2505,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:25:36.000Z"
               slot="definition"
             >
diff --git a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
index 499e5a0ceb..bb4df8e2ec 100644
--- a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
@@ -218,13 +218,12 @@ exports[`Block Details > should render the Block Details page and query the nece
             class="details-list__definition"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-04-16T20:07:02.000Z"
               slot="definition"
             >
               Tue, 16 Apr 2024 20:07:02 GMT (last month)
               
-               
             </time>
           </dd>
           <dt
@@ -727,7 +726,7 @@ exports[`Block Details > should render the Block Details page and query the nece
               class="details-list__definition details-list__definition--table"
             >
               <time
-                class="transaction-details__list-timestamp"
+                class="dusk-relative-time transaction-details__list-timestamp"
                 datetime="2024-04-16T20:07:02.000Z"
                 slot="definition"
               >
@@ -943,7 +942,7 @@ exports[`Block Details > should render the Block Details page and query the nece
               class="details-list__definition details-list__definition--table"
             >
               <time
-                class="transaction-details__list-timestamp"
+                class="dusk-relative-time transaction-details__list-timestamp"
                 datetime="2024-04-16T20:07:02.000Z"
                 slot="definition"
               >
diff --git a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
index 56f67198f4..f52314c9da 100644
--- a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
@@ -1281,7 +1281,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:42:20.000Z"
               slot="definition"
             >
@@ -1398,7 +1398,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:42:08.000Z"
               slot="definition"
             >
@@ -1515,7 +1515,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:41:58.000Z"
               slot="definition"
             >
@@ -1632,7 +1632,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:40:57.000Z"
               slot="definition"
             >
@@ -1749,7 +1749,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:40:28.000Z"
               slot="definition"
             >
@@ -1866,7 +1866,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:39:59.000Z"
               slot="definition"
             >
@@ -1983,7 +1983,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:39:13.000Z"
               slot="definition"
             >
@@ -2100,7 +2100,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:01:59.000Z"
               slot="definition"
             >
@@ -2217,7 +2217,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:01:15.000Z"
               slot="definition"
             >
@@ -2334,7 +2334,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:00:40.000Z"
               slot="definition"
             >
@@ -2451,7 +2451,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:52:39.000Z"
               slot="definition"
             >
@@ -2568,7 +2568,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:51:02.000Z"
               slot="definition"
             >
@@ -2685,7 +2685,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:50:30.000Z"
               slot="definition"
             >
@@ -2802,7 +2802,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:48:45.000Z"
               slot="definition"
             >
@@ -2919,7 +2919,7 @@ exports[`Transactions page > should render the Transactions page, start polling
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:47:48.000Z"
               slot="definition"
             >
diff --git a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
index 2a6e81c202..173ca08b62 100644
--- a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
@@ -172,13 +172,12 @@ exports[`Transaction Details > should render the Transaction details page and qu
           class="details-list__definition"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-04-16T06:39:09.000Z"
             slot="definition"
           >
             Tue, 16 Apr 2024 06:39:09 GMT (last month)
             
-             
           </time>
         </dd>
         <dt