feat: Add validators fee voting tab & reorganize Network tab (#1098)

## High Level Overview of Change

<!--
Please include a summary/list of the changes.
If too broad, please consider splitting into multiple PRs.
-->

This PR is trying to achieve the following:
- Add voting (for fee voting) and uptime (similar to the existing page)
for validators page.
- Remove "validators", "nodes", and "upgrade status" tabs for Network.
Each now would be a separate page under Network in top nav bar.
- Refactor ValidatorsTable.jsx into TypeScript hooks.

Resolve: #1058

### Type of Change

<!--
Please check relevant options, delete irrelevant ones.
-->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [x] Refactor (non-breaking change that only restructures code)
- [ ] Tests (You added tests for code that already exists, or your new
feature included in this PR)
- [ ] Documentation Updates
- [ ] Translation Updates
- [ ] Release

### TypeScript/Hooks Update

<!--
In an effort to modernize the codebase, you should convert the files
that you work with to React Hooks and TypeScript.
If this is not possible (e.g. it's too many changes, touching too many
files, etc.) please explain why here.
-->

- [x] Updated files to React Hooks
- [x] Updated files to TypeScript

## Before / After

<!--
If just refactoring / back-end changes, this can be just an in-English
description of the change at a technical level.
If a UI change, screenshots should be included.
-->
Validators page (Uptime):
<img width="513" alt="Screenshot 2024-12-11 at 11 54 28 AM"
src="https://github.com/user-attachments/assets/1d10a49b-ea64-40bc-83ec-ad1373c0af27"
/>

Validators page (Voting):
<img width="514" alt="Screenshot 2024-12-11 at 1 39 56 PM"
src="https://github.com/user-attachments/assets/17bcc4a5-e85c-4b3c-9296-e475012587fe"
/>

Voting Mobile View:

<img width="358" alt="Screenshot 2024-12-11 at 1 40 39 PM"
src="https://github.com/user-attachments/assets/cbc94bf0-b658-4408-850f-b95a9ef4489f"
/>

Upgrade Status:
<img width="508" alt="Screenshot 2024-12-11 at 1 41 16 PM"
src="https://github.com/user-attachments/assets/98ca1c7c-2a5c-4139-b6d4-563ef0f1d1f7"
/>

Author: pdp2121

public/locales/ca-CA/translations.json

@@ -558,6 +558,7 @@
   "enable_amendment_name": null,
   "amendment_status": null,
   "expected_date": null,
+  "base": null,
   "credential_type": null,
   "credential_issuer": null,
   "subject": null,

public/locales/en-US/translations.json

@@ -559,6 +559,7 @@
   "enable_amendment_name": "Amendment Name",
   "amendment_status": "Amendment Status",
   "expected_date": "Expected Date",
+  "base": "Base",
   "credential_type": "Credential Type",
   "credential_issuer": "Credential Issuer",
   "subject": "Subject",

public/locales/es-ES/translations.json

@@ -554,6 +554,7 @@
   "enable_amendment_name": null,
   "amendment_status": null,
   "expected_date": null,
+  "base": null,
   "credential_type": null,
   "credential_issuer": null,
   "subject": null,

public/locales/fr-FR/translations.json

@@ -555,6 +555,7 @@
   "enable_amendment_name": null,
   "amendment_status": null,
   "expected_date": null,
+  "base": null,
   "credential_type": null,
   "credential_issuer": null,
   "subject": null,

public/locales/ja-JP/translations.json

@@ -554,6 +554,7 @@
   "enable_amendment_name": null,
   "amendment_status": null,
   "expected_date": null,
+  "base": null,
   "credential_type": null,
   "credential_issuer": null,
   "subject": null,

public/locales/ko-KR/translations.json

@@ -552,6 +552,7 @@
   "enable_amendment_name": null,
   "amendment_status": null,
   "expected_date": null,
+  "base": null,
   "credential_type": null,
   "credential_issuer": null,
   "subject": null,

src/containers/App/index.tsx

@@ -17,20 +17,21 @@ import {
   ACCOUNT_ROUTE,
   LEDGER_ROUTE,
   LEDGERS_ROUTE,
-  NETWORK_ROUTE,
   NFT_ROUTE,
   TOKEN_ROUTE,
   TRANSACTION_ROUTE,
   VALIDATOR_ROUTE,
   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 { Token } from '../Token'
 import { NFT } from '../NFT/NFT'
@@ -39,6 +40,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
@@ -65,7 +69,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],
     [TOKEN_ROUTE, Token],

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<{