merge master into sms-verification-modal

js/src/ui/Actionbar/Import/import.js

@@ -29,6 +29,8 @@ const initialState = {
   show: false,
   validate: false,
   validationBody: null,
+  error: false,
+  errorText: '',
   content: ''
 };
 
@@ -65,7 +67,7 @@ export default class ActionbarImport extends Component {
 
   renderModal () {
     const { title, renderValidation } = this.props;
-    const { show, step } = this.state;
+    const { show, step, error } = this.state;
 
     if (!show) {
       return null;
@@ -73,7 +75,7 @@ export default class ActionbarImport extends Component {
 
     const hasSteps = typeof renderValidation === 'function';
 
-    const steps = hasSteps ? [ 'select a file', 'validate' ] : null;
+    const steps = hasSteps ? [ 'select a file', error ? 'error' : 'validate' ] : null;
 
     return (
       <Modal
@@ -89,7 +91,7 @@ export default class ActionbarImport extends Component {
   }
 
   renderActions () {
-    const { validate } = this.state;
+    const { validate, error } = this.state;
 
     const cancelBtn = (
       <Button
@@ -100,6 +102,10 @@ export default class ActionbarImport extends Component {
       />
     );
 
+    if (error) {
+      return [ cancelBtn ];
+    }
+
     if (validate) {
       const confirmBtn = (
         <Button
@@ -117,7 +123,15 @@ export default class ActionbarImport extends Component {
   }
 
   renderBody () {
-    const { validate } = this.state;
+    const { validate, errorText, error } = this.state;
+
+    if (error) {
+      return (
+        <div>
+          <p>An error occured: { errorText }</p>
+        </div>
+      );
+    }
 
     if (validate) {
       return this.renderValidation();
@@ -169,10 +183,20 @@ export default class ActionbarImport extends Component {
         return this.onCloseModal();
       }
 
+      const validationBody = renderValidation(content);
+
+      if (validationBody && validationBody.error) {
+        return this.setState({
+          step: 1,
+          error: true,
+          errorText: validationBody.error
+        });
+      }
+
       this.setState({
         step: 1,
         validate: true,
-        validationBody: renderValidation(content),
+        validationBody,
         content
       });
     };

js/src/ui/CopyToClipboard/copyToClipboard.css

@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.wrapper {
+  display: inline-block;
+}
+
+.data {
+  font-family: monospace;
+}

js/src/ui/CopyToClipboard/copyToClipboard.js

@@ -16,15 +16,18 @@
 
 import React, { Component, PropTypes } from 'react';
 import { IconButton } from 'material-ui';
+import Snackbar from 'material-ui/Snackbar';
 import Clipboard from 'react-copy-to-clipboard';
 import CopyIcon from 'material-ui/svg-icons/content/content-copy';
 import Theme from '../Theme';
+import { darkBlack } from 'material-ui/styles/colors';
 const { textColor, disabledTextColor } = Theme.flatButton;
 
+import styles from './copyToClipboard.css';
+
 export default class CopyToClipboard extends Component {
   static propTypes = {
     data: PropTypes.string.isRequired,
-    label: PropTypes.string,
     onCopy: PropTypes.func,
     size: PropTypes.number, // in px
     cooldown: PropTypes.number // in ms
@@ -32,32 +35,46 @@ export default class CopyToClipboard extends Component {
 
   static defaultProps = {
     className: '',
-    label: 'copy to clipboard',
     onCopy: () => {},
     size: 16,
     cooldown: 1000
   };
 
   state = {
-    copied: false
+    copied: false,
+    timeout: null
   };
 
+  componentWillUnmount () {
+    const { timeoutId } = this.state;
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+    }
+  }
+
   render () {
-    const { data, label, size } = this.props;
+    const { data, size } = this.props;
     const { copied } = this.state;
 
     return (
       <Clipboard onCopy={ this.onCopy } text={ data }>
-        <IconButton
-          tooltip={ copied ? 'done!' : label }
-          disableTouchRipple
-          tooltipPosition={ 'top-right' }
-          tooltipStyles={ { marginTop: `-${size / 4}px` } }
-          style={ { width: size, height: size, padding: '0' } }
-          iconStyle={ { width: size, height: size } }
-        >
-          <CopyIcon color={ copied ? disabledTextColor : textColor } />
-        </IconButton>
+        <div className={ styles.wrapper }>
+          <Snackbar
+            open={ copied }
+            message={
+              <div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>
+            }
+            autoHideDuration={ 2000 }
+            bodyStyle={ { backgroundColor: darkBlack } }
+          />
+          <IconButton
+            disableTouchRipple
+            style={ { width: size, height: size, padding: '0' } }
+            iconStyle={ { width: size, height: size } }
+          >
+            <CopyIcon color={ copied ? disabledTextColor : textColor } />
+          </IconButton>
+        </div>
       </Clipboard>
     );
   }
@@ -65,11 +82,12 @@ export default class CopyToClipboard extends Component {
   onCopy = () => {
     const { cooldown, onCopy } = this.props;
 
-    this.setState({ copied: true });
-    setTimeout(() => {
-      this.setState({ copied: false });
-    }, cooldown);
-
+    this.setState({
+      copied: true,
+      timeout: setTimeout(() => {
+        this.setState({ copied: false, timeout: null });
+      }, cooldown)
+    });
     onCopy();
   }
 }

js/src/ui/Form/AddressSelect/addressSelect.css

@@ -39,6 +39,10 @@
   position: absolute;
   left: 0;
   top: 35px;
+
+  &.noLabel {
+    top: 11px;
+  }
 }
 
 .paddedInput input {

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -106,15 +106,21 @@ export default class AddressSelect extends Component {
   }
 
   renderIdentityIcon (inputValue) {
-    const { error, value } = this.props;
+    const { error, value, label } = this.props;
 
     if (error || !inputValue || value.length !== 42) {
       return null;
     }
 
+    const classes = [ styles.icon ];
+
+    if (!label) {
+      classes.push(styles.noLabel);
+    }
+
     return (
       <IdentityIcon
-        className={ styles.icon }
+        className={ classes.join(' ') }
         inline center
         address={ value } />
     );

js/src/ui/Form/AutoComplete/autocomplete.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import keycode from 'keycode';
 import { MenuItem, AutoComplete as MUIAutoComplete } from 'material-ui';
 import { PopoverAnimationVertical } from 'material-ui/Popover';
 
@@ -40,7 +41,8 @@ export default class AutoComplete extends Component {
   state = {
     lastChangedValue: undefined,
     entry: null,
-    open: false
+    open: false,
+    fakeBlur: false
   }
 
   render () {
@@ -67,6 +69,9 @@ export default class AutoComplete extends Component {
         fullWidth
         floatingLabelFixed
         dataSource={ this.getDataSource() }
+        menuProps={ { maxHeight: 400 } }
+        ref='muiAutocomplete'
+        onKeyDown={ this.onKeyDown }
       />
     );
   }
@@ -91,6 +96,30 @@ export default class AutoComplete extends Component {
     }));
   }
 
+  onKeyDown = (event) => {
+    const { muiAutocomplete } = this.refs;
+
+    switch (keycode(event)) {
+      case 'down':
+        const { menu } = muiAutocomplete.refs;
+        menu.handleKeyDown(event);
+        this.setState({ fakeBlur: true });
+        break;
+
+      case 'enter':
+      case 'tab':
+        event.preventDefault();
+        event.stopPropagation();
+        event.which = 'useless';
+
+        const e = new CustomEvent('down');
+        e.which = 40;
+
+        muiAutocomplete.handleKeyDown(e);
+        break;
+    }
+  }
+
   onChange = (item, idx) => {
     if (idx === -1) {
       return;
@@ -108,17 +137,22 @@ export default class AutoComplete extends Component {
     this.setState({ entry, open: false });
   }
 
-  onBlur = () => {
+  onBlur = (event) => {
     const { onUpdateInput } = this.props;
 
-    // TODO: Handle blur gracefully where we use onUpdateInput (currently replaces input
+    // TODO: Handle blur gracefully where we use onUpdateInput (currently replaces
     // input where text is allowed with the last selected value from the dropdown)
     if (!onUpdateInput) {
       window.setTimeout(() => {
-        const { entry } = this.state;
+        const { entry, fakeBlur } = this.state;
+
+        if (fakeBlur) {
+          this.setState({ fakeBlur: false });
+          return;
+        }
 
         this.handleOnChange(entry);
-      }, 100);
+      }, 200);
     }
   }
 

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

@@ -24,8 +24,4 @@
 
 .copy {
   margin-right: 0.5em;
-
-  svg {
-    transition: all .5s ease-in-out;
-  }
 }

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

@@ -15,11 +15,9 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { TextField } from 'material-ui';
 
-import CopyToClipboard from 'react-copy-to-clipboard';
-import CopyIcon from 'material-ui/svg-icons/content/content-copy';
-import { TextField, IconButton } from 'material-ui';
-import { lightWhite, fullWhite } from 'material-ui/styles/colors';
+import CopyToClipboard from '../../CopyToClipboard';
 
 import styles from './input.css';
 
@@ -65,7 +63,9 @@ export default class Input extends Component {
     hideUnderline: PropTypes.bool,
     value: PropTypes.oneOfType([
       PropTypes.number, PropTypes.string
-    ])
+    ]),
+    min: PropTypes.any,
+    max: PropTypes.any
   };
 
   static defaultProps = {
@@ -77,9 +77,7 @@ export default class Input extends Component {
   }
 
   state = {
-    value: this.props.value || '',
-    timeoutId: null,
-    copied: false
+    value: this.props.value || ''
   }
 
   componentWillReceiveProps (newProps) {
@@ -88,17 +86,9 @@ export default class Input extends Component {
     }
   }
 
-  componentWillUnmount () {
-    const { timeoutId } = this.state;
-
-    if (timeoutId) {
-      window.clearTimeout(timeoutId);
-    }
-  }
-
   render () {
     const { value } = this.state;
-    const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type } = this.props;
+    const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type, min, max } = this.props;
 
     const readOnly = this.props.readOnly || disabled;
 
@@ -142,6 +132,8 @@ export default class Input extends Component {
           onChange={ this.onChange }
           onKeyDown={ this.onKeyDown }
           inputStyle={ inputStyle }
+          min={ min }
+          max={ max }
         >
           { children }
         </TextField>
@@ -151,7 +143,7 @@ export default class Input extends Component {
 
   renderCopyButton () {
     const { allowCopy, hideUnderline, label, hint, floatCopy } = this.props;
-    const { copied, value } = this.state;
+    const { value } = this.state;
 
     if (!allowCopy) {
       return null;
@@ -165,8 +157,6 @@ export default class Input extends Component {
       ? allowCopy
       : value;
 
-    const scale = copied ? 'scale(1.15)' : 'scale(1)';
-
     if (hideUnderline && !label) {
       style.marginBottom = 2;
     } else if (label && !hint) {
@@ -184,49 +174,11 @@ export default class Input extends Component {
 
     return (
       <div className={ styles.copy } style={ style }>
-        <CopyToClipboard
-          onCopy={ this.handleCopy }
-          text={ text } >
-          <IconButton
-            tooltip={ `${copied ? 'Copied' : 'Copy'} to clipboard` }
-            tooltipPosition='bottom-right'
-            style={ {
-              width: 16,
-              height: 16,
-              padding: 0
-            } }
-            iconStyle={ {
-              width: 16,
-              height: 16,
-              transform: scale
-            } }
-            tooltipStyles={ {
-              top: 16
-            } }
-          >
-            <CopyIcon
-              color={ copied ? lightWhite : fullWhite }
-            />
-          </IconButton>
-        </CopyToClipboard>
+        <CopyToClipboard data={ text } />
       </div>
     );
   }
 
-  handleCopy = () => {
-    if (this.state.timeoutId) {
-      window.clearTimeout(this.state.timeoutId);
-    }
-
-    this.setState({ copied: true }, () => {
-      const timeoutId = window.setTimeout(() => {
-        this.setState({ copied: false });
-      }, 500);
-
-      this.setState({ timeoutId });
-    });
-  }
-
   onChange = (event, value) => {
     this.setValue(value);
 

js/src/ui/Form/TypedInput/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './typedInput';

js/src/ui/Form/TypedInput/typedInput.css

@@ -0,0 +1,31 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.inputs {
+  padding-top: 2px;
+  overflow-x: hidden;
+
+  label {
+    line-height: 22px;
+    pointer-events: none;
+    color: rgba(255, 255, 255, 0.498039);
+    -webkit-user-select: none;
+    font-size: 12px;
+    top: 11px;
+    position: relative;
+  }
+}

js/src/ui/Form/TypedInput/typedInput.js

@@ -0,0 +1,239 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { MenuItem } from 'material-ui';
+import { range } from 'lodash';
+
+import IconButton from 'material-ui/IconButton';
+import AddIcon from 'material-ui/svg-icons/content/add';
+import RemoveIcon from 'material-ui/svg-icons/content/remove';
+
+import { Input, InputAddressSelect, Select } from '../../../ui';
+import { ABI_TYPES } from '../../../util/abi';
+
+import styles from './typedInput.css';
+
+export default class TypedInput extends Component {
+
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    accounts: PropTypes.object.isRequired,
+    param: PropTypes.object.isRequired,
+
+    error: PropTypes.any,
+    value: PropTypes.any,
+    label: PropTypes.string
+  };
+
+  render () {
+    const { param } = this.props;
+    const { type } = param;
+
+    if (type === ABI_TYPES.ARRAY) {
+      const { accounts, label, value = param.default } = this.props;
+      const { subtype, length } = param;
+
+      const fixedLength = !!length;
+
+      const inputs = range(length || value.length).map((_, index) => {
+        const onChange = (inputValue) => {
+          const newValues = [].concat(this.props.value);
+          newValues[index] = inputValue;
+          this.props.onChange(newValues);
+        };
+
+        return (
+          <TypedInput
+            key={ `${subtype.type}_${index}` }
+            onChange={ onChange }
+            accounts={ accounts }
+            param={ subtype }
+            value={ value[index] }
+          />
+        );
+      });
+
+      return (
+        <div className={ styles.inputs }>
+          <label>{ label }</label>
+          { fixedLength ? null : this.renderLength() }
+          { inputs }
+        </div>
+      );
+    }
+
+    return this.renderType(type);
+  }
+
+  renderLength () {
+    const iconStyle = {
+      width: 16,
+      height: 16
+    };
+
+    const style = {
+      width: 32,
+      height: 32,
+      padding: 0
+    };
+
+    return (
+      <div>
+        <IconButton
+          iconStyle={ iconStyle }
+          style={ style }
+          onClick={ this.onAddField }
+        >
+          <AddIcon />
+        </IconButton>
+
+        <IconButton
+          iconStyle={ iconStyle }
+          style={ style }
+          onClick={ this.onRemoveField }
+        >
+          <RemoveIcon />
+        </IconButton>
+      </div>
+    );
+  }
+
+  renderType (type) {
+    if (type === ABI_TYPES.ADDRESS) {
+      return this.renderAddress();
+    }
+
+    if (type === ABI_TYPES.BOOL) {
+      return this.renderBoolean();
+    }
+
+    if (type === ABI_TYPES.STRING) {
+      return this.renderDefault();
+    }
+
+    if (type === ABI_TYPES.BYTES) {
+      return this.renderDefault();
+    }
+
+    if (type === ABI_TYPES.INT) {
+      return this.renderNumber();
+    }
+
+    if (type === ABI_TYPES.FIXED) {
+      return this.renderNumber();
+    }
+
+    return this.renderDefault();
+  }
+
+  renderNumber () {
+    const { label, value, error, param } = this.props;
+
+    return (
+      <Input
+        label={ label }
+        value={ value }
+        error={ error }
+        onSubmit={ this.onSubmit }
+        type='number'
+        min={ param.signed ? null : 0 }
+      />
+    );
+  }
+
+  renderDefault () {
+    const { label, value, error } = this.props;
+
+    return (
+      <Input
+        label={ label }
+        value={ value }
+        error={ error }
+        onSubmit={ this.onSubmit }
+      />
+    );
+  }
+
+  renderAddress () {
+    const { accounts, label, value, error } = this.props;
+
+    return (
+      <InputAddressSelect
+        accounts={ accounts }
+        label={ label }
+        value={ value }
+        error={ error }
+        onChange={ this.onChange }
+        editing
+      />
+    );
+  }
+
+  renderBoolean () {
+    const { label, value, error } = this.props;
+
+    const boolitems = ['false', 'true'].map((bool) => {
+      return (
+        <MenuItem
+          key={ bool }
+          value={ bool }
+          label={ bool }
+        >
+          { bool }
+        </MenuItem>
+      );
+    });
+
+    return (
+      <Select
+        label={ label }
+        value={ value ? 'true' : 'false' }
+        error={ error }
+        onChange={ this.onChangeBool }
+      >
+        { boolitems }
+      </Select>
+    );
+  }
+
+  onChangeBool = (event, _index, value) => {
+    this.props.onChange(value === 'true');
+  }
+
+  onChange = (event, value) => {
+    this.props.onChange(value);
+  }
+
+  onSubmit = (value) => {
+    this.props.onChange(value);
+  }
+
+  onAddField = () => {
+    const { value, onChange, param } = this.props;
+    const newValues = [].concat(value, param.subtype.default);
+
+    onChange(newValues);
+  }
+
+  onRemoveField = () => {
+    const { value, onChange } = this.props;
+    const newValues = value.slice(0, -1);
+
+    onChange(newValues);
+  }
+
+}

js/src/ui/Form/index.js

@@ -16,6 +16,7 @@
 
 import AddressSelect from './AddressSelect';
 import FormWrap from './FormWrap';
+import TypedInput from './TypedInput';
 import Input from './Input';
 import InputAddress from './InputAddress';
 import InputAddressSelect from './InputAddressSelect';
@@ -27,6 +28,7 @@ export default from './form';
 export {
   AddressSelect,
   FormWrap,
+  TypedInput,
   Input,
   InputAddress,
   InputAddressSelect,

js/src/ui/IdentityName/identityName.js

@@ -28,11 +28,12 @@ class IdentityName extends Component {
     tokens: PropTypes.object,
     empty: PropTypes.bool,
     shorten: PropTypes.bool,
-    unknown: PropTypes.bool
+    unknown: PropTypes.bool,
+    name: PropTypes.string
   }
 
   render () {
-    const { address, accountsInfo, tokens, empty, shorten, unknown, className } = this.props;
+    const { address, accountsInfo, tokens, empty, name, shorten, unknown, className } = this.props;
     const account = accountsInfo[address] || tokens[address];
     const hasAccount = account && (!account.meta || !account.meta.deleted);
 
@@ -43,13 +44,14 @@ class IdentityName extends Component {
     const addressFallback = shorten ? this.formatHash(address) : address;
     const fallback = unknown ? defaultName : addressFallback;
     const isUuid = hasAccount && account.name === account.uuid;
-    const name = hasAccount && !isUuid
+    const displayName = (name && name.toUpperCase().trim()) ||
+      (hasAccount && !isUuid
       ? account.name.toUpperCase().trim()
-      : fallback;
+      : fallback);
 
     return (
       <span className={ className }>
-        { name && name.length ? name : fallback }
+        { displayName && displayName.length ? displayName : fallback }
       </span>
     );
   }

js/src/ui/index.js

@@ -29,7 +29,7 @@ import ContextProvider from './ContextProvider';
 import CopyToClipboard from './CopyToClipboard';
 import Editor from './Editor';
 import Errors from './Errors';
-import Form, { AddressSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select } from './Form';
+import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select } from './Form';
 import IdentityIcon from './IdentityIcon';
 import IdentityName from './IdentityName';
 import MethodDecoding from './MethodDecoding';
@@ -62,6 +62,7 @@ export {
   Errors,
   Form,
   FormWrap,
+  TypedInput,
   Input,
   InputAddress,
   InputAddressSelect,