refactor: standardize global timestamp handling with utility function

mvc-labs · Mar 28, 2024 · 2fb2ed0 · 2fb2ed0
1 parent ea7a359
commit 2fb2ed0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 23 deletions.
diff --git a/src/lib/formatters.ts b/src/lib/formatters.ts
@@ -54,3 +54,16 @@ export const prettifyTokenGenesis = (genesis: string) => {
 export const shortestAddress = (address: string) => {
   return `${address.slice(0, 4)}...${address.slice(-4)}`
 }
+
+export const formatTimestamp = (timestamp: number | string) => {
+  timestamp = Number(timestamp)
+
+  if (timestamp === 0 || isNaN(timestamp)) {
+    return '--'
+  }
+
+  if (String(timestamp).length === 10) {
+    timestamp *= 1000
+  }
+  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
+}
diff --git a/src/pages/nfts/BRCTokenDetail.vue b/src/pages/nfts/BRCTokenDetail.vue
@@ -2,7 +2,7 @@
 import dayjs from 'dayjs'
 import { ref, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { shortestAddress } from '@/lib/formatters'
+import { formatTimestamp, shortestAddress } from '@/lib/formatters'
 import { useBRCInscriptionInfoQuery } from '@/queries/inscribe'
 
 const router = useRouter()
@@ -54,9 +54,7 @@ const toSendNFT = (id: string) => {
         <span v-if="inscriptionDetail.inscriptionNumber !== -1"># {{ inscriptionDetail.inscriptionNumber }}</span>
         <span v-else>Uncomfirmed</span>
       </h4>
-      <div class="text-xs text-[#999999]">
-        {{ dayjs(inscriptionDetail.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss') }}
-      </div>
+      <div class="text-xs text-[#999999]">{{ formatTimestamp(inscriptionDetail.timestamp) }}</div>
       <hr />
       <div class="flex items-center justify-between">
         <span class="title">ID:</span>
@@ -102,7 +100,7 @@ const toSendNFT = (id: string) => {
       </div>
       <div class="flex items-start justify-between">
         <span class="title">Timestamp:</span>
-        <div>{{ dayjs(inscriptionDetail.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss') }}</div>
+        <div>{{ formatTimestamp(inscriptionDetail.timestamp) }}</div>
       </div>
       <div class="flex items-start justify-between">
         <div class="title">Genesis Transaction:</div>

diff --git a/src/pages/nfts/BRCTokenList.vue b/src/pages/nfts/BRCTokenList.vue
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router'
 import { getAddress } from '@/lib/account'
 import { ArrowDownLeftIcon } from '@heroicons/vue/20/solid'
 import { type Inscription, useBRCInscriptionsQuery } from '@/queries/inscribe'
+import { formatTimestamp } from '@/lib/formatters'
 
 const size = ref(10)
 const address = ref()
@@ -55,7 +56,7 @@ const toBRC20Detail = (inscriptionId: string) => {
   <div class="space-y-4">
     <div class="space-y-1" v-if="false">
       <div class="text-sm text-gray-500">NUMBER OF COLLECTIBLES</div>
-      <div class="text-xl ">{{ inscriptionsCountDisplay }}</div>
+      <div class="text-xl">{{ inscriptionsCountDisplay }}</div>
     </div>
 
     <div v-if="false">
@@ -65,9 +66,7 @@ const toBRC20Detail = (inscriptionId: string) => {
       </button>
     </div>
 
-    <div v-if="isLoading" class="w-full py-3 text-center text-sm  text-gray-500">
-      BRC Token List loading...
-    </div>
+    <div v-if="isLoading" class="w-full py-3 text-center text-sm text-gray-500">BRC Token List loading...</div>
     <div v-else-if="inscriptions.length">
       <div class="px-3 py-4 grid grid-cols-3 gap-x-3 gap-y-7">
         <div
@@ -79,9 +78,7 @@ const toBRC20Detail = (inscriptionId: string) => {
           <span class="text-sm text-center mt-3 truncate" :title="'# ' + inscription.inscriptionNumber">{{
             inscription.utxoHeight === 0 ? 'Uncomfirmed' : `# ${inscription.inscriptionNumber}`
           }}</span>
-          <span class="text-xs text-center mt-1 h-[30px]">{{
-            dayjs(inscription.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss')
-          }}</span>
+          <span class="text-xs text-center mt-1 h-[30px]">{{ formatTimestamp(inscription.timestamp) }}</span>
         </div>
       </div>
       <div
@@ -92,7 +89,7 @@ const toBRC20Detail = (inscriptionId: string) => {
         Load more Ordinals
       </div>
     </div>
-    <div v-else class="w-full py-3 text-center text-sm  text-gray-500">No Ordinals yet.</div>
+    <div v-else class="w-full py-3 text-center text-sm text-gray-500">No Ordinals yet.</div>
   </div>
 </template>
 

diff --git a/src/pages/nfts/InscriptionList.vue b/src/pages/nfts/InscriptionList.vue
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router'
 import { getAddress } from '@/lib/account'
 import LoadingIcon from '@/components/LoadingIcon.vue'
 import { useInscriptionsInfiniteQuery } from '@/queries/inscribe'
+import { formatTimestamp } from '@/lib/formatters'
 
 const size = ref(10)
 const address = ref()
@@ -50,9 +51,7 @@ const toBRC20Detail = (inscriptionId: string) => {
           <span class="text-sm text-center mt-3 truncate" :title="'# ' + inscription.inscriptionNumber">{{
             inscription.utxoHeight === 0 ? 'Uncomfirmed' : `# ${inscription.inscriptionNumber}`
           }}</span>
-          <span class="text-xs text-center mt-1 h-[30px]">{{
-            dayjs(inscription.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss')
-          }}</span>
+          <span class="text-xs text-center mt-1 h-[30px]">{{ formatTimestamp(inscription.timestamp) }}</span>
         </div>
       </div>
       <div

diff --git a/src/pages/nfts/MetaIDPinList.vue b/src/pages/nfts/MetaIDPinList.vue
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router'
 import { getAddress } from '@/lib/account'
 import LoadingIcon from '@/components/LoadingIcon.vue'
 import { useMetaPinsInfiniteQuery } from '@/queries/metaPin'
+import { formatTimestamp } from '@/lib/formatters'
 
 const size = ref(2)
 const address = ref()
@@ -46,9 +47,7 @@ const toMetaPinDetail = (metaPinId: string) => {
             :contentSummary="metaPin.contentSummary"
           />
           <span class="text-sm text-center mt-3 truncate" :title="'# ' + metaPin.number"># {{ metaPin.number }}</span>
-          <span class="text-xs text-center mt-1 h-[30px]">{{
-            metaPin.timestamp === 0 ? 'Uncomfirmed' : dayjs(metaPin.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss')
-          }}</span>
+          <span class="text-xs text-center mt-1 h-[30px]">{{ formatTimestamp(metaPin.timestamp) }}</span>
         </div>
       </div>
       <div

diff --git a/src/pages/nfts/MetaPinDetail.vue b/src/pages/nfts/MetaPinDetail.vue
@@ -2,6 +2,7 @@
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { formatTimestamp } from '@/lib/formatters'
 import { shortestAddress } from '@/lib/formatters'
 import { useMetaPinQuery } from '@/queries/metaPin'
 
@@ -55,9 +56,7 @@ const toSendNFT = (id: string) => {
     </div>
     <div class="flex flex-col p-4 gap-y-4">
       <h4 class="text-xl text-[#303133]"># {{ metaPin.number }}</h4>
-      <div class="text-xs text-[#999999]">
-        {{ dayjs(metaPin.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss') }}
-      </div>
+      <div class="text-xs text-[#999999]">{{ formatTimestamp(metaPin.timestamp) }}</div>
       <hr />
       <div class="flex items-center justify-between">
         <span class="title">ID:</span>
@@ -101,7 +100,7 @@ const toSendNFT = (id: string) => {
       </div>
       <div class="flex items-start justify-between">
         <span class="title">Timestamp:</span>
-        <div>{{ dayjs(Number(metaPin!.timestamp)).format('YYYY/MM/DD HH:mm:ss') }}</div>
+        <div>{{ formatTimestamp(metaPin.timestamp) }}</div>
       </div>
       <div class="flex items-start justify-between">
         <div class="title">Genesis Transaction:</div>