--wip-- [skip ci]

Author: marcel-bitfly

frontend/app.vue

@@ -7,27 +7,15 @@ useHead(
     htmlAttrs: { lang: locale.value },
   },
 )
-useWindowSizeProvider()
 useBcToastProvider()
-
-const { latestState } = storeToRefs(useLatestStateStore())
-const exchangeRates = computed(() => latestState.value?.exchange_rates ?? [])
-const exchangeRateLengthOnTestNetworks = 1
-if (exchangeRates.value.length === exchangeRateLengthOnTestNetworks) {
-  const { selectedCurrencyMain } = useCurrency()
-  selectedCurrencyMain.value = exchangeRates.value[0].code as CurrencyCode
-}
 </script>
 
 <template>
-  <div class="min-h-full">
-    <BcDataWrapper>
-      <NuxtLoadingIndicator color="var(--primary-color)" />
-      <NuxtPage />
-      <DynamicDialog />
-      <Toast />
-    </BcDataWrapper>
-  </div>
+  <NuxtLoadingIndicator color="var(--primary-color)" />
+  <NuxtPage />
+  <DynamicDialog />
+  <Toast />
+  <BcCookieModal />
 </template>
 
 <style lang="scss"></style>

frontend/components/BcLayout.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="page">
+    <header>
+      <slot name="header" />
+    </header>
+    <slot name="banner" />
+    <main class="content">
+      <slot />
+    </main>
+    <footer>
+      <TheFooter />
+    </footer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+}
+
+.content {
+  max-width: var(--content-width);
+  margin: var(--padding) auto
+}
+</style>

frontend/components/bc/header/MainHeader.vue renamed to frontend/components/BcNavigation.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import type { BcHeaderMegaMenu } from '#build/components'
-import { useLatestStateStore } from '~/stores/useLatestStateStore'
+import type { BcNavigationMenu } from '#build/components'
 import {
   mobileHeaderThreshold, smallHeaderThreshold,
 } from '~/types/header'
 
-defineProps<{
-  isHomePage: boolean,
-  minimalist: boolean,
-}>()
-const latestStateStore = useLatestStateStore()
-const { latestState } = storeToRefs(latestStateStore)
 const {
   getEpochFromSlot,
   networkInfo,
+  secondsPerSlot,
 } = useNetwork()
+
+const { counter } = useInterval(secondsPerSlot)
+
+// Todo: decide if this is an antipattern or we should rather use watcher with callOnce
+useApi('/api/latest-state', {
+  watch: [ counter ],
+})
+
 const {
   doLogout,
   isLoggedIn,
@@ -32,12 +34,13 @@ const { promoCode } = usePromoCode()
 const isSmallScreen = computed(() => width.value < smallHeaderThreshold)
 const isMobileScreen = computed(() => width.value < mobileHeaderThreshold)
 
-const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
+const config = useRuntimeConfig()
+const showInDevelopment = Boolean(config.public.showInDevelopment)
 const hideInDevelopmentClass = showInDevelopment
   ? ''
   : 'hide-because-it-is-unfinished' // TODO: once the searchbar is enabled in production, delete this line
 
-const megaMenu = ref<null | typeof BcHeaderMegaMenu>(null)
+const megaMenu = ref<null | typeof BcNavigationMenu>(null)
 
 const hasExchangeRates = computed(() => exchangeRates.value.length > 1)
 
@@ -55,11 +58,8 @@ const currentRate = computed(() => {
   })
 })
 
-const currentEpoch = computed(() =>
-  latestState.value?.current_slot !== undefined
-    ? getEpochFromSlot(latestState.value.current_slot)
-    : undefined,
-)
+const currentSlot = useCurrentSlot()
+const currentEpoch = computed(() => getEpochFromSlot(currentSlot.value))
 
 const toggleMegaMenu = (evt: Event) => {
   megaMenu.value?.toggleMegaMenu(evt)
@@ -70,7 +70,7 @@ const isMobileMegaMenuOpen = computed(() => megaMenu.value?.isMobileMenuOpen)
 type UserMenuItem = { command: () => Promise<void>, label: string }
 const userMenu: UserMenuItem[] = [
   {
-    command: async () => { await navigateTo('/user/settings') },
+    command: async () => { await navigateTo(`${v1Domain}/user/settings`, { external: true }) },
     label: $t('header.settings'),
   },
   {
@@ -81,41 +81,31 @@ const userMenu: UserMenuItem[] = [
 const handleUserMenuSelect = async (value: UserMenuItem) => {
   await value.command?.()
 }
+const v1Domain = useV1Domain()
 </script>
 
 <template>
   <div
-    v-if="minimalist"
-    class="minimalist"
-  >
-    <div class="top-background" />
-    <div class="rows">
-      <BcHeaderLogo layout-adaptability="low" />
-    </div>
-  </div>
-
-  <div
-    v-else
     class="complete"
     :class="hideInDevelopmentClass"
   >
     <div class="top-background" />
     <div class="rows">
       <div class="grid-cell blockchain-info">
-        <span v-if="latestState?.current_slot"><span>{{ $t("header.slot") }}</span>:
+        <span v-if="currentSlot"><span>{{ $t("header.slot") }}</span>:
           <BcLink
-            :to="`/slot/${latestState.current_slot}`"
+            :to="`${v1Domain}/slot/${currentSlot}`"
             :disabled="!showInDevelopment || null"
           >
             <BcFormatNumber
               class="bold"
-              :value="latestState.current_slot"
+              :value="currentSlot"
             />
           </BcLink>
         </span>
-        <span v-if="currentEpoch !== undefined"><span>{{ $t("header.epoch") }}</span>:
+        <span v-if="currentEpoch"><span>{{ $t("header.epoch") }}</span>:
           <BcLink
-            :to="`/epoch/${currentEpoch}`"
+            :to="`${v1Domain}/epoch/${currentEpoch}`"
             :disabled="!showInDevelopment || null"
           >
             <BcFormatNumber
@@ -191,7 +181,7 @@ const handleUserMenuSelect = async (value: UserMenuItem) => {
       </div>
 
       <div class="grid-cell explorer-info">
-        <BcHeaderLogo layout-adaptability="high" />
+        <BcNavigationLogo layout-adaptability="high" />
         <span class="variant">
           v2 beta |
           <span class="mobile">{{ networkInfo.shortName }}</span>
@@ -200,7 +190,7 @@ const handleUserMenuSelect = async (value: UserMenuItem) => {
       </div>
 
       <div class="grid-cell mega-menu">
-        <BcHeaderMegaMenu ref="megaMenu" />
+        <BcNavigationMenu ref="megaMenu" />
         <div
           v-if="isMobileMegaMenuOpen"
           class="decoration"
@@ -217,7 +207,11 @@ const handleUserMenuSelect = async (value: UserMenuItem) => {
 $mobileHeaderThreshold: 600px;
 $smallHeaderThreshold: 1024px;
 
-@mixin common {
+.complete {
+  top: -1px; // needed for some reason to perfectly match Figma
+  border-bottom: 1px solid var(--container-border-color);
+  background-color: var(--container-background);
+
   position: relative;
   display: flex;
   width: 100%;
@@ -231,23 +225,7 @@ $smallHeaderThreshold: 1024px;
   .rows {
     width: var(--content-width);
   }
-}
-
-.minimalist {
-  color: var(--header-top-font-color);
-  @include common();
-  @media (max-width: $mobileHeaderThreshold) {
-    .top-background {
-      height: 36px;
-    }
-  }
-}
 
-.complete {
-  top: -1px; // needed for some reason to perfectly match Figma
-  border-bottom: 1px solid var(--container-border-color);
-  background-color: var(--container-background);
-  @include common();
   &.hide-because-it-is-unfinished {
     // TODO: once the searchbar is enabled in production, delete this block (because border-bottom is always needed, due to the fact that the lower header is always visible (it contains the search bar when the screeen is narrow, otherwise the logo and mega menu))
     @media (max-width: $smallHeaderThreshold) {

frontend/components/BcNavigationCompact.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div
+    class="minimalist"
+  >
+    <div class="top-background" />
+    <div class="rows">
+      <BcNavigationLogo layout-adaptability="low" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$mobileHeaderThreshold: 600px;
+
+.minimalist {
+  color: var(--header-top-font-color);
+  position: relative;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  .top-background {
+    position: absolute;
+    width: 100%;
+    height: var(--navbar-height);
+    background-color: var(--dark-blue);
+  }
+  .rows {
+    width: var(--content-width);
+  }
+  @media (max-width: $mobileHeaderThreshold) {
+    .top-background {
+      height: 36px;
+    }
+  }
+}
+</style>

frontend/components/bc/header/HeaderLogo.vue renamed to frontend/components/BcNavigationLogo.vue

@@ -23,6 +23,7 @@ const isMobile = computed(() => width.value < mobileHeaderThreshold)
 
 const { has } = useFeatureFlag()
 
+const v1Domain = useV1Domain()
 const items = computed(() => {
   let list: MenuItem[] = []
 
@@ -46,7 +47,7 @@ const items = computed(() => {
     if (isLoggedIn.value) {
       list.push({
         command: async () => {
-          await navigateTo('../user/settings')
+          await navigateTo(`${v1Domain}/user/settings`, { external: true })
         },
         label: $t('header.settings'),
       })