Show chain status

src/layouts/components/Navbar.vue

@@ -37,13 +37,14 @@
             @click="toggleVerticalMenuActive"
           >
             <b-avatar
+              v-b-tooltip.hover.bottom="tips"
               variant="transparent"
               badge
               rounded
               size="42"
               :src="selected_chain.logo"
               class="badge-minimal"
-              badge-variant="success"
+              :badge-variant="chainVariant"
             /></b-link>
         </b-media-aside>
         <b-media-body class="my-auto">
@@ -133,6 +134,7 @@ import Locale from '@core/layouts/components/app-navbar/components/Locale.vue'
 import SearchBar from '@core/layouts/components/app-navbar/components/SearchBar.vue'
 // import CartDropdown from '@core/layouts/components/app-navbar/components/CartDropdown.vue'
 import store from '@/store'
+import { timeIn, toDay } from '@/libs/data'
 // import UserDropdown from '@core/layouts/components/app-navbar/components/UserDropdown.vue'
 
 export default {
@@ -164,7 +166,8 @@ export default {
   },
   data() {
     return {
-      // result: {},
+      chainVariant: 'success',
+      tips: 'Synced',
     }
   },
   computed: {
@@ -172,5 +175,13 @@ export default {
       return store.state.chains.selected
     },
   },
+  created() {
+    this.$http.getLatestBlock().then(block => {
+      if (timeIn(block.block.header.time, 1, 'm')) {
+        this.chainVariant = 'danger'
+        this.tips = `Halted ${toDay(block.block.header.time, 'from')} `
+      }
+    })
+  },
 }
 </script>

src/views/Home.vue

@@ -59,10 +59,12 @@
                 >
                   <b-avatar
                     :src="data.logo"
-                    class="mt-1"
+                    class="mt-1 badge-minimal"
                     variant="light-primary"
                     rounded
                     size="82"
+                    badge
+                    :badge-variant="data.variant"
                   /></b-col>
               </b-row>
             </b-card>
@@ -93,7 +95,7 @@ import {
 } from 'bootstrap-vue'
 import VuexyLogo from '@core/layouts/components/Logo.vue'
 import store from '@/store/index'
-import { toDay } from '@/libs/data'
+import { timeIn, toDay } from '@/libs/data'
 import DarkToggler from '@/@core/layouts/components/app-navbar/components/DarkToggler.vue'
 import Locale from '@/@core/layouts/components/app-navbar/components/Locale.vue'
 import AppFooter from '@/@core/layouts/components/AppFooter.vue'
@@ -148,6 +150,7 @@ export default {
             const { header } = b.block
             this.$set(chain, 'height', header.height)
             this.$set(chain, 'time', toDay(header.time))
+            this.$set(chain, 'variant', timeIn(header, 1, 'm') ? 'danger' : 'success')
           })
         }
       })