Points index adjustments (#1836)

* Points index adjustments

* Linting

packages/app-staking/src/Overview/Address.tsx

@@ -22,9 +22,9 @@ interface Props extends I18nProps {
   address: AccountId | string;
   authorsMap: Record<string, string>;
   className?: string;
-  currentElected: string[];
   defaultName: string;
   filter: ValidatorFilter;
+  isElected: boolean;
   lastAuthors?: string[];
   points?: Points;
   recentlyOnline?: DerivedHeartbeats;
@@ -37,7 +37,6 @@ interface StakingState {
   controllerId?: string;
   hasNominators: boolean;
   isNominatorMe: boolean;
-  isSelected: boolean;
   nominators: [AccountId, Balance][];
   sessionId?: string;
   stashId?: string;
@@ -45,14 +44,13 @@ interface StakingState {
 
 const WITH_VALIDATOR_PREFS = { validatorPayment: true };
 
-function Address ({ address, authorsMap, className, currentElected, defaultName, filter, lastAuthors, points, recentlyOnline, stakingInfo, t, withNominations = true }: Props): React.ReactElement<Props> | null {
+function Address ({ address, authorsMap, className, defaultName, filter, isElected, lastAuthors, points, recentlyOnline, stakingInfo, t, withNominations = true }: Props): React.ReactElement<Props> | null {
   const { isSubstrateV2 } = useContext(ApiContext);
   const [extraInfo, setExtraInfo] = useState<[React.ReactNode, React.ReactNode][] | undefined>();
-  const [{ balanceOpts, controllerId, hasNominators, isNominatorMe, isSelected, nominators, sessionId, stashId }, setStakingState] = useState<StakingState>({
+  const [{ balanceOpts, controllerId, hasNominators, isNominatorMe, nominators, sessionId, stashId }, setStakingState] = useState<StakingState>({
     balanceOpts: { bonded: true },
     hasNominators: false,
     isNominatorMe: false,
-    isSelected: false,
     nominators: []
   });
 
@@ -84,13 +82,12 @@ function Address ({ address, authorsMap, className, currentElected, defaultName,
         isNominatorMe: nominators.some(([who]): boolean =>
           myAccounts.includes(who.toString())
         ),
-        isSelected: !!(_stashId && currentElected && currentElected.includes(_stashId)),
         nominators,
         sessionId: nextSessionIds && nextSessionIds[0] && nextSessionIds[0].toString(),
         stashId: _stashId
       });
     }
-  }, [currentElected, stakingInfo]);
+  }, [stakingInfo]);
 
   const hasActivity = recentlyOnline
     ? (recentlyOnline[stashId || ''] && recentlyOnline[stashId || ''].isOnline) || false
@@ -101,7 +98,7 @@ function Address ({ address, authorsMap, className, currentElected, defaultName,
     (filter === 'hasWarnings' && !hasActivity) ||
     (filter === 'noWarnings' && hasActivity) ||
     (filter === 'iNominated' && !isNominatorMe) ||
-    (filter === 'nextSet' && !isSelected)) {
+    (filter === 'nextSet' && !isElected)) {
     return null;
   }
 
@@ -146,7 +143,7 @@ function Address ({ address, authorsMap, className, currentElected, defaultName,
       extraInfo={extraInfo}
       iconInfo={
         <>
-          {isSelected && (
+          {isElected && (
             <Badge
               hover={t('Selected for the next session')}
               info={<Icon name='chevron right' />}

packages/app-staking/src/Overview/CurrentList.tsx

@@ -10,7 +10,6 @@ import { ValidatorFilter } from '../types';
 import React, { useContext, useEffect, useState } from 'react';
 import { ApiContext } from '@polkadot/react-api';
 import { Columar, Column, Dropdown, FilterOverlay } from '@polkadot/react-components';
-import { createType } from '@polkadot/types';
 
 import translate from '../translate';
 import Address from './Address';
@@ -23,21 +22,19 @@ interface Props extends I18nProps {
   stakingOverview?: DerivedStakingOverview;
 }
 
-const EMPTY_POINTS = createType('Points');
-
-function renderColumn (addresses: AccountId[] | string[], defaultName: string, withOnline: boolean, withPoints: boolean, filter: string, { authorsMap, lastAuthors, recentlyOnline, stakingOverview }: Props): React.ReactNode {
+function renderColumn (addresses: AccountId[] | string[], defaultName: string, withOnline: boolean, filter: string, { authorsMap, lastAuthors, recentlyOnline, stakingOverview }: Props, pointIndexes?: number[]): React.ReactNode {
   return (addresses as AccountId[]).map((address, index): React.ReactNode => (
     <Address
       address={address}
       authorsMap={authorsMap}
-      currentElected={stakingOverview && stakingOverview.currentElected}
       defaultName={defaultName}
       filter={filter}
+      isElected={stakingOverview && stakingOverview.currentElected.some((accountId): boolean => accountId.eq(address))}
       lastAuthors={lastAuthors}
       key={address.toString()}
       points={
-        withPoints && stakingOverview
-          ? stakingOverview.eraPoints.individual[index] || EMPTY_POINTS
+        stakingOverview && pointIndexes && pointIndexes[index] !== -1
+          ? stakingOverview.eraPoints.individual[pointIndexes[index]]
           : undefined
       }
       recentlyOnline={
@@ -56,7 +53,7 @@ function filterAccounts (list: string[] = [], without: AccountId[] | string[]):
 function CurrentList (props: Props): React.ReactElement<Props> {
   const { isSubstrateV2 } = useContext(ApiContext);
   const [filter, setFilter] = useState<ValidatorFilter>('all');
-  const [{ electedFiltered, nextFiltered }, setFiltered] = useState<{ electedFiltered: string[]; nextFiltered: string[] }>({ electedFiltered: [], nextFiltered: [] });
+  const [{ electedFiltered, nextFiltered, pointIndexes }, setFiltered] = useState<{ electedFiltered: string[]; nextFiltered: string[]; pointIndexes: number[] }>({ electedFiltered: [], nextFiltered: [], pointIndexes: [] });
   const { next, stakingOverview, t } = props;
 
   useEffect((): void => {
@@ -65,7 +62,8 @@ function CurrentList (props: Props): React.ReactElement<Props> {
 
       setFiltered({
         electedFiltered: isSubstrateV2 ? filterAccounts(elected, stakingOverview.validators) : [],
-        nextFiltered: filterAccounts(next, elected)
+        nextFiltered: filterAccounts(next, elected),
+        pointIndexes: stakingOverview.validators.map((validator): number => elected.indexOf(validator.toString()))
       });
     }
   }, [next, stakingOverview]);
@@ -93,7 +91,7 @@ function CurrentList (props: Props): React.ReactElement<Props> {
           emptyText={t('No addresses found')}
           headerText={t('validators')}
         >
-          {stakingOverview && renderColumn(stakingOverview.validators, t('validator'), true, true, filter, props)}
+          {stakingOverview && renderColumn(stakingOverview.validators, t('validator'), true, filter, props, pointIndexes)}
         </Column>
         <Column
           emptyText={t('No addresses found')}
@@ -101,8 +99,8 @@ function CurrentList (props: Props): React.ReactElement<Props> {
         >
           {(electedFiltered.length !== 0 || nextFiltered.length !== 0) && (
             <>
-              {renderColumn(electedFiltered, t('intention'), false, false, filter, props)}
-              {renderColumn(nextFiltered, t('intention'), false, false, filter, props)}
+              {renderColumn(electedFiltered, t('intention'), false, filter, props)}
+              {renderColumn(nextFiltered, t('intention'), false, filter, props)}
             </>
           )}
         </Column>