From 1e9e33328fe1a60ac2d64e709dab19b5e946c714 Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Sat, 25 May 2024 18:47:31 +0300
Subject: [PATCH] explorer: Consistent Display of Relative Time

Resolves #1791
---
 .../__tests__/__snapshots__/BlocksList.spec.js.snap         | 6 +++---
 .../__tests__/__snapshots__/TransactionsList.spec.js.snap   | 6 +++---
 explorer/src/lib/components/blocks-list/BlocksList.svelte   | 6 +++---
 .../components/transactions-list/TransactionsList.svelte    | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

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 617350d8f0..c035f53c36 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
@@ -48,7 +48,7 @@ exports[`Blocks List > renders the Blocks List component 1`] = `
         class="dusk-icon dusk-icon--size--normal detail-list__help"
         data-tooltip-id="main-tooltip"
         data-tooltip-place="top"
-        data-tooltip-text="The date and time the block was created"
+        data-tooltip-text="Time elapsed since the block was created"
         data-tooltip-type="info"
         role="graphics-symbol"
         viewBox="0 0 24 24"
@@ -60,7 +60,7 @@ exports[`Blocks List > renders the Blocks List component 1`] = `
       
       <!--&lt;Icon&gt;-->
        
-      timestamp
+      relative time
     </dt>
      
     <dd
@@ -71,7 +71,7 @@ exports[`Blocks List > renders the Blocks List component 1`] = `
         datetime="2024-04-16T20:07:02.000Z"
         slot="definition"
       >
-        Tue, 16 Apr 2024 20:07:02 GMT (last month)
+        last month
       </time>
     </dd>
     <!--&lt;ListItem&gt;-->
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 3310293366..f1bc534490 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
@@ -48,7 +48,7 @@ exports[`Transactions List > renders the Transactions List component 1`] = `
         class="dusk-icon dusk-icon--size--normal detail-list__help"
         data-tooltip-id="main-tooltip"
         data-tooltip-place="top"
-        data-tooltip-text="The date and time the transaction was created"
+        data-tooltip-text="Time elapsed since the transaction was created"
         data-tooltip-type="info"
         role="graphics-symbol"
         viewBox="0 0 24 24"
@@ -60,7 +60,7 @@ exports[`Transactions List > renders the Transactions List component 1`] = `
       
       <!--&lt;Icon&gt;-->
        
-      timestamp
+      relative time
     </dt>
      
     <dd
@@ -71,7 +71,7 @@ exports[`Transactions List > renders the Transactions List component 1`] = `
         datetime="2024-04-16T06:39:09.000Z"
         slot="definition"
       >
-        Tue, 16 Apr 2024 06:39:09 GMT (last month)
+        last month
       </time>
     </dd>
     <!--&lt;ListItem&gt;-->
diff --git a/explorer/src/lib/components/blocks-list/BlocksList.svelte b/explorer/src/lib/components/blocks-list/BlocksList.svelte
index 50893932f2..d6e9ebd92e 100644
--- a/explorer/src/lib/components/blocks-list/BlocksList.svelte
+++ b/explorer/src/lib/components/blocks-list/BlocksList.svelte
@@ -30,14 +30,14 @@
   </ListItem>
 
   <!-- TIMESTAMP -->
-  <ListItem tooltipText="The date and time the block was created">
-    <svelte:fragment slot="term">timestamp</svelte:fragment>
+  <ListItem tooltipText="Time elapsed since the block was created">
+    <svelte:fragment slot="term">relative time</svelte:fragment>
     <time
       datetime={data.header.date.toISOString()}
       class="block-details__list-timestamp"
       slot="definition"
     >
-      {`${data.header.date.toUTCString()} (${getRelativeTimeString(data.header.date, "long")})`}
+      {getRelativeTimeString(data.header.date, "long")}
     </time>
   </ListItem>
 
diff --git a/explorer/src/lib/components/transactions-list/TransactionsList.svelte b/explorer/src/lib/components/transactions-list/TransactionsList.svelte
index 0b7521b76a..fc7355cd6d 100644
--- a/explorer/src/lib/components/transactions-list/TransactionsList.svelte
+++ b/explorer/src/lib/components/transactions-list/TransactionsList.svelte
@@ -52,14 +52,14 @@
   </ListItem>
 
   <!-- TIMESTAMP -->
-  <ListItem tooltipText="The date and time the transaction was created">
-    <svelte:fragment slot="term">timestamp</svelte:fragment>
+  <ListItem tooltipText="Time elapsed since the transaction was created">
+    <svelte:fragment slot="term">relative time</svelte:fragment>
     <time
       datetime={data.date.toISOString()}
       class="transaction-details__list-timestamp"
       slot="definition"
     >
-      {`${data.date.toUTCString()} (${getRelativeTimeString(data.date, "long")})`}
+      {getRelativeTimeString(data.date, "long")}
     </time>
   </ListItem>