improve uptime and blocks

src/main.ts

@@ -9,7 +9,7 @@ import { loadFonts } from '@/plugins/vuetify/webfontloader';
 import '@/plugins/vuetify/@core/scss/template/index.scss';
 import '@/plugins/vuetify/styles/styles.scss';
 import '@/style.css';
-import { createApp } from 'vue';
+import { createApp, ref } from 'vue';
 import { createPinia } from 'pinia';
 import LazyLoad from 'lazy-load-vue3';
 // import router from "@/plugins/vuetify/router";
@@ -32,4 +32,10 @@ app.mount('#app');
 
 // fetch latest block every 6s
 const blockStore = useBaseStore()
-setInterval(() => {blockStore.fetchLatest()}, 6000)
+const requestCounter = ref(0)
+setInterval(() => {
+    requestCounter.value += 1
+    if(requestCounter.value < 5) { // max allowed request
+        blockStore.fetchLatest().finally(() => requestCounter.value -= 1)
+    } 
+}, 6000)

src/modules/[chain]/block/index.vue

@@ -10,7 +10,9 @@ const base = useBaseStore()
 const format = useFormatter();
 
 const list = computed(() => {
-  return base.recents.reverse()
+  // const recents = base.recents
+  // return recents.sort((a, b) => (Number(b.block.header.height) - Number(a.block.header.height)))
+  return base.recents
 })
 </script>
 <template>
@@ -45,10 +47,10 @@ const list = computed(() => {
             {{ format.toDay(item.block?.header?.time, 'from') }}
           </span>
         </div>
-        <div class="flex justify-between">
+        <div class="flex justify-between tooltip" data-tip="Block Proposor">
-          <p class="mt-2 hidden text-sm sm:block truncate">
+          <div class="mt-2 hidden text-sm sm:block truncate">
-            {{ format.validator(item.block?.header?.proposer_address) }}
+              <span>{{ format.validator(item.block?.header?.proposer_address) }}</span>
-          </p>
+          </div>
           <span class="text-right mt-1 whitespace-nowrap"> {{ item.block?.data?.txs.length }} txs </span>
         </div>
       </RouterLink>

src/modules/[chain]/uptime/index.vue

@@ -6,7 +6,6 @@ import {
   useStakingStore,
   useBaseStore,
   useBlockchain,
-useParamStore,
 } from '@/stores';
 import UptimeBar from '@/components/UptimeBar.vue';
 import type { Commit, SlashingParam, SigningInfo } from '@/types';
@@ -52,7 +51,11 @@ const list = computed(() => {
 onMounted(() => {
   live.value = true;
   
-  baseStore.fetchLatest().then(b => {
+  baseStore.fetchLatest().then(l => {
+    let b = l
+    if(baseStore.recents?.findIndex(x => x.block_id.hash === l.block_id.hash) > -1 ) {
+      b = baseStore.recents?.at(0) || l
+    }
     latest.value = Number(b.block.header.height);
     commits.value.unshift(b.block.last_commit);
     const height = Number(b.block.header?.height || 0);
@@ -138,10 +141,10 @@ function changeTab(v: string) {
             <label class="text-truncate text-sm">
               <span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
             </label>
-            <div v-if="Number(signing?.missed_blocks_counter || 0) > 10" class="badge badge-error badge-sm text-white">
+            <div v-if="Number(signing?.missed_blocks_counter || 0) > 10" class="badge badge-sm bg-transparent border-0 text-red-500">
               {{ signing?.missed_blocks_counter }}
             </div>
-            <div v-else class="mt-1 badge badge-sm text-white bg-yes border-0">
+            <div v-else class="badge badge-sm bg-transparent text-green-600 border-0">
               {{ signing?.missed_blocks_counter }}
             </div>
           </div>