diff --git a/packages/app-staking/src/StakeList/Nominating.tsx b/packages/app-staking/src/StakeList/Nominating.tsx index 11ea31fe14..8cbad6ec89 100644 --- a/packages/app-staking/src/StakeList/Nominating.tsx +++ b/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 { this.state = { isNomineeValid: false, + isAddressFormatValid: false, nominee: '' }; } @@ -86,7 +91,7 @@ class Nominating extends React.PureComponent { renderContent () { const { t } = this.props; - const { isNomineeValid, nominee } = this.state; + const { isNomineeValid, isAddressFormatValid, nominee } = this.state; return [ @@ -104,15 +109,44 @@ class Nominating extends React.PureComponent { onChange={this.onChangeNominee} value={nominee} /> + { + !isNomineeValid + ? + : null + } + { + !isAddressFormatValid + ? + : null + } ]; } 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 }); } diff --git a/packages/ui-app/src/InputError.tsx b/packages/ui-app/src/InputError.tsx new file mode 100644 index 0000000000..1f9dd82296 --- /dev/null +++ b/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 = ( +
 
+); + +export default class InputError extends React.PureComponent { + render () { + const { className, label = defaultLabel, style } = this.props; + + return ( +
+ +
+ ); + } +}