feat(1872): validator info table now using better status query (#2067)

* feat(1872): validator info table now using better status query

* feat(1872): removed redundant import

* feat(1872): removed unnecessary useMemo dependency for node-list.tsx

* feat(1872) Status translations as map, with error capture

* feat(1872) status function now returns key to be translated rather than doing the translating

apps/token/src/i18n/translations/dev.json

@@ -585,9 +585,8 @@
   "validatorStake": "Validator stake",
   "Nodes": "Nodes",
   "status-tendermint": "Consensus",
-  "status-ersatz": "Ersatz",
+  "status-ersatz": "Standby",
   "status-pending": "Pending",
-  "status-unspecified": "Unspecified",
   "Set to": "Set to",
   "pass": "pass",
   "fail": "fail",

apps/token/src/routes/staking/home/node-list.tsx

@@ -1,19 +1,19 @@
+import { useTranslation } from 'react-i18next';
+import compact from 'lodash/compact';
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
+import { useNavigate } from 'react-router-dom';
 import {
   AgGridDynamic as AgGrid,
   AsyncRenderer,
   Button,
 } from '@vegaprotocol/ui-toolkit';
-import type { AgGridReact } from 'ag-grid-react';
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 import { EpochCountdown } from '../../../components/epoch-countdown';
 import { BigNumber } from '../../../lib/bignumber';
 import { formatNumber } from '@vegaprotocol/react-helpers';
 import { Schema } from '@vegaprotocol/types';
-import type { ColDef } from 'ag-grid-community';
-import compact from 'lodash/compact';
 import { useNodesQuery } from './__generated___/Nodes';
+import type { ColDef } from 'ag-grid-community';
 
 const VALIDATOR = 'validator';
 const STATUS = 'status';
@@ -47,6 +47,18 @@ interface CanonisedNodeProps {
   [VOTING_POWER]: string;
 }
 
+export const statusTranslationKey = (status: Schema.ValidatorStatus) => {
+  // Returns a key for translation
+  const statuses = {
+    [Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_ERSATZ]: 'status-ersatz',
+    [Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_PENDING]: 'status-pending',
+    [Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT]:
+      'status-tendermint',
+  };
+
+  return statuses[status];
+};
+
 const ValidatorRenderer = ({ data }: ValidatorRendererProps) => {
   const { avatarUrl, name } = data.validator;
   return (
@@ -125,17 +137,7 @@ export const NodeList = () => {
             ? '-'
             : stakedOnNode.dividedBy(stakedTotal).times(100).dp(2).toString() +
               '%';
-        const statusTranslated = t(
-          `${
-            (status === Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_ERSATZ &&
-              'Ersatz') ||
-            (status === Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_PENDING &&
-              'Pending') ||
-            (status ===
-              Schema.ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT &&
-              'Consensus')
-          }`
-        );
+        const translatedStatus = t(statusTranslationKey(status));
 
         return {
           id,
@@ -143,7 +145,7 @@ export const NodeList = () => {
             avatarUrl,
             name,
           },
-          [STATUS]: statusTranslated,
+          [STATUS]: translatedStatus,
           [TOTAL_STAKE_THIS_EPOCH]: formatNumber(stakedTotalFormatted, 2),
           [SHARE]: stakedTotalPercentage,
           [VALIDATOR_STAKE]: formatNumber(stakedOnNode, 2),
@@ -187,7 +189,12 @@ export const NodeList = () => {
     );
 
     return removeTopThirdOfStakeScores.remaining;
-  }, [data, t, hideTopThird]);
+  }, [
+    data?.nodeData?.stakedTotalFormatted,
+    data?.nodesConnection.edges,
+    hideTopThird,
+    t,
+  ]);
 
   const gridRef = useRef<AgGridReact | null>(null);
 

apps/token/src/routes/staking/node/Staking.graphql

@@ -18,13 +18,12 @@ fragment StakingNodeFields on Node {
     offline
     online
   }
-  status
   rankingScore {
     rankingScore
     stakeScore
     performanceScore
     votingPower
-    stakeScore
+    status
   }
 }
 

apps/token/src/routes/staking/node/__generated___/Staking.ts

@@ -3,14 +3,14 @@ import { Schema as Types } from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type StakingNodeFieldsFragment = { __typename?: 'Node', id: string, name: string, pubkey: string, infoUrl: string, location: string, ethereumAddress: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, stakedByOperatorFormatted: string, stakedByDelegatesFormatted: string, stakedTotalFormatted: string, pendingStakeFormatted: string, status: Types.NodeStatus, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null, rankingScore: { __typename?: 'RankingScore', rankingScore: string, stakeScore: string, performanceScore: string, votingPower: string } };
+export type StakingNodeFieldsFragment = { __typename?: 'Node', id: string, name: string, pubkey: string, infoUrl: string, location: string, ethereumAddress: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, stakedByOperatorFormatted: string, stakedByDelegatesFormatted: string, stakedTotalFormatted: string, pendingStakeFormatted: string, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null, rankingScore: { __typename?: 'RankingScore', rankingScore: string, stakeScore: string, performanceScore: string, votingPower: string, status: Types.ValidatorStatus } };
 
 export type StakingQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
 }>;
 
 
-export type StakingQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string }, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, amountFormatted: string, epoch: number, node: { __typename?: 'Node', id: string } } } | null> | null } | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: string | null, end?: string | null, expiry?: string | null } }, nodesConnection: { __typename?: 'NodesConnection', edges?: Array<{ __typename?: 'NodeEdge', node: { __typename?: 'Node', id: string, name: string, pubkey: string, infoUrl: string, location: string, ethereumAddress: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, stakedByOperatorFormatted: string, stakedByDelegatesFormatted: string, stakedTotalFormatted: string, pendingStakeFormatted: string, status: Types.NodeStatus, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null, rankingScore: { __typename?: 'RankingScore', rankingScore: string, stakeScore: string, performanceScore: string, votingPower: string } } } | null> | null }, nodeData?: { __typename?: 'NodeData', stakedTotal: string, stakedTotalFormatted: string, totalNodes: number, inactiveNodes: number, validatingNodes: number, uptime: number } | null };
+export type StakingQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string }, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, amountFormatted: string, epoch: number, node: { __typename?: 'Node', id: string } } } | null> | null } | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: string | null, end?: string | null, expiry?: string | null } }, nodesConnection: { __typename?: 'NodesConnection', edges?: Array<{ __typename?: 'NodeEdge', node: { __typename?: 'Node', id: string, name: string, pubkey: string, infoUrl: string, location: string, ethereumAddress: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, stakedByOperatorFormatted: string, stakedByDelegatesFormatted: string, stakedTotalFormatted: string, pendingStakeFormatted: string, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null, rankingScore: { __typename?: 'RankingScore', rankingScore: string, stakeScore: string, performanceScore: string, votingPower: string, status: Types.ValidatorStatus } } } | null> | null }, nodeData?: { __typename?: 'NodeData', stakedTotal: string, stakedTotalFormatted: string, totalNodes: number, inactiveNodes: number, validatingNodes: number, uptime: number } | null };
 
 export const StakingNodeFieldsFragmentDoc = gql`
     fragment StakingNodeFields on Node {
@@ -33,13 +33,12 @@ export const StakingNodeFieldsFragmentDoc = gql`
     offline
     online
   }
-  status
   rankingScore {
     rankingScore
     stakeScore
     performanceScore
     votingPower
-    stakeScore
+    status
   }
 }
     `;

apps/token/src/routes/staking/node/validator-table.tsx

@@ -6,6 +6,7 @@ import { useEnvironment } from '@vegaprotocol/environment';
 import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
 import { BigNumber } from '../../../lib/bignumber';
 import { formatNumber } from '../../../lib/format-number';
+import { statusTranslationKey } from '../home/node-list';
 import type { StakingNodeFieldsFragment } from './__generated___/Staking';
 
 const ValidatorTableCell = ({
@@ -65,7 +66,7 @@ export const ValidatorTable = ({
       </KeyValueTableRow>
       <KeyValueTableRow>
         <span>{t('STATUS')}</span>
-        <span>{node.status}</span>
+        <span>{t(statusTranslationKey(node.rankingScore.status))}</span>
       </KeyValueTableRow>
       <KeyValueTableRow>
         <span>{t('IP ADDRESS')}</span>