refactor: load available networks

frontend/components/bc/DataWrapper.vue

@@ -8,7 +8,6 @@ const {
 const { tick } = useInterval(12)
 const { refreshLatestState } = useLatestStateStore()
 const {
-  loadAvailableNetworks,
   setCurrentNetwork,
 } = useNetworkStore()
 
@@ -19,7 +18,6 @@ await useAsyncData('latest_state', () => refreshLatestState(), {
 if (isLoggedIn) {
   await useAsyncData('get_user', () => getUser())
 }
-await useAsyncData('get-supported-networks', () => loadAvailableNetworks())
 
 const { chainIdByDefault } = useRuntimeConfig().public
 if (chainIdByDefault) {

frontend/components/bc/format/FormatTimePassed.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 import type { StringUnitLength } from 'luxon'
-import { useFormat } from '~/composables/useFormat'
 import type { AgeFormat } from '~/types/settings'
 import { formatGoTimestamp } from '~/utils/format'
 
-const {
-  formatEpochToDateTime, formatSlotToDateTime,
-} = useFormat()
-
 interface Props {
   format?: 'global-setting' | AgeFormat,
   noUpdate?: boolean,
@@ -20,6 +15,11 @@ const { t: $t } = useTranslation()
 const { timestamp } = useDate()
 const { setting } = useGlobalSetting<AgeFormat>('age-format')
 
+const {
+  epochToTs,
+  slotToTs,
+} = useNetworkStore()
+
 const initTs = ref(timestamp.value) // store the initial timestamp, in case we don't want to auto update
 
 const mappedSetting = computed(() => {
@@ -78,6 +78,34 @@ const label = computed(() => {
 
   return { text }
 })
+
+function formatEpochToDateTime(
+  epoch: number,
+  timestamp?: number,
+  format?: AgeFormat,
+  style?: StringUnitLength,
+  locales: string = 'en',
+  withTime?: boolean,
+) {
+  if (format === 'relative') {
+    return formatTsToRelative(epochToTs(epoch) ?? 0 * 1000, timestamp, style, locales)
+  }
+  return formatTsToAbsolute(epochToTs(epoch) ?? 0 * 1000, locales, withTime)
+}
+
+function formatSlotToDateTime(
+  slot: number,
+  timestamp?: number,
+  format?: AgeFormat,
+  style?: StringUnitLength,
+  locales: string = 'en',
+  withTime?: boolean,
+) {
+  if (format === 'relative') {
+    return formatTsToRelative(slotToTs(slot) ?? 0 * 1000, timestamp, style, locales)
+  }
+  return formatTsToAbsolute(slotToTs(slot) ?? 0 * 1000, locales, withTime)
+}
 </script>
 
 <template>

frontend/components/bc/header/MainHeader.vue

@@ -6,9 +6,6 @@ import {
 import type { BcHeaderMegaMenu } from '#build/components'
 import { useLatestStateStore } from '~/stores/useLatestStateStore'
 import { useNetworkStore } from '~/stores/useNetworkStore'
-import {
-  SearchbarColors, SearchbarShape,
-} from '~/types/searchbar'
 import {
   mobileHeaderThreshold, smallHeaderThreshold,
 } from '~/types/header'
@@ -31,7 +28,6 @@ const { width } = useWindowSize()
 const { t: $t } = useTranslation()
 const { promoCode } = usePromoCode()
 
-const colorMode = useColorMode()
 const isSmallScreen = computed(() => width.value < smallHeaderThreshold)
 const isMobileScreen = computed(() => width.value < mobileHeaderThreshold)
 
@@ -143,21 +139,6 @@ const handleUserMenuSelect = async (value: UserMenuItem) => {
           </span>
         </span>
       </div>
-
-      <div class="grid-cell search-bar">
-        <BcSearchbarGeneral
-          v-if="showInDevelopment && !isHomePage"
-          class="bar"
-          :bar-shape="SearchbarShape.Medium"
-          :color-theme="
-            isSmallScreen && colorMode.value != 'dark'
-              ? SearchbarColors.LightBlue
-              : SearchbarColors.DarkBlue
-          "
-          :screen-width-causing-sudden-change="smallHeaderThreshold"
-        />
-      </div>
-
       <div class="grid-cell controls">
         <BcCurrencySelection
           class="currency"