Alter display info of Staking summary overview

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

@@ -57,6 +57,8 @@
   "Join nomination pool": "Join nomination pool",
   "Keys from rotateKeys": "Keys from rotateKeys",
   "Max, {{eras}} eras": "Max, {{eras}} eras",
+  "Minimum stake among the active nominators": "Minimum stake among the active nominators",
+  "Minimum (total) stake among the active validators.": "Minimum (total) stake among the active validators.",
   "Members ({{count}})": "Members ({{count}})",
   "Most profitable": "Most profitable",
   "Move up {{jumpCount}}": "Move up {{jumpCount}}",
@@ -278,6 +280,7 @@
   "member account": "member account",
   "members": "members",
   "min": "min",
+  "min active stake": "min active stake",
   "min nominated": "min nominated",
   "min nominated / threshold": "min nominated / threshold",
   "my nodes": "my nodes",
@@ -352,4 +355,4 @@
   "{{currency}} slashed": "{{currency}} slashed",
   "{{currency}} total": "{{currency}} total",
   "{{days}} days": "{{days}} days"
-}
+}

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

@@ -320,6 +320,7 @@
   "Image": "Carica codice",
   "Important notice": "Notifica importante",
   "In calculating the election outcome, this prioritized vote ordering will be used to determine the final score for the candidates.": "In fase di calcolo dell'esito dell'elezione, la priorità delle preferenze assegnata sarà usata per determinare il punteggio finale di ogni candidato",
+  "In order to receive staking rewards, and be exposed with an active validator to slash, a nominator needs to be 'active'. Compare the below thresholds with your active stake to ensure you are in the correct set between 'active' and 'intention'.": "",
   "Inactive": "Inattivo",
   "Inactive nominations ({{count}})": "Nomine inattive ({{count}})",
   "Include an optional tip for faster processing": "Includi una mancia per velocizzare la finalizzazione",
@@ -1466,6 +1467,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",
@@ -2134,4 +2136,4 @@
   "{{threshold}}, passing": "{{threshold}}, approvato",
   "{{type}} copied": "{{type}} copiato",
   "{{value}}x voting balance, locked for {{lock}}x duration ({{period}} days)": "{{value}} x moltiplicatore di voto, fondi bloccati per {{lock}}x = {{period}} giorni"
-}
+}

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

@@ -318,6 +318,7 @@
   "Image": "",
   "Important notice": "Важное уведомление",
   "In calculating the election outcome, this prioritized vote ordering will be used to determine the final score for the candidates.": "Для подсчета результатов голосования будет использовано приоритезированное голосование",
+  "In order to receive staking rewards, and be exposed with an active validator to slash, a nominator needs to be 'active'. Compare the below thresholds with your active stake to ensure you are in the correct set between 'active' and 'intention'.": "",
   "Inactive": "",
   "Inactive nominations ({{count}})": "Неактивные номинации ({{count}})",
   "Include an optional tip for faster processing": "Добавить чаевые для приоритетной обработки",
@@ -1492,6 +1493,7 @@
   "https://example.com": "https://primer.com",
   "id": "",
   "ideal staked": "",
+  "min active stake": "",
   "identity": "личность",
   "imminent preimage (proposal already passed)": "неизбежный прообраз (предложение уже одобрено)",
   "immortal": "бессмертный",
@@ -2209,4 +2211,4 @@
   "{{threshold}}, passing": "{{threshold}}, проходит",
   "{{type}} copied": "",
   "{{value}}x voting balance, locked for {{lock}}x duration ({{period}} days)": "{{value}}x баланс голосования, заблокировано на {{lock}}x ({{period}} дней)"
-}
+}

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

@@ -10,7 +10,6 @@ import { Button, MarkWarning, Table, ToggleGroup } from '@polkadot/react-compone
 
 import { useTranslation } from '../translate';
 import Bag from './Bag';
-import Summary from './Summary';
 import useBagsList from './useBagsList';
 import useBagsNodes from './useBagsNodes';
 
@@ -61,11 +60,7 @@ function Bags ({ className, ownStashes }: Props): React.ReactElement<Props> {
   );
 
   return (
-    <div className={className}>
-      <Summary
-        bags={bags}
-        mapOwn={mapOwn}
-      />
+    <>
       <Button.Group>
         <ToggleGroup
           onChange={setFilterIndex}
@@ -96,7 +91,7 @@ function Bags ({ className, ownStashes }: Props): React.ReactElement<Props> {
           />
         ))}
       </Table>
-    </div>
+    </>
   );
 }
 

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

@@ -0,0 +1,22 @@
+// Copyright 2017-2022 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { JSXElementConstructor, ReactElement } from 'react';
+import styled from 'styled-components';
+
+import { Spinner } from '@polkadot/react-components';
+
+interface Props {
+  check: boolean
+  children: ReactElement<Props, string | JSXElementConstructor<any>>
+}
+
+function SpinnerWrap ({ check, children }: Props): React.ReactElement<Props> {
+  return check
+    ? children
+    : (<Spinner noLabel />);
+}
+
+export default React.memo(styled(SpinnerWrap)`
+  margin-top: 1rem;
+`);

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

@@ -0,0 +1,60 @@
+// Copyright 2017-2022 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BN } from '@polkadot/util';
+
+import React, { useMemo } from 'react';
+
+import { Card, CardSummary, SummaryBox } from '@polkadot/react-components';
+import { useCall } from '@polkadot/react-hooks';
+import { StakerState } from '@polkadot/react-hooks/types';
+import { formatNumber } from '@polkadot/util';
+
+import useBagsList from '../Bags/useBagsList';
+import useBagsNodes from '../Bags/useBagsNodes';
+import useQueryModule from '../Bags/useQueryModule';
+import { useTranslation } from '../translate';
+import { Section, Title } from './index';
+import SpinnerWrap from './SpinnerWrap';
+
+interface Props {
+  ownStashes?: StakerState[];
+}
+
+function SummaryBags ({ ownStashes }: Props) {
+  const { t } = useTranslation();
+  const mod = useQueryModule();
+  const stashIds = useMemo(
+    () => ownStashes
+      ? ownStashes.map(({ stashId }) => stashId)
+      : [],
+    [ownStashes]
+  );
+  const mapOwn = useBagsNodes(stashIds);
+  const bags = useBagsList();
+  const total = useCall<BN>(mod.counterForListNodes);
+
+  return (
+    <Card>
+      <Title>{t<string>('bags')}</Title>
+      <SummaryBox>
+        <Section>
+          <CardSummary label={t<string>('total bags')}>
+            <SpinnerWrap check={bags}>
+              {formatNumber(bags?.length)}
+            </SpinnerWrap>
+          </CardSummary>
+        </Section>
+        <Section>
+          <CardSummary label={t<string>('total nodes')}>
+            <SpinnerWrap check={!!mapOwn}>
+              {formatNumber(total)}
+            </SpinnerWrap>
+          </CardSummary>
+        </Section>
+      </SummaryBox>
+    </Card>
+  );
+}
+
+export default SummaryBags;

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

@@ -0,0 +1,105 @@
+// Copyright 2017-2022 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BN } from '@polkadot/util';
+
+import React, { useMemo } from 'react';
+
+import SummarySession from '@polkadot/app-explorer/SummarySession';
+import { Card, CardSummary, SummaryBox } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
+
+import { useTranslation } from '../translate';
+import { SortedTargets } from '../types';
+import { Section } from './index';
+import SpinnerWrap from './SpinnerWrap';
+
+interface Props {
+  targets: SortedTargets;
+}
+
+interface ProgressInfo {
+  hideValue: true;
+  total: BN;
+  value: BN;
+}
+
+function getProgressInfo (value?: BN, total?: BN): ProgressInfo | undefined {
+  return value && total && !total.isZero()
+    ? {
+      hideValue: true,
+      total,
+      value
+    }
+    : undefined;
+}
+
+function SummaryGeneral ({ targets: { inflation: { idealStake,
+  inflation,
+  stakedReturn },
+totalIssuance,
+totalStaked } }: Props) {
+  const { t } = useTranslation();
+
+  const progressStake = useMemo(
+    () => getProgressInfo(totalStaked, totalIssuance),
+    [totalIssuance, totalStaked]
+  );
+
+  const returnsCheck: string = useMemo(
+    () => {
+      if (totalIssuance && stakedReturn > 0 && Number.isFinite(stakedReturn)) {
+        return (stakedReturn.toFixed(1) + '%');
+      }
+
+      return '0%';
+    }, [totalIssuance, stakedReturn]);
+
+  return (
+    <Card withBottomMargin>
+      <SummaryBox>
+        <Section>
+          <SummarySession />
+        </Section>
+        <Section>
+          <CardSummary
+            label={t<string>('total staked')}
+            progress={progressStake}
+          >
+            <SpinnerWrap check={progressStake}>
+              <FormatBalance
+                value={totalStaked}
+                withSi
+              />
+            </SpinnerWrap>
+          </CardSummary>
+        </Section>
+        <Section
+          className='media--900'
+        >
+          <CardSummary
+            label={t<string>('ideal staked')}
+          >
+            <SpinnerWrap
+              check={(idealStake > 0) && Number.isFinite(idealStake)}
+            >
+              {(idealStake * 100).toFixed(1)}%
+            </SpinnerWrap>
+          </CardSummary>
+          <CardSummary
+            label={t<string>('inflation')}
+          >
+            <SpinnerWrap
+              check={(inflation > 0) && Number.isFinite(inflation)}
+            >{inflation.toFixed(1)}%</SpinnerWrap>
+          </CardSummary>
+          <CardSummary label={t<string>('returns')}>
+            {returnsCheck}
+          </CardSummary>
+        </Section>
+      </SummaryBox>
+    </Card>
+  );
+}
+
+export default SummaryGeneral;