Highlight validator stashes

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

@@ -92,7 +92,7 @@ class Address extends React.PureComponent<Props, State> {
       : keyring.getAddress(stashId);
 
     return pair.isValid()
-      ? pair.getMeta().name
+      ? (pair.getMeta().name || defaultName)
       : defaultName;
   }
 

packages/ui-app/src/AddressMini.tsx

@@ -7,7 +7,6 @@ import { BareProps } from './types';
 import BN from 'bn.js';
 import React from 'react';
 import { AccountId, AccountIndex, Address, Balance } from '@polkadot/types';
-import { withCall, withMulti } from '@polkadot/ui-api';
 
 import { classes, toShortAddress } from './util';
 import BalanceDisplay from './Balance';
@@ -18,24 +17,20 @@ type Props = BareProps & {
   children?: React.ReactNode,
   isPadded?: boolean,
   isShort?: boolean,
-  session_validators?: Array<AccountId>,
   value?: AccountId | AccountIndex | Address | string,
   withAddress?: boolean,
   withBalance?: boolean
 };
 
-class AddressMini extends React.PureComponent<Props> {
+export default class AddressMini extends React.PureComponent<Props> {
   render () {
-    const { children, className, isPadded = true, session_validators, style, value } = this.props;
+    const { children, className, isPadded = true, style, value } = this.props;
 
     if (!value) {
       return null;
     }
 
     const address = value.toString();
-    const isValidator = (session_validators || []).find((validator) =>
-      validator.toString() === address
-    );
 
     return (
       <div
@@ -44,7 +39,6 @@ class AddressMini extends React.PureComponent<Props> {
       >
         <div className='ui--AddressMini-info'>
           <IdentityIcon
-            isHighlight={!!isValidator}
             size={24}
             value={address}
           />
@@ -84,8 +78,3 @@ class AddressMini extends React.PureComponent<Props> {
     );
   }
 }
-
-export default withMulti(
-  AddressMini,
-  withCall('query.session.validators')
-);

packages/ui-app/src/AddressSummary.tsx

@@ -149,7 +149,7 @@ class AddressSummary extends React.PureComponent<Props> {
   }
 
   protected renderIcon (className: string = 'ui--AddressSummary-icon', size?: number) {
-    const { accounts_idAndIndex = [], identIconSize = 96, session_validators, value, withIcon = true } = this.props;
+    const { accounts_idAndIndex = [], identIconSize = 96, value, withIcon = true } = this.props;
 
     if (!withIcon) {
       return null;
@@ -157,16 +157,12 @@ class AddressSummary extends React.PureComponent<Props> {
 
     const [_accountId] = accounts_idAndIndex;
     const accountId = (_accountId || value || '').toString();
-    const isValidator = (session_validators || []).find((validator) =>
-      validator.toString() === accountId
-    );
 
     return (
       <IdentityIcon
         className={className}
-        isHighlight={!!isValidator}
         size={size || identIconSize}
-        value={value ? value.toString() : DEFAULT_ADDR}
+        value={accountId || DEFAULT_ADDR}
       />
     );
   }
@@ -212,7 +208,6 @@ export {
 
 export default translate(
   withCalls<Props>(
-    ['derive.accounts.idAndIndex', { paramName: 'value' }],
-    'query.session.validators'
+    ['derive.accounts.idAndIndex', { paramName: 'value' }]
   )(AddressSummary)
 );

packages/ui-app/src/IdentityIcon.tsx

@@ -8,8 +8,8 @@ import { QueueProps, QueueAction$Add } from './Status/types';
 import { I18nProps } from './types';
 
 import React from 'react';
-import { AccountId } from '@polkadot/types';
-import { withCall } from '@polkadot/ui-api/with';
+import { AccountId, Option } from '@polkadot/types';
+import { withCalls } from '@polkadot/ui-api/with';
 import BaseIdentityIcon from '@polkadot/ui-identicon';
 
 import { QueueConsumer } from './Status/Context';
@@ -20,7 +20,14 @@ type CopyProps = IdentityProps & I18nProps & {
 };
 
 type IconProps = ApiProps & IdentityProps & {
-  session_validators?: Array<AccountId>
+  session_validators?: Array<AccountId>,
+  staking_bonded?: Option<AccountId>
+};
+
+type Props = IconProps & IdentityProps;
+
+type State = {
+  isValidator: boolean
 };
 
 class CopyIcon extends React.PureComponent<CopyProps> {
@@ -53,20 +60,35 @@ class CopyIcon extends React.PureComponent<CopyProps> {
 
 const CopyIconI18N = translate(CopyIcon);
 
-class IdentityIcon extends React.PureComponent<IconProps & IdentityProps> {
-  render () {
-    const { session_validators = [], value } = this.props;
+class IdentityIcon extends React.PureComponent<Props, State> {
+  state: State = {
+    isValidator: false
+  };
 
-    const address = (value || '').toString();
-    const isValidator = (session_validators || []).find((validator) =>
-      validator.toString() === address
+  static getDerivedStateFromProps ({ session_validators = [], staking_bonded, value }: Props, prevState: State): State | null {
+    const address = value
+      ? value.toString()
+      : null;
+    const bonded = staking_bonded && staking_bonded.isSome
+      ? staking_bonded.unwrap().toString()
+      : null;
+    const isValidator = !!session_validators.find((validator) =>
+      [address, bonded].includes(validator.toString())
     );
 
+    return prevState.isValidator !== isValidator
+      ? { isValidator }
+      : null;
+  }
+
+  render () {
+    const { isValidator } = this.state;
+
     return (
       <QueueConsumer>
         {({ queueAction }: QueueProps) =>
           <CopyIconI18N
-            isHighlight={!!isValidator}
+            isHighlight={isValidator}
             {...this.props}
             queueAction={queueAction}
           />
@@ -76,4 +98,7 @@ class IdentityIcon extends React.PureComponent<IconProps & IdentityProps> {
   }
 }
 
-export default withCall('query.session.validators')(IdentityIcon);
+export default withCalls<Props>(
+  'query.session.validators',
+  ['query.staking.bonded', { paramName: 'value' }]
+)(IdentityIcon);