CSUB-1019 Change the staking dashboard "waiting" label on the Validator page to Active + number

src/library/ListItem/Labels/EraStatus.tsx

@@ -1,7 +1,7 @@
 // Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { capitalizeFirstLetter, planckToUnit } from '@polkadot-cloud/utils';
+import { planckToUnit } from '@polkadot-cloud/utils';
 import { useTranslation } from 'react-i18next';
 import { useStaking } from 'contexts/Staking';
 import { useUi } from 'contexts/UI';
@@ -23,11 +23,9 @@ export const EraStatus = ({ noMargin, status, totalStake }: EraStatusProps) => {
       <h5>
         {isSyncing || erasStakersSyncing
           ? t('syncing')
-          : validatorStatus !== 'waiting'
-            ? `${t('listItemActive')} / ${planckToUnit(totalStake, units)
-                .integerValue()
-                .toFormat()} ${unit}`
-            : capitalizeFirstLetter(t(`${validatorStatus}`) ?? '')}
+          : `${t('listItemActive')} / ${planckToUnit(totalStake, units)
+              .integerValue()
+              .toFormat()} ${unit}`}
       </h5>
     </ValidatorStatusWrapper>
   );

src/library/ValidatorList/ValidatorItem/index.tsx

@@ -18,7 +18,10 @@ export const ValidatorItemInner = (props: ValidatorItemProps) => {
 
 export class ValidatorItem extends React.Component<ValidatorItemProps> {
   shouldComponentUpdate(nextProps: ValidatorItemProps) {
-    return this.props.validator.address !== nextProps.validator.address;
+    return (
+      this.props.validator.address !== nextProps.validator.address ||
+      this.props.validator.totalStake !== nextProps.validator.totalStake
+    );
   }
 
   render() {

src/library/ValidatorList/index.tsx

@@ -35,6 +35,7 @@ import type { ValidatorListProps } from './types';
 import { FilterHeaders } from './Filters/FilterHeaders';
 import { FilterBadges } from './Filters/FilterBadges';
 import type { NominationStatus } from './ValidatorItem/types';
+import { useStaking } from 'contexts/Staking';
 
 export const ValidatorListInner = ({
   nominator: initialNominator,
@@ -79,10 +80,11 @@ export const ValidatorListInner = ({
   const { activeEra } = useNetworkMetrics();
   const { activeAccount } = useActiveAccounts();
   const { setModalResize } = useOverlay().modal;
-  const { injectValidatorListData } = useValidators();
+  const { injectValidatorListData, sessionValidators } = useValidators();
   const { getNomineesStatus } = useNominationStatus();
   const { getPoolNominationStatus } = useBondedPools();
   const { applyFilter, applyOrder, applySearch } = useValidatorFilters();
+  const { eraStakers } = useStaking();
 
   const { selected, listFormat, setListFormat } = listProvider;
   const includes = getFilters('include', 'validators');
@@ -164,6 +166,10 @@ export const ValidatorListInner = ({
     setRenderIterationState(iter);
   };
 
+  useEffect(() => {
+    setupValidatorList();
+  }, [eraStakers]);
+
   // Pagination.
   const totalPages = Math.ceil(validators.length / ListItemsPerPage);
   const pageEnd = page * ListItemsPerPage - 1;
@@ -303,7 +309,7 @@ export const ValidatorListInner = ({
   // List ui changes / validator changes trigger re-render of list.
   useEffect(() => {
     if (allowFilters && fetched) handleValidatorsFilterUpdate();
-  }, [order, isSyncing, includes?.length, excludes?.length]);
+  }, [order, isSyncing, includes?.length, excludes?.length, sessionValidators]);
 
   // Handle modal resize on list format change.
   useEffect(() => {

src/workers/stakers.ts

@@ -126,69 +126,69 @@ const processExposures = (data: DataInitialiseExposures) => {
       })) ?? [];
 
     // Accumulate active nominators and min active stake threshold.
-    if (others.length) {
-      // Sort `others` by value bonded, largest first.
-      others = others.sort((a, b) => {
-        const r = new BigNumber(rmCommas(b.value)).minus(rmCommas(a.value));
-        return r.isZero() ? 0 : r.isLessThan(0) ? -1 : 1;
-      });
-
-      const lowestRewardIndex = Math.min(
-        maxNominatorRewardedPerValidator - 1,
-        others.length
-      );
-
-      const lowestReward =
-        others.length > 0
-          ? planckToUnit(
-              new BigNumber(others[lowestRewardIndex]?.value || 0),
-              units
-            ).toString()
-          : '0';
-
-      const oversubscribed = others.length > maxNominatorRewardedPerValidator;
-
-      stakers.push({
-        address,
-        lowestReward,
-        oversubscribed,
-        others,
-        own: rmCommas(val.own),
-        total: rmCommas(val.total),
-      });
-
-      // Accumulate active stake for all nominators.
-      for (const o of others) {
-        const value = new BigNumber(rmCommas(o.value));
-
-        // Check nominator already exists.
-        const index = nominators.findIndex(({ who }) => who === o.who);
-
-        // Add value to nominator, otherwise add new entry.
-        if (index === -1) {
-          nominators.push({
-            who: o.who,
-            value: value.toString(),
-          });
-        } else {
-          nominators[index].value = new BigNumber(nominators[index].value)
-            .plus(value)
-            .toFixed();
-        }
-      }
-
-      // get own stake if present
-      const own = others.find(({ who }) => who === activeAccount);
-      if (own !== undefined) {
-        activeAccountOwnStake.push({
-          address,
-          value: planckToUnit(
-            new BigNumber(rmCommas(own.value)),
+    // if (others.length) {
+    // Sort `others` by value bonded, largest first.
+    others = others.sort((a, b) => {
+      const r = new BigNumber(rmCommas(b.value)).minus(rmCommas(a.value));
+      return r.isZero() ? 0 : r.isLessThan(0) ? -1 : 1;
+    });
+
+    const lowestRewardIndex = Math.min(
+      maxNominatorRewardedPerValidator - 1,
+      others.length
+    );
+
+    const lowestReward =
+      others.length > 0
+        ? planckToUnit(
+            new BigNumber(others[lowestRewardIndex]?.value || 0),
             units
-          ).toFixed(),
+          ).toString()
+        : '0';
+
+    const oversubscribed = others.length > maxNominatorRewardedPerValidator;
+
+    stakers.push({
+      address,
+      lowestReward,
+      oversubscribed,
+      others,
+      own: rmCommas(val.own),
+      total: rmCommas(val.total),
+    });
+
+    // Accumulate active stake for all nominators.
+    for (const o of others) {
+      const value = new BigNumber(rmCommas(o.value));
+
+      // Check nominator already exists.
+      const index = nominators.findIndex(({ who }) => who === o.who);
+
+      // Add value to nominator, otherwise add new entry.
+      if (index === -1) {
+        nominators.push({
+          who: o.who,
+          value: value.toString(),
         });
+      } else {
+        nominators[index].value = new BigNumber(nominators[index].value)
+          .plus(value)
+          .toFixed();
       }
     }
+
+    // get own stake if present
+    const own = others.find(({ who }) => who === activeAccount);
+    if (own !== undefined) {
+      activeAccountOwnStake.push({
+        address,
+        value: planckToUnit(
+          new BigNumber(rmCommas(own.value)),
+          units
+        ).toFixed(),
+      });
+    }
+    // }
   });
 
   return {