refactor: remove duplicate code

Removed duplication of formatting functions, which should be part of useNetworkStore(), as they contain `currentNetwork` (state of the app). As a quickfix getEpochFromTimestamp() and getTimestampFromEpoch() were `proped down` to DashboardChartTooltipHeader.vue which is an `antipattern` and should be removed. Reason: Due to the fact that DashboardChartTooltipHeader.vue was used inside a `vue render()` in DashboardChartSummary.vue, we do not have access to `nuxt hooks` so the usage of useRuntimeConfig() in useNetworkStore() created an error.
gobitfly · Jan 9, 2025 · 7ebd9b7 · 7ebd9b7
1 parent 1408b4d
commit 7ebd9b7
Show file tree

Hide file tree

Showing 19 changed files with 129 additions and 364 deletions.
diff --git a/frontend/components/bc/format/FormatTimePassed.vue b/frontend/components/bc/format/FormatTimePassed.vue
@@ -5,7 +5,8 @@ import type { AgeFormat } from '~/types/settings'
 import { formatGoTimestamp } from '~/utils/format'
 
 const {
-  formatEpochToDateTime, formatSlotToDateTime,
+  formatEpochToDateTime,
+  formatSlotToDateTime,
 } = useFormat()
 
 interface Props {

diff --git a/frontend/components/bc/header/MainHeader.vue b/frontend/components/bc/header/MainHeader.vue
@@ -16,7 +16,9 @@ defineProps<{
 }>()
 const { latestState } = useLatestStateStore()
 const {
-  currentNetwork, networkInfo, slotToEpoch,
+  currentNetwork,
+  getEpochFromSlot,
+  networkInfo,
 } = useNetworkStore()
 const {
   doLogout, isLoggedIn,
@@ -54,7 +56,7 @@ const rate = computed(() => {
 
 const currentEpoch = computed(() =>
   latestState.value?.current_slot !== undefined
-    ? slotToEpoch(latestState.value.current_slot)
+    ? getEpochFromSlot(latestState.value.current_slot)
     : undefined,
 )
 

diff --git a/frontend/components/dashboard/chart/DashboardChartRewardsTooltip.vue b/frontend/components/dashboard/chart/DashboardChartRewardsTooltip.vue
@@ -90,11 +90,17 @@ const data = computed<Series[]>(() => {
     total,
   ]
 })
+const {
+  getEpochFromTimestamp,
+  getTimestampFromEpoch,
+} = useNetworkStore()
 </script>
 
 <template>
   <div class="tooltip-container">
     <DashboardChartTooltipHeader
+      :get-epoch-from-timestamp
+      :get-timestamp-from-epoch
       :t
       :start-epoch
     />

diff --git a/frontend/components/dashboard/chart/DashboardChartSummary.vue b/frontend/components/dashboard/chart/DashboardChartSummary.vue
@@ -19,7 +19,6 @@ import {
   TooltipComponent,
 } from 'echarts/components'
 import VChart from 'vue-echarts'
-import SummaryChartTooltip from './DashboardChartSummaryTooltip.vue'
 import {
   getChartTextColor,
   getChartTooltipBackgroundColor,
@@ -35,6 +34,7 @@ import {
   SUMMARY_CHART_GROUP_TOTAL,
   type SummaryChartFilter,
 } from '~/types/dashboard/summary'
+import { DashboardChartSummaryTooltip } from '#components'
 
 use([
   CanvasRenderer,
@@ -56,7 +56,10 @@ const { t: $t } = useTranslation()
 const colorMode = useColorMode()
 const { fetch } = useCustomFetch()
 const {
-  secondsPerEpoch, slotToTs, tsToEpoch,
+  getEpochFromTimestamp,
+  getTimestampFromEpoch,
+  getTimestampFromSlot,
+  secondsPerEpoch,
 } = useNetworkStore()
 const { dashboardKey } = useDashboardKey()
 const { overview } = useValidatorDashboardOverviewStore()
@@ -104,7 +107,7 @@ const categories = computed<number[]>(() => {
     return []
   }
   const list: number[] = []
-  let latestTs = slotToTs(latestSlot.value - 7) || 0
+  let latestTs = getTimestampFromSlot(latestSlot.value - 7) || 0
   let step = 0
   switch (aggregation.value) {
     case 'daily':
@@ -123,7 +126,7 @@ const categories = computed<number[]>(() => {
   if (!step) {
     return []
   }
-  const minTs = Math.max(slotToTs(0) || 0, latestTs - maxSeconds)
+  const minTs = Math.max(getTimestampFromSlot(0) || 0, latestTs - maxSeconds)
   while (latestTs > minTs) {
     list.splice(0, 0, latestTs)
 
@@ -263,7 +266,7 @@ const formatTSToDate = (value: string) => {
   )
 }
 const formatTSToEpoch = (value: string) => {
-  return `${$t('common.epoch')} ${tsToEpoch(Number(value))}`
+  return `${$t('common.epoch')} ${getEpochFromTimestamp(Number(value))}`
 }
 const formatToDateOrEpoch = (value: string) => {
   if (aggregation.value === 'epoch') {
@@ -356,9 +359,11 @@ const option = computed<EChartsOption>(() => {
         })
         const d = document.createElement('div')
         render(
-          h(SummaryChartTooltip, {
+          h(DashboardChartSummaryTooltip, {
             aggregation: aggregation.value,
             efficiencyType: props.filter?.efficiency || 'all',
+            getEpochFromTimestamp,
+            getTimestampFromEpoch,
             groupInfos,
             highlightGroup,
             t: $t,

diff --git a/frontend/components/dashboard/chart/DashboardChartSummaryTooltip.vue b/frontend/components/dashboard/chart/DashboardChartSummaryTooltip.vue
@@ -8,6 +8,8 @@ import type {
 interface Props {
   aggregation: AggregationTimeframe,
   efficiencyType: EfficiencyType,
+  getEpochFromTimestamp: (timestamp: number) => number,
+  getTimestampFromEpoch: (epoch: number) => number,
   groupInfos: {
     color: string,
     efficiency: number,
@@ -25,7 +27,9 @@ defineProps<Props>()
   <div class="tooltip-container">
     <DashboardChartTooltipHeader
       :t
-      :ts
+      :timestamp="ts"
+      :get-epoch-from-timestamp
+      :get-timestamp-from-epoch
       :aggregation
       :efficiency-type
     />

diff --git a/frontend/components/dashboard/chart/DashboardChartTooltipHeader.vue b/frontend/components/dashboard/chart/DashboardChartTooltipHeader.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { ComposerTranslation } from 'vue-i18n'
-import { useNetworkStore } from '~/stores/useNetworkStore'
 import type {
   AggregationTimeframe,
   EfficiencyType,
@@ -12,23 +11,21 @@ import {
 interface Props {
   aggregation?: AggregationTimeframe,
   efficiencyType?: EfficiencyType,
+  getEpochFromTimestamp: (timestamp: number) => number,
+  getTimestampFromEpoch: (epoch: number) => number,
   startEpoch?: number,
   t: ComposerTranslation, // required as dynamically created components via render do not have the proper app context,
   ts?: number,
 }
 
 const props = defineProps<Props>()
 
-const {
-  epochToTs, tsToEpoch,
-} = useNetworkStore()
-
 const startTs = computed(() => {
   if (props.ts) {
     return props.ts
   }
   if (props.startEpoch) {
-    return epochToTs(props.startEpoch)
+    return props.getTimestampFromEpoch(props.startEpoch)
   }
   return undefined
 })
@@ -81,11 +78,11 @@ const epochText = computed(() => {
   if (!startTs.value) {
     return
   }
-  const startEpoch = tsToEpoch(startTs.value)
+  const startEpoch = props.getEpochFromTimestamp(startTs.value)
   if (!endTs.value) {
     return startEpoch
   }
-  const endEpoch = tsToEpoch(endTs.value)
+  const endEpoch = props.getEpochFromTimestamp(endTs.value)
   return `${startEpoch} - ${endEpoch}`
 })
 

diff --git a/frontend/components/dashboard/creation/DashboardCreationController.vue b/frontend/components/dashboard/creation/DashboardCreationController.vue
@@ -4,7 +4,7 @@ import type {
   DashboardCreationDisplayMode,
   DashboardCreationState,
 } from '~/types/dashboard/creation'
-import type { ChainIDs } from '~/types/network'
+import type { ChainId } from '~/types/network'
 
 const userDashboardStore = useUserDashboardStore()
 const {
@@ -30,7 +30,7 @@ const visible = ref<boolean>(false)
 const state = ref<DashboardCreationState>('')
 const type = ref<'' | DashboardType>('')
 const name = ref<string>('')
-const network = ref<ChainIDs>(0)
+const network = ref<ChainId>(0)
 const forcedDashboardType = ref<'' | DashboardType>('')
 const {
   dashboardKey, publicEntities,

diff --git a/frontend/components/dashboard/table/DashboardTableClDeposits.vue b/frontend/components/dashboard/table/DashboardTableClDeposits.vue
@@ -15,7 +15,7 @@ const cursor = ref<Cursor>()
 const pageSize = ref<number>(5)
 const { t: $t } = useTranslation()
 
-const { slotToEpoch } = useNetworkStore()
+const { getEpochFromSlot } = useNetworkStore()
 
 const {
   deposits,
@@ -190,11 +190,11 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
               <template #body="slotProps">
                 <BcLink
                   v-if="slotProps.data.index !== undefined"
-                  :to="`/epoch/${slotToEpoch(slotProps.data.slot)}`"
+                  :to="`/epoch/${getEpochFromSlot(slotProps.data.slot)}`"
                   target="_blank"
                   class="link"
                 >
-                  <BcFormatNumber :value="slotToEpoch(slotProps.data.slot)" />
+                  <BcFormatNumber :value="getEpochFromSlot(slotProps.data.slot)" />
                 </BcLink>
               </template>
             </Column>
@@ -303,11 +303,11 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
                   </div>
                   <BcLink
                     v-if="slotProps.data.index !== undefined"
-                    :to="`/epoch/${slotToEpoch(slotProps.data.slot)}`"
+                    :to="`/epoch/${getEpochFromSlot(slotProps.data.slot)}`"
                     target="_blank"
                     class="link"
                   >
-                    <BcFormatNumber :value="slotToEpoch(slotProps.data.slot)" />
+                    <BcFormatNumber :value="getEpochFromSlot(slotProps.data.slot)" />
                   </BcLink>
                 </div>
                 <div class="row">

diff --git a/frontend/components/dashboard/table/DashboardTableWithdrawals.vue b/frontend/components/dashboard/table/DashboardTableWithdrawals.vue
@@ -22,7 +22,7 @@ const pageSize = ref<number>(10)
 const { t: $t } = useTranslation()
 
 const { latestState } = useLatestStateStore()
-const { slotToEpoch } = useNetworkStore()
+const { getEpochFromSlot } = useNetworkStore()
 const {
   getTotalAmount,
   getWithdrawals,
@@ -151,7 +151,7 @@ const isRowExpandable = (row: ExtendedVDBWithdrawalsTableRow) => {
 
 const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
   if (latestState?.value) {
-    return row.epoch > slotToEpoch(latestState.value.current_slot)
+    return row.epoch > getEpochFromSlot(latestState.value.current_slot)
   }
 
   return false

diff --git a/frontend/components/icon/IconNetwork.vue b/frontend/components/icon/IconNetwork.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  ChainFamily, type ChainIDs, ChainInfo,
+  ChainFamily, type ChainId, ChainInfo,
 } from '~/types/network'
 
 const colorMode = useColorMode()
@@ -35,7 +35,7 @@ const props = defineProps({
 
 const family = computed(() =>
   props.chainId in ChainInfo
-    ? ChainInfo[props.chainId as ChainIDs].family
+    ? ChainInfo[props.chainId as ChainId].family
     : ChainFamily.Ethereum,
 )
 const coloring = computed(() =>

diff --git a/frontend/components/notifications/NotificationsDashboardsTable.vue b/frontend/components/notifications/NotificationsDashboardsTable.vue
@@ -5,7 +5,7 @@ import IconValidator from '../icon/IconValidator.vue'
 import IconAccount from '../icon/IconAccount.vue'
 import type { Cursor } from '~/types/datatable'
 import type { DashboardType } from '~/types/dashboard'
-import type { ChainIDs } from '~/types/network'
+import type { ChainId } from '~/types/network'
 import type { NotificationDashboardsTableRow } from '~/types/api/notifications'
 import { NotificationsDashboardDialogEntity } from '#components'
 
@@ -17,7 +17,7 @@ const { t: $t } = useTranslation()
 
 // TODO: replace currentNetwork with selection from NETWORK_SWITCHER_COMPONENT that has yet to be implemented
 const { currentNetwork } = useNetworkStore()
-const networkId = ref<ChainIDs>(currentNetwork.value ?? 1)
+const networkId = ref<ChainId>(currentNetwork.value ?? 1)
 
 const {
   isLoading,

diff --git a/frontend/components/playground/PlaygroundIcons.vue b/frontend/components/playground/PlaygroundIcons.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import {
-  type ChainIDs, getAllExistingChainIDs,
-} from '~/types/network'
 </script>
 
 <template>
@@ -89,39 +86,6 @@ import {
     </div>
   </div>
 
-  <div>
-    <h2>Network icons</h2>
-    <div>Monochromous:</div>
-    <IconNetwork
-      v-for="id of getAllExistingChainIDs(false)"
-      :key="id"
-      :chain-id="id as ChainIDs"
-      :colored="false"
-      :harmonize-perceived-size="false"
-      class="icon-size"
-    />
-    <div>Colored:</div>
-    <IconNetwork
-      v-for="id of getAllExistingChainIDs(false)"
-      :key="id"
-      :chain-id="id as ChainIDs"
-      :colored="true"
-      :harmonize-perceived-size="false"
-      class="icon-size"
-    />
-    <div>
-      Harmonized sizes (for example Ethereum looks less skinny compared to the
-      others):
-    </div>
-    <IconNetwork
-      v-for="id of getAllExistingChainIDs(false)"
-      :key="id"
-      :chain-id="id as ChainIDs"
-      :colored="true"
-      :harmonize-perceived-size="true"
-      class="icon-size"
-    />
-  </div>
   <div>
     <h2>Loading issues:</h2>
     Example when props `inline` is true: "Something went wrong

diff --git a/frontend/components/slot/viz/SlotVizViewer.vue b/frontend/components/slot/viz/SlotVizViewer.vue
@@ -24,7 +24,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const { tsToSlot } = useNetworkStore()
+const { getSlotFromTimestamp } = useNetworkStore()
 const { t: $t } = useTranslation()
 
 const selectedCategories = useCookie<SlotVizCategories[]>(
@@ -97,8 +97,7 @@ const currentSlotId = computed(() => {
   // in case of some backend issues Inan want's us to tick in the future ... so let's tick
   return Math.max(
     mostRecentScheduledSlotId.value ?? 0,
-    tsToSlot((props.timestamp ?? 0) / 1000) - 1,
-  )
+    getSlotFromTimestamp((props.timestamp ?? 0) / 1000) - 1)
 })
 
 watch(