fix #266 - helpful error message when input address is not in intentions list (#338)

* helpful error message when input address is not in intentions list

* check address format is valid, set error msg if not

* fix: state validate

* fix: translatable strings, address format validation from decoded address

* Import Labelled Component for error reporting

* Translatable labelled error reporting components

* handle assertion errors when decoding nominee address

* create ui-app general InputError component

* Use Input Error component to format input errors

* edits to setting state for readability and DRYness

* edits for style guidelines, remove 'any' types

packages/app-staking/src/StakeList/Nominating.tsx

@@ -9,9 +9,12 @@ import React from 'react';
 import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import Modal from '@polkadot/ui-app/Modal';
+import InputError from '@polkadot/ui-app/InputError';
 
 import translate from '../translate';
 
+import addressDecode from '@polkadot/util-keyring/address/decode';
+
 type Props = I18nProps & {
   isOpen: boolean,
   onClose: () => void,
@@ -21,6 +24,7 @@ type Props = I18nProps & {
 
 type State = {
   isNomineeValid: boolean,
+  isAddressFormatValid: boolean,
   nominee: string
 };
 
@@ -32,6 +36,7 @@ class Nominating extends React.PureComponent<Props> {
 
     this.state = {
       isNomineeValid: false,
+      isAddressFormatValid: false,
       nominee: ''
     };
   }
@@ -86,7 +91,7 @@ class Nominating extends React.PureComponent<Props> {
 
   renderContent () {
     const { t } = this.props;
-    const { isNomineeValid, nominee } = this.state;
+    const { isNomineeValid, isAddressFormatValid, nominee } = this.state;
 
     return [
       <Modal.Header key='header'>
@@ -104,15 +109,44 @@ class Nominating extends React.PureComponent<Props> {
           onChange={this.onChangeNominee}
           value={nominee}
         />
+        {
+          !isNomineeValid
+            ? <InputError
+                label={t('nominator.error', {
+                  defaultValue: 'The address you input is not intending to stake, and is therefore invalid. \
+                                Please try again with a different address.'
+                })} />
+            : null
+        }
+        {
+          !isAddressFormatValid
+            ? <InputError
+                label={t('nominator.error', {
+                  defaultValue: 'The address you input does not conform to a recognized address format. \
+                            Please make sure youve entered the address correctly and try again.'
+                })} />
+            : null
+        }
       </Modal.Content>
     ];
   }
 
   private onChangeNominee = (nominee: string) => {
     const { intentions } = this.props;
+    let publicKey;
+
+    try {
+      publicKey = addressDecode(nominee);
+    } catch (err) {
+      console.error(err);
+      this.setState({
+        isAddressFormatValid: false
+      });
+    }
 
     this.setState({
       isNomineeValid: intentions.includes(nominee),
+      isAddressFormatValid: publicKey && publicKey.length === 32,
       nominee
     });
   }

packages/ui-app/src/InputError.tsx

@@ -0,0 +1,33 @@
+// Copyright 2017-2018 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+import { BareProps } from './types';
+
+import React from 'react';
+import Label from 'semantic-ui-react/dist/commonjs/elements/Label/Label';
+
+import classes from './util/classes';
+
+type Props = BareProps & {
+  label?: React.ReactNode
+};
+
+const defaultLabel: React.ReactNode = (
+  <div>&nbsp;</div>
+);
+
+export default class InputError extends React.PureComponent<Props> {
+  render () {
+    const { className, label = defaultLabel, style } = this.props;
+
+    return (
+      <div
+        className={classes('ui--InputError', className)}
+        style={style}
+      >
+        <Label color='red' pointing='left'>{label}</Label>
+      </div>
+    );
+  }
+}