feat: Add validators fee voting tab & reorganize Network tab

public/locales/ca-CA/translations.json

@@ -560,5 +560,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "base": null
 }

public/locales/en-US/translations.json

@@ -560,6 +560,6 @@
   "search_results_banner": "Token search by name and account is now available! Try searching for USD",
   "enable_amendment_name": "Amendment Name",
   "amendment_status": "Amendment Status",
-  "expected_date": "Expected Date"
-
+  "expected_date": "Expected Date",
+  "base": "Base"
 }

public/locales/es-ES/translations.json

@@ -556,5 +556,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "base": null
 }

public/locales/fr-FR/translations.json

@@ -557,5 +557,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "base": null
 }

public/locales/ja-JP/translations.json

@@ -556,5 +556,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "base": null
 }

public/locales/ko-KR/translations.json

@@ -554,5 +554,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "base": null
 }

src/containers/App/index.tsx

@@ -17,7 +17,6 @@ import {
   ACCOUNT_ROUTE,
   LEDGER_ROUTE,
   LEDGERS_ROUTE,
-  NETWORK_ROUTE,
   NFT_ROUTE,
   PAYSTRING_ROUTE,
   TOKEN_ROUTE,
@@ -26,12 +25,14 @@ import {
   AMENDMENTS_ROUTE,
   AMENDMENT_ROUTE,
   MPT_ROUTE,
+  NODES_ROUTE,
+  VALIDATORS_ROUTE,
+  UPGRADE_STATUS_ROUTE,
 } from './routes'
 import { LedgersPage as Ledgers } from '../Ledgers'
 import { Ledger } from '../Ledger'
 import { AccountsRouter } from '../Accounts/AccountsRouter'
 import { Transaction } from '../Transactions'
-import { Network } from '../Network'
 import { Validator } from '../Validators'
 import { PayString } from '../PayStrings'
 import Token from '../Token'
@@ -41,6 +42,9 @@ import { useCustomNetworks } from '../shared/hooks'
 import { Amendments } from '../Amendments'
 import { Amendment } from '../Amendment'
 import { MPT } from '../MPT/MPT'
+import { Nodes } from '../Network/Nodes'
+import { Validators } from '../Network/Validators'
+import { UpgradeStatus } from '../Network/UpgradeStatus'
 
 export const AppWrapper = () => {
   const mode = process.env.VITE_ENVIRONMENT
@@ -67,7 +71,9 @@ export const AppWrapper = () => {
     [LEDGER_ROUTE, Ledger],
     [ACCOUNT_ROUTE, AccountsRouter],
     [TRANSACTION_ROUTE, Transaction],
-    [NETWORK_ROUTE, Network],
+    [NODES_ROUTE, Nodes],
+    [VALIDATORS_ROUTE, Validators],
+    [UPGRADE_STATUS_ROUTE, UpgradeStatus],
     [AMENDMENTS_ROUTE, Amendments],
     [VALIDATOR_ROUTE, Validator],
     [PAYSTRING_ROUTE, PayString],

src/containers/App/navigation.ts

@@ -3,13 +3,16 @@ import { NavigationMenuAnyRoute } from '../Header/NavigationMenu'
 import {
   AMENDMENTS_ROUTE,
   LEDGERS_ROUTE,
-  NETWORK_ROUTE,
-  VALIDATOR_ROUTE,
+  NODES_ROUTE,
+  UPGRADE_STATUS_ROUTE,
+  VALIDATORS_ROUTE,
 } from './routes'
 
 const isNetwork = (path) =>
-  path.indexOf(buildPath(NETWORK_ROUTE, {})) === 0 ||
-  path.indexOf(buildPath(VALIDATOR_ROUTE, { identifier: '' })) === 0
+  path.indexOf(buildPath(VALIDATORS_ROUTE, {})) === 0 ||
+  path.indexOf(buildPath(NODES_ROUTE, {})) === 0 ||
+  path.indexOf(buildPath(UPGRADE_STATUS_ROUTE, {})) === 0 ||
+  path.indexOf(buildPath(AMENDMENTS_ROUTE, {})) === 0
 
 // NOTE: for submenus, remove `path` field and add `children` array of objects
 export const navigationConfig: NavigationMenuAnyRoute[] = [
@@ -19,24 +22,20 @@ export const navigationConfig: NavigationMenuAnyRoute[] = [
     current: (path: string) => !isNetwork(path),
   },
   {
-    route: NETWORK_ROUTE,
     title: 'network',
     current: (path: string) => isNetwork(path),
     children: [
       {
-        route: NETWORK_ROUTE,
+        route: NODES_ROUTE,
         title: 'nodes',
-        params: { tab: 'nodes' },
       },
       {
-        route: NETWORK_ROUTE,
+        route: VALIDATORS_ROUTE,
         title: 'validators',
-        params: { tab: 'validators' },
       },
       {
-        route: NETWORK_ROUTE,
+        route: UPGRADE_STATUS_ROUTE,
         title: 'upgrade_status',
-        params: { tab: 'upgrade-status' },
       },
       {
         route: AMENDMENTS_ROUTE,

src/containers/App/routes.ts

@@ -18,10 +18,18 @@ export const LEDGER_ROUTE: RouteDefinition<{
   path: `/ledgers/:identifier`,
 }
 
-export const NETWORK_ROUTE: RouteDefinition<{
-  tab?: 'nodes' | 'validators' | 'upgrade-status'
+export const NODES_ROUTE: RouteDefinition = {
+  path: '/network/nodes',
+}
+
+export const VALIDATORS_ROUTE: RouteDefinition<{
+  tab?: 'uptime' | 'voting'
 }> = {
-  path: '/network/:tab?',
+  path: '/network/validators/:tab?',
+}
+
+export const UPGRADE_STATUS_ROUTE: RouteDefinition = {
+  path: '/network/upgrade-status',
 }
 
 export const NFT_ROUTE: RouteDefinition<{

src/containers/Network/Nodes.tsx

@@ -2,7 +2,6 @@ import { useContext } from 'react'
 import axios from 'axios'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from 'react-query'
-import NetworkTabs from './NetworkTabs'
 import { Map } from './Map'
 import { NodesTable } from './NodesTable'
 import Log from '../shared/log'
@@ -15,6 +14,7 @@ import {
 import { useLanguage } from '../shared/hooks'
 import { NodeData, NodeResponse } from '../shared/vhsTypes'
 import NetworkContext from '../shared/NetworkContext'
+import './css/style.scss'
 
 export const ledgerCompare = (a: NodeData, b: NodeData) => {
   const aLedger = a.validated_ledger.ledger_index
@@ -78,6 +78,7 @@ export const Nodes = () => {
 
   return (
     <div className="network-page">
+      <div className="type">{t('nodes')}</div>
       {
         // @ts-ignore - Work around for complex type assignment issues
         <Map locations={data?.locations} />
@@ -99,7 +100,6 @@ export const Nodes = () => {
         )}
       </div>
       <div className="wrap">
-        <NetworkTabs selected="nodes" />
         <NodesTable nodes={data?.nodes} />
       </div>
     </div>

src/containers/Network/UpgradeStatus.tsx

@@ -1,28 +1,19 @@
 import { useState, useContext } from 'react'
-import { useTranslation } from 'react-i18next'
 import axios from 'axios'
 import { useQuery } from 'react-query'
+import { useTranslation } from 'react-i18next'
 import BarChartVersion from './BarChartVersion'
-import NetworkTabs from './NetworkTabs'
-import Streams from '../shared/components/Streams'
-import { Hexagons } from './Hexagons'
 import {
   FETCH_INTERVAL_MILLIS,
   FETCH_INTERVAL_ERROR_MILLIS,
-  localizeNumber,
   isEarlierVersion,
 } from '../shared/utils'
-import { useLanguage } from '../shared/hooks'
 import Log from '../shared/log'
-import {
-  NodeData,
-  NodeResponse,
-  StreamValidator,
-  ValidatorResponse,
-} from '../shared/vhsTypes'
+import { NodeData, NodeResponse, ValidatorResponse } from '../shared/vhsTypes'
 import NetworkContext from '../shared/NetworkContext'
 import { ledgerCompare } from './Nodes'
 import { Loader } from '../shared/components/Loader'
+import './css/style.scss'
 
 interface NodeStats {
   nodePercent: number
@@ -152,14 +143,10 @@ const handleNodeVersion = (version: string | undefined) => {
 }
 
 export const UpgradeStatus = () => {
-  const [vList, setVList] = useState<Record<string, ValidatorResponse>>({})
-  const [validations, setValidations] = useState<ValidatorResponse[]>([])
-  const [unlCount, setUnlCount] = useState(0)
+  const { t } = useTranslation()
   const [validatorAggregation, setValidatorAggregation] =
     useState<ValidatorAggregation>({})
   const [nodeAggregation, setNodeAggregation] = useState<NodeAggregation>({})
-  const { t } = useTranslation()
-  const language = useLanguage()
   const network = useContext(NetworkContext)
 
   useQuery(
@@ -200,10 +187,6 @@ export const UpgradeStatus = () => {
         validators.forEach((validator) => {
           newValidatorList[validator.signing_key] = validator
         })
-        setVList(newValidatorList)
-        setUnlCount(
-          validators.filter((validator) => Boolean(validator.unl)).length,
-        )
         setValidatorAggregation(aggregateValidators(validators))
         return Object.values(newValidatorList)
       })
@@ -254,48 +237,10 @@ export const UpgradeStatus = () => {
       )
   }
 
-  const updateValidators = (newValidations: StreamValidator[]) => {
-    setValidations(newValidations)
-    setVList((validatorList) => {
-      const newValidatorsList: Record<string, StreamValidator> = {
-        ...validatorList,
-      }
-      newValidations.forEach((validation) => {
-        if (validation.pubkey) {
-          newValidatorsList[validation.pubkey] = {
-            ...validatorList[validation.pubkey],
-            ledger_index: validation.ledger_index,
-            ledger_hash: validation.ledger_hash,
-          }
-        }
-      })
-      return newValidatorsList
-    })
-  }
-
-  const validatorCount = Object.keys(vList).length
-
   return (
     <div className="network-page">
-      <Streams validators={vList} updateValidators={updateValidators} />
-      {
-        // @ts-ignore - Work around for complex type assignment issues
-        <Hexagons data={validations} list={vList} />
-      }
-      <div className="stat">
-        <span>{t('validators_found')}: </span>
-        <span>
-          {localizeNumber(validatorCount, language)}
-          {unlCount !== 0 && (
-            <i>
-              {' '}
-              ({t('unl')}: {unlCount})
-            </i>
-          )}
-        </span>
-      </div>
+      <div className="type">{t('upgrade_status')}</div>
       <div className="wrap">
-        <NetworkTabs selected="upgrade-status" />
         {Object.keys(validatorAggregation).length > 0 ||
         Object.keys(nodeAggregation).length > 0 ? (
           <div className="upgrade_status">