diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx index f67634fb78..e1930ad572 100644 --- a/packages/page-staking/src/Actions/Account/index.tsx +++ b/packages/page-staking/src/Actions/Account/index.tsx @@ -269,7 +269,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar {isStashValidating ? ( - + ) : ( - + {isStashNominating && ( <> {activeNoms.length !== 0 && ( diff --git a/packages/page-staking/src/Overview/Address/index.tsx b/packages/page-staking/src/Overview/Address/index.tsx index 586ee29ce1..80f14f503e 100644 --- a/packages/page-staking/src/Overview/Address/index.tsx +++ b/packages/page-staking/src/Overview/Address/index.tsx @@ -141,7 +141,7 @@ function Address ({ address, className, filterName, hasQueries, isAuthor, isElec onlineCount={onlineCount} onlineMessage={onlineMessage} /> - + ; hasQueries: boolean; - isIntentions: boolean; - isVisible: boolean; + isIntentions?: boolean; lastAuthors?: string[]; next?: string[]; recentlyOnline?: DeriveHeartbeats; @@ -68,10 +67,10 @@ function reduceDetails (state: Record, _details: Address }, { ...state }); } -function getDetails (stakingOverview: DeriveStakingOverview, validators: AccountExtend[]): AddressDetails[] { +function getDetails (stakingOverview: DeriveStakingOverview, validators?: AccountExtend[]): AddressDetails[] { const allPoints = [...stakingOverview.eraPoints.individual.entries()]; - return validators.map(([address]): AddressDetails => { + return (validators || []).map(([address]): AddressDetails => { const points = allPoints.find(([accountId]): boolean => accountId.eq(address)); return { @@ -97,7 +96,7 @@ function getFiltered (stakingOverview: DeriveStakingOverview, favorites: string[ }; } -function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, setNominators, stakingOverview }: Props): React.ReactElement | null { +function CurrentList ({ authorsMap, hasQueries, isIntentions, lastAuthors, next, recentlyOnline, setNominators, stakingOverview }: Props): React.ReactElement | null { const { t } = useTranslation(); const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE); const [{ elected, validators, waiting }, setFiltered] = useState({}); @@ -105,19 +104,18 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut const [addressDetails, dispatchDetails] = useReducer(reduceDetails, {}); useEffect((): void => { - isVisible && stakingOverview && setFiltered( - getFiltered(stakingOverview, favorites, next) - ); - }, [favorites, isVisible, next, stakingOverview]); + if (stakingOverview) { + const filtered = getFiltered(stakingOverview, favorites, next); - useEffect((): void => { - stakingOverview && validators && dispatchDetails( - getDetails(stakingOverview, validators) - ); - }, [stakingOverview, validators]); + setFiltered(filtered); + dispatchDetails( + getDetails(stakingOverview, filtered.validators) + ); + } + }, [favorites, next, stakingOverview]); - const _renderRows = (addresses?: AccountExtend[], isMain?: boolean): React.ReactNode => - addresses?.map(([address, isElected, isFavorite]): React.ReactNode => ( + const _renderRows = (addresses?: AccountExtend[], isMain?: boolean): React.ReactNode[] => + (addresses || []).map(([address, isElected, isFavorite]): React.ReactNode => (
)); - return ( -
- + return isIntentions + ? ( +
+ + + + + {_renderRows(elected, false).concat(..._renderRows(waiting, false))} + {} + +

{t('intentions')}

+ ) + : ( +
- {isIntentions && ( - - - - - - {_renderRows(elected, false)} - {_renderRows(waiting, false)} - -

{t('intentions')}

- )} -
- ); + ); } export default React.memo(CurrentList); diff --git a/packages/page-staking/src/Overview/index.tsx b/packages/page-staking/src/Overview/index.tsx index 1857505ce0..dd63f19dd3 100644 --- a/packages/page-staking/src/Overview/index.tsx +++ b/packages/page-staking/src/Overview/index.tsx @@ -6,32 +6,28 @@ import { DeriveHeartbeats, DeriveStakingOverview } from '@polkadot/api-derive/ty import { BareProps } from '@polkadot/react-components/types'; import React, { useContext } from 'react'; -import { useLocation } from 'react-router-dom'; import { BlockAuthorsContext } from '@polkadot/react-query'; import CurrentList from './CurrentList'; interface Props extends BareProps { hasQueries: boolean; - isVisible: boolean; + isIntentions?: boolean; recentlyOnline?: DeriveHeartbeats; next?: string[]; setNominators: (nominators: string[]) => void; stakingOverview?: DeriveStakingOverview; } -function Overview ({ hasQueries, isVisible, className, recentlyOnline, next, setNominators, stakingOverview }: Props): React.ReactElement { - const { pathname } = useLocation(); +function Overview ({ className, hasQueries, isIntentions, recentlyOnline, next, setNominators, stakingOverview }: Props): React.ReactElement { const { byAuthor, lastBlockAuthors } = useContext(BlockAuthorsContext); - const isIntentions = pathname !== '/staking'; return ( -
+
+ + + stakingOverview={stakingOverview} />