From bda1c0721b7716934234c1741d3c10c88857b87d Mon Sep 17 00:00:00 2001
From: Nikola Pavlov <nikola@txfusion.io>
Date: Mon, 23 Dec 2024 14:25:55 +0100
Subject: [PATCH] feat: add toggle switch between time ago and utc time

---
 .../common/table/TableHeadColumn.vue          |  2 +-
 .../common/table/fields/TimeField.vue         |  7 ++++++-
 .../app/src/components/transactions/Table.vue | 21 ++++++++++++++++---
 packages/app/src/locales/en.json              |  1 +
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/components/common/table/TableHeadColumn.vue b/packages/app/src/components/common/table/TableHeadColumn.vue
index 458fbd016a..eac1f77d84 100644
--- a/packages/app/src/components/common/table/TableHeadColumn.vue
+++ b/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>
diff --git a/packages/app/src/components/common/table/fields/TimeField.vue b/packages/app/src/components/common/table/fields/TimeField.vue
index 24216056e4..43a9fa6623 100644
--- a/packages/app/src/components/common/table/fields/TimeField.vue
+++ b/packages/app/src/components/common/table/fields/TimeField.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="info-field-time" :title="utcStringFromISOString(isoString)">
     <span class="time-ago">
-      {{ timeAgo }}
+      {{ isUtcDate ? localDateFromISOString(isoString) : timeAgo }}
     </span>
     <span v-if="showExactDate" class="full-date">{{ localDateFromISOString(isoString) }}</span>
   </div>
@@ -28,6 +28,11 @@ const props = defineProps({
     default: true,
     required: false,
   },
+  isUtcDate: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
 });
 
 const messages = ref({
diff --git a/packages/app/src/components/transactions/Table.vue b/packages/app/src/components/transactions/Table.vue
index aedbdf4ca9..e551ac9dff 100644
--- a/packages/app/src/components/transactions/Table.vue
+++ b/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,12 @@
         :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"
+            :show-exact-date="false"
+            :data-testid="$testId.timestamp"
+            :is-utc-date="!isTimeAgeView"
+          />
         </CopyButton>
       </TableBodyColumn>
       <TableBodyColumn
@@ -364,6 +373,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">
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
index 70faef1b62..289060c7fc 100644
--- a/packages/app/src/locales/en.json
+++ b/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",