Feat/service tab

src/components/nodes/NodesTable.vue

@@ -2,14 +2,17 @@
   <div :class="classes.root">
     <v-tabs v-model="tab" bg-color="transparent">
       <v-tab value="adm">{{ $t('nodes.tabs.adm_nodes') }}</v-tab>
+      <v-tab value="services">{{ $t('nodes.tabs.service_nodes') }}</v-tab>
       <v-tab value="coins">{{ $t('nodes.tabs.coin_nodes') }}</v-tab>
     </v-tabs>
 
     <v-window v-model="tab">
       <v-window-item value="adm">
         <AdmNodesTable />
       </v-window-item>
-
+      <v-window-item value="services">
+        <ServiceNodesTable />
+      </v-window-item>
       <v-window-item value="coins">
         <CoinNodesTable />
       </v-window-item>
@@ -29,6 +32,20 @@
         </div>
         <div>&nbsp;<br />&nbsp;</div>
       </div>
+      <div v-else-if="tab === 'services'">
+        <v-checkbox
+          v-model="preferFastestCoinNodeOption"
+          :label="$t('nodes.fastest_title')"
+          :class="classes.checkbox"
+          class="mt-4"
+          color="grey darken-1"
+          hide-details
+        />
+        <div class="a-text-explanation-enlarged">
+          {{ $t('nodes.fastest_tooltip') }}
+        </div>
+        <div>&nbsp;<br />&nbsp;</div>
+      </div>
       <div v-else-if="tab === 'adm'">
         <v-checkbox
           v-model="preferFastestAdmNodeOption"
@@ -72,6 +89,7 @@ import { defineComponent, ref, computed } from 'vue'
 import { AdmNodesTable } from './adm'
 import { CoinNodesTable } from './coins'
 import { useStore } from 'vuex'
+import ServiceNodesTable from '@/components/nodes/services/ServiceNodesTable.vue'
 
 const className = 'nodes-table'
 const classes = {
@@ -80,10 +98,11 @@ const classes = {
   checkbox: `${className}__checkbox`
 }
 
-type Tab = 'adm' | 'coins'
+type Tab = 'adm' | 'coins' | 'services'
 
 export default defineComponent({
   components: {
+    ServiceNodesTable,
     AdmNodesTable,
     CoinNodesTable
   },

src/components/nodes/components/NodesTableHead.vue

@@ -2,7 +2,9 @@
   <thead :class="classes.root">
     <tr>
       <th :class="classes.checkbox" v-if="!hideCheckbox" />
-      <th :class="classes.label" class="pl-0 pr-2" v-if="!hideLabel">{{ t('nodes.coin') }}</th>
+      <th :class="classes.label" class="pl-0 pr-2" v-if="!hideLabel">
+        {{ customLabelCode ? t(customLabelCode) : t('nodes.coin') }}
+      </th>
       <th :class="classes.th" class="pl-0 pr-2" v-if="!hideHost">
         {{ t('nodes.host') }}
       </th>
@@ -35,6 +37,9 @@ export default {
     },
     hideSocket: {
       type: Boolean
+    },
+    customLabelCode: {
+      type: String
     }
   },
   setup() {

src/components/nodes/services/ServiceNodesTable.vue

@@ -0,0 +1,53 @@
+<template>
+  <NodesTableContainer>
+    <NodesTableHead hide-socket custom-label-code="nodes.service" />
+
+    <tbody>
+      <ServiceNodesTableItem
+        v-for="node in nodes"
+        :key="node.url"
+        :label="node.label"
+        :node="node"
+      />
+    </tbody>
+  </NodesTableContainer>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { useStore } from 'vuex'
+import NodesTableContainer from '@/components/nodes/components/NodesTableContainer.vue'
+import NodesTableHead from '@/components/nodes/components/NodesTableHead.vue'
+import ServiceNodesTableItem from './ServiceNodesTableItem.vue'
+import { type NodeStatusResult } from '@/lib/nodes/abstract.node.ts'
+import { sortNodesFn } from '@/components/nodes/utils/sortNodesFn.ts'
+
+const className = 'nodes-table'
+const classes = {
+  root: className
+}
+
+export default defineComponent({
+  components: {
+    NodesTableContainer,
+    NodesTableHead,
+    ServiceNodesTableItem
+  },
+  setup() {
+    const store = useStore()
+
+    const nodes = computed<NodeStatusResult[]>(() => {
+      const arr = store.getters['servicesModule/services']
+
+      return [...arr].sort(sortNodesFn)
+    })
+
+    return {
+      nodes,
+      classes
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>

src/components/nodes/services/ServiceNodesTableItem.vue

@@ -0,0 +1,92 @@
+<template>
+  <tr :class="classes.root">
+    <NodeColumn checkbox>
+      <NodeStatusCheckbox :value="active" @change="toggleActiveStatus" />
+    </NodeColumn>
+
+    <NodeColumn align="left">
+      <NodeLabel :label="label" />
+    </NodeColumn>
+
+    <NodeColumn>
+      <NodeUrl :node="node" />
+    </NodeColumn>
+
+    <NodeColumn ping :colspan="isUnsupported ? 2 : 1">
+      <NodeStatus :node="node" />
+    </NodeColumn>
+  </tr>
+</template>
+
+<script lang="ts">
+import { computed, PropType } from 'vue'
+import { useStore } from 'vuex'
+import type { NodeStatusResult } from '@/lib/nodes/abstract.node.ts'
+import type { TNodeLabel } from '@/lib/nodes/constants.ts'
+import NodeUrl from '@/components/nodes/components/NodeUrl.vue'
+import NodeColumn from '@/components/nodes/components/NodeColumn.vue'
+import NodeLabel from '@/components/nodes/components/NodeLabel.vue'
+import NodeStatus from '@/components/nodes/components/NodeStatus.vue'
+import NodeStatusCheckbox from '@/components/nodes/components/NodeStatusCheckbox.vue'
+
+const className = 'nodes-table-item'
+const classes = {
+  root: className,
+  column: `${className}__column`,
+  columnCheckbox: `${className}__column--checkbox`,
+  checkbox: `${className}__checkbox`
+}
+
+export default {
+  components: {
+    NodeColumn,
+    NodeStatus,
+    NodeLabel,
+    NodeUrl,
+    NodeStatusCheckbox
+  },
+  props: {
+    node: {
+      type: Object as PropType<NodeStatusResult>,
+      required: true
+    },
+    label: {
+      type: String as PropType<TNodeLabel>,
+      required: true
+    }
+  },
+  setup(props) {
+    const store = useStore()
+
+    const url = computed(() => props.node.url)
+    const active = computed(() => props.node.active)
+    const isUnsupported = computed(() => props.node.status === 'unsupported_version')
+    const type = computed(() => props.node.label)
+
+    const toggleActiveStatus = () => {
+      store.dispatch('servicesModule/toggle', {
+        type: type.value,
+        url: url.value,
+        active: !active.value
+      })
+      store.dispatch('servicesModule/updateStatus')
+    }
+
+    return {
+      classes,
+      url,
+      active,
+      isUnsupported,
+      toggleActiveStatus
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nodes-table-item {
+}
+
+.nodeName {
+}
+</style>

src/lib/nodes/abstract.node.ts

@@ -1,13 +1,8 @@
 import { getHealthCheckInterval } from './utils/getHealthcheckConfig'
 import { TNodeLabel } from './constants'
-import { HealthcheckInterval, NodeKind, NodeStatus, NodeType } from './types'
+import { HealthcheckInterval, HealthcheckResult, NodeKind, NodeStatus, NodeType } from './types'
 import { nodesStorage } from './storage'
 
-type HealthcheckResult = {
-  height: number
-  ping: number
-}
-
 type HttpProtocol = 'http:' | 'https:'
 type WsProtocol = 'ws:' | 'wss:'
 

src/lib/nodes/constants.ts

@@ -9,7 +9,7 @@ export type TNodeLabel =
   | 'dash-node'
   | 'lsk-node'
   | 'lsk-indexer'
-  | 'rates-info'
+  | 'rate'
 
 type KebabToCamelCase<S extends string> = S extends `${infer T}-${infer U}`
   ? `${T}${Capitalize<KebabToCamelCase<U>>}`
@@ -38,5 +38,5 @@ export const NODE_LABELS: NodeLabels = {
   DashNode: 'dash-node',
   LskNode: 'lsk-node',
   LskIndexer: 'lsk-indexer',
-  RatesInfo: 'rates-info'
+  Rate: 'rate'
 }

src/lib/nodes/rate-info-service/RateInfoClient.ts

@@ -0,0 +1,33 @@
+import { Client } from '@/lib/nodes/abstract.client.ts'
+import { RateInfoResponse, RateInfoService } from '@/lib/nodes/rate-info-service/RateInfoService.ts'
+
+export class RateInfoClient extends Client<RateInfoService> {
+  constructor(endpoints: string[] = [], minNodeVersion = '0.0.0') {
+    super('adm')
+    this.nodes = endpoints.map((endpoint) => new RateInfoService(endpoint))
+    this.minNodeVersion = minNodeVersion
+
+    void this.watchNodeStatusChange()
+  }
+
+  async getAllRates(): Promise<RateInfoResponse> {
+    const node = await this.fetchNode()
+    return await node.getAllRates()
+  }
+
+  async getHistory(timestamp: number) {
+    const node = await this.fetchNode()
+    return await node.getHistory(timestamp)
+  }
+
+  async fetchNode() {
+    const node = this.useFastest ? this.getFastestNode() : this.getRandomNode()
+    if (!node) {
+      // All nodes seem to be offline: let's refresh the statuses
+      this.checkHealth()
+      // But there's nothing we can do right now
+      return Promise.reject(new Error('No online nodes at the moment'))
+    }
+    return node
+  }
+}

src/lib/nodes/rate-info-service/RateInfoService.ts

@@ -0,0 +1,52 @@
+import { Node } from '@/lib/nodes/abstract.node'
+import axios, { AxiosInstance } from 'axios'
+import { HealthcheckResult } from '@/lib/nodes/types.ts'
+import { NODE_LABELS } from '@/lib/nodes/constants.ts'
+
+export type RateInfoResponse = {
+  success: boolean
+  date: number
+  result: Record<string, number>
+}
+
+export type RateHistoryInfoResponse = {
+  success: boolean
+  date: number
+  result: {
+    _id: string
+    date: number
+    tickers: Record<string, number>
+  }[]
+}
+
+export class RateInfoService extends Node<AxiosInstance> {
+  constructor(url: string) {
+    super(url, 'adm', 'service', NODE_LABELS.Rate)
+  }
+  protected buildClient(): AxiosInstance {
+    return axios.create({
+      baseURL: this.url
+    })
+  }
+
+  async getAllRates(): Promise<RateInfoResponse> {
+    const response = await this.client.get<RateInfoResponse>('/get')
+    return response.data
+  }
+
+  async getHistory(timestamp: number) {
+    const response = await this.client.get<RateHistoryInfoResponse>(
+      `/getHistory?timestamp=${timestamp}`
+    )
+    return response.data
+  }
+
+  protected async checkHealth(): Promise<HealthcheckResult> {
+    const start = Date.now()
+    const response = await this.getAllRates()
+    return {
+      ping: Date.now() - start,
+      height: response.date
+    }
+  }
+}

src/lib/nodes/rate-info-service/index.ts

@@ -0,0 +1,10 @@
+import config from '@/config'
+import { NodeInfo } from '@/types/wallets'
+import { RateInfoClient } from '@/lib/nodes/rate-info-service/RateInfoClient.ts'
+
+const endpoints = (config.adm.services.list.infoService as NodeInfo[]).map(
+  (endpoint) => endpoint.url
+)
+export const rateInfoClient = new RateInfoClient(endpoints)
+
+export default rateInfoClient

src/lib/nodes/services.ts

@@ -1,7 +1,9 @@
 import { lskIndexer } from './lsk-indexer'
 import { ethIndexer } from './eth-indexer'
+import { rateInfoClient } from './rate-info-service'
 
 export const services = {
   lskIndexer,
-  ethIndexer
+  ethIndexer,
+  rate: rateInfoClient
 }

src/lib/nodes/types.ts

@@ -9,3 +9,8 @@ export type NodeType = 'adm' | 'eth' | 'btc' | 'doge' | 'dash' | 'lsk'
 export type NodeKind = 'node' | 'service'
 
 export type HealthcheckInterval = 'normal' | 'crucial' | 'onScreen'
+
+export type HealthcheckResult = {
+  height: number
+  ping: number
+}

src/locales/de.json

@@ -124,7 +124,14 @@
     "ms": "ms",
     "nodeLabelDescription": "Support decentralization and enhance privacy level—run your own ADAMANT node and web application for messaging. Node can be run <a target=\"_blank\" href=\"https://medium.com/adamant-im/how-to-run-your-adamant-node-on-ubuntu-990e391e8fcc\">following instructions</a>. To add your nodes in the list for connection, you need <a target=\"_blank\" href=\"https://github.com/Adamant-im/adamant-im/\">to deploy web application on separate domain</a>. This limitation refers to Content Security Policy (CSP). In iOS and Android applications there are no such limitations.",
     "offline": "Offline",
-    "ping": "Ping"
+    "ping": "Ping",
+    "service": "Service",
+    "socket": "Socket",
+    "tabs": {
+      "adm_nodes": "ADM Knooppunten",
+      "coin_nodes": "Munt Knooppunten",
+      "service_nodes": "Service Knooppunten"
+    }
   },
   "notifications": {
     "message": {