Adjust staking overview display (#312)

packages/app-explorer/src/SummarySession.tsx

@@ -18,34 +18,29 @@ type Props = I18nProps & {
   sessionBlockProgress?: BN,
   sessionBrokenValue?: BN,
   sessionBrokenPercentLate?: BN,
-  sessionLength?: BN
+  sessionLength?: BN,
+  withBroken?: boolean,
+  withEra?: boolean,
+  withSession?: boolean
 };
 
 class SummarySession extends React.PureComponent<Props> {
   render () {
-    const { eraBlockLength, eraBlockProgress, sessionBlockProgress, sessionBrokenValue, sessionBrokenPercentLate, sessionLength, t } = this.props;
-
     return [
-      <CardSummary
+      this.renderSession(),
-        key='sessionProgress'
+      this.renderEra(),
-        label={t('summary.sessionProgress', {
+      this.renderBroken()
-          defaultValue: 'session'
+    ];
-        })}
+  }
-        progress={{
+
-          total: sessionLength,
+  private renderBroken () {
-          value: sessionBlockProgress
+    const { sessionBrokenValue, sessionBrokenPercentLate, t, withBroken = true } = this.props;
-        }}
+
-      />,
+    if (!withBroken) {
-      <CardSummary
+      return null;
-        key='eraProgress'
+    }
-        label={t('summary.eraProgress', {
+
-          defaultValue: 'era'
+    return (
-        })}
-        progress={{
-          total: eraBlockLength,
-          value: eraBlockProgress
-        }}
-      />,
       <CardSummary
         key='brokenCount'
         label={t('summary.brokenCount', {
@@ -58,7 +53,49 @@ class SummarySession extends React.PureComponent<Props> {
           value: sessionBrokenValue
         }}
       />
-    ];
+    );
+  }
+
+  private renderEra () {
+    const { eraBlockLength, eraBlockProgress, t, withEra = true } = this.props;
+
+    if (!withEra) {
+      return null;
+    }
+
+    return (
+      <CardSummary
+        key='eraProgress'
+        label={t('summary.eraProgress', {
+          defaultValue: 'era'
+        })}
+        progress={{
+          total: eraBlockLength,
+          value: eraBlockProgress
+        }}
+      />
+    );
+  }
+
+  private renderSession () {
+    const { sessionBlockProgress, sessionLength, t, withSession = true } = this.props;
+
+    if (!withSession) {
+      return null;
+    }
+
+    return (
+      <CardSummary
+        key='sessionProgress'
+        label={t('summary.sessionProgress', {
+          defaultValue: 'session'
+        })}
+        progress={{
+          total: sessionLength,
+          value: sessionBlockProgress
+        }}
+      />
+    );
   }
 }
 

packages/app-staking/package.json

@@ -11,7 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@polkadot/app-extrinsics": "^0.20.8",
+    "@polkadot/app-explorer": "^0.20.8",
     "@polkadot/storage": "^0.28.35",
     "@polkadot/ui-app": "^0.20.8",
     "@polkadot/ui-keyring": "^0.20.8",

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

@@ -5,6 +5,7 @@
 import { I18nProps } from '@polkadot/ui-app/types';
 import { RxBalanceMap } from '@polkadot/ui-react-rx/ApiObservable/types';
 
+import BN from 'bn.js';
 import React from 'react';
 import AddressMini from '@polkadot/ui-app/AddressMini';
 import AddressRow from '@polkadot/ui-app/AddressRow';
@@ -34,12 +35,8 @@ class CurrentList extends React.PureComponent<Props> {
   private renderCurrent () {
     const { current, t } = this.props;
 
-    if (current.length === 0) {
-      return null;
-    }
-
     return [
-      <h1>
+      <h1 key='header'>
         {t('list.current', {
           defaultValue: 'validators',
           replace: {
@@ -47,51 +44,68 @@ class CurrentList extends React.PureComponent<Props> {
           }
         })}
       </h1>,
-      ...this.renderRow(current, t('name.validator', { defaultValue: 'validator' }))
+      this.renderRow(current, t('name.validator', { defaultValue: 'validator' }))
     ];
   }
 
   private renderNext () {
     const { next, t } = this.props;
 
-    if (next.length === 0) {
-      return null;
-    }
-
     return [
-      <h1>
+      <h1 key='header'>
         {t('list.next', {
           defaultValue: 'next up'
         })}
       </h1>,
-      ...this.renderRow(next, t('name.intention', { defaultValue: 'intention' }))
+      this.renderRow(next, t('name.intention', { defaultValue: 'intention' }))
     ];
   }
 
   private renderRow (addresses: Array<string>, defaultName: string) {
+    const { balances, t } = this.props;
+
+    if (addresses.length === 0) {
+      return (
+        <div key='none'>{t('list.empty', {
+          defaultValue: 'no addresses found'
+        })}</div>
+      );
+    }
+
+    return (
+      <article key='list'>
+        {addresses.map((address) => {
+          const nominators = (balances[address] || {}).nominators || [];
+
+          return (
+            <AddressRow
+              balance={this.balanceArray(address)}
+              key={address}
+              name={name || defaultName}
+              value={address}
+              withCopy={false}
+              withNonce={false}
+            >
+              {nominators.map(({ address }) =>
+                <AddressMini
+                  key={address}
+                  value={address}
+                  withBalance
+                />
+              )}
+            </AddressRow>
+          );
+        })}
+      </article>
+    );
+  }
+
+  private balanceArray (address: string): Array<BN> | undefined {
     const { balances } = this.props;
 
-    return addresses.map((address) => {
+    return balances[address]
-      const nominators = (balances[address] || {}).nominators || [];
+      ? [balances[address].stakingBalance, balances[address].nominatedBalance]
-
+      : undefined;
-      return (
-        <article key={address}>
-          <AddressRow
-            name={name || defaultName}
-            value={address}
-            withCopy={false}
-            withNonce={false}
-          >
-            {nominators.map(({ address }) =>
-              <AddressMini
-                key={address}
-                value={address}
-              />
-            )}
-          </AddressRow>
-        </article>
-      );
-    });
   }
 }
 

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

@@ -9,6 +9,9 @@ import BN from 'bn.js';
 import React from 'react';
 import CardSummary from '@polkadot/ui-app/CardSummary';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
+import SummarySession from '@polkadot/app-explorer/SummarySession';
+import withObservable from '@polkadot/ui-react-rx/with/observable';
+import withMulti from '@polkadot/ui-react-rx/with/multi';
 
 import translate from '../translate';
 
@@ -16,12 +19,13 @@ type Props = I18nProps & {
   balances: RxBalanceMap,
   intentions: Array<string>,
   lastLengthChange?: BN,
+  validatorCount?: BN,
   validators: Array<string>
 };
 
 class Summary extends React.PureComponent<Props> {
   render () {
-    const { className, intentions, style, t, validators } = this.props;
+    const { className, intentions, style, t, validatorCount, validators } = this.props;
 
     return (
       <summary
@@ -32,7 +36,7 @@ class Summary extends React.PureComponent<Props> {
           <CardSummary label={t('summary.validators', {
             defaultValue: 'validators'
           })}>
-            {validators.length}
+            {validators.length}/{validatorCount ? validatorCount.toString() : '-'}
           </CardSummary>
           <CardSummary label={t('summary.intentions', {
             defaultValue: 'intentions'
@@ -40,6 +44,9 @@ class Summary extends React.PureComponent<Props> {
             {intentions.length}
           </CardSummary>
         </section>
+        <section>
+          <SummarySession withBroken={false} />
+        </section>
         <section>
           <CardSummary label={t('summary.balances', {
             defaultValue: 'balances'
@@ -109,4 +116,7 @@ class Summary extends React.PureComponent<Props> {
   }
 }
 
-export default translate(Summary);
+export default withMulti(
+  translate(Summary),
+  withObservable('validatorCount')
+);

packages/app-staking/src/Overview/index.css

@@ -58,6 +58,10 @@
 .validator--next {
   margin: 1em;
   flex: 1;
+
+  .ui--AddressRow + .ui--AddressRow {
+    margin-top: 1em;
+  }
 }
 
 .validator--Account-address.isMine {

packages/app-staking/src/index.css

@@ -4,6 +4,10 @@
 
 .staking--App {
   padding: 1em 2rem;
+
+  .rx--updated {
+    background: transparent !important;
+  }
 }
 
 .staking--App-navigation.ui--Button-Group {

packages/ui-app/src/Balance.tsx

@@ -45,7 +45,9 @@ export default class Balance extends React.PureComponent<Props> {
 
     if (Array.isArray(balance)) {
       const totals = balance
-        .filter((value, index) => index !== 0)
+        .filter((value, index) =>
+          index !== 0
+        )
         .map(numberFormat);
 
       value = `${value}  (${totals.length === 1 ? '+' : ''}${totals.join(', ')})`;

packages/ui-app/src/styles/components.css

@@ -40,7 +40,7 @@ header .ui--Button-Group {
 
 .ui--AddressMini.padded {
   display: inline-block;
-  padding: 0.25rem;
+  padding: 0.25rem 0 0 0;
 }
 
 .ui--AddressMini-info div {
@@ -93,6 +93,10 @@ header .ui--Button-Group {
   vertical-align: top;
 }
 
+.ui--AddressSummary-children {
+  padding-top: 0.5rem;
+}
+
 .ui--AddressSummary .rx--updated {
   background: transparent !important;
 }
@@ -123,7 +127,7 @@ header .ui--Button-Group {
 }
 
 .ui--AddressSummary-data * {
-  margin: 0 0.25rem !important;
+  /* margin: 0 0.25rem !important; */
   vertical-align: middle;
 }
 

packages/ui-react-rx/src/ApiObservable/index.ts

@@ -509,6 +509,10 @@ export default class ObservableApi implements ObservableApiInterface {
     return this.rawStorage(storage.system.public.accountIndexOf, address);
   }
 
+  validatorCount = (): Observable<OptBN> => {
+    return this.rawStorage(storage.staking.public.validatorCount);
+  }
+
   validatingBalance = (address: string): Observable<RxBalance> => {
     return this.combine(
       [

packages/ui-react-rx/src/ApiObservable/types.d.ts

@@ -94,6 +94,7 @@ export interface ObservableApiInterface {
   systemAccountIndexOf: (address: string) => Observable<BN | undefined>,
   timestampBlockPeriod: () => Observable<BN | undefined>,
   timestampNow: () => Observable<Date | undefined>,
+  validatorCount: () => Observable<BN | undefined>,
   validatingBalance: (address: string) => Observable<RxBalance>,
   validatingBalances: (...addresses: Array<string>) => Observable<RxBalanceMap>,
   votingBalance: (address: string) => Observable<RxBalance>,