Don't double-up on stashId retrievals (#4157)

* Don't double-up on stashId retrievals

* Remove (onw-unused) useStashIds hook

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

@@ -21,7 +21,6 @@ interface Props {
   favorites: string[];
   hasQueries: boolean;
   isIntentions?: boolean;
-  next?: string[];
   setNominators?: (nominators: string[]) => void;
   stakingOverview?: DeriveStakingOverview;
   targets: SortedTargets;
@@ -71,7 +70,7 @@ function getFiltered (stakingOverview: DeriveStakingOverview, favorites: string[
   };
 }
 
-function CurrentList ({ favorites, hasQueries, isIntentions, next, stakingOverview, targets, toggleFavorite }: Props): React.ReactElement<Props> | null {
+function CurrentList ({ favorites, hasQueries, isIntentions, stakingOverview, targets, toggleFavorite }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const { byAuthor, eraPoints } = useContext(isIntentions ? EmptyAuthorsContext : BlockAuthorsContext);
@@ -84,8 +83,8 @@ function CurrentList ({ favorites, hasQueries, isIntentions, next, stakingOvervi
   const isLoading = useLoadingDelay();
 
   const { elected, validators, waiting } = useMemo(
-    () => stakingOverview ? getFiltered(stakingOverview, favorites, next) : {},
-    [favorites, next, stakingOverview]
+    () => stakingOverview ? getFiltered(stakingOverview, favorites, targets.waitingIds) : {},
+    [favorites, stakingOverview, targets]
   );
 
   const infoMap = useMemo(

packages/page-staking/src/Overview/Summary.tsx

@@ -9,18 +9,18 @@ import SummarySession from '@polkadot/app-explorer/SummarySession';
 import { CardSummary, IdentityIcon, SummaryBox } from '@polkadot/react-components';
 import { BlockAuthorsContext } from '@polkadot/react-query';
 
+import type { SortedTargets } from '../types';
 import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
-  inflation: number;
   isVisible: boolean;
-  next?: string[];
   nominators?: string[];
   stakingOverview?: DeriveStakingOverview;
+  targets: SortedTargets;
 }
 
-function Summary ({ className = '', inflation, isVisible, next, nominators, stakingOverview }: Props): React.ReactElement<Props> {
+function Summary ({ className = '', isVisible, stakingOverview, targets: { inflation: { inflation }, nominators, waitingIds } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { lastBlockAuthors, lastBlockNumber } = useContext(BlockAuthorsContext);
 
@@ -32,12 +32,12 @@ function Summary ({ className = '', inflation, isVisible, next, nominators, stak
             {stakingOverview.validators.length}&nbsp;/&nbsp;{stakingOverview.validatorCount.toString()}
           </CardSummary>
         )}
-        {!!next?.length && (
+        {!!waitingIds?.length && (
           <CardSummary
             className='media--1000'
             label={t<string>('waiting')}
           >
-            {next.length}
+            {waitingIds.length}
           </CardSummary>
         )}
         {!!nominators?.length && (

packages/page-staking/src/Overview/index.tsx

@@ -13,20 +13,18 @@ interface Props {
   favorites: string[];
   hasQueries: boolean;
   isIntentions?: boolean;
-  next?: string[];
   stakingOverview?: DeriveStakingOverview;
   targets: SortedTargets;
   toggleFavorite: (address: string) => void;
 }
 
-function Overview ({ className = '', favorites, hasQueries, isIntentions, next, stakingOverview, targets, toggleFavorite }: Props): React.ReactElement<Props> {
+function Overview ({ className = '', favorites, hasQueries, isIntentions, stakingOverview, targets, toggleFavorite }: Props): React.ReactElement<Props> {
   return (
     <div className={`staking--Overview ${className}`}>
       <CurrentList
         favorites={favorites}
         hasQueries={hasQueries}
         isIntentions={isIntentions}
-        next={next}
         stakingOverview={stakingOverview}
         targets={targets}
         toggleFavorite={toggleFavorite}

packages/page-staking/src/index.tsx

@@ -11,7 +11,7 @@ import type { AppProps as Props, ThemeProps } from '@polkadot/react-components/t
 import type { ElectionStatus } from '@polkadot/types/interfaces';
 import { HelpOverlay } from '@polkadot/react-components';
 import Tabs from '@polkadot/react-components/Tabs';
-import { useAccounts, useApi, useAvailableSlashes, useCall, useFavorites, useOwnStashInfos, useStashIds } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useAvailableSlashes, useCall, useFavorites, useOwnStashInfos } from '@polkadot/react-hooks';
 import { isFunction } from '@polkadot/util';
 
 import Actions from './Actions';
@@ -38,7 +38,6 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
   const { hasAccounts } = useAccounts();
   const { pathname } = useLocation();
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
-  const allStashes = useStashIds();
   const ownStashes = useOwnStashInfos();
   const slashes = useAvailableSlashes();
   const targets = useSortedTargets(favorites);
@@ -50,13 +49,6 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
     [api, hasAccounts]
   );
 
-  const next = useMemo(
-    () => (allStashes && stakingOverview)
-      ? allStashes.filter((address) => !stakingOverview.validators.includes(address as any))
-      : undefined,
-    [allStashes, stakingOverview]
-  );
-
   const ownValidators = useMemo(
     () => (ownStashes || []).filter(({ isStashValidating }) => isStashValidating),
     [ownStashes]
@@ -114,11 +106,9 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
         />
       </header>
       <Summary
-        inflation={targets.inflation.inflation}
         isVisible={pathname === basePath}
-        next={next}
-        nominators={targets.nominators}
         stakingOverview={stakingOverview}
+        targets={targets}
       />
       <Switch>
         <Route path={`${basePath}/payout`}>
@@ -150,7 +140,6 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
             favorites={favorites}
             hasQueries={hasQueries}
             isIntentions
-            next={next}
             stakingOverview={stakingOverview}
             targets={targets}
             toggleFavorite={toggleFavorite}
@@ -167,7 +156,6 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
         className={basePath === pathname ? '' : 'staking--hidden'}
         favorites={favorites}
         hasQueries={hasQueries}
-        next={next}
         stakingOverview={stakingOverview}
         targets={targets}
         toggleFavorite={toggleFavorite}

packages/page-staking/src/types.ts

@@ -75,6 +75,7 @@ export type TargetSortBy = keyof ValidatorInfoRank;
 
 export interface SortedTargets {
   avgStaked?: BN;
+  electedIds?: string[];
   inflation: Inflation;
   lastReward?: BN;
   lowStaked?: BN;
@@ -84,4 +85,5 @@ export interface SortedTargets {
   totalIssuance?: BN;
   validators?: ValidatorInfo[];
   validatorIds?: string[];
+  waitingIds?: string[];
 }

packages/page-staking/src/useSortedTargets.ts

@@ -195,6 +195,11 @@ function extractInfo (api: ApiPromise, allAccounts: string[], electedDerive: Der
       : (commValues[midIndex - 1] + commValues[midIndex]) / 2
     : 0;
 
+  // ids
+  const electedIds = elected.map(({ accountId }) => accountId.toString());
+  const waitingIds = waiting.map(({ accountId }) => accountId.toString());
+  const validatorIds = electedIds.concat(waitingIds);
+
   return {
     avgStaked,
     inflation,
@@ -203,8 +208,9 @@ function extractInfo (api: ApiPromise, allAccounts: string[], electedDerive: Der
     nominators,
     totalIssuance,
     totalStaked,
-    validatorIds: validators.map(({ accountId }) => accountId.toString()),
-    validators
+    validatorIds,
+    validators,
+    waitingIds
   };
 }
 

packages/react-hooks/src/index.ts

@@ -29,7 +29,6 @@ export { useOwnStashes, useOwnStashIds } from './useOwnStashes';
 export { useOwnStashInfos } from './useOwnStashInfos';
 export { usePassword } from './usePassword';
 export { useRegistrars } from './useRegistrars';
-export { useStashIds } from './useStashIds';
 export { useSudo } from './useSudo';
 export { useToggle } from './useToggle';
 export { useVotingStatus } from './useVotingStatus';

packages/react-hooks/src/useStashIds.ts

@@ -1,17 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-hooks authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { AccountId } from '@polkadot/types/interfaces';
-
-import { useApi } from './useApi';
-import { useCall } from './useCall';
-
-const transformStashes = {
-  transform: (stashes: AccountId[]) => stashes.map((accountId) => accountId.toString())
-};
-
-export function useStashIds (): string[] | undefined {
-  const { api } = useApi();
-
-  return useCall<string[]>(api.derive.staking.stashes, undefined, transformStashes);
-}