Merge pull request #630 from Adamant-im/feat/service-tab

Feat/service tab

src/components/nodes/NodesTable.vue

@@ -3,16 +3,19 @@
     <v-tabs v-model="tab" bg-color="transparent">
       <v-tab value="adm">{{ $t('nodes.tabs.adm_nodes') }}</v-tab>
       <v-tab value="coins">{{ $t('nodes.tabs.coin_nodes') }}</v-tab>
+      <v-tab value="services">{{ $t('nodes.tabs.service_nodes') }}</v-tab>
     </v-tabs>
 
     <v-window v-model="tab">
       <v-window-item value="adm">
         <AdmNodesTable />
       </v-window-item>
-
       <v-window-item value="coins">
         <CoinNodesTable />
       </v-window-item>
+      <v-window-item value="services">
+        <ServiceNodesTable />
+      </v-window-item>
     </v-window>
     <div class="ml-6">
       <div v-if="tab === 'coins'">
@@ -29,6 +32,20 @@
         </div>
         <div>&nbsp;<br />&nbsp;</div>
       </div>
+      <div v-else-if="tab === 'services'">
+        <v-checkbox
+          v-model="preferFasterServiceNodeOption"
+          :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"
@@ -69,9 +86,11 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue'
+import { useStore } from 'vuex'
+
 import { AdmNodesTable } from './adm'
 import { CoinNodesTable } from './coins'
-import { useStore } from 'vuex'
+import { ServiceNodesTable } from './services'
 
 const className = 'nodes-table'
 const classes = {
@@ -80,10 +99,11 @@ const classes = {
   checkbox: `${className}__checkbox`
 }
 
-type Tab = 'adm' | 'coins'
+type Tab = 'adm' | 'coins' | 'services'
 
 export default defineComponent({
   components: {
+    ServiceNodesTable,
     AdmNodesTable,
     CoinNodesTable
   },
@@ -120,12 +140,22 @@ export default defineComponent({
       }
     })
 
+    const preferFasterServiceNodeOption = computed<boolean>({
+      get() {
+        return store.state.services.useFastestService
+      },
+      set(value) {
+        store.dispatch('services/useFastestService', value)
+      }
+    })
+
     return {
       tab,
       classes,
       useSocketConnection,
       preferFastestAdmNodeOption,
-      preferFastestCoinNodeOption
+      preferFastestCoinNodeOption,
+      preferFasterServiceNodeOption
     }
   }
 })

src/components/nodes/adm/AdmNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead hide-label />
+    <NodesTableHead />
 
     <tbody>
       <AdmNodesTableItem v-for="node in admNodes" :key="node.url" blockchain="adm" :node="node" />

src/components/nodes/coins/CoinNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead hide-socket />
+    <NodesTableHead hide-socket :label="$t('nodes.coin')" />
 
     <tbody>
       <CoinNodesTableItem v-for="node in nodes" :key="node.url" :label="node.label" :node="node" />

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="label">
+        {{ label }}
+      </th>
       <th :class="classes.th" class="pl-0 pr-2" v-if="!hideHost">
         {{ t('nodes.host') }}
       </th>
@@ -24,9 +26,6 @@ export default {
     hideCheckbox: {
       type: Boolean
     },
-    hideLabel: {
-      type: Boolean
-    },
     hideHost: {
       type: Boolean
     },
@@ -35,6 +34,9 @@ export default {
     },
     hideSocket: {
       type: Boolean
+    },
+    label: {
+      type: String
     }
   },
   setup() {

src/components/nodes/services/ServiceNodesTable.vue

@@ -0,0 +1,53 @@
+<template>
+  <NodesTableContainer>
+    <NodesTableHead hide-socket :label="$t('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'
+import { sortNodesFn } from '@/components/nodes/utils/sortNodesFn'
+
+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['services/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'
+import type { TNodeLabel } from '@/lib/nodes/constants'
+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('services/toggle', {
+        type: type.value,
+        url: url.value,
+        active: !active.value
+      })
+      store.dispatch('services/updateStatus')
+    }
+
+    return {
+      classes,
+      url,
+      active,
+      isUnsupported,
+      toggleActiveStatus
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nodes-table-item {
+}
+
+.nodeName {
+}
+</style>

src/components/nodes/services/index.ts

@@ -0,0 +1 @@
+export { default as ServiceNodesTable } from './ServiceNodesTable.vue'

src/hooks/queries/transaction/useBtcTransactionQuery.ts

@@ -2,7 +2,7 @@ import { MaybeRef, unref } from 'vue'
 import { useStore } from 'vuex'
 import { useQuery } from '@tanstack/vue-query'
 import { Cryptos } from '@/lib/constants'
-import { btc } from '@/lib/nodes'
+import { btcIndexer } from '@/lib/nodes'
 import { BtcTransaction } from '@/lib/nodes/types/transaction'
 import { PendingTransaction, PendingTxStore } from '@/lib/pending-transactions'
 import { refetchIntervalFactory, refetchOnMountFn, retryDelayFactory, retryFactory } from './utils'
@@ -20,7 +20,7 @@ export function useBtcTransactionQuery(
 
   return useQuery<BtcTransaction | PendingTransaction>({
     queryKey: ['transaction', Cryptos.BTC, transactionId],
-    queryFn: () => btc.getTransaction(unref(transactionId), store.state.btc.address),
+    queryFn: () => btcIndexer.getTransaction(unref(transactionId), store.state.btc.address),
     initialData: () => {
       const pendingTransaction = PendingTxStore.get(Cryptos.BTC)
       if (pendingTransaction?.id === unref(transactionId)) {

src/hooks/queries/transaction/useDogeTransactionQuery.ts

@@ -2,7 +2,7 @@ import { MaybeRef, unref } from 'vue'
 import { useStore } from 'vuex'
 import { useQuery } from '@tanstack/vue-query'
 import { Cryptos } from '@/lib/constants'
-import { doge } from '@/lib/nodes'
+import { dogeIndexer } from '@/lib/nodes'
 import { DogeTransaction } from '@/lib/nodes/types/transaction'
 import { PendingTransaction, PendingTxStore } from '@/lib/pending-transactions'
 import { refetchIntervalFactory, refetchOnMountFn, retryDelayFactory, retryFactory } from './utils'
@@ -20,7 +20,7 @@ export function useDogeTransactionQuery(
 
   return useQuery<DogeTransaction | PendingTransaction>({
     queryKey: ['transaction', Cryptos.DOGE, transactionId],
-    queryFn: () => doge.getTransaction(unref(transactionId), store.state.doge.address),
+    queryFn: () => dogeIndexer.getTransaction(unref(transactionId), store.state.doge.address),
     initialData: () => {
       const pendingTransaction = PendingTxStore.get(Cryptos.DOGE)
       if (pendingTransaction?.id === unref(transactionId)) {

src/hooks/queries/useBlockHeight.ts

@@ -1,7 +1,7 @@
 import { computed, MaybeRef, unref } from 'vue'
 import { useQuery } from '@tanstack/vue-query'
 import { getTxFetchInfo } from '@/lib/transactionsFetching'
-import { adm, btc, dash, doge, eth, kly } from '@/lib/nodes'
+import { adm, btcIndexer, dash, dogeIndexer, eth, kly } from '@/lib/nodes'
 
 type Chain = 'ADM' | 'BTC' | 'DOGE' | 'DASH' | 'ETH' | 'KLY'
 
@@ -10,9 +10,9 @@ const fetchBlockHeight = async (chain: Chain): Promise<number> => {
     case 'ADM':
       return adm.getHeight()
     case 'BTC':
-      return btc.getHeight()
+      return btcIndexer.getHeight()
     case 'DOGE':
-      return doge.getHeight()
+      return dogeIndexer.getHeight()
     case 'DASH':
       return dash.getHeight()
     case 'ETH':

src/lib/bitcoin/bitcoin-api.js

@@ -1,6 +1,6 @@
 import BtcBaseApi from './btc-base-api'
 import { Cryptos } from '../constants'
-import { btc } from '@/lib/nodes/btc'
+import { btcIndexer } from '../../lib/nodes'
 
 export default class BitcoinApi extends BtcBaseApi {
   constructor(passphrase) {
@@ -28,7 +28,9 @@ export default class BitcoinApi extends BtcBaseApi {
 
   /** @override */
   sendTransaction(txHex) {
-    return btc.useClient((client) => client.post('/tx', txHex)).then((response) => response.data)
+    return btcIndexer
+      .useClient((client) => client.post('/tx', txHex))
+      .then((response) => response.data)
   }
 
   /** @override */
@@ -84,6 +86,8 @@ export default class BitcoinApi extends BtcBaseApi {
 
   /** Executes a GET request to the API */
   _get(url, params) {
-    return btc.useClient((client) => client.get(url, { params })).then((response) => response.data)
+    return btcIndexer
+      .useClient((client) => client.get(url, { params }))
+      .then((response) => response.data)
   }
 }

src/lib/bitcoin/doge-api.js

@@ -8,7 +8,7 @@ import { isPositiveNumber } from '../numericHelpers'
 import { ECPairFactory } from 'ecpair'
 import * as tinysecp from 'tiny-secp256k1'
 import { convertToSmallestUnit } from './bitcoin-utils'
-import { doge } from '@/lib/nodes/doge'
+import { dogeIndexer } from '../../lib/nodes'
 
 const ECPairAPI = ECPairFactory(tinysecp)
 
@@ -150,12 +150,14 @@ export default class DogeApi extends BtcBaseApi {
 
   /** Executes a GET request to the DOGE API */
   _get(url, params) {
-    return doge.useClient((client) => client.get(url, { params })).then((response) => response.data)
+    return dogeIndexer
+      .useClient((client) => client.get(url, { params }))
+      .then((response) => response.data)
   }
 
   /** Executes a POST request to the DOGE API */
   _post(url, data) {
-    return doge
+    return dogeIndexer
       .useClient((client) => client.post(url, qs.stringify(data), POST_CONFIG))
       .then((response) => response.data)
   }