wip

dusk-network · Aug 2, 2024 · c9a195c · c9a195c
1 parent 26d38d3
commit c9a195c
Show file tree

Hide file tree

Showing 25 changed files with 214 additions and 148 deletions.
diff --git a/explorer/src/lib/components/__tests__/BlocksList.spec.js b/explorer/src/lib/components/__tests__/BlocksList.spec.js
@@ -49,7 +49,7 @@ describe("Blocks List", () => {
 
     expect(timeElement).toHaveTextContent("now");
 
-    await rerender({ ...props, autoRefreshTimes: true });
+    await rerender({ ...props, autoRefreshTime: true });
 
     expect(timeElement).toHaveTextContent("3 seconds ago");
 

diff --git a/explorer/src/lib/components/__tests__/TransactionsList.spec.js b/explorer/src/lib/components/__tests__/TransactionsList.spec.js
@@ -65,7 +65,7 @@ describe("Transactions List", () => {
 
     expect(timeElement).toHaveTextContent("now");
 
-    await rerender({ ...props, autoRefreshTimes: true });
+    await rerender({ ...props, autoRefreshTime: true });
 
     expect(timeElement).toHaveTextContent("3 seconds ago");
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,15 +1,14 @@
 <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";
 
   /** @type {boolean} */
-  export let autoRefreshTimes = false;
+  export let autoRefreshTime = false;
 
   /** @type {Block} */
   export let data;
@@ -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={autoRefreshTime}
+      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
@@ -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/latest-transactions-card/LatestTransactionsCard.svelte b/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte
@@ -53,7 +53,7 @@
   <div class="desktop-hidden">
     {#each txns as txn (txn)}
       <TransactionsList
-        autoRefreshTimes={!isOnHomeScreen}
+        autoRefreshTime={!isOnHomeScreen}
         data={txn}
         mode={isOnHomeScreen ? "compact" : "full"}
         {displayTooltips}

diff --git a/explorer/src/lib/components/rerender/Rerender.svelte b/explorer/src/lib/components/rerender/Rerender.svelte