Re-introduce nominators per validator (#856)

* Show validator nominators * Cleanup errant console.log
2019-03-27 22:37:11 +01:00 · 2019-03-27 22:37:11 +01:00 · 91f202cfde
commit 91f202cfde
parent 60df047db3
5 changed files with 137 additions and 103 deletions
--- a/packages/app-staking/src/Account/index.tsx
+++ b/packages/app-staking/src/Account/index.tsx
@ -35,7 +35,6 @@ type Props = ApiProps & I18nProps & {
 };

 type State = {
-  isAccountValidating: boolean,
  isBondingOpen: boolean,
  isNominateOpen: boolean,
  isSessionKeyOpen: boolean,
@ -48,7 +47,6 @@ type State = {

 class Account extends React.PureComponent<Props, State> {
  state: State = {
-    isAccountValidating: false,
    isBondingOpen: false,
    isSessionKeyOpen: false,
    isNominateOpen: false,
@ -59,12 +57,11 @@ class Account extends React.PureComponent<Props, State> {
    stashId: null
  };

-  static getDerivedStateFromProps ({ accountId, session_nextKeyFor, staking_bonded, staking_ledger, validators }: Props): Partial<State> {
+  static getDerivedStateFromProps ({ session_nextKeyFor, staking_bonded, staking_ledger }: Props): Partial<State> {

    // console.error('staking_stakers', JSON.stringify(staking_stakers));

    return {
-      isAccountValidating: validators.indexOf(accountId) !== -1,
      bondedId: staking_bonded && staking_bonded.isSome
        ? staking_bonded.unwrap().toString()
        : null,
@ -279,7 +276,7 @@ class Account extends React.PureComponent<Props, State> {

  private renderButtons () {
    const { accountId, intentions, t } = this.props;
-    const { isAccountValidating, sessionId, stashId } = this.state;
+    const { sessionId, stashId } = this.state;
    const buttons = [];

    if (!stashId) {
@ -303,55 +300,36 @@ class Account extends React.PureComponent<Props, State> {
        );
      }
    } else {
-      if (isAccountValidating) {
+      const nominees = this.getNominees();
+      const isNominating = nominees && nominees.length;
+      const isValidating = stashId && intentions.indexOf(stashId) !== -1;
+
+      if (isValidating || isNominating) {
        buttons.push(
          <TxButton
            accountId={accountId}
            isNegative
-            label={t('Stop Validation')}
+            label={isValidating ? t('Stop Validating') : t('Stop Nominating')}
            key='stop'
            tx='staking.chill'
          />
        );
      } else {
-        const nominees = this.getNominees();
-        const hasNominees = nominees && nominees.length;
-        const isValidating = stashId && intentions.indexOf(stashId) !== -1;
-
-        if (!hasNominees) {
-          buttons.push(
-            <Button
-              isPrimary
-              key='validate'
-              onClick={this.toggleValidating}
-              label={t('Validate')}
-            />
-          );
-        }
-
-        if (!isValidating) {
-          if (!hasNominees) {
-            buttons.push(<Button.Or key='nominate.or' />);
-          }
-
-          buttons.push(
-            <Button
-              isPrimary
-              key='nominate'
-              onClick={this.toggleNominate}
-              label={t('Nominate')}
-            />
-          );
-        }
-
-        buttons.push(<Button.Or key='stop.or' />);
        buttons.push(
-          <TxButton
-            accountId={accountId}
-            isNegative
-            label={t('Stop')}
-            key='stop'
-            tx='staking.chill'
+          <Button
+            isPrimary
+            key='validate'
+            onClick={this.toggleValidating}
+            label={t('Validate')}
+          />
+        );
+        buttons.push(<Button.Or key='nominate.or' />);
+        buttons.push(
+          <Button
+            isPrimary
+            key='nominate'
+            onClick={this.toggleNominate}
+            label={t('Nominate')}
          />
        );
      }
--- a/packages/app-staking/src/Overview/Address.tsx
+++ b/packages/app-staking/src/Overview/Address.tsx
@ -0,0 +1,89 @@
+// Copyright 2017-2019 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DerivedBalancesMap } from '@polkadot/api-derive/types';
+import { I18nProps } from '@polkadot/ui-app/types';
+import { Nominators } from '../types';
+
+import React from 'react';
+import { AccountId, Balance } from '@polkadot/types';
+import { withMulti } from '@polkadot/ui-api/with';
+import { AddressMini, AddressRow } from '@polkadot/ui-app';
+import keyring from '@polkadot/ui-keyring';
+
+import translate from '../translate';
+
+type Props = I18nProps & {
+  address: string,
+  balances: DerivedBalancesMap,
+  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
+  defaultName: string,
+  isAuthor: boolean,
+  lastBlock: string,
+  nominators: Nominators
+};
+
+class Address extends React.PureComponent<Props> {
+  private getDisplayName () {
+    const { address, defaultName } = this.props;
+
+    const pair = keyring.getAccount(address).isValid()
+      ? keyring.getAccount(address)
+      : keyring.getAddress(address);
+
+    return pair.isValid()
+      ? pair.getMeta().name
+      : defaultName;
+  }
+
+  render () {
+    const { address, balanceArray, isAuthor, lastBlock, nominators, t } = this.props;
+    const myNominators = Object.keys(nominators).filter((nominator) =>
+      nominators[nominator].indexOf(address) !== -1
+    );
+    const children = myNominators.length
+      ? (
+      <details className='staking--Account-detail'>
+        <summary>{t('Nominators ({{count}})', {
+          replace: {
+            count: myNominators.length
+          }
+        })}</summary>
+        {myNominators.map((accountId) =>
+          <AddressMini
+            key={accountId.toString()}
+            value={accountId}
+            withBalance
+          />
+        )}
+      </details>
+    )
+    : undefined;
+
+    return (
+      <article key={address}>
+        <AddressRow
+          balance={balanceArray(address)}
+          name={this.getDisplayName()}
+          value={address}
+          withCopy={false}
+          withNonce={false}
+        >
+          {children}
+        </AddressRow>
+        <div
+          className={['blockNumber', isAuthor ? 'latest' : ''].join(' ')}
+          key='lastBlock'
+        >
+          {isAuthor ? lastBlock : ''}
+        </div>
+      </article>
+    );
+  }
+}
+
+export default withMulti(
+  Address,
+  translate
+);
--- a/packages/app-staking/src/Overview/CurrentList.tsx
+++ b/packages/app-staking/src/Overview/CurrentList.tsx
@ -4,22 +4,23 @@

 import { DerivedBalancesMap } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/ui-app/types';
+import { Nominators } from '../types';

 import React from 'react';
 import { AccountId, Balance, HeaderExtended } from '@polkadot/types';
-import { withCall, withMulti } from '@polkadot/ui-api/with';
-import { AddressMini, AddressRow } from '@polkadot/ui-app';
+import { withCalls, withMulti } from '@polkadot/ui-api/with';
 import { formatNumber } from '@polkadot/ui-util';
-import keyring from '@polkadot/ui-keyring';

 import translate from '../translate';
+import Address from './Address';

 type Props = I18nProps & {
  balances: DerivedBalancesMap,
  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
  chain_subscribeNewHead?: HeaderExtended,
  current: Array<string>,
-  next: Array<string>
+  next: Array<string>,
+  nominators: Nominators
 };

 class CurrentList extends React.PureComponent<Props> {
@ -64,18 +65,8 @@ class CurrentList extends React.PureComponent<Props> {
    );
  }

-  private getDisplayName (address: string, defaultName: string) {
-    const pair = keyring.getAccount(address).isValid()
-      ? keyring.getAccount(address)
-      : keyring.getAddress(address);
-
-    return pair.isValid()
-      ? pair.getMeta().name
-      : defaultName;
-  }
-
  private renderColumn (addresses: Array<string>, defaultName: string) {
-    const { balances, balanceArray, chain_subscribeNewHead, t } = this.props;
+    const { balances, balanceArray, chain_subscribeNewHead, nominators, t } = this.props;

    if (addresses.length === 0) {
      return (
@ -93,47 +84,18 @@ class CurrentList extends React.PureComponent<Props> {

    return (
      <div>
-        {addresses.map((address) => {
-          const nominators = (balances[address] || {}).nominators || [];
-          const children = nominators.length
-            ? (
-            <details>
-              <summary>{t('Nominators ({{count}})', {
-                replace: {
-                  count: nominators.length
-                }
-              })}</summary>
-              {nominators.map(({ accountId }) =>
-                <AddressMini
-                  key={accountId.toString()}
-                  value={accountId}
-                  withBalance
-                />
-              )}
-            </details>
-          )
-          : undefined;
-
-          return (
-            <article key={address}>
-              <AddressRow
-                balance={balanceArray(address)}
-                name={this.getDisplayName(address, defaultName)}
-                value={address}
-                withCopy={false}
-                withNonce={false}
-              >
-                {children}
-              </AddressRow>
-              <div
-                className={['blockNumber', lastAuthor === address ? 'latest' : ''].join(' ')}
-                key='lastBlock'
-              >
-                {lastAuthor === address ? lastBlock : ''}
-              </div>
-            </article>
-          );
-        })}
+        {addresses.map((address) => (
+          <Address
+            address={address}
+            balances={balances}
+            balanceArray={balanceArray}
+            defaultName={defaultName}
+            isAuthor={address === lastAuthor}
+            key={address}
+            lastBlock={lastBlock}
+            nominators={nominators}
+          />
+        ))}
      </div>
    );
  }
@ -142,5 +104,7 @@ class CurrentList extends React.PureComponent<Props> {
 export default withMulti(
  CurrentList,
  translate,
-  withCall('derive.chain.subscribeNewHead')
+  withCalls<Props>(
+    'derive.chain.subscribeNewHead'
+  )
 );
--- a/packages/app-staking/src/Overview/index.tsx
+++ b/packages/app-staking/src/Overview/index.tsx
@ -19,7 +19,7 @@ const ZERO = new Balance(0);

 export default class Overview extends React.PureComponent<Props> {
  render () {
-    const { balances, balanceArray, intentions, validators } = this.props;
+    const { balances, balanceArray, intentions, nominators, validators } = this.props;
    const intentionsSorted = this.sortByBalance(
      intentions.filter((address) =>
        !validators.includes(address)
@ -39,6 +39,7 @@ export default class Overview extends React.PureComponent<Props> {
          balanceArray={balanceArray}
          current={validatorsSorted}
          next={intentionsSorted}
+          nominators={nominators}
        />
      </div>
    );
--- a/packages/app-staking/src/index.tsx
+++ b/packages/app-staking/src/index.tsx
@ -69,7 +69,9 @@ class App extends React.PureComponent<Props, State> {
        accountId.toString()
      ),
      nominators: staking_nominators[0].reduce((result, accountId, index) => {
-        result[accountId.toString()] = staking_nominators[1][index].map((accountId) => accountId.toString());
+        result[accountId.toString()] = staking_nominators[1][index].map((accountId) =>
+          accountId.toString()
+        );

        return result;
      }, {} as Nominators),