Dispaly staked average (#3416)

* Disaply staked average

* Rework avg

packages/page-staking/src/Targets/Summary.tsx

@@ -13,13 +13,14 @@ import { FormatBalance } from '@polkadot/react-query';
 import { useTranslation } from '../translate';
 
 interface Props {
+  avgStaked?: BN;
   lastReward?: BN;
   numNominators?: number;
   numValidators?: number;
   totalStaked?: BN;
 }
 
-function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Props): React.ReactElement<Props> {
+function Summary ({ avgStaked, lastReward, numNominators, numValidators, totalStaked }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const totalIssuance = useCall<Balance>(api.query.balances?.totalIssuance, []);
@@ -62,9 +63,20 @@ function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Pro
           </CardSummary>
         )}
       </section>
+      {avgStaked && (
+        <CardSummary
+          className='ui--media-medium'
+          label={`${t<string>('avg staked')}`}
+        >
+          <FormatBalance
+            value={avgStaked}
+            withSi
+          />
+        </CardSummary>
+      )}
       {numValidators && numNominators && (
-        <CardSummary label={`${t<string>('validators')} / ${t<string>('nominators')}`}>
-          {numValidators}&nbsp;/&nbsp;{numNominators}
+        <CardSummary label={`${t<string>('nominators')} / ${t<string>('validators')}`}>
+          {numNominators}&nbsp;/&nbsp;{numValidators}
         </CardSummary>
       )}
       {lastReward?.gtn(0) && (

packages/page-staking/src/Targets/index.tsx

@@ -65,7 +65,7 @@ function extractNominees (ownNominators: StakerState[] = []): string[] {
   return myNominees;
 }
 
-function Targets ({ className = '', isInElection, ownStashes, targets: { calcWith, lastReward, nominators, setCalcWith, totalStaked, validators }, toggleFavorite }: Props): React.ReactElement<Props> {
+function Targets ({ className = '', isInElection, ownStashes, targets: { avgStaked, calcWith, lastReward, nominators, setCalcWith, totalStaked, validators }, toggleFavorite }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const allSlashes = useAvailableSlashes();
   const ownNominators = useOwnNominators(ownStashes);
@@ -175,6 +175,7 @@ function Targets ({ className = '', isInElection, ownStashes, targets: { calcWit
   return (
     <div className={className}>
       <Summary
+        avgStaked={avgStaked}
         lastReward={lastReward}
         numNominators={nominators?.length}
         numValidators={validators?.length}

packages/page-staking/src/types.ts

@@ -61,6 +61,7 @@ export interface ValidatorInfo extends ValidatorInfoRank {
 export type TargetSortBy = keyof ValidatorInfoRank;
 
 export interface SortedTargets {
+  avgStaked?: BN;
   calcWith?: BN;
   lastReward?: BN;
   nominators?: string[];

packages/page-staking/src/useSortedTargets.ts

@@ -141,7 +141,7 @@ function extractInfo (allAccounts: string[], amount: BN = baseBalance(), elected
   const validators = sortValidators(elected.concat(waiting));
   const validatorIds = validators.map(({ accountId }) => accountId.toString());
 
-  return { nominators, totalStaked, validatorIds, validators };
+  return { avgStaked: totalStaked.divn(electedDerive.info.length), nominators, totalStaked, validatorIds, validators };
 }
 
 export default function useSortedTargets (favorites: string[]): SortedTargets {