contextual health indicator

components/ui/HealthIndicator.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-if="contextualHealth === Health.Healthy">
+    <div class="bg-green-500 w-4 h-4 rounded-full" title="all good"></div>
+  </div>
+  <div v-else-if="contextualHealth === Health.Warning">
+    <div class="bg-yellow-500 w-4 h-4 rounded-full" title="warnings"></div>
+  </div>
+  <div v-else-if="contextualHealth === Health.Critical">
+    <div class="bg-red-500 w-4 h-4 rounded-full" title="critical"></div>
+  </div>
+  <div v-else>
+    <div class="bg-gray-500 w-4 h-4 rounded-full" title="health unknown"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSystemHealth, Health } from "@/store/systemHealth.ts";
+import { useRouter } from 'vue-router';
+
+const systemHealth = useSystemHealth();
+const router = useRouter();
+
+
+
+const contextualHealth = computed(() => {
+  switch (router.currentRoute.value.path) {
+    case '/':
+      return systemHealth.getAggregatedSystemHealth;
+    case '/teerdays':
+      return systemHealth.getIntegriteeSystemHealth;
+    default:
+      return Health.Unknown;
+  }
+});
+</script>
+
+
+<style scoped>
+
+</style>

layouts/default.vue

@@ -3,6 +3,7 @@
     <header class="header">
       <div class="header-content">
         <Incognitee class="logo" />
+        <HealthIndicator/>
         <div class="flex items-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -138,8 +139,10 @@ import Incognitee from "@/assets/img/incognitee-mask.svg";
 import TEERdays from "@/public/img/index/TEERdays-icon-white.svg";
 import { useAccount } from "@/store/account.ts";
 import { eventBus } from "@/helpers/eventBus";
-import { connectExtension } from "~/lib/signerExtensionUtils";
+import HealthIndicator from "@/components/ui/HealthIndicator.vue";
+
 const accountStore = useAccount();
+
 const emitAddressClicked = () => {
   eventBus.emit("addressClicked");
 };
@@ -203,4 +206,21 @@ const emitAddressClicked = () => {
   padding: 0;
   list-style-type: none;
 }
+
+.bg-green-500 {
+  background-color: #2dad24; /* Adjust the color as needed */
+}
+
+.w-4 {
+  width: 1rem; /* Adjust the size as needed */
+}
+
+.h-4 {
+  height: 1rem; /* Adjust the size as needed */
+}
+
+.rounded-full {
+  border-radius: 9999px; /* Makes the element a circle */
+}
+
 </style>

pages/index.vue

@@ -1403,10 +1403,10 @@ const fetchNetworkStatus = async () => {
   const getter = incogniteeStore.api.parentchainsInfoGetter(
     incogniteeShard.value,
   );
-  getter.send().then((info) => {
-    console.log(`parentchains info: ${info}`);
-    parentchainsInfo.value = info;
-  });
+  // getter.send().then((info) => {
+  //   console.log(`parentchains info: ${info}`);
+  //   parentchainsInfo.value = info;
+  // });
   api.rpc.chain.getFinalizedHead().then((head) => {
     api.rpc.chain.getBlock(head).then((block) => {
       console.log(

pages/teerdays.vue

@@ -1006,6 +1006,12 @@ const summaryTeerBonded = ref(0);
 const summaryTeerDays = ref(0);
 const isChoosingAccount = ref(false);
 
+const isMobile = ref(false);
+
+// Überwache die Bildschirmgröße und aktualisiere den isMobile-Wert
+const checkIfMobile = () => {
+  isMobile.value = window.matchMedia("(max-width: 768px)").matches;
+};
 const dropSubscriptions = async () => {
   console.log("dropping subscriptions");
   api?.disconnect();

store/systemHealth.ts

@@ -0,0 +1,40 @@
+import { defineStore } from "pinia";
+import { ChainId } from "@/configs/chains";
+
+class ObservableNumber {
+  value: number;
+  timestamp: Date;
+  constructor(value: number) {
+    this.value = value;
+  }
+  observe(new_value: number) {
+    this.value = new_value;
+    this.timestamp = new Date();
+  }
+}
+
+export enum Health {
+  Unknown,
+  Healthy,
+  Warning,
+  Critical,
+}
+
+export const useSystemHealth = defineStore("system-health", {
+  state: () => ({
+    shieldingTargetFinalizedBlockNumber: <ObservableNumber | null>null,
+  }),
+  getters: {
+    getAggregatedSystemHealth({ shieldingTargetFinalizedBlockNumber }): Health {
+      return Health.Healthy;
+    },
+    getIntegriteeSystemHealth({ shieldingTargetFinalizedBlockNumber }): Health {
+      return Health.Warning;
+    }
+    },
+  actions: {
+    setShieldingTargetFinalizedBlockNumber(block_number: number) {
+      this.shieldingTargetFinalizedBlockNumber.observe(block_number);
+    }
+  },
+});