feat: add toggle switch between time ago and utc time

packages/app/src/components/batches/Table.vue

@@ -34,7 +34,7 @@
       </TableBodyColumn>
       <TableBodyColumn v-if="columns.includes('age')" :data-heading="t('batches.table.age')">
         <CopyButton :value="utcStringFromISOString(item.timestamp)">
-          <TimeField :value="item.timestamp" :show-exact-date="false" />
+          <TimeField :value="item.timestamp" :format="TimeFormat.TIME_AGO" />
         </CopyButton>
       </TableBodyColumn>
     </template>
@@ -65,6 +65,7 @@ import ZkSyncIcon from "@/components/icons/ZkSync.vue";
 import type { BatchListItem } from "@/composables/useBatches";
 import type { PropType } from "vue";
 
+import { TimeFormat } from "@/types";
 import { utcStringFromISOString } from "@/utils/helpers";
 
 const { t, te } = useI18n();

packages/app/src/components/blocks/Table.vue

@@ -49,7 +49,7 @@
       </TableBodyColumn>
       <TableBodyColumn :data-heading="t('blocks.table.age')">
         <CopyButton :value="item.timestamp">
-          <TimeField :value="item.timestamp" :show-exact-date="false" />
+          <TimeField :value="item.timestamp" :format="TimeFormat.TIME_AGO" />
         </CopyButton>
       </TableBodyColumn>
     </template>
@@ -79,6 +79,8 @@ import TimeField from "@/components/common/table/fields/TimeField.vue";
 import type { BlockListItem } from "@/composables/useBlock";
 import type { PropType } from "vue";
 
+import { TimeFormat } from "@/types";
+
 const { t } = useI18n();
 
 defineProps({

packages/app/src/components/common/table/TableHeadColumn.vue

@@ -8,6 +8,6 @@
 
 <style>
 .table-head-col {
-  @apply whitespace-nowrap px-2 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 first:pl-6 last:pr-6;
+  @apply whitespace-nowrap px-2 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-700 first:pl-6 last:pr-6;
 }
 </style>

packages/app/src/components/common/table/fields/TimeField.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="info-field-time" :title="utcStringFromISOString(isoString)">
-    <span class="time-ago">
-      {{ timeAgo }}
-    </span>
-    <span v-if="showExactDate" class="full-date">{{ localDateFromISOString(isoString) }}</span>
+    <span class="time-ago" v-if="format === TimeFormat.FULL">{{ localDateFromISOString(isoString) }}</span>
+    <span class="time-ago" v-else>{{ timeAgo }}</span>
+    <span v-if="format === TimeFormat.TIME_AGO_AND_FULL" class="full-date">{{
+      localDateFromISOString(isoString)
+    }}</span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, type PropType, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { useTimeAgo } from "@vueuse/core";
 
+import { TimeFormat } from "@/types";
 import { ISOStringFromUnixTimestamp, localDateFromISOString, utcStringFromISOString } from "@/utils/helpers";
 
 const { t } = useI18n();
@@ -23,9 +25,9 @@ const props = defineProps({
     default: "",
     required: true,
   },
-  showExactDate: {
-    type: Boolean,
-    default: true,
+  format: {
+    type: String as PropType<TimeFormat>,
+    default: TimeFormat.TIME_AGO_AND_FULL,
     required: false,
   },
 });

packages/app/src/components/transactions/Table.vue

@@ -8,8 +8,12 @@
       <TableHeadColumn v-if="columns.includes('method')">
         {{ t("transactions.table.method") }}
       </TableHeadColumn>
-      <TableHeadColumn v-if="columns.includes('age')">
-        {{ t("transactions.table.age") }}
+      <TableHeadColumn
+        v-if="columns.includes('age')"
+        @click="toggleAgeTimestamp()"
+        class="hover:cursor-pointer text-blue-700"
+      >
+        {{ isTimeAgeView ? t("transactions.table.age") : t("transactions.table.dateTimeUTC") }}
       </TableHeadColumn>
       <TableHeadColumn v-if="columns.includes('from')" class="tablet-column-hidden">
         {{ t("transactions.table.from") }}
@@ -71,7 +75,11 @@
         :data-heading="t('transactions.table.age')"
       >
         <CopyButton :value="utcStringFromISOString(item.receivedAt)">
-          <TimeField :value="item.receivedAt" :show-exact-date="false" :data-testid="$testId.timestamp" />
+          <TimeField
+            :value="item.receivedAt"
+            :data-testid="$testId.timestamp"
+            :format="isTimeAgeView ? TimeFormat.TIME_AGO : TimeFormat.FULL"
+          />
         </CopyButton>
       </TableBodyColumn>
       <TableBodyColumn
@@ -237,8 +245,8 @@ import useTransactions, { type TransactionListItem, type TransactionSearchParams
 
 import type { Direction } from "@/components/transactions/TransactionDirectionTableCell.vue";
 import type { AbiFragment } from "@/composables/useAddress";
-import type { NetworkOrigin } from "@/types";
 
+import { type NetworkOrigin, TimeFormat } from "@/types";
 import { isContractDeployerAddress, utcStringFromISOString } from "@/utils/helpers";
 
 const { currentNetwork } = useContext();
@@ -364,6 +372,12 @@ const isHighRowsSize = computed(() => props.columns.includes("fee"));
 function getDirection(item: TransactionListItem): Direction {
   return item.from === item.to ? "self" : item.to !== props.searchParams?.address ? "out" : "in";
 }
+
+const isTimeAgeView = ref(true);
+
+const toggleAgeTimestamp = () => {
+  isTimeAgeView.value = !isTimeAgeView.value;
+};
 </script>
 
 <style lang="scss">

packages/app/src/components/transfers/Table.vue

@@ -42,7 +42,7 @@
 
       <TableBodyColumn :data-heading="t('transfers.table.age')">
         <CopyButton :value="utcStringFromISOString(item.timestamp)">
-          <TimeField :data-testid="$testId.timestamp" :value="item.timestamp" :show-exact-date="false" />
+          <TimeField :data-testid="$testId.timestamp" :value="item.timestamp" :format="TimeFormat.TIME_AGO" />
         </CopyButton>
       </TableBodyColumn>
       <TableBodyColumn :data-heading="t('transfers.table.type')" class="transfer-type">
@@ -156,6 +156,7 @@ import TransactionNetworkSquareBlock from "@/components/transactions/Transaction
 
 import useTransfers, { type Transfer } from "@/composables/useTransfers";
 
+import { TimeFormat } from "@/types";
 import { utcStringFromISOString } from "@/utils/helpers";
 
 const { t } = useI18n();

packages/app/src/locales/en.json

@@ -143,6 +143,7 @@
             "transferMethodName": "Transfer",
             "timestamp": "Timestamp",
             "age": "Age",
+            "dateTimeUTC": "Date Time (UTC)",
             "tokenAddress": "Token address",
             "tokenName": "Token name",
             "tokenSymbol": "Token symbol",

packages/app/src/types.ts

@@ -59,3 +59,9 @@ export type ContractVerificationData = {
 };
 
 export type ContractVerificationStatus = "successful" | "failed" | "in_progress" | "queued";
+
+export enum TimeFormat {
+  TIME_AGO = "time_ago",
+  FULL = "full",
+  TIME_AGO_AND_FULL = "time_ago_and_full",
+}

packages/app/tests/components/common/table/fields/TimeField.spec.ts

@@ -8,6 +8,8 @@ import TimeField from "@/components/common/table/fields/TimeField.vue";
 
 import enUS from "@/locales/en.json";
 
+import { TimeFormat } from "@/types";
+
 describe("TimeField", () => {
   const i18n = createI18n({
     locale: "en",
@@ -31,7 +33,7 @@ describe("TimeField", () => {
     expect(container.querySelector(".info-field-time")?.getAttribute("title")).toBe("2022-12-02 09:26:06 UTC");
     unmount();
   });
-  it("renders full date when showExactDate is true by default", () => {
+  it("renders full date when time format is not specified", () => {
     const { container, unmount } = render(TimeField, {
       global,
       props: {
@@ -42,12 +44,12 @@ describe("TimeField", () => {
     expect(container.querySelector(".full-date")?.textContent).toBe("2022-12-02 12:26");
     unmount();
   });
-  it("doesn't render full date when showExactDate is false", () => {
+  it("doesn't render full date when time format is TIME_AGO", () => {
     const { container, unmount } = render(TimeField, {
       global,
       props: {
         value: "2022-12-02T09:26:06.605Z",
-        showExactDate: false,
+        format: TimeFormat.TIME_AGO,
       },
     });