(feat) Use a timestamp rather than an age in block lists.

src/components/Timestamp.tsx

@@ -5,6 +5,7 @@ import TimestampAge from "./TimestampAge";
 
 type TimestampProps = {
   value: number;
+  age?: boolean;
 };
 
 const months = [
@@ -22,7 +23,7 @@ const months = [
   "Dec",
 ];
 
-const Timestamp: React.FC<TimestampProps> = ({ value }) => {
+const Timestamp: React.FC<TimestampProps> = ({ value, age }) => {
   const d = new Date(value * 1000);
   let hour = d.getUTCHours() % 12;
   if (hour === 0) {
@@ -42,12 +43,17 @@ const Timestamp: React.FC<TimestampProps> = ({ value }) => {
     minimumIntegerDigits: 2,
   })} ${am ? "AM" : "PM"} +UTC`;
 
+  let snippet;
+  if (age === undefined || age) {
+    snippet = <span><TimestampAge timestamp={value} /> ({tsString})</span>;
+  } else {
+    snippet = <span>{tsString}</span>;
+  }
+
   return (
     <div className="flex items-baseline space-x-1">
       <FontAwesomeIcon className="self-center" icon={faClock} size="sm" />
-      <span>
-        <TimestampAge timestamp={value} /> ({tsString})
-      </span>
+      { snippet }
     </div>
   );
 };

src/search/BlockItem.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 import BlockLink from "../components/BlockLink";
 import HexValue from "../components/HexValue";
-import TimestampAge from "../components/TimestampAge";
+import Timestamp from "../components/Timestamp";
 import { formatValue } from "../components/formatter";
 import BlockReward from "../execution/components/BlockReward";
 import { blockTxsURL } from "../url";
@@ -48,7 +48,7 @@ const BlockItem: React.FC<BlockItemProps> = ({ block, feeDisplay }) => {
       <span className="truncate">
         <BlockReward block={block} />
       </span>
-      <TimestampAge timestamp={block.timestamp} />
+      <Timestamp age={false} value={block.timestamp} />
     </div>
   );
 };

src/search/BlockResultHeader.tsx

@@ -40,7 +40,7 @@ const BlockResultHeader: React.FC<ResultHeaderProps> = ({
       </button>
     </div>
     <div>Rewards</div>
-    <div>Age</div>
+    <div>Timestamp</div>
   </div>
 );
 

src/search/DSBlockItem.tsx

@@ -2,7 +2,7 @@ import { DsBlockObj } from "@zilliqa-js/core/dist/types/src/types";
 import React from "react";
 import DSBlockLink from "../components/DSBlockLink";
 import HexValue from "../components/HexValue";
-import TimestampAge from "../components/TimestampAge";
+import Timestamp from "../components/Timestamp";
 import TransactionAddress from "../execution/components/TransactionAddress";
 import {
   addHexPrefix,
@@ -30,17 +30,17 @@ const DSBlockItem: React.FC<DSBlockItemProps> = ({
       </span>
       <span>{commify(block.header.Difficulty)}</span>
       <span>{commify(block.header.DifficultyDS)}</span>
-      <TimestampAge
-        timestamp={zilliqaToOtterscanTimestamp(block.header.Timestamp)}
-      />
-      <span className="col-span-4 truncate">
+      <span className="col-span-2 truncate"><Timestamp
+         age={false} value={zilliqaToOtterscanTimestamp(block.header.Timestamp)}
+        /></span>
+      <span className="col-span-2 truncate">
         <TransactionAddress
           address={pubKeyToAddr(block.header.LeaderPubKey)}
           selectedAddress={selectedAddress}
           miner={true}
         />
       </span>
-      <span className="col-span-4 truncate">
+      <span className="col-span-2 truncate">
         <HexValue value={addHexPrefix(block.header.PrevHash)} />
       </span>
     </div>

src/search/DSBlockResultHeader.tsx

@@ -5,9 +5,9 @@ const DSBlockResultHeader: React.FC = () => (
     <div>Height</div>
     <div>Difficulty</div>
     <div>DS Difficulty</div>
-    <div>Age</div>
-    <div className="col-span-4">DS Leader</div>
-    <div className="col-span-4">Prev Block Hash</div>
+    <div className="col-span-2">Timestamp</div>
+    <div className="col-span-2">DS Leader</div>
+    <div className="col-span-2">Prev Block Hash</div>
   </div>
 );
 

src/search/RecentBlockItem.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 import BlockLink from "../components/BlockLink";
 import TimestampAge from "../components/TimestampAge";
+import Timestamp from "../components/Timestamp";
 import { formatValue } from "../components/formatter";
 import BlockReward from "../execution/components/BlockReward";
 import { blockTxsURL } from "../url";
@@ -44,7 +45,7 @@ const RecentBlockItem: React.FC<BlockItemProps> = ({ block, feeDisplay }) => {
       <span className="truncate">
         <BlockReward block={block} />
       </span>
-      <TimestampAge timestamp={block.timestamp} />
+      <Timestamp age={false} value={block.timestamp} />
     </div>
   );
 };

src/search/RecentBlockResultHeader.tsx

@@ -24,7 +24,7 @@ const RecentBlockResultHeader: React.FC<ResultHeaderProps> = ({
       </button>
     </div>
     <div>Rewards</div>
-    <div>Age</div>
+    <div>Timestamp</div>
   </div>
 );