Adjust next-gen waiting display (#8900)

* Adjust next-gen waiting display

* isElected status

* Re-use Active Status

* Relay Badge adjustment

packages/page-staking2/src/Validators/Active/Status.tsx

@@ -10,7 +10,7 @@ import { Badge } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
 interface Props {
-  heartbeat: UseHeartbeat;
+  heartbeat?: UseHeartbeat;
   isChilled?: boolean;
   isPara?: boolean;
   isRelay?: boolean;
@@ -18,7 +18,7 @@ interface Props {
   validator: Validator;
 }
 
-function Status ({ heartbeat: { authoredBlocks, isOnline }, isChilled, isPara, isRelay, nominators, validator: { isElected } }: Props): React.ReactElement<Props> {
+function Status ({ heartbeat: { authoredBlocks, isOnline } = {}, isChilled, isPara, isRelay, nominators, validator: { isElected } }: Props): React.ReactElement<Props> {
   const { allAccounts } = useAccounts();
 
   const isNominating = useMemo(
@@ -44,16 +44,15 @@ function Status ({ heartbeat: { authoredBlocks, isOnline }, isChilled, isPara, i
         )
         : emptyBadge
       }
-      {isRelay && (
-        isPara
-          ? (
-            <Badge
-              color='purple'
-              icon='vector-square'
-            />
-          )
-          : emptyBadge
-      )}
+      {isRelay && isPara
+        ? (
+          <Badge
+            color='purple'
+            icon='vector-square'
+          />
+        )
+        : emptyBadge
+      }
       {isChilled
         ? (
           <Badge

packages/page-staking2/src/Validators/ListActive.tsx

@@ -11,7 +11,7 @@ import { Table } from '@polkadot/react-components';
 import { useNextTick } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
-import ValidatorRow from './Validator';
+import Active from './Active';
 
 interface Props {
   className?: string;
@@ -26,7 +26,7 @@ function ListActive ({ className = '', isRelay, points, sessionInfo, toggleFavor
   const { t } = useTranslation();
   const isNextTick = useNextTick();
 
-  const headerActive = useRef<[string?, string?, number?][]>([
+  const header = useRef<[string?, string?, number?][]>([
     // favorite, badges, details, expand
     [t<string>('validators'), 'start', 4]
   ]);
@@ -36,12 +36,12 @@ function ListActive ({ className = '', isRelay, points, sessionInfo, toggleFavor
       className={className}
       empty={isNextTick && validatorsActive && t<string>('No session validators found')}
       emptySpinner={t<string>('Retrieving session validators')}
-      header={headerActive.current}
+      header={header.current}
       isSplit
       legend={<Legend isRelay={isRelay} />}
     >
       {isNextTick && validatorsActive?.map((v) => (
-        <ValidatorRow
+        <Active
           isRelay={isRelay}
           key={v.key}
           points={points?.[v.stashId]}

packages/page-staking2/src/Validators/ListWaiting.tsx

@@ -11,7 +11,7 @@ import { useNextTick } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import useValidatorsWaiting from '../useValidatorsWaiting';
-import ValidatorRow from './Validator';
+import Waiting from './Waiting';
 
 interface Props {
   className?: string;
@@ -27,7 +27,7 @@ function ListActive ({ className = '', favorites, isRelay, sessionInfo, toggleFa
   const isNextTick = useNextTick();
   const validatorsWaiting = useValidatorsWaiting(favorites, sessionInfo, validatorsActive);
 
-  const headerWaiting = useRef<[string?, string?, number?][]>([
+  const header = useRef<[string?, string?, number?][]>([
     // favorite, badges, details, expand
     [t<string>('waiting'), 'start', 4]
   ]);
@@ -37,15 +37,13 @@ function ListActive ({ className = '', favorites, isRelay, sessionInfo, toggleFa
       className={className}
       empty={isNextTick && validatorsWaiting && t<string>('No waiting validators found')}
       emptySpinner={t<string>('Retrieving waiting validators')}
-      header={headerWaiting.current}
+      header={header.current}
       isSplit
       legend={<Legend isRelay={isRelay} />}
     >
       {isNextTick && validatorsWaiting?.map((v) => (
-        <ValidatorRow
-          isRelay={isRelay}
+        <Waiting
           key={v.key}
-          sessionInfo={sessionInfo}
           toggleFavorite={toggleFavorite}
           validator={v}
         />

packages/page-staking2/src/Validators/Waiting/index.tsx

@@ -0,0 +1,72 @@
+// Copyright 2017-2023 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Validator } from '../../types';
+
+import React from 'react';
+
+import { AddressSmall, Table } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
+
+import Status from '../Active/Status';
+
+interface Props {
+  className?: string;
+  toggleFavorite: (stashId: string) => void;
+  validator: Validator;
+}
+
+interface PropsExpanded {
+  className?: string;
+  validator: Validator;
+}
+
+function ValidatorExpanded ({ className = '' }: PropsExpanded): React.ReactElement<PropsExpanded> {
+  return (
+    <tr className={`${className} isExpanded isLast`}>
+      <td />
+      <td />
+      <td />
+      <td />
+    </tr>
+  );
+}
+
+function Validator ({ className = '', toggleFavorite, validator }: Props): React.ReactElement<Props> {
+  const [isExpanded, toggleExpanded] = useToggle();
+
+  return (
+    <>
+      <tr className={`${className} isExpanded isFirst packedBottom`}>
+        <Table.Column.Favorite
+          address={validator.stashId}
+          isFavorite={validator.isFavorite}
+          toggle={toggleFavorite}
+        />
+        <td
+          className='statusInfo'
+          rowSpan={2}
+        >
+          <Status validator={validator} />
+        </td>
+        <td className='address relative all'>
+          <AddressSmall value={validator.stashId} />
+        </td>
+        <Table.Column.Expand
+          isExpanded={isExpanded}
+          toggle={toggleExpanded}
+        />
+      </tr>
+      <tr className={`${className} isExpanded ${isExpanded ? '' : 'isLast'} packedTop`}>
+        <td colSpan={2} />
+        <td />
+        <td />
+      </tr>
+      {isExpanded && (
+        <ValidatorExpanded validator={validator} />
+      )}
+    </>
+  );
+}
+
+export default React.memo(Validator);