Fallback check for Collator blocks via context (#7502)

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<Props> {
+function Collator ({ className, info: { accountId, deposit, isInvulnerable, lastBlock: lastStateBlock }, lastBlock: lastGlobalBlock }: Props): React.ReactElement<Props> {
+  const lastBlock = useMemo(
+    () => lastStateBlock
+      ? formatNumber(lastStateBlock)
+      : lastGlobalBlock,
+    [lastStateBlock, lastGlobalBlock]
+  );
+
   return (
     <tr className={className}>
       <td className='badge number'>
@@ -37,7 +45,7 @@ function Collator ({ className, info: { accountId, deposit, isInvulnerable, last
         <BalanceFree params={accountId} />
       </td>
       <td className='number'>
-        {lastBlock && formatNumber(lastBlock)}
+        {lastBlock}
       </td>
     </tr>
   );

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<Props> {
   const { t } = useTranslation();
   const collators = useCollators();
+  const { byAuthor } = useContext(BlockAuthorsContext);
 
   const hdrRef = useRef([
     [t<string>('collators'), 'start', 2],
@@ -36,6 +38,7 @@ function Collators ({ className }: Props): React.ReactElement<Props> {
           <Collator
             info={c}
             key={c.accountId}
+            lastBlock={byAuthor[c.accountId]}
           />
         ))}
       </Table>