diff --git a/packages/page-staking/src/Overview/CurrentList.tsx b/packages/page-staking/src/Overview/CurrentList.tsx index 7f9f96e00d..a9bc863b28 100644 --- a/packages/page-staking/src/Overview/CurrentList.tsx +++ b/packages/page-staking/src/Overview/CurrentList.tsx @@ -6,7 +6,7 @@ import type { Authors } from '@polkadot/react-query/BlockAuthors'; import type { AccountId } from '@polkadot/types/interfaces'; import type { SortedTargets, ValidatorInfo } from '../types'; -import React, { useCallback, useContext, useMemo, useRef, useState } from 'react'; +import React, { useContext, useMemo, useRef, useState } from 'react'; import { Table } from '@polkadot/react-components'; import { useApi, useCall, useLoadingDelay, useSavedFlags } from '@polkadot/react-hooks'; @@ -55,20 +55,17 @@ function filterAccounts (accounts: string[] = [], elected: string[], favorites: } function accountsToString (accounts: AccountId[]): string[] { - return accounts.map((accountId) => accountId.toString()); + return accounts.map((a) => a.toString()); } function getFiltered (stakingOverview: DeriveStakingOverview, favorites: string[], next?: string[]): Filtered { const allElected = accountsToString(stakingOverview.nextElected); const validatorIds = accountsToString(stakingOverview.validators); - const validators = filterAccounts(validatorIds, allElected, favorites, []); - const elected = filterAccounts(allElected, allElected, favorites, validatorIds); - const waiting = filterAccounts(next, [], favorites, allElected); return { - elected, - validators, - waiting + elected: filterAccounts(allElected, allElected, favorites, validatorIds), + validators: filterAccounts(validatorIds, allElected, favorites, []), + waiting: filterAccounts(next, [], favorites, allElected) }; } @@ -91,8 +88,19 @@ function CurrentList ({ favorites, hasQueries, isIntentions, paraValidators = DE [favorites, stakingOverview, targets] ); + const addresses = useMemo( + () => isIntentions + ? (isLoading || !nominatedBy || !elected || !waiting) + ? undefined + : elected.concat(waiting) + : isLoading || !validators + ? undefined + : validators, + [elected, isIntentions, isLoading, nominatedBy, validators, waiting] + ); + const infoMap = useMemo( - () => targets.validators?.reduce((result: Record, info): Record => { + () => targets.validators?.reduce>((result, info) => { result[info.key] = info; return result; @@ -100,98 +108,80 @@ function CurrentList ({ favorites, hasQueries, isIntentions, paraValidators = DE [targets] ); - const headerWaitingRef = useRef([ - [t('intentions'), 'start', 2], - [t('nominators'), 'expand'], - [t('commission'), 'number'], - [], - [] - ]); + const headerRef = useRef( + isIntentions + ? [ + [t('intentions'), 'start', 2], + [t('nominators'), 'expand'], + [t('commission'), 'number'], + [], + [] + ] + : [ + [t('validators'), 'start', 2], + [t('other stake'), 'expand'], + [t('own stake'), 'media--1100'], + [t('commission')], + [t('points')], + [t('last #')], + [], + [undefined, 'media--1200'] + ] + ); - const headerActiveRef = useRef([ - [t('validators'), 'start', 2], - [t('other stake'), 'expand'], - [t('own stake'), 'media--1100'], - [t('commission')], - [t('points')], - [t('last #')], - [], - [undefined, 'media--1200'] - ]); - - const _renderRows = useCallback( - (addresses?: AccountExtend[], isMain?: boolean): React.ReactNode[] => - (addresses || []).map(([address, isElected, isFavorite]): React.ReactNode => ( + return ( + ('No waiting validators found') + : recentlyOnline && validators && infoMap && t('No active validators found') + ) + } + emptySpinner={ + <> + {!waiting &&
{t('Retrieving validators')}
} + {!infoMap &&
{t('Retrieving validator info')}
} + {isIntentions + ? !nominatedBy &&
{t('Retrieving nominators')}
+ : !recentlyOnline &&
{t('Retrieving online status')}
+ } + + } + filter={ + + } + header={headerRef.current} + legend={ + + } + > + {addresses?.map(([address, isElected, isFavorite]): React.ReactNode => (
- )), - [byAuthor, eraPoints, hasQueries, infoMap, nameFilter, nominatedBy, paraValidators, recentlyOnline, toggleFavorite, toggles] + ))} +
); - - return isIntentions - ? ( - ('No waiting validators found')} - emptySpinner={ - <> - {!waiting &&
{t('Retrieving validators')}
} - {!infoMap &&
{t('Retrieving validator info')}
} - {!nominatedBy &&
{t('Retrieving nominators')}
} - - } - filter={ - - } - header={headerWaitingRef.current} - legend={} - > - {(isLoading || !nominatedBy) ? undefined : _renderRows(elected, false).concat(_renderRows(waiting, false))} -
- ) - : ( - ('No active validators found')} - emptySpinner={ - <> - {!validators &&
{t('Retrieving validators')}
} - {!infoMap &&
{t('Retrieving validator info')}
} - {!recentlyOnline &&
{t('Retrieving online status')}
} - - } - filter={ - - } - header={headerActiveRef.current} - legend={} - > - {isLoading ? undefined : _renderRows(validators, true)} -
- ); } export default React.memo(CurrentList);