Set session key mismatch (#1730)

* Set session key mismatch

* Cleanup 0 render

* 0 checks

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

@@ -23,9 +23,12 @@ const EMPTY_PROOF = new Uint8Array();
 
 function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t }: Props): React.ReactElement<Props> | null {
   const { isSubstrateV2 } = useContext(ApiContext);
-  const [ed25519, setEd25519] = useState<string | null>(null);
-  const [ed25519Error, setEd25519Error] = useState<string | null>(sessionIds[0] || controllerId);
-  const [keys, setKeys] = useState<string | null>(null);
+  const [keysError, setKeysError] = useState<string | null>(null);
+  const [keys, setKeys] = useState<string | null>(
+    isSubstrateV2
+      ? null
+      : sessionIds[0] || controllerId
+  );
 
   if (!isOpen) {
     return null;
@@ -33,7 +36,7 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
 
   const hasError = isSubstrateV2
     ? !keys
-    : (!ed25519 || !!ed25519Error);
+    : (!keys || !!keysError);
 
   return (
     <Modal
@@ -67,14 +70,15 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
               <InputAddress
                 className='medium'
                 help={t('Changing the key only takes effect at the start of the next session. If validating, it must be an ed25519 key.')}
+                isError={!!keysError}
                 label={t('Session key (ed25519)')}
-                onChange={setEd25519}
-                value={ed25519}
+                onChange={setKeys}
+                value={keys}
               />
               <ValidationSessionKey
                 controllerId={controllerId}
-                onError={setEd25519Error}
-                sessionId={ed25519}
+                onError={setKeysError}
+                sessionId={keys}
                 stashId={stashId}
               />
             </>
@@ -100,7 +104,7 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
             params={
               isSubstrateV2
                 ? [keys, EMPTY_PROOF]
-                : [ed25519]
+                : [keys]
             }
             tx={
               isSubstrateV2

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

@@ -20,7 +20,7 @@ import InjectKeys from './InjectKeys';
 import Nominate from './Nominate';
 import SetControllerAccount from './SetControllerAccount';
 import SetRewardDestination from './SetRewardDestination';
-import SetSessionAccount from './SetSessionAccount';
+import SetSessionKey from './SetSessionKey';
 import translate from '../../translate';
 import Unbond from './Unbond';
 import Validate from './Validate';
@@ -95,7 +95,7 @@ class Account extends React.PureComponent<Props, State> {
     }
 
     const { controllerId, nextSessionIds, nominators, online, offline, rewardDestination, sessionIds, stakers, stakingLedger, stashId, validatorPrefs } = staking_info;
-    const isStashNominating = nominators && nominators.length !== 0;
+    const isStashNominating = nominators && !!nominators.length;
     const _stashId = toIdString(stashId);
     const isStashValidating = !!allStashes && !!_stashId && allStashes.includes(_stashId);
 
@@ -175,7 +175,7 @@ class Account extends React.PureComponent<Props, State> {
         <div className={className}>
           <div className='staking--Accounts'>
             {this.renderControllerAccount()}
-            {!isSubstrateV2 && sessionIds.length && (
+            {!isSubstrateV2 && !!sessionIds.length && (
               <div className='staking--Account-detail actions'>
                 <AddressRow
                   label={t('session')}
@@ -208,7 +208,7 @@ class Account extends React.PureComponent<Props, State> {
                 withValidatorPrefs={isStashValidating}
               />
             </div>
-            {nominees && nominees.length !== 0 && (
+            {nominees && !!nominees.length && (
               <div className='staking--Account-Nominee'>
                 <label className='staking--label'>{t('nominating')}</label>
                 {nominees.map((nomineeId, index): React.ReactNode => (
@@ -502,7 +502,7 @@ class Account extends React.PureComponent<Props, State> {
     }
 
     return (
-      <SetSessionAccount
+      <SetSessionKey
         controllerId={controllerId}
         isOpen={isSetSessionAccountOpen}
         onClose={this.toggleSetSessionAccount}

packages/react-components/src/InputAddress/index.tsx

@@ -9,10 +9,11 @@ import { Option } from './types';
 import React from 'react';
 import store from 'store';
 import styled from 'styled-components';
+import { withMulti, withObservable } from '@polkadot/react-api';
 import keyring from '@polkadot/ui-keyring';
 import keyringOption from '@polkadot/ui-keyring/options';
 import createKeyringItem from '@polkadot/ui-keyring/options/item';
-import { withMulti, withObservable } from '@polkadot/react-api';
+import { isUndefined } from '@polkadot/util';
 
 import { classes, getAddressName } from '../util';
 import addressToAddress from '../util/toAddress';
@@ -52,6 +53,7 @@ interface State {
 
 const STORAGE_KEY = 'options:InputAddress';
 const DEFAULT_TYPE = 'all';
+const MULTI_DEFAULT: string[] = [];
 
 function transformToAddress (value: string | Uint8Array): string | null {
   try {
@@ -122,7 +124,6 @@ class InputAddress extends React.PureComponent<Props, State> {
         value: Array.isArray(value)
           ? value.map(addressToAddress)
           : (addressToAddress(value) || undefined)
-
       };
     } catch (error) {
       return null;
@@ -158,7 +159,7 @@ class InputAddress extends React.PureComponent<Props, State> {
             ? optionsAll[type]
             : []
       );
-    const _defaultValue = (isMultiple || value !== undefined)
+    const _defaultValue = (isMultiple || !isUndefined(value))
       ? undefined
       : actualValue;
 
@@ -188,7 +189,7 @@ class InputAddress extends React.PureComponent<Props, State> {
         style={style}
         value={
           isMultiple && !value
-            ? []
+            ? MULTI_DEFAULT
             : value
         }
         withEllipsis={withEllipsis}