Render nominators in staking view (#301)

* Add validators App

Fix #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

* Render nominators

* Use row defaults applicable

* Small css fixes

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

@@ -3,13 +3,16 @@
 // of the ISC license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/ui-app/types';
+import { RxBalanceMap } from '@polkadot/ui-react-rx/ApiObservable/types';
 
 import React from 'react';
+import AddressMini from '@polkadot/ui-app/AddressMini';
 import AddressRow from '@polkadot/ui-app/AddressRow';
 
 import translate from '../translate';
 
 type Props = I18nProps & {
+  balances: RxBalanceMap,
   current: Array<string>
   next: Array<string>
 };
@@ -36,28 +39,15 @@ class CurrentList extends React.PureComponent<Props> {
     }
 
     return [
-      <h4>
+      <h1>
         {t('list.current', {
-          defaultValue: 'Current: {{count}}',
+          defaultValue: 'validators',
           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}
-          />
-        );
-      })
+      </h1>,
+      ...this.renderRow(current, t('name.validator', { defaultValue: 'validator' }))
     ];
   }
 
@@ -69,30 +59,40 @@ class CurrentList extends React.PureComponent<Props> {
     }
 
     return [
-      <h4>
+      <h1>
         {t('list.next', {
-          defaultValue: 'Next up: {{count}}',
-          replace: {
-            count: next.length
-          }
+          defaultValue: 'next up'
         })}
-      </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}
-          />
-        );
-      })
+      </h1>,
+      ...this.renderRow(next, t('name.intention', { defaultValue: 'intention' }))
     ];
   }
+
+  private renderRow (addresses: Array<string>, defaultName: string) {
+    const { balances } = this.props;
+
+    return addresses.map((address) => {
+      const nominators = (balances[address] || {}).nominators || [];
+
+      return (
+        <article key={address}>
+          <AddressRow
+            name={name || defaultName}
+            value={address}
+            withCopy={false}
+            withNonce={false}
+          >
+            {nominators.map(({ address }) =>
+              <AddressMini
+                key={address}
+                value={address}
+              />
+            )}
+          </AddressRow>
+        </article>
+      );
+    });
+  }
 }
 
 export default translate(CurrentList);

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

@@ -15,9 +15,7 @@
 .validator--row {
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid #ccc;
-  margin-bottom: 5px;
-  padding-bottom: 2px;
+  padding-bottom: 1.5em;
 }
 
 .validator--Account-address {
@@ -31,7 +29,7 @@
 
 .validator--Account-validating {
   opacity: 0.25 !important;
-  padding-top: 8px;
+  padding-top: 0.5em;
   vertical-align: top !important;
 }
 
@@ -51,41 +49,16 @@
   text-align: right;
 }
 
-.validator--ValidatorsList{
-  padding: 10px;
+.validator--IntensionsList,
+.validator--ValidatorsList {
   display: flex;
 }
 
-.validator--IntensionsList{
-  padding: 10px;
-}
-
-.validator--current,.validator--next{
-  margin: 20px;
+.validator--current,
+.validator--next {
+  margin: 1em;
   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;
@@ -104,7 +77,3 @@
   position: absolute;
   font-size: 1.5em !important;
 }
-
-.ui--AddressRow-icon {
-  margin: 12px;
-}

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

@@ -39,6 +39,7 @@ export default class Overview extends React.PureComponent<Props> {
           validators={validators}
         />
         <CurrentList
+          balances={balances}
           current={validatorsSorted}
           next={intentionsSorted}
         />

packages/ui-app/src/AddressRow.tsx

@@ -30,9 +30,9 @@ class AddressRow extends AddressSummary {
             {this.renderAddress()}
             {this.renderBalance()}
             {this.renderNonce()}
+            {this.renderChildren()}
           </div>
         </div>
-        {this.renderChildren()}
       </div>
     );
   }