Alter display info of Staking summary overview

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

@@ -208,6 +208,7 @@
   "last #": "last #",
   "last reward": "last reward",
   "lowest / avg staked": "lowest / avg staked",
+  "min active stake": "min active stake",
   "min nominated": "min nominated",
   "min nominated / threshold": "min nominated / threshold",
   "next": "next",
@@ -274,4 +275,4 @@
   "{{currency}} slashed": "{{currency}} slashed",
   "{{currency}} total": "{{currency}} total",
   "{{days}} days": "{{days}} days"
-}
+}

packages/apps/public/locales/it/translation.json

@@ -1466,6 +1466,7 @@
   "https://example.com": "https://example.com",
   "id": "id",
   "ideal staked": "",
+  "min active stake": "",
   "identity": "identità",
   "imminent preimage (proposal already passed)": "proposta imminente (già approvate)",
   "immortal": "perpetua",
@@ -2135,4 +2136,4 @@
   "{{threshold}}, passing": "{{threshold}}, approvato",
   "{{type}} copied": "{{type}} copiato",
   "{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)": "{{value}} x moltiplicatore di voto, fondi bloccati per {{lock}}x = {{period}} giorni"
-}
+}

packages/apps/public/locales/ru/translation.json

@@ -1492,6 +1492,7 @@
   "https://example.com": "https://primer.com",
   "id": "",
   "ideal staked": "",
+  "min active stake": "",
   "identity": "личность",
   "imminent preimage (proposal already passed)": "неизбежный прообраз (предложение уже одобрено)",
   "immortal": "бессмертный",
@@ -2215,4 +2216,4 @@
   "{{threshold}}, passing": "{{threshold}}, проходит",
   "{{type}} copied": "",
   "{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)": "{{value}}x баланс голосования, заблокировано на {{lock}}x ({{period}} дней)"
-}
+}

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

@@ -9,7 +9,6 @@ import styled from 'styled-components';
 
 import SummarySession from '@polkadot/app-explorer/SummarySession';
 import { CardSummary, Spinner, SummaryBox } from '@polkadot/react-components';
-import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 
@@ -21,49 +20,19 @@ interface Props {
   targets: SortedTargets;
 }
 
-function Summary ({ className = '', isVisible, stakingOverview, targets: { counterForNominators, inflation: { idealStake, inflation, stakedFraction }, nominators, waitingIds } }: Props): React.ReactElement<Props> {
+function Summary ({ className = '', isVisible, targets: { inflation: { idealStake, inflation, stakedFraction }, nominatorMinActiveThreshold, validatorMinActiveThreshold } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
     <SummaryBox className={`${className}${!isVisible ? ' staking--hidden' : ''}`}>
       <section>
-        <CardSummary label={t<string>('validators')}>
-          {stakingOverview
-            ? <>{formatNumber(stakingOverview.validators.length)}&nbsp;/&nbsp;{formatNumber(stakingOverview.validatorCount)}</>
-            : <Spinner noLabel />
-          }
+        <CardSummary label={<>{t<string>('nominators')}<div>{t<string>('min active stake')}</div></>}>
+          {nominatorMinActiveThreshold === '0' ? <Spinner noLabel /> : nominatorMinActiveThreshold}
         </CardSummary>
-        <CardSummary
-          className='media--900'
-          label={t<string>('waiting')}
-        >
-          {waitingIds
-            ? formatNumber(waitingIds.length)
-            : <Spinner noLabel />
-          }
+        <CardSummary label={<>{t<string>('validators')}<div>{t<string>('min active stake')}</div></>}>
+          {validatorMinActiveThreshold === '' ? <Spinner noLabel /> : validatorMinActiveThreshold}
         </CardSummary>
-        <CardSummary
-          className='media--1000'
-          label={
-            counterForNominators
-              ? t<string>('active / nominators')
-              : t<string>('nominators')
-          }
-        >
-          {nominators
-            ? (
-              <>
-                {formatNumber(nominators.length)}
-                {counterForNominators && (
-                  <>&nbsp;/&nbsp;{formatNumber(counterForNominators)}</>
-                )}
-              </>
-            )
-            : <Spinner noLabel />
-          }
-        </CardSummary>
-      </section>
-      <section>
+      </section><section>
         {(idealStake > 0) && Number.isFinite(idealStake) && (
           <CardSummary
             className='media--1400'
@@ -88,8 +57,7 @@ function Summary ({ className = '', isVisible, stakingOverview, targets: { count
             <>{inflation.toFixed(1)}%</>
           </CardSummary>
         )}
-      </section>
-      <section>
+      </section><section>
         <SummarySession />
       </section>
     </SummaryBox>

packages/page-staking/src/types.ts

@@ -90,4 +90,6 @@ export interface SortedTargets {
   validators?: ValidatorInfo[];
   validatorIds?: string[];
   waitingIds?: string[];
+  nominatorMinActiveThreshold?: string;
+  validatorMinActiveThreshold?: string;
 }

packages/page-staking/src/useSortedTargets.ts

@@ -4,12 +4,15 @@
 import type { ApiPromise } from '@polkadot/api';
 import type { DeriveSessionInfo, DeriveStakingElected, DeriveStakingWaiting } from '@polkadot/api-derive/types';
 import type { Inflation } from '@polkadot/react-hooks/types';
-import type { Option, u32 } from '@polkadot/types';
+import type { Option, StorageKey, u32 } from '@polkadot/types';
+import type { Codec } from '@polkadot/types/types';
 import type { SortedTargets, TargetSortBy, ValidatorInfo } from './types';
 
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { createNamedHook, useAccounts, useApi, useCall, useCallMulti, useInflation } from '@polkadot/react-hooks';
+import { AccountId32 } from '@polkadot/types/interfaces';
+import { PalletStakingIndividualExposure } from '@polkadot/types/lookup';
 import { arrayFlatten, BN, BN_HUNDRED, BN_MAX_INTEGER, BN_ONE, BN_ZERO } from '@polkadot/util';
 
 interface LastEra {
@@ -244,6 +247,28 @@ function extractBaseInfo (api: ApiPromise, allAccounts: string[], electedDerive:
   };
 }
 
+const b = (x: BN, api: ApiPromise): string => api.createType('Balance', x).toHuman();
+
+function getMinActiveThreshold (api: ApiPromise, stakers: [StorageKey<[u32, AccountId32]>, Codec][]) {
+  const assignments: Map<AccountId32, BN> = new Map();
+
+  stakers.sort((a, b) => a[1].total.toBn().cmp(b[1].total.toBn()));
+
+  stakers.map((x) => x[1].others).flat(1).forEach((x) => {
+    const nominator = (x as PalletStakingIndividualExposure).who;
+    const amount = (x as PalletStakingIndividualExposure).value;
+    const val = assignments.get(nominator);
+
+    assignments.set(nominator, val ? amount.toBn().add(val) : amount.toBn());
+  });
+
+  const nominatorStakes = Array.from(assignments.values());
+
+  nominatorStakes.sort((a, b) => a.cmp(b));
+
+  return b(nominatorStakes[0], api);
+}
+
 const transformEra = {
   transform: ({ activeEra, eraLength, sessionLength }: DeriveSessionInfo): LastEra => ({
     activeEra,
@@ -287,6 +312,14 @@ function useSortedTargetsImpl (favorites: string[], withLedger: boolean): Sorted
   const electedInfo = useCall<DeriveStakingElected>(api.derive.staking.electedInfo, [{ ...DEFAULT_FLAGS_ELECTED, withLedger }]);
   const waitingInfo = useCall<DeriveStakingWaiting>(api.derive.staking.waitingInfo, [{ ...DEFAULT_FLAGS_WAITING, withLedger }]);
   const lastEraInfo = useCall<LastEra>(api.derive.session.info, undefined, transformEra);
+  const [stakers, setStakers] = useState<[StorageKey<[u32, AccountId32]>, Codec][]>([]);
+  const [stakersTotal, setStakersTotal] = useState<BN | undefined>();
+
+  useEffect(() => {
+    if (stakers[0] && stakers[0][1]) {
+      setStakersTotal(stakers[0][1].total.toBn() as BN);
+    }
+  }, [stakers]);
 
   const baseInfo = useMemo(
     () => electedInfo && lastEraInfo && totalIssuance && waitingInfo
@@ -304,6 +337,16 @@ function useSortedTargetsImpl (favorites: string[], withLedger: boolean): Sorted
     [baseInfo, inflation]
   );
 
+  const curEra = useCall<Option<u32>>(api.query.staking.currentEra);
+
+  const getStakers = useMemo(() => async (currentEra: u32) => {
+    setStakers(await api.query.staking.erasStakers.entries(currentEra));
+  }, [api.query.staking.erasStakers]);
+
+  curEra && getStakers(curEra?.unwrap());
+  const nominatorMinActiveThreshold = getMinActiveThreshold(api, stakers);
+  const validatorMinActiveThreshold = stakersTotal ? b(stakersTotal, api) : '';
+
   return {
     counterForNominators,
     counterForValidators,
@@ -314,7 +357,9 @@ function useSortedTargetsImpl (favorites: string[], withLedger: boolean): Sorted
     minNominated: BN_ZERO,
     minNominatorBond,
     minValidatorBond,
-    ...partial
+    ...partial,
+    nominatorMinActiveThreshold,
+    validatorMinActiveThreshold
   };
 }