Add store for AddAddress (#3819)

* WIP

* Updated tests

* Final round of fixes

* Header update

js/src/ui/Form/Input/input.js

@@ -18,6 +18,8 @@ import React, { Component, PropTypes } from 'react';
 import { TextField } from 'material-ui';
 import { noop } from 'lodash';
 
+import { nodeOrStringProptype } from '~/util/proptypes';
+
 import CopyToClipboard from '../../CopyToClipboard';
 
 import styles from './input.css';
@@ -41,18 +43,21 @@ const NAME_ID = ' ';
 
 export default class Input extends Component {
   static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    readOnly: PropTypes.bool,
     allowCopy: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.bool
     ]),
-    floatCopy: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
     error: PropTypes.string,
-    hint: PropTypes.string,
-    label: PropTypes.string,
+    readOnly: PropTypes.bool,
+    floatCopy: PropTypes.bool,
+    hint: nodeOrStringProptype(),
+    hideUnderline: PropTypes.bool,
+    label: nodeOrStringProptype(),
+    max: PropTypes.any,
+    min: PropTypes.any,
     multiLine: PropTypes.bool,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
@@ -61,26 +66,26 @@ export default class Input extends Component {
     rows: PropTypes.number,
     type: PropTypes.string,
     submitOnBlur: PropTypes.bool,
-    hideUnderline: PropTypes.bool,
+    style: PropTypes.object,
     value: PropTypes.oneOfType([
-      PropTypes.number, PropTypes.string
-    ]),
-    min: PropTypes.any,
-    max: PropTypes.any,
-    style: PropTypes.object
+      PropTypes.number,
+      PropTypes.string
+    ])
   };
 
   static defaultProps = {
-    submitOnBlur: true,
-    readOnly: false,
     allowCopy: false,
     hideUnderline: false,
     floatCopy: false,
+    readOnly: false,
+    submitOnBlur: true,
     style: {}
   }
 
   state = {
-    value: typeof this.props.value === 'undefined' ? '' : this.props.value
+    value: typeof this.props.value === 'undefined'
+      ? ''
+      : this.props.value
   }
 
   componentWillReceiveProps (newProps) {
@@ -114,38 +119,29 @@ export default class Input extends Component {
           autoComplete='off'
           className={ className }
           errorText={ error }
-
           floatingLabelFixed
           floatingLabelText={ label }
-
+          fullWidth
           hintText={ hint }
           id={ NAME_ID }
           inputStyle={ inputStyle }
-          fullWidth
-
           max={ max }
           min={ min }
-
           multiLine={ multiLine }
           name={ NAME_ID }
-
           onBlur={ this.onBlur }
           onChange={ this.onChange }
           onKeyDown={ this.onKeyDown }
           onPaste={ this.onPaste }
-
           readOnly={ readOnly }
           rows={ rows }
           style={ textFieldStyle }
           type={ type || 'text' }
-
           underlineDisabledStyle={ UNDERLINE_DISABLED }
           underlineStyle={ readOnly ? UNDERLINE_READONLY : UNDERLINE_NORMAL }
           underlineFocusStyle={ readOnly ? { display: 'none' } : null }
           underlineShow={ !hideUnderline }
-
-          value={ value }
-        >
+          value={ value }>
           { children }
         </TextField>
       </div>
@@ -159,11 +155,14 @@ export default class Input extends Component {
     if (!allowCopy) {
       return null;
     }
+
     const text = typeof allowCopy === 'string'
       ? allowCopy
       : value;
 
-    const style = hideUnderline ? {} : { position: 'relative', top: '2px' };
+    const style = hideUnderline
+      ? {}
+      : { position: 'relative', top: '2px' };
 
     return (
       <div className={ styles.copy } style={ style }>

js/src/ui/Form/InputAddress/inputAddress.js

@@ -18,28 +18,30 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import Input from '../Input';
-import IdentityIcon from '../../IdentityIcon';
 import util from '~/api/util';
+import { nodeOrStringProptype } from '~/util/proptypes';
+
+import IdentityIcon from '../../IdentityIcon';
+import Input from '../Input';
 
 import styles from './inputAddress.css';
 
 class InputAddress extends Component {
   static propTypes = {
+    accountsInfo: PropTypes.object,
+    allowCopy: PropTypes.bool,
     className: PropTypes.string,
     disabled: PropTypes.bool,
     error: PropTypes.string,
-    label: PropTypes.string,
-    hint: PropTypes.string,
-    value: PropTypes.string,
-    accountsInfo: PropTypes.object,
-    tokens: PropTypes.object,
-    text: PropTypes.bool,
+    hideUnderline: PropTypes.bool,
+    hint: nodeOrStringProptype(),
+    label: nodeOrStringProptype(),
     onChange: PropTypes.func,
     onSubmit: PropTypes.func,
-    hideUnderline: PropTypes.bool,
-    allowCopy: PropTypes.bool,
-    small: PropTypes.bool
+    small: PropTypes.bool,
+    text: PropTypes.bool,
+    tokens: PropTypes.object,
+    value: PropTypes.string
   };
 
   static defaultProps = {
@@ -49,8 +51,8 @@ class InputAddress extends Component {
   };
 
   render () {
-    const { className, disabled, error, label, hint, value, text } = this.props;
-    const { small, allowCopy, hideUnderline, onSubmit, accountsInfo, tokens } = this.props;
+    const { className, disabled, error, hint, label, text, value } = this.props;
+    const { accountsInfo, allowCopy, hideUnderline, onSubmit, small, tokens } = this.props;
 
     const account = accountsInfo[value] || tokens[value];
 
@@ -68,17 +70,20 @@ class InputAddress extends Component {
     return (
       <div className={ containerClasses.join(' ') }>
         <Input
+          allowCopy={ allowCopy && (disabled ? value : false) }
           className={ classes.join(' ') }
           disabled={ disabled }
-          label={ label }
-          hint={ hint }
           error={ error }
-          value={ text && account ? account.name : value }
+          hideUnderline={ hideUnderline }
+          hint={ hint }
+          label={ label }
           onChange={ this.handleInputChange }
           onSubmit={ onSubmit }
-          allowCopy={ allowCopy && (disabled ? value : false) }
-          hideUnderline={ hideUnderline }
-        />
+          value={
+            text && account
+              ? account.name
+              : value
+          } />
         { icon }
       </div>
     );
@@ -128,8 +133,8 @@ class InputAddress extends Component {
 }
 
 function mapStateToProps (state) {
-  const { accountsInfo } = state.personal;
   const { tokens } = state.balances;
+  const { accountsInfo } = state.personal;
 
   return {
     accountsInfo,

js/src/ui/Modal/modal.js

@@ -42,11 +42,11 @@ class Modal extends Component {
     className: PropTypes.string,
     compact: PropTypes.bool,
     current: PropTypes.number,
-    waiting: PropTypes.array,
+    settings: PropTypes.object.isRequired,
     steps: PropTypes.array,
     title: nodeOrStringProptype(),
     visible: PropTypes.bool.isRequired,
-    settings: PropTypes.object.isRequired
+    waiting: PropTypes.array
   }
 
   render () {
@@ -55,23 +55,23 @@ class Modal extends Component {
     const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
     const header = (
       <Title
-        current={ current }
         busy={ busy }
-        waiting={ waiting }
+        current={ current }
         steps={ steps }
-        title={ title } />
+        title={ title }
+        waiting={ waiting } />
     );
     const classes = `${styles.dialog} ${className}`;
 
     return (
       <Dialog
-        className={ classes }
         actions={ actions }
+        actionsContainerClassName={ styles.actions }
         actionsContainerStyle={ ACTIONS_STYLE }
         autoDetectWindowHeight={ false }
         autoScrollBodyContent
-        actionsContainerClassName={ styles.actions }
         bodyClassName={ styles.body }
+        className={ classes }
         contentClassName={ styles.content }
         contentStyle={ contentStyle }
         modal
@@ -82,7 +82,12 @@ class Modal extends Component {
         style={ DIALOG_STYLE }
         title={ header }
         titleStyle={ TITLE_STYLE }>
-        <Container light compact={ compact } style={ { transition: 'none' } }>
+        <Container
+          compact={ compact }
+          light
+          style={
+            { transition: 'none' }
+          }>
           { children }
         </Container>
       </Dialog>