diff --git a/packages/page-collator/src/Collator.tsx b/packages/page-collator/src/Collator.tsx index ca6d5e8586..2001d76f91 100644 --- a/packages/page-collator/src/Collator.tsx +++ b/packages/page-collator/src/Collator.tsx @@ -3,7 +3,7 @@ import type { Collator as CollatorType } from './types'; -import React from 'react'; +import React, { useMemo } from 'react'; import { AddressSmall, Badge } from '@polkadot/react-components'; import { BalanceFree, FormatBalance } from '@polkadot/react-query'; @@ -12,9 +12,17 @@ import { formatNumber } from '@polkadot/util'; interface Props { className?: string; info: CollatorType; + lastBlock?: string; } -function Collator ({ className, info: { accountId, deposit, isInvulnerable, lastBlock } }: Props): React.ReactElement { +function Collator ({ className, info: { accountId, deposit, isInvulnerable, lastBlock: lastStateBlock }, lastBlock: lastGlobalBlock }: Props): React.ReactElement { + const lastBlock = useMemo( + () => lastStateBlock + ? formatNumber(lastStateBlock) + : lastGlobalBlock, + [lastStateBlock, lastGlobalBlock] + ); + return ( @@ -37,7 +45,7 @@ function Collator ({ className, info: { accountId, deposit, isInvulnerable, last - {lastBlock && formatNumber(lastBlock)} + {lastBlock} ); diff --git a/packages/page-collator/src/Collators.tsx b/packages/page-collator/src/Collators.tsx index d13c510d5b..64a63f9df4 100644 --- a/packages/page-collator/src/Collators.tsx +++ b/packages/page-collator/src/Collators.tsx @@ -1,9 +1,10 @@ // Copyright 2017-2022 @polkadot/app-collator authors & contributors // SPDX-License-Identifier: Apache-2.0 -import React, { useRef } from 'react'; +import React, { useContext, useRef } from 'react'; import { Table } from '@polkadot/react-components'; +import { BlockAuthorsContext } from '@polkadot/react-query'; import Collator from './Collator'; import Summary from './Summary'; @@ -17,6 +18,7 @@ interface Props { function Collators ({ className }: Props): React.ReactElement { const { t } = useTranslation(); const collators = useCollators(); + const { byAuthor } = useContext(BlockAuthorsContext); const hdrRef = useRef([ [t('collators'), 'start', 2], @@ -36,6 +38,7 @@ function Collators ({ className }: Props): React.ReactElement { ))}