feat: Warning about MDW out of sync (#684)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
aeternity · Mar 28, 2024 · 1c9b7e5 · 1c9b7e5
1 parent 0b20a49
commit 1c9b7e5
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 11 deletions.
diff --git a/src/components/TheFooter.vue b/src/components/TheFooter.vue
@@ -52,15 +52,20 @@
               class="footer__version">
               NODE VERSION
               <app-link :to="NODE_RELEASES_URL">
-                v{{ nodeVersion }}
+                v{{ nodeStatus.nodeVersion }}
               </app-link>
             </div>
             <div
               class="footer__version">
               MIDDLEWARE VERSION
               <app-link :to="MDW_RELEASES_URL">
-                v{{ middlewareVersion }}
+                v{{ middlewareStatus.mdwVersion }}
               </app-link>
+              <span
+                v-if="isSyncing"
+                class="footer__warning">
+                (syncing)
+              </span>
             </div>
           </div>
           <div class="footer__link-container">
@@ -89,7 +94,7 @@ import AppLink from '@/components/AppLink'
 import AppTooltip from '@/components/AppTooltip'
 import { useStatus } from '@/stores/status'
 
-const { middlewareVersion, nodeVersion } = storeToRefs(useStatus())
+const { middlewareStatus, nodeStatus, isSyncing } = storeToRefs(useStatus())
 const { MIDDLEWARE_URL } = useRuntimeConfig().public
 const { APP_VERSION } = useAppConfig()
 
@@ -227,5 +232,9 @@ const links = {
       margin: 80px 0;
     }
   }
+
+  &__warning {
+    color: var(--color-fire)
+  }
 }
 </style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -37,13 +37,22 @@
           'header__network-select',
           { 'header__network-select--open': isNavigationOpen }]"/>
     </div>
+    <div
+      v-if="isSyncing"
+      class="header__warning">
+      Some services are currently being synced and data accuracy might be affected. Please check again later.
+    </div>
   </header>
 </template>
 
 <script setup>
+import { useStatus } from '@/stores/status'
+
 const route = useRoute()
 const isNavigationOpen = ref(false)
 
+const { isSyncing } = storeToRefs(useStatus())
+
 onMounted(() => {
   window.addEventListener('resize', closeNavigation)
 })
@@ -68,13 +77,18 @@ function closeNavigation() {
 <style scoped>
 .header {
   background: var(--color-white);
+  display: flex;
+  flex-direction: column;
 
   &__container {
     height: 100%;
+    width: 100%;
+
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
+
     margin: 0 auto;
     padding: var(--space-2) var(--space-3);
     column-gap: var(--space-5);
@@ -84,8 +98,7 @@ function closeNavigation() {
     }
 
     @media (--desktop) {
-      width: 100%;
-      padding: 15px 0;
+      padding: var(--space-3) 0;
       max-width: var(--container-width);
     }
   }
@@ -137,5 +150,18 @@ function closeNavigation() {
   &__icon {
     margin-left: var(--space-1);
   }
+
+  &__warning {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--color-fire);
+    color: var(--color-white);
+    font-family: var(--font-monospaced);
+    padding: var(--space-0) var(--space-3);
+    font-size: 11px;
+    line-height: 16px;
+    letter-spacing: 0.0015em;
+  }
 }
 </style>
diff --git a/src/stores/status.js b/src/stores/status.js
@@ -1,23 +1,32 @@
 import { defineStore } from 'pinia'
 import { useRuntimeConfig } from 'nuxt/app'
 import useAxios from '@/composables/useAxios'
+import { SYNCING_BLOCK_THRESHOLD } from '~/utils/constants'
 
 export const useStatus = defineStore('status', () => {
   const { MIDDLEWARE_URL, NODE_URL } = useRuntimeConfig().public
+
   const axios = useAxios()
-  const middlewareVersion = ref(null)
-  const nodeVersion = ref(null)
+  const middlewareStatus = ref(null)
+  const nodeStatus = ref(null)
 
   async function fetchMdwStatus() {
     const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/status`)
-    middlewareVersion.value = data.mdwVersion
+    middlewareStatus.value = data
   }
 
   async function fetchNodeStatus() {
     const { data } = await axios.get(`${NODE_URL}/v3/status`)
-    nodeVersion.value = data.nodeVersion
+    nodeStatus.value = data
   }
 
+  const isSyncing = computed(() => {
+    return middlewareStatus.value && nodeStatus.value
+      ? middlewareStatus.value.mdwSyncing &&
+      (nodeStatus.value.topBlockHeight - middlewareStatus.value.nodeHeight) > SYNCING_BLOCK_THRESHOLD
+      : null
+  })
+
   function fetchStatus() {
     return Promise.all([
       fetchMdwStatus(),
@@ -26,8 +35,9 @@ export const useStatus = defineStore('status', () => {
   }
 
   return {
-    middlewareVersion,
-    nodeVersion,
+    middlewareStatus,
+    nodeStatus,
+    isSyncing,
     fetchStatus,
   }
 })
diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -115,6 +115,8 @@ export const KNOWN_ADDRESSES = [
 ]
 export const REVOKED_PERIOD = 2016
 
+export const SYNCING_BLOCK_THRESHOLD = 5
+
 export const LICENSE_OPTIONS = [
   { label: 'No License', key: 'None' },
   { label: 'The Unlicense', key: 'Unlicense' },