Introduce global time tick and format time passed since epoch (#151)

* Introduce global time tick and format time passed since epoch
---------

Co-authored-by: D13ce <[email protected]>

frontend/app.vue

@@ -10,6 +10,7 @@ useHead({
 }, { mode: 'client' })
 useWindowSizeProvider()
 useBcToastProvider()
+useDateProvider()
 
 </script>
 

frontend/components/bc/format/FormatTimePassed.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { StringUnitLength } from 'luxon'
+import { formatEpochToRelative } from '~/utils/format'
+
+interface Props {
+  value?: number,
+  type?: 'epoch', // we can add slot and other types later when needed, we default to epoch
+  noUpdate?: boolean,
+  unitLength?: StringUnitLength
+}
+const props = defineProps<Props>()
+const { t: $t } = useI18n()
+const { timestamp } = useDate()
+
+const initTs = ref(timestamp.value) // store the initial timestamp, in case we don't want to auto update
+
+const label = computed(() => {
+  if (props.value === undefined) {
+    return
+  }
+  const ts: number = props.noUpdate ? initTs.value : timestamp.value
+  switch (props.type) {
+    default:
+      return formatEpochToRelative(props.value, ts, props.unitLength, $t('locales.date'))
+  }
+})
+</script>
+<template>
+  <span v-if="label">{{ label }}</span>
+</template>

frontend/components/dashboard/ValidatorSlotViz.vue

@@ -7,7 +7,7 @@ interface Props {
   dashboardKey: DashboardKey
 }
 const props = defineProps<Props>()
-const { tick } = useInterval(12000)
+const { tick } = useInterval(12)
 
 const { slotViz, refreshSlotViz } = useValidatorSlotVizStore()
 await useAsyncData('validator_dashboard_slot_viz', () => refreshSlotViz(props.dashboardKey))

frontend/components/playground/PlaygroundConversion.vue

@@ -2,6 +2,7 @@
 import type { Currency } from '~/types/currencies'
 
 const { setCurrency, currency } = useCurrency()
+const { latest } = storeToRefs(useLatestStateStore())
 
 const onCurrencyChange = (event: Event) => {
   const select = event.target as HTMLSelectElement
@@ -130,6 +131,50 @@ const onCurrencyChange = (event: Event) => {
     1 - no settings
     <BcFormatPercent :percent="1" />
   </div>
+  <b>
+    Format Epochs time passed
+  </b>
+  <div>
+    Epoch 1 ->
+    <BcFormatTimePassed :value="1" />
+  </div>
+
+  <div>
+    Epoch 272684 ->
+    <BcFormatTimePassed :value="272684" />
+  </div>
+  <div>
+    latest Epoch ->
+    <BcFormatTimePassed :value="latest?.currentEpoch" />
+  </div>
+  <div>
+    latest Epoch - 1 ->
+    <BcFormatTimePassed :value="(latest?.currentEpoch ?? 1) - 1" />
+  </div>
+  <div>
+    latest Epoch - 10 ->
+    <BcFormatTimePassed :value="(latest?.currentEpoch ?? 10) - 10" />
+  </div>
+  <div>
+    next Epoch ->
+    <BcFormatTimePassed :value="(latest?.currentEpoch ?? 0 )+ 1" />
+  </div>
+  <div>
+    next Epoch no tick ->
+    <BcFormatTimePassed :value="(latest?.currentEpoch ?? 0 )+ 1" :no-update="true" />
+  </div>
+  <div>
+    the Epoch after ->
+    <BcFormatTimePassed :value="(latest?.currentEpoch ?? 0) + 2" />
+  </div>
+  <div>
+    latest Epoch long format->
+    <BcFormatTimePassed :value="latest?.currentEpoch" unit-length="long" />
+  </div>
+  <div>
+    latest Epoch short format->
+    <BcFormatTimePassed :value="latest?.currentEpoch" unit-length="short" />
+  </div>
 </template>
 
 <style lang="scss" scoped>

frontend/composables/useCustomFetch.ts

@@ -113,7 +113,7 @@ const mapping: Record<string, MappingData> = {
   [API_PATH.LATEST_STATE]: {
     path: '/latestState',
     legacy: true,
-    mock: true
+    mock: false
   },
   [API_PATH.LOGIN]: {
     path: '/login',

frontend/composables/useDate.ts

@@ -0,0 +1,12 @@
+import { inject } from 'vue'
+import type { DateInfo } from '~/types/date'
+
+export function useDate () {
+  const date = inject<DateInfo>('date-info')
+
+  if (!date) {
+    throw new Error('useDate must be in a child of useDateProvider')
+  }
+
+  return date
+}

frontend/composables/useDateProvider.ts

@@ -0,0 +1,24 @@
+import { ref, provide } from 'vue'
+import type { DateInfo } from '~/types/date'
+
+// useDateProvider provides a global reactive timestamp, which should be more performant than every component ticking their own time.
+// -> a global heartbeat
+export function useDateProvider () {
+  const date = ref(new Date())
+  const timestamp = computed(() => date.value.getTime())
+  let interval:NodeJS.Timeout
+
+  const upDate = () => {
+    date.value = new Date()
+  }
+
+  onMounted(() => {
+    interval = setInterval(() => upDate(), 1000)
+  })
+
+  onUnmounted(() => {
+    interval && clearInterval(interval)
+  })
+
+  provide<DateInfo>('date-info', { date, timestamp })
+}

frontend/composables/useInterval.ts

@@ -1,12 +1,18 @@
-export function useInterval (ms: number) {
-  const refreshInterval = ref<NodeJS.Timeout | null>(null)
-  const tick = ref<number>(0)
+import { DateTime } from 'luxon'
 
-  onMounted(() => {
-    refreshInterval.value = setInterval(() => { tick.value = new Date().getTime() }, ms)
-  })
-  onUnmounted(() => {
-    refreshInterval.value && clearInterval(refreshInterval.value)
+export function useInterval (seconds: number) {
+  const { timestamp } = useDate()
+  const tick = ref<number>(timestamp.value)
+
+  watch(timestamp, (ts) => {
+    if (!seconds) {
+      return
+    }
+    const dt = DateTime.fromMillis(ts)
+    if (!tick.value || dt.diff(DateTime.fromMillis(tick.value), 'seconds').seconds >= seconds) {
+      tick.value = ts
+    }
   })
+
   return { tick }
 }

frontend/composables/useNetwork.ts

@@ -1,6 +1,6 @@
 export function useNetwork () {
-  // TODO: Replace hardcoded Ethereum Mainnet values with real network information once network endpoint is available
-  const tsForSlot0 = 1606820423
+  // TODO: Replace hardcoded Ethereum Holesky values with real network information once network endpoint is available
+  const tsForSlot0 = 1695902400
   const secondsPerSlot = 12
   const slotsPerEpoch = 32
 

frontend/package.json

@@ -18,6 +18,7 @@
     "@nuxtjs/i18n": "^8.0.0",
     "@nuxtjs/style-resources": "^1.2.2",
     "@types/lodash-es": "^4.17.12",
+    "@types/luxon": "^3.4.2",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
@@ -49,6 +50,7 @@
     "echarts": "^5.5.0",
     "git-describe": "^4.1.1",
     "lodash-es": "^4.17.21",
+    "luxon": "^3.4.4",
     "pinia": "^2.1.7",
     "primevue": "^3.46.0",
     "vee-validate": "^4.12.4",

frontend/types/date.ts

@@ -0,0 +1,4 @@
+export type DateInfo = {
+  date: globalThis.Ref<Date>,
+  timestamp: globalThis.Ref<number>,
+}

frontend/utils/format.ts

@@ -1,4 +1,5 @@
 import { commify } from '@ethersproject/units'
+import { DateTime, type StringUnitLength } from 'luxon'
 
 const { epochToTs } = useNetwork()
 
@@ -98,6 +99,22 @@ export function formatTs (ts: number, locales: string): string {
   return new Date(ts * 1000).toLocaleDateString(locales, options)
 }
 
+export function formatToRelative (targetTimestamp?: number, baseTimestamp?: number, style: StringUnitLength = 'narrow', locales: string = 'en-US') {
+  if (!targetTimestamp) {
+    return undefined
+  }
+  const date = baseTimestamp ? DateTime.fromMillis(baseTimestamp) : DateTime.now()
+  return DateTime.fromMillis(targetTimestamp).setLocale(locales).toRelative({ base: date, style })
+}
+
+export function formatEpochToRelative (epoch: number, timestamp?: number, style: StringUnitLength = 'narrow', locales: string = 'en-US') {
+  const ts = epochToTs(epoch)
+  if (ts === undefined) {
+    return undefined
+  }
+  return formatToRelative(ts * 1000, timestamp, style, locales)
+}
+
 export function formatEpochToDate (epoch: number, locales: string): string | undefined {
   const ts = epochToTs(epoch)
   if (ts === undefined) {