A0-3154: azero dev improve committees ux

packages/apps/public/locales/en/app-staking.json

@@ -16,6 +16,7 @@
   "Aura": "Aura",
   "Babe": "Babe",
   "Bags": "Bags",
+  "Block production committee": "Block production committee",
   "Blocks nominations": "Blocks nominations",
   "Bond": "Bond",
   "Bond & Nominate": "Bond & Nominate",
@@ -40,6 +41,7 @@
   "Data isn't available.": "Data isn't available.",
   "Distinct stash and controller accounts are recommended to ensure fund security. You will be allowed to make the transaction, but take care to not tie up all funds, only use a portion of the available funds during this period.": "Distinct stash and controller accounts are recommended to ensure fund security. You will be allowed to make the transaction, but take care to not tie up all funds, only use a portion of the available funds during this period.",
   "Era points": "Era points",
+  "Era validators": "Era validators",
   "Finality committee": "Finality committee",
   "For fund security, your session key should not match your stash key.": "For fund security, your session key should not match your stash key.",
   "Free balance": "Free balance",
@@ -260,6 +262,7 @@
   "existing/active nominators": "existing/active nominators",
   "expected block count": "expected block count",
   "filter by name, address or index": "filter by name, address or index",
+  "finality committee size": "finality committee size",
   "filter by name, address, index or domain": "filter by name, address, index or domain",
   "finalizing committee size": "finalizing committee size",
   "first": "first",

packages/page-staking/src/Performance/BlockProductionCommitteeList.tsx

@@ -3,7 +3,7 @@
 
 import React, { useMemo, useRef, useState } from 'react';
 
-import { Table, Toggle } from '@polkadot/react-components';
+import { Table } from '@polkadot/react-components';
 import { useLenientThresholdPercentage, useNextTick } from '@polkadot/react-hooks';
 
 import Filtering from '../Filtering.js';
@@ -15,7 +15,6 @@ interface Props {
   className?: string;
   eraValidatorPerformances: EraValidatorPerformance[];
   expectedBlockCount?: number;
-  onlyCommittee: boolean;
 }
 
 function getFiltered (displayOnlyCommittee: boolean, eraValidatorPerformances: EraValidatorPerformance[]) {
@@ -44,19 +43,18 @@ export function calculatePercentReward (blocksCreated: number | undefined, block
   return rewardPercentage.toFixed(1);
 }
 
-function BlockProductionCommitteeList ({ className, eraValidatorPerformances, expectedBlockCount, onlyCommittee }: Props): React.ReactElement<Props> {
+function BlockProductionCommitteeList ({ className, eraValidatorPerformances, expectedBlockCount }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const [nameFilter, setNameFilter] = useState<string>('');
-  const [displayOnlyCommittee, setDisplayOnlyCommittee] = useState(true);
 
   const lenientThresholdPercentage = useLenientThresholdPercentage();
 
   const isNextTick = useNextTick();
 
   const validators = useMemo(
-    () => getFiltered(displayOnlyCommittee, eraValidatorPerformances),
-    [eraValidatorPerformances, displayOnlyCommittee]
+    () => getFiltered(true, eraValidatorPerformances),
+    [eraValidatorPerformances]
   );
 
   const list = useMemo(
@@ -93,16 +91,6 @@ function BlockProductionCommitteeList ({ className, eraValidatorPerformances, ex
             nameFilter={nameFilter}
             setNameFilter={setNameFilter}
           />
-          {!onlyCommittee && (
-            <Toggle
-              className='staking--buttonToggle'
-              label={
-                t<string>('Current committee')
-              }
-              onChange={setDisplayOnlyCommittee}
-              value={displayOnlyCommittee}
-            />
-          )}
         </div>
       }
       header={headerRef.current}

packages/page-staking/src/Performance/EraValidators.tsx

@@ -0,0 +1,43 @@
+// Copyright 2017-2022 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { AddressSmall, CardSummary, SummaryBox, Table } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate.js';
+import { useEraValidators } from './useEraValidators.js';
+
+type Props = {
+  session: number;
+};
+
+function EraValidators ({ session }: Props) {
+  const { t } = useTranslation();
+  const eraValidatorsAddresses = useEraValidators(session);
+
+  const messageOnEmpty = eraValidatorsAddresses && t("Data isn't available.");
+
+  return (
+    <>
+      <SummaryBox>
+        <section>
+          <CardSummary label={t<string>('era validators')}>
+            <span className={eraValidatorsAddresses ? '' : '--tmp'}>
+              {eraValidatorsAddresses?.length ?? '0'}
+            </span>
+          </CardSummary>
+        </section>
+      </SummaryBox>
+      <Table empty={messageOnEmpty}>
+        {eraValidatorsAddresses?.map((address) => (
+          <tr key={address}>
+            <td><AddressSmall value={address} /></td>
+          </tr>
+        ))}
+      </Table>
+    </>
+  );
+}
+
+export default EraValidators;

packages/page-staking/src/Performance/FinalityCommittee.tsx

@@ -0,0 +1,42 @@
+// Copyright 2017-2022 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { AddressSmall, CardSummary, SummaryBox, Table } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate.js';
+import { useFinalityCommittee } from './useFinalityCommittee.js';
+
+type Props = {
+  session: number;
+};
+
+function FinalityCommittee ({ session }: Props) {
+  const { t } = useTranslation();
+  const finalityCommitteeAddresses = useFinalityCommittee(session);
+
+  const messageOnEmpty = finalityCommitteeAddresses && t("Data isn't available.");
+
+  return (
+    <>
+      <SummaryBox>
+        <section>
+          <CardSummary label={t<string>('finality committee size')}>
+            <span className={finalityCommitteeAddresses ? '' : '--tmp'}>
+              {finalityCommitteeAddresses?.length ?? '0'}
+            </span>
+          </CardSummary>
+        </section>
+      </SummaryBox>
+      <Table empty={messageOnEmpty}>
+        {finalityCommitteeAddresses?.map((address) => (
+          <tr key={address}>
+            <td><AddressSmall value={address} /></td>
+          </tr>
+        ))}
+      </Table>
+    </>
+  );
+}
+
+export default FinalityCommittee;

packages/page-staking/src/Performance/HistoricPerformance.tsx

@@ -4,13 +4,12 @@
 import React, { useMemo, useState } from 'react';
 
 import { styled } from '@polkadot/react-components';
-import { useAlephBFTCommittee } from '@polkadot/react-hooks';
 
 import ActionsBanner from './ActionsBanner.js';
-import AlephBFTCommitteeList from './AlephBFTCommitteeList.js';
 import BlockProductionCommitteeList from './BlockProductionCommitteeList.js';
 import Summary from './Summary.js';
 import useSessionCommitteePerformance, { ValidatorPerformance } from './useCommitteePerformance.js';
+import { useFinalityCommittee } from './useFinalityCommittee.js';
 
 interface Props {
   session: number,
@@ -26,7 +25,7 @@ function HistoricPerformance ({ era, session }: Props): React.ReactElement<Props
   const sessionCommitteePerformance = useSessionCommitteePerformance([session]);
   const [expectedBlockCountInSessions, setExpectedBlockCountInSessions] = useState<number | undefined>(undefined);
 
-  const finalizingCommitteeAddresses = useAlephBFTCommittee(session);
+  const finalityCommitteeAddresses = useFinalityCommittee(session);
 
   const eraValidatorPerformances: EraValidatorPerformance[] = useMemo(() => {
     if (sessionCommitteePerformance && sessionCommitteePerformance.length > 0) {
@@ -54,16 +53,14 @@ function HistoricPerformance ({ era, session }: Props): React.ReactElement<Props
         era={era}
         eraValidatorPerformances={eraValidatorPerformances}
         expectedBlockCount={expectedBlockCountInSessions}
-        finalizingCommitteeSize={finalizingCommitteeAddresses?.length}
+        finalizingCommitteeSize={finalityCommitteeAddresses?.length}
         session={session}
       />
       <ActionsBanner />
       <StyledBlockProductionCommitteeList
         eraValidatorPerformances={eraValidatorPerformances}
         expectedBlockCount={expectedBlockCountInSessions}
-        onlyCommittee={true}
       />
-      <AlephBFTCommitteeList committeeAddresses={finalizingCommitteeAddresses} />
     </div>
   );
 }

packages/page-staking/src/Performance/Performance.tsx

@@ -6,15 +6,15 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { DeriveEraExposure } from '@polkadot/api-derive/types';
 import getCommitteeManagement from '@polkadot/react-api/getCommitteeManagement';
 import { styled } from '@polkadot/react-components';
-import { useAlephBFTCommittee, useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { StorageKey } from '@polkadot/types';
 import { AnyTuple, Codec } from '@polkadot/types/types';
 
 import ActionsBanner from './ActionsBanner.js';
-import AlephBFTCommitteeList from './AlephBFTCommitteeList.js';
 import BlockProductionCommitteeList from './BlockProductionCommitteeList.js';
 import Summary from './Summary.js';
 import { parseSessionBlockCount, ValidatorPerformance } from './useCommitteePerformance.js';
+import { useFinalityCommittee } from './useFinalityCommittee.js';
 
 interface Props {
   session: number,
@@ -33,7 +33,7 @@ function Performance ({ era, session }: Props): React.ReactElement<Props> {
   const [expectedBlockCountInSessions, setExpectedBlockCountInSessions] = useState<number | undefined>(undefined);
   const sessionValidators = useCall<Codec[]>(api.query.session.validators);
 
-  const finalizingCommitteeAddresses = useAlephBFTCommittee(session);
+  const finalityCommitteeAddresses = useFinalityCommittee(session);
 
   const sessionValidatorsStrings = useMemo(() => {
     return sessionValidators?.map((validator) => validator.toString());
@@ -105,16 +105,14 @@ function Performance ({ era, session }: Props): React.ReactElement<Props> {
         era={era}
         eraValidatorPerformances={eraValidatorPerformances}
         expectedBlockCount={expectedBlockCountInSessions}
-        finalizingCommitteeSize={finalizingCommitteeAddresses?.length}
+        finalizingCommitteeSize={finalityCommitteeAddresses?.length}
         session={session}
       />
       <ActionsBanner />
       <StyledBlockProductionCommitteeList
         eraValidatorPerformances={eraValidatorPerformances}
         expectedBlockCount={expectedBlockCountInSessions}
-        onlyCommittee={false}
       />
-      <AlephBFTCommitteeList committeeAddresses={finalizingCommitteeAddresses} />
     </div>
   );
 }