Render validators based on stashId or address (#1525)

* Render validators based on stashId or address

* Fix waiting count

* Start call subscriprion  with setTimeout

* Remove stray debug log

* Ignore controller error when setting

* Update Kusama chain name

packages/app-staking/src/Actions/Account/SetControllerAccount.tsx

@@ -6,9 +6,11 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Button, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { withMulti } from '@polkadot/react-api';
+import { withCalls, withMulti } from '@polkadot/react-api';
+import { Text } from '@polkadot/types';
 
 import translate from '../../translate';
+import { NO_VALIDATION_CHAINS } from '../NewStake';
 import InputValidationController from '../Account/InputValidationController';
 
 interface Props extends I18nProps {
@@ -16,11 +18,13 @@ interface Props extends I18nProps {
   isValidating?: boolean;
   onClose: () => void;
   stashId: string;
+  systemChain?: Text;
 }
 
 interface State {
   controllerError: string | null;
   controllerId: string | null;
+  ignoreController: boolean;
 }
 
 class SetControllerAccount extends TxComponent<Props, State> {
@@ -29,14 +33,25 @@ class SetControllerAccount extends TxComponent<Props, State> {
 
     this.state = {
       controllerError: null,
-      controllerId: null
+      controllerId: null,
+      ignoreController: false
+    };
+  }
+
+  public static getDerivedStateFromProps ({ systemChain }: Props): Pick<State, any> | null {
+    if (!systemChain) {
+      return null;
+    }
+
+    return {
+      ignoreController: NO_VALIDATION_CHAINS.includes(systemChain.toString())
     };
   }
 
   public render (): React.ReactNode {
     const { defaultControllerId, onClose, stashId, t } = this.props;
-    const { controllerError, controllerId } = this.state;
-    const canSubmit = !controllerError && !!controllerId && (defaultControllerId !== controllerId);
+    const { controllerError, controllerId, ignoreController } = this.state;
+    const canSubmit = ignoreController || (!controllerError && !!controllerId && (defaultControllerId !== controllerId));
 
     return (
       <Modal
@@ -72,7 +87,7 @@ class SetControllerAccount extends TxComponent<Props, State> {
 
   private renderContent (): React.ReactNode {
     const { defaultControllerId, stashId, t } = this.props;
-    const { controllerId, controllerError } = this.state;
+    const { controllerId, controllerError, ignoreController } = this.state;
 
     return (
       <>
@@ -91,7 +106,7 @@ class SetControllerAccount extends TxComponent<Props, State> {
             className='medium'
             defaultValue={defaultControllerId}
             help={t('The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.')}
-            isError={!!controllerError}
+            isError={!ignoreController && !!controllerError}
             label={t('controller account')}
             onChange={this.onChangeController}
             type='account'
@@ -136,5 +151,8 @@ class SetControllerAccount extends TxComponent<Props, State> {
 
 export default withMulti(
   SetControllerAccount,
-  translate
+  translate,
+  withCalls<Props>(
+    ['rpc.system.chain', { propName: 'systemChain' }]
+  )
 );

packages/app-staking/src/Actions/NewStake.tsx

@@ -32,7 +32,7 @@ interface State {
   stashId: string | null;
 }
 
-const NO_VALIDATION_CHAINS = ['Development', 'Kusama'];
+export const NO_VALIDATION_CHAINS = ['Development', 'Kusama CC1'];
 
 class NewStake extends TxComponent<Props, State> {
   public state: State;

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

@@ -79,7 +79,7 @@ class Address extends React.PureComponent<Props, State> {
   }
 
   public render (): React.ReactNode {
-    const { className, defaultName, filter } = this.props;
+    const { address, className, defaultName, filter } = this.props;
     const { controllerId, stakers, stashId } = this.state;
     const bonded = stakers && !stakers.own.isEmpty
       ? [stakers.own.unwrap(), stakers.total.unwrap().sub(stakers.own.unwrap())]
@@ -100,7 +100,7 @@ class Address extends React.PureComponent<Props, State> {
         defaultName={defaultName}
         iconInfo={this.renderOffline()}
         key={stashId || controllerId || undefined}
-        value={stashId}
+        value={stashId || address}
         withBalance={{ bonded }}
       >
         {this.renderNominators()}
@@ -115,7 +115,7 @@ class Address extends React.PureComponent<Props, State> {
 
     return (
       <div className='staking--Address-info'>
-        {isAuthor && stashId
+        {isAuthor
           ? <div className={classes(isSubstrateV2 ? 'blockNumberV2' : 'blockNumberV1')}>#{lastBlock}</div>
           : null
         }

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

@@ -65,13 +65,13 @@ class CurrentList extends React.PureComponent<Props, State> {
             emptyText={t('No addresses found')}
             headerText={t('validators')}
           >
-            {this.renderColumn(currentValidatorsControllersV1OrStashesV2, t('validator (stash)'))}
+            {this.renderColumn(currentValidatorsControllersV1OrStashesV2, t('validator'))}
           </Column>
           <Column
             emptyText={t('No addresses found')}
             headerText={t('next up')}
           >
-            {this.renderColumn(next, t('intention (stash)'))}
+            {this.renderColumn(next, t('intention'))}
           </Column>
         </Columar>
       </div>

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

@@ -28,7 +28,7 @@ class Summary extends React.PureComponent<Props> {
     const { className, allControllers, lastAuthor, lastBlock, style, t, staking_validatorCount, currentValidatorsControllersV1OrStashesV2 } = this.props;
     const waiting = allControllers.length > currentValidatorsControllersV1OrStashesV2.length
       ? (allControllers.length - currentValidatorsControllersV1OrStashesV2.length)
-      : 0;
+      : allControllers.length;
 
     return (
       <SummaryBox

packages/react-api/src/with/call.tsx

@@ -90,10 +90,14 @@ export default function withCall<P extends ApiProps> (
           }
         }, 500);
 
-        this
-          .subscribe(this.getParams(this.props))
-          .then(NOOP)
-          .catch(NOOP);
+        // The attachment takes time when a lot is available, set a timeout
+        // to first handle the current queue before subscribing
+        setTimeout((): void => {
+          this
+            .subscribe(this.getParams(this.props))
+            .then(NOOP)
+            .catch(NOOP);
+        }, 0);
       }
 
       public componentWillUnmount (): void {