New healthcheck

package.json

@@ -86,10 +86,12 @@
     "vuetify": "^3.3.17",
     "vuex": "^4.1.0",
     "vuex-persist": "^3.1.3",
+    "web3-errors": "^1.1.3",
     "web3-eth": "^4.2.0",
     "web3-eth-abi": "^4.1.3",
     "web3-eth-accounts": "^4.0.6",
     "web3-eth-contract": "^4.1.0",
+    "web3-providers-http": "^4.1.0",
     "web3-utils": "^4.0.6"
   },
   "devDependencies": {

src/components/NodesTable/BlockchainLabel.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-chip :class="className" label>{{ label }}</v-chip>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const className = 'blockchain-label'
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      required: true
+    }
+  },
+  setup() {
+    return {
+      className
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.blockchain-label {
+  --v-chip-height: 18px;
+  padding: 0 4px;
+}
+</style>

src/components/NodesTable/NodesTable.vue

@@ -3,7 +3,12 @@
     <nodes-table-head />
 
     <tbody>
-      <nodes-table-item v-for="node in nodes" :key="node.name" :node="node" />
+      <nodes-table-item v-for="node in admNodes" :key="node.url" blockchain="adm" :node="node" />
+      <nodes-table-item v-for="node in ethNodes" :key="node.url" blockchain="eth" :node="node" />
+      <nodes-table-item v-for="node in btcNodes" :key="node.url" blockchain="btc" :node="node" />
+      <nodes-table-item v-for="node in dogeNodes" :key="node.url" blockchain="doge" :node="node" />
+      <nodes-table-item v-for="node in dashNodes" :key="node.url" blockchain="dash" :node="node" />
+      <nodes-table-item v-for="node in lskNodes" :key="node.url" blockchain="lsk" :node="node" />
     </tbody>
   </v-table>
 </template>
@@ -21,8 +26,8 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
-    const nodes = computed(() => {
-      const arr = store.getters['nodes/list']
+    const admNodes = computed(() => {
+      const arr = store.getters['nodes/adm']
 
       return [...arr].sort((a, b) => {
         if (/^http:\/\//.test(a.url) || /^http:\/\//.test(b.url)) {
@@ -32,14 +37,24 @@ export default defineComponent({
         return a.url > b.url ? 1 : b.url > a.url ? -1 : 0
       })
     })
+    const ethNodes = computed(() => store.getters['nodes/eth'])
+    const btcNodes = computed(() => store.getters['nodes/btc'])
+    const dogeNodes = computed(() => store.getters['nodes/doge'])
+    const dashNodes = computed(() => store.getters['nodes/dash'])
+    const lskNodes = computed(() => store.getters['nodes/lsk'])
 
     const className = 'nodes-table'
     const classes = {
       root: className
     }
 
     return {
-      nodes,
+      admNodes,
+      ethNodes,
+      btcNodes,
+      dogeNodes,
+      dashNodes,
+      lskNodes,
       classes
     }
   }

src/components/NodesTable/NodesTableItem.vue

@@ -11,35 +11,38 @@
         :model-value="active"
         :class="[classes.checkbox, classes.statusIconGrey]"
         @input="toggleActiveStatus"
+        :disabled="blockchain !== 'adm'"
       />
     </td>
 
     <td :class="classes.td" class="pl-0 pr-2">
       {{ url }}
+      <blockchain-label v-if="blockchain !== 'adm'" :label="blockchain" />
       <div v-if="version" :class="classes.version">
         {{ 'v' + version }}
       </div>
     </td>
 
-    <td :class="classes.td" class="pl-0 pr-2">
-      <span>
+    <td :class="classes.td" class="pl-0 pr-2" :colspan="unsupported ? 2 : 1">
+      <div :class="classes.status">
         {{ nodeStatus }}
-      </span>
-      <v-icon
-        :class="{
-          [classes.statusIcon]: true,
-          [classes.statusIconGreen]: nodeStatusColor === 'green',
-          [classes.statusIconRed]: nodeStatusColor === 'red',
-          [classes.statusIconOrange]: nodeStatusColor === 'orange',
-          [classes.statusIconGrey]: nodeStatusColor === 'grey'
-        }"
-        :color="nodeStatusColor"
-        icon="mdi-checkbox-blank-circle"
-        size="small"
-      />
+        <v-icon
+          :class="{
+            [classes.statusIcon]: true,
+            [classes.statusIconGreen]: nodeStatusColor === 'green',
+            [classes.statusIconRed]: nodeStatusColor === 'red',
+            [classes.statusIconOrange]: nodeStatusColor === 'orange',
+            [classes.statusIconGrey]: nodeStatusColor === 'grey'
+          }"
+          :color="nodeStatusColor"
+          icon="mdi-checkbox-blank-circle"
+          size="small"
+        />
+      </div>
+      <span v-if="nodeStatusReason" :class="classes.statusSubtitle">{{ nodeStatusReason }}</span>
     </td>
 
-    <td :class="classes.td" class="pl-0 pr-2">
+    <td v-if="!unsupported" :class="classes.td" class="pl-0 pr-2">
       <v-icon
         :icon="socketSupport ? 'mdi-check' : 'mdi-close'"
         :class="socketSupport ? classes.statusIconGreen : classes.statusIconRed"
@@ -48,12 +51,16 @@
   </tr>
 </template>
 
-<script>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+<script lang="ts">
+import { computed, PropType } from 'vue'
+import { useI18n, type VueI18nTranslation } from 'vue-i18n'
 import { useStore } from 'vuex'
+import type { NodeStatusResult } from '@/lib/nodes/abstract.node'
+import type { NodeType } from '@/lib/nodes/types'
 
-function getNodeStatus(node, t) {
+import BlockchainLabel from './BlockchainLabel.vue'
+
+function getNodeStatus(node: NodeStatusResult, t: VueI18nTranslation) {
   if (!node.hasMinNodeVersion || !node.hasSupportedProtocol) {
     return t('nodes.unsupported')
   } else if (!node.active) {
@@ -67,7 +74,15 @@ function getNodeStatus(node, t) {
   return node.ping + ' ' + t('nodes.ms')
 }
 
-function getNodeStatusColor(node) {
+function getNodeStatusReason(node: NodeStatusResult, t: VueI18nTranslation) {
+  if (!node.hasMinNodeVersion) {
+    return t('nodes.unsupported_reason_api_version')
+  } else if (!node.hasSupportedProtocol) {
+    return t('nodes.unsupported_reason_protocol')
+  }
+}
+
+function getNodeStatusColor(node: NodeStatusResult) {
   let color = 'green'
 
   if (!node.hasMinNodeVersion || !node.hasSupportedProtocol) {
@@ -84,9 +99,14 @@ function getNodeStatusColor(node) {
 }
 
 export default {
+  components: { BlockchainLabel },
   props: {
     node: {
-      type: Object,
+      type: Object as PropType<NodeStatusResult>,
+      required: true
+    },
+    blockchain: {
+      type: String as PropType<NodeType>,
       required: true
     }
   },
@@ -100,6 +120,8 @@ export default {
       td: `${className}__td`,
       checkbox: `${className}__checkbox`,
       version: `${className}__version`,
+      status: `${className}__status`,
+      statusSubtitle: `${className}__status-subtitle`,
       statusIcon: `${className}__status-icon`,
       statusIconGreen: `${className}__status-icon--green`,
       statusIconRed: `${className}__status-icon--red`,
@@ -114,8 +136,13 @@ export default {
     const socketSupport = computed(() => props.node.socketSupport)
 
     const nodeStatus = computed(() => getNodeStatus(props.node, t))
+    const nodeStatusReason = computed(() => getNodeStatusReason(props.node, t))
     const nodeStatusColor = computed(() => getNodeStatusColor(props.node))
 
+    const unsupported = computed(
+      () => !props.node.hasMinNodeVersion || !props.node.hasSupportedProtocol || !props.node.online
+    )
+
     const toggleActiveStatus = () => {
       store.dispatch('nodes/toggle', {
         url: url.value,
@@ -131,8 +158,10 @@ export default {
       active,
       socketSupport,
       nodeStatus,
+      nodeStatusReason,
       toggleActiveStatus,
-      nodeStatusColor
+      nodeStatusColor,
+      unsupported
     }
   }
 }
@@ -150,9 +179,17 @@ export default {
   &__version {
     @include a-text-explanation-small();
   }
+  &__status {
+    line-height: 17px;
+    display: flex;
+  }
   &__status-icon {
     margin-inline-start: 4px;
   }
+  &__status-subtitle {
+    font-size: 12px;
+    font-weight: 300;
+  }
   &__td-checkbox {
     width: 64px;
     max-width: 64px;
@@ -183,6 +220,9 @@ export default {
     &__td {
       color: map-get($adm-colors, 'regular');
     }
+    &__status-subtitle {
+      color: map-get($adm-colors, 'regular');
+    }
     &__status-icon {
       &--green {
         color: map-get($adm-colors, 'good') !important;
@@ -205,6 +245,10 @@ export default {
     &__version {
       opacity: 0.7;
     }
+    &__status-subtitle {
+      color: map-get($shades, 'white');
+      opacity: 0.7;
+    }
     &__status-icon {
       &--green {
         color: map-get($adm-colors, 'good') !important;