Add displaying of the validators (polkadot-js#300)

* Add validators App

Fix polkadot-js#191

* Pull validator breakidown into staking overview

* Fix layout

* Add AddressRow component

* Minor CSS fix

* Use standard address components in the staking app

* Use new components and cleanup

* Refactor and layout work on the validators

* Re-use already available components

* Remove app-validators in tsconfig

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

@@ -0,0 +1,98 @@
+// Copyright 2017-2018 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+import { I18nProps } from '@polkadot/ui-app/types';
+
+import React from 'react';
+import AddressRow from '@polkadot/ui-app/AddressRow';
+
+import translate from '../translate';
+
+type Props = I18nProps & {
+  current: Array<string>
+  next: Array<string>
+};
+
+class CurrentList extends React.PureComponent<Props> {
+  render () {
+    return (
+      <div className='validator--ValidatorsList'>
+        <div className='validator--current'>
+          {this.renderCurrent()}
+        </div>
+        <div className='validator--next'>
+          {this.renderNext()}
+        </div>
+      </div>
+    );
+  }
+
+  private renderCurrent () {
+    const { current, t } = this.props;
+
+    if (current.length === 0) {
+      return null;
+    }
+
+    return [
+      <h4>
+        {t('list.current', {
+          defaultValue: 'Current: {{count}}',
+          replace: {
+            count: current.length
+          }
+        })}
+      </h4>,
+      ...current.map((account) => {
+        return (
+          <AddressRow
+            className='validator--row'
+            key={account}
+            name={name || t('name.validator', { defaultValue: 'validator' })}
+            value={account}
+            withBalance={true}
+            withNonce={false}
+            identIconSize={48}
+            isShort={true}
+          />
+        );
+      })
+    ];
+  }
+
+  private renderNext () {
+    const { next, t } = this.props;
+
+    if (next.length === 0) {
+      return null;
+    }
+
+    return [
+      <h4>
+        {t('list.next', {
+          defaultValue: 'Next up: {{count}}',
+          replace: {
+            count: next.length
+          }
+        })}
+      </h4>,
+      ...next.map((account) => {
+        return (
+          <AddressRow
+            className='validator--row'
+            key={account}
+            name={name || t('name.intention', { defaultValue: 'intention' })}
+            value={account}
+            withBalance={true}
+            withNonce={false}
+            identIconSize={48}
+            isShort={true}
+          />
+        );
+      })
+    ];
+  }
+}
+
+export default translate(CurrentList);

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

@@ -10,7 +10,7 @@ import React from 'react';
 import CardSummary from '@polkadot/ui-app/CardSummary';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
 
-import translate from './translate';
+import translate from '../translate';
 
 type Props = I18nProps & {
   balances: RxBalanceMap,

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

@@ -0,0 +1,110 @@
+/* Copyright 2017-2018 @polkadot/app-staking authors & contributors
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.validator--Account-info-address {
+  flex: 3;
+  margin: 0px 5px 0px 5px;
+}
+
+.validator--Account-info-details {
+  flex: 1;
+  margin: 0px 5px 0px 5px;
+}
+
+.validator--row {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 5px;
+  padding-bottom: 2px;
+}
+
+.validator--Account-address {
+  font-family: monospace;
+  font-size: 1.5rem;
+}
+
+.validator--Account-icon {
+  margin-right: 1rem;
+}
+
+.validator--Account-validating {
+  opacity: 0.25 !important;
+  padding-top: 8px;
+  vertical-align: top !important;
+}
+
+.validator--Account-validating.isValidator {
+  color: red;
+  opacity: 1 !important;
+}
+
+.validator--Account-details,.column{
+  flex: 1;
+  border: 1px, solid blue;
+}
+
+.validator--Account-balance,
+.validator--Account-nonce {
+  opacity: 0.45;
+  text-align: right;
+}
+
+.validator--ValidatorsList{
+  padding: 10px;
+  display: flex;
+}
+
+.validator--IntensionsList{
+  padding: 10px;
+}
+
+.validator--current,.validator--next{
+  margin: 20px;
+  flex: 1;
+}
+.app-validators--Query .app-validators--actionrow-value {
+  padding: 0 0.25rem;
+}
+
+.app-validators--Query .ui--IdentityIcon {
+  margin: -10px 0;
+  vertical-align: middle;
+}
+
+.app-validators--actionrow {
+  display: flex;
+}
+
+.app-validators--actionrow-value {
+  flex: 1;
+  min-width: 0;
+}
+
+.app-validators--actionrow-button {
+  flex: 0;
+  padding: 0 0.25rem;
+}
+
+.validator--Account-address.isMine {
+  color: #47b547;
+  font-weight: 500;
+  opacity: 1 !important;
+}
+
+.validator-icon {
+  color: #2284d0;
+  position: absolute;
+  font-size: 1.5em !important;
+}
+
+.nominator-icon {
+  color: #aaa;
+  position: absolute;
+  font-size: 1.5em !important;
+}
+
+.ui--AddressRow-icon {
+  margin: 12px;
+}

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

@@ -0,0 +1,59 @@
+// Copyright 2017-2018 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+import { RxBalanceMap } from '@polkadot/ui-react-rx/ApiObservable/types';
+import { I18nProps } from '@polkadot/ui-app/types';
+
+import './index.css';
+
+import BN from 'bn.js';
+import React from 'react';
+
+import CurrentList from './CurrentList';
+import Summary from './Summary';
+
+type Props = I18nProps & {
+  balances: RxBalanceMap,
+  intentions: Array<string>,
+  validators: Array<string>
+};
+
+const ZERO = new BN(0);
+
+export default class Overview extends React.PureComponent<Props> {
+  render () {
+    const { balances, intentions, validators } = this.props;
+    const intentionsSorted = this.sortByBalance(
+      intentions.filter((address) =>
+        !validators.includes(address)
+      )
+    );
+    const validatorsSorted = this.sortByBalance(validators);
+
+    return (
+      <div className='staking--Overview'>
+        <Summary
+          balances={balances}
+          intentions={intentions}
+          validators={validators}
+        />
+        <CurrentList
+          current={validatorsSorted}
+          next={intentionsSorted}
+        />
+      </div>
+    );
+  }
+
+  private sortByBalance (list: Array<string>): Array<string> {
+    const { balances } = this.props;
+
+    return list.sort((a, b) => {
+      const balanceA = balances[a] || { stakingBalance: ZERO };
+      const balanceB = balances[b] || { stakingBalance: ZERO };
+
+      return balanceB.stakingBalance.cmp(balanceA.stakingBalance);
+    });
+  }
+}

packages/app-staking/src/Account.tsx → packages/app-staking/src/StakeList/Account.tsx

@@ -23,7 +23,7 @@ import decodeAddress from '@polkadot/util-keyring/address/decode';
 
 import Nominating from './Nominating';
 import UnnominateButton from './UnnominateButton';
-import translate from './translate';
+import translate from '../translate';
 
 type Props = I18nProps & {
   systemAccountIndexOf?: BN,
@@ -72,6 +72,7 @@ class Account extends React.PureComponent<Props, State> {
           balance={this.balanceArray(address)}
           name={name}
           value={address}
+          identIconSize={96}
         >
           <div className='staking--Account-expand'>
             {this.renderButtons()}

packages/app-staking/src/Nominating.tsx → packages/app-staking/src/StakeList/Nominating.tsx

@@ -10,7 +10,7 @@ import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import Modal from '@polkadot/ui-app/Modal';
 
-import translate from './translate';
+import translate from '../translate';
 
 type Props = I18nProps & {
   isOpen: boolean,

packages/app-staking/src/UnnominateButton.tsx → packages/app-staking/src/StakeList/UnnominateButton.tsx

@@ -9,7 +9,7 @@ import Button from '@polkadot/ui-app/Button';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 
-import translate from './translate';
+import translate from '../translate';
 
 type Props = I18nProps & {
   address: string,