Display ideal staked (#5346)

packages/page-staking/src/Overview/CurrentList.tsx

@@ -32,7 +32,6 @@ interface Props {
 type AccountExtend = [string, boolean, boolean];
 
 interface Filtered {
-  elected?: AccountExtend[];
   validators?: AccountExtend[];
   waiting?: AccountExtend[];
 }
@@ -63,9 +62,10 @@ function getFiltered (stakingOverview: DeriveStakingOverview, favorites: string[
   const validatorIds = accountsToString(stakingOverview.validators);
 
   return {
-    elected: filterAccounts(allElected, allElected, favorites, validatorIds),
     validators: filterAccounts(validatorIds, allElected, favorites, []),
-    waiting: filterAccounts(next, [], favorites, allElected)
+    waiting: filterAccounts(allElected, allElected, favorites, validatorIds).concat(
+      filterAccounts(next, [], favorites, allElected)
+    )
   };
 }
 
@@ -83,22 +83,11 @@ function CurrentList ({ favorites, hasQueries, isIntentions, paraValidators = DE
   // we have a very large list, so we use a loading delay
   const isLoading = useLoadingDelay();
 
-  const { elected, validators, waiting } = useMemo(
+  const { validators, waiting } = useMemo(
     () => stakingOverview ? getFiltered(stakingOverview, favorites, targets.waitingIds) : {},
     [favorites, stakingOverview, targets]
   );
 
-  const addresses = useMemo(
-    () => isIntentions
-      ? (isLoading || !nominatedBy || !elected || !waiting)
-        ? undefined
-        : elected.concat(waiting)
-      : isLoading || !validators
-        ? undefined
-        : validators,
-    [elected, isIntentions, isLoading, nominatedBy, validators, waiting]
-  );
-
   const infoMap = useMemo(
     () => targets.validators?.reduce<Record<string, ValidatorInfo>>((result, info) => {
       result[info.key] = info;
@@ -161,7 +150,12 @@ function CurrentList ({ favorites, hasQueries, isIntentions, paraValidators = DE
         <Legend isRelay={!isIntentions && !!(api.query.parasShared || api.query.shared)?.activeValidatorIndices} />
       }
     >
-      {addresses?.map(([address, isElected, isFavorite]): React.ReactNode => (
+      {!isLoading && (
+        (isIntentions
+          ? nominatedBy && waiting
+          : validators
+        ) || []
+      ).map(([address, isElected, isFavorite]): React.ReactNode => (
         <Address
           address={address}
           filterName={nameFilter}

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

@@ -4,12 +4,11 @@
 import type { DeriveStakingOverview } from '@polkadot/api-derive/types';
 import type { SortedTargets } from '../types';
 
-import React, { useContext } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import SummarySession from '@polkadot/app-explorer/SummarySession';
-import { CardSummary, IdentityIcon, Spinner, SummaryBox } from '@polkadot/react-components';
-import { BlockAuthorsContext } from '@polkadot/react-query';
+import { CardSummary, Spinner, SummaryBox } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -22,9 +21,8 @@ interface Props {
   targets: SortedTargets;
 }
 
-function Summary ({ className = '', isVisible, stakingOverview, targets: { inflation: { inflation }, nominators, waitingIds } }: Props): React.ReactElement<Props> {
+function Summary ({ className = '', isVisible, stakingOverview, targets: { inflation: { idealStake, inflation, stakedFraction }, nominators, waitingIds } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { lastBlockAuthors, lastBlockNumber } = useContext(BlockAuthorsContext);
 
   return (
     <SummaryBox className={`${className}${!isVisible ? ' staking--hidden' : ''}`}>
@@ -36,7 +34,7 @@ function Summary ({ className = '', isVisible, stakingOverview, targets: { infla
           }
         </CardSummary>
         <CardSummary
-          className='media--1000'
+          className='media--900'
           label={t<string>('waiting')}
         >
           {waitingIds
@@ -45,7 +43,7 @@ function Summary ({ className = '', isVisible, stakingOverview, targets: { infla
           }
         </CardSummary>
         <CardSummary
-          className='media--1100'
+          className='media--1000'
           label={t<string>('nominators')}
         >
           {nominators
@@ -53,30 +51,32 @@ function Summary ({ className = '', isVisible, stakingOverview, targets: { infla
             : <Spinner noLabel />
           }
         </CardSummary>
-        <CardSummary
-          className='media--1200'
-          label={t<string>('inflation')}
-        >
-          {(inflation > 0) && Number.isFinite(inflation)
-            ? <>{inflation.toFixed(1)}%</>
-            : '-'
-          }
-        </CardSummary>
       </section>
       <section>
-        <CardSummary
-          className='validator--Summary-authors'
-          label={t<string>('last block')}
-        >
-          {lastBlockAuthors?.map((author): React.ReactNode => (
-            <IdentityIcon
-              className='validator--Account-block-icon'
-              key={author}
-              value={author}
-            />
-          ))}
-          {lastBlockNumber}
-        </CardSummary>
+        {(idealStake > 0) && Number.isFinite(idealStake) && (
+          <CardSummary
+            className='media--1300'
+            label={t<string>('ideal staked')}
+          >
+            <>{(idealStake * 100).toFixed(1)}%</>
+          </CardSummary>
+        )}
+        {(stakedFraction > 0) && (
+          <CardSummary
+            className='media--1200'
+            label={t<string>('staked')}
+          >
+            <>{(stakedFraction * 100).toFixed(1)}%</>
+          </CardSummary>
+        )}
+        {(inflation > 0) && Number.isFinite(inflation) && (
+          <CardSummary
+            className='media--1100'
+            label={t<string>('inflation')}
+          >
+            <>{inflation.toFixed(1)}%</>
+          </CardSummary>
+        )}
       </section>
       <section>
         <SummarySession />

packages/react-hooks/src/types.ts

@@ -32,7 +32,10 @@ export interface ModalState {
 }
 
 export interface Inflation {
+  idealStake: number;
+  idealInterest: number;
   inflation: number;
+  stakedFraction: number;
   stakedReturn: number;
 }
 

packages/react-hooks/src/useInflation.ts

@@ -13,7 +13,7 @@ import { BN_MILLION, BN_ZERO } from '@polkadot/util';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
 
-const EMPTY: Inflation = { inflation: 0, stakedReturn: 0 };
+const EMPTY: Inflation = { idealInterest: 0, idealStake: 0, inflation: 0, stakedFraction: 0, stakedReturn: 0 };
 
 function calcInflation (api: ApiPromise, totalStaked: BN, totalIssuance: BN, numAuctions: BN): Inflation {
   const { auctionAdjust, auctionMax, falloff, maxInflation, minInflation, stakeTarget } = getInflationParams(api);
@@ -29,7 +29,10 @@ function calcInflation (api: ApiPromise, totalStaked: BN, totalIssuance: BN, num
   ));
 
   return {
+    idealInterest,
+    idealStake,
     inflation,
+    stakedFraction,
     stakedReturn: stakedFraction
       ? (inflation / stakedFraction)
       : 0