Initial new UI source code import (#2607)

* address -> name mappings

* expanding, loading all coin details

* send use only actual BasicCoin tokens registered (any reg)

* sending token & accounts

* form styling updates

* send form layout in place

* coin send working as expected

* api subscriptions on multiple addresses

* bring in events

* simplify

* basic events display in-place, functionally complete

* basic functionality in-place

* fix horrible event address issue

* rwork display of events slightly

* test TLA availability

* table for owner -> tokens

* fix signature lookup address

* fix signature lookup address

* basic overview styling

* txhash links

* page layout adjustments

* background import

* adjust colors

* no global registration, simplify color selection

* updated styling

* connection dialog for "busy connecting"

* initial token connection - WIP

* init token updates take place

* basic test for manual token

* rework connection display

* allow updates of the secure token

* first stab at making the build build

* update runner tags

* fix linting issues

* skip tests requiring network (should be e2e, TODO)

* re-enable javascript tag/runner

* release push does the trick

* push to any branch, CI name

* javscript-test runner as well

* swap dependencies build requires test

* revert stages swap

* retrieve images associated with tokens

* remove js build deps order

* null image when hash = 0x0

* 6x64 images (hashes for registries)

* don't pass tokens as prop to IdentityIcon

* check images against content hash pictures

* cleanup signer after connection changes

* fix naming typo

* display unknownImages for balances (not available as content hash)

* unknownImage for transfer dialog

* basic githubhint layout

* single input for commit/filename

* ethcore_hashContent call

* lookup hash

* registration in place

* fixes

* events is using a proper table

* pass value through as-is

* stop wrongly using main app IdentityIcon

* NEVER export class instance functions

* alignment back to normal

* typo  in definition

* set & get images working (mostly)

* show content retrieval info

* set exitcode via ||

* use javascript:latest images

* disable npm progress bar

* rename phase I

* rename phase II

* only send build output to GitHub on major branches

* also run the build step as part of the test (until comprehensive)

* ci-specific build (no webpack progress)

* allow for account creation via recovery phrase

* display account uuid (where available), closes #2546

* connection dialog now shows up in dapps as well, closes #2538

* token images show up as expected

* IdentityName component added and deployed

* fix padding tests

* adjust tests to map to stricter 0x-prefixed hex

* render names via common component for the address -> name

* split lint into seperate script (early exit)

* test phases changed to lint, test & pack

* pack part of test phase

* remove files marked for deletion (cleanup)

* Signer cleanups, start moving in the direction of the rest

* add personal signer methods

* basic signer request subscription

* don't poll blockNumber when not connected

* missing return, creating massive ws queue backlogs

* ΞTH -> ETH

* fix failing tests

* registry uses setAddress to actually set addresses now

* bytes mapping operates on lowerCase hex strings

* sha3 ids for each application

* add dappreg to list of contracts

* adjust alignment of queries

* show gas estimation log

* abi with payable for register function

* add key as required

* image retrieval from dappreg

* use proper Image urls

* embed and link apps from Parity, retrieved via /api/apps

* filter apps that has been replaced

* proxy entry for parity-utils

* add basiccoin abi

* add support for fallback abi type

* capture constructor paramaters

* merge master into js

* move images to assets/images/

* add font assets

* import fonts as part of build

* don't inline woff files

* Revert "merge master into js"

This reverts commit cfcfa81bd26f1b3cbc748d3afa1eb5c670b363fe.

* remove unused npm packages

* information on gas estimates (like almost everywhere else)

* don't pass gas & gasPrice to estimation

* display account passwordhint when available

* signer subscriptions based on polling & function trapping

* pending requests retrieved via jsapi

* update signer middleware

* remove all web3 instances

* remove web3 package

* last web3 dependencies removed

* no need to toChecksumAddress - api takes care of it

* expand description for personal_confirmRequest

* Signer conversion from web3 -> parity.js completed

* explicit in no return

* green circle background

* remove generated background

* convert /api/* paths to localhost:8080/api/* paths (hard-coded, temporary)

* change dapps to load from localhost:8080/ui/*

* remove dangling web3 files

* update manager test for signer

* /api/ping -> /

* additional token images

* additional token images

* add missing styles.css for 8180 error pages

* cater for txhash returning null/empty object

* adjust output directories

* Release merge with origin with ours strategy

* additional token images

* cater for development server

* s/localhost/127.0.0.1/ (cater for origin)

* Fix address selection for contract deployment

* Adjust z-index for error overlay

* better text on unique background pattern

* fix signer rejections

* Don't allow gavcoin transfer with no balance

* fix txhash rendering in signer

* remove unnecessary ParityBackground

* script to update js-precompiled

* Redirect from :8080 to :8180

* Remove extra return

* Dapp logo images

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

@@ -0,0 +1,38 @@
+/* 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/>.
+*/
+.account {
+  max-height: 36px;
+  padding: 4px 0 0 0;
+  line-height: 32px;
+  margin-top: 11px;
+}
+
+.details {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.image {
+  display: inline-block;
+  max-height: 32px;
+}
+
+.name {
+  line-height: 32px;
+  vertical-align: top;
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,95 @@
+// 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 IdentityIcon from '../../IdentityIcon';
+import IdentityName from '../../IdentityName';
+import Select from '../Select';
+
+import styles from './addressSelect.css';
+
+export default class AddressSelect extends Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    accounts: PropTypes.object,
+    contacts: PropTypes.object,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    error: PropTypes.string,
+    value: PropTypes.string,
+    tokens: PropTypes.object,
+    onChange: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { disabled, error, hint, label, value } = this.props;
+
+    return (
+      <Select
+        disabled={ disabled }
+        label={ label }
+        hint={ hint }
+        error={ error }
+        value={ value }
+        onChange={ this.onChange }>
+        { this.renderSelectEntries() }
+      </Select>
+    );
+  }
+
+  renderSelectEntries () {
+    const { accounts, contacts } = this.props;
+    const entries = Object.values(Object.assign({}, accounts || {}, contacts || {}));
+
+    if (!entries.length) {
+      return null;
+    }
+
+    return entries.map(this.renderSelectEntry);
+  }
+
+  renderSelectEntry = (entry) => {
+    const item = (
+      <div className={ styles.account }>
+        <div className={ styles.image }>
+          <IdentityIcon
+            inline center
+            address={ entry.address } />
+        </div>
+        <div className={ styles.details }>
+          <div className={ styles.name }>
+            <IdentityName address={ entry.address } />
+          </div>
+        </div>
+      </div>
+    );
+
+    return (
+      <MenuItem
+        key={ entry.address }
+        value={ entry.address }
+        label={ item }>
+        { item }
+      </MenuItem>
+    );
+  }
+
+  onChange = (event, idx, value) => {
+    this.props.onChange(event, value);
+  }
+}

js/src/ui/Form/AddressSelect/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 './addressSelect';

js/src/ui/Form/FormWrap/formWrap.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/>.
+*/
+.stretch {
+  width: 75%;
+  clear: both;
+}
+
+.stretch input {
+  width: 100%;
+}

js/src/ui/Form/FormWrap/formWrap.js

@@ -0,0 +1,33 @@
+// 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 styles from './formWrap.css';
+
+export default class FormWrap extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render () {
+    return (
+      <div className={ styles.stretch }>
+        { this.props.children }
+      </div>
+    );
+  }
+}

js/src/ui/Form/FormWrap/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 './formWrap';

js/src/ui/Form/Input/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 './input';

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

@@ -0,0 +1,123 @@
+// 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 { TextField } from 'material-ui';
+
+// TODO: duplicated in Select
+const UNDERLINE_DISABLED = {
+  borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
+};
+
+const UNDERLINE_NORMAL = {
+  borderBottom: 'solid 2px'
+};
+
+const NAME_ID = ' ';
+
+export default class Input extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    error: PropTypes.string,
+    hint: PropTypes.string,
+    label: PropTypes.string,
+    multiLine: PropTypes.bool,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    onSubmit: PropTypes.func,
+    rows: PropTypes.number,
+    type: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.number, PropTypes.string
+    ])
+  }
+
+  state = {
+    value: this.props.value
+  }
+
+  render () {
+    const { value } = this.state;
+    const { children, className, disabled, error, label, hint, multiLine, rows, type } = this.props;
+
+    return (
+      <TextField
+        autoComplete='off'
+        className={ className }
+        disabled={ disabled }
+        errorText={ error }
+        floatingLabelFixed
+        floatingLabelText={ label }
+        fullWidth
+        hintText={ hint }
+        multiLine={ multiLine }
+        name={ NAME_ID }
+        id={ NAME_ID }
+        rows={ rows }
+        type={ type || 'text' }
+        underlineDisabledStyle={ UNDERLINE_DISABLED }
+        underlineStyle={ UNDERLINE_NORMAL }
+        value={ value }
+        onBlur={ this.onBlur }
+        onChange={ this.onChange }
+        onKeyDown={ this.onKeyDown }>
+        { children }
+      </TextField>
+    );
+  }
+
+  onChange = (event, value) => {
+    this.setValue(value);
+
+    this.props.onChange && this.props.onChange(event, value);
+  }
+
+  onBlur = (event) => {
+    const { value } = event.target;
+
+    this.onSubmit(value);
+
+    this.props.onBlur && this.props.onBlur(event);
+  }
+
+  onKeyDown = (event) => {
+    const { value } = event.target;
+
+    if (event.which === 13) {
+      this.onSubmit(value);
+    } else if (event.which === 27) {
+      // TODO ESC, revert to original
+    }
+
+    this.props.onKeyDown && this.props.onKeyDown(event);
+  }
+
+  onSubmit = (value) => {
+    this.setValue(value);
+
+    this.props.onSubmit && this.props.onSubmit(value);
+  }
+
+  setValue (value) {
+    this.setState({
+      value
+    });
+  }
+}

js/src/ui/Form/InputAddress/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 './inputAddress';

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

@@ -0,0 +1,28 @@
+/* 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/>.
+*/
+.container {
+  position: relative;
+}
+
+.input input {
+  padding-left: 48px !important;
+}
+
+.icon {
+  position: absolute;
+  top: 35px;
+}

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

@@ -0,0 +1,97 @@
+// 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 { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import Input from '../Input';
+import IdentityIcon from '../../IdentityIcon';
+
+import styles from './inputAddress.css';
+
+class InputAddress extends Component {
+  static propTypes = {
+    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,
+    onChange: PropTypes.func,
+    onSubmit: PropTypes.func
+  };
+
+  render () {
+    const { className, disabled, error, label, hint, value, text, onChange, onSubmit, accountsInfo, tokens } = this.props;
+    const classes = `${styles.input} ${className}`;
+    const account = accountsInfo[value] || tokens[value];
+    const hasAccount = account && !account.meta.deleted;
+
+    return (
+      <div className={ styles.container }>
+        <Input
+          className={ classes }
+          disabled={ disabled }
+          label={ label }
+          hint={ hint }
+          error={ error }
+          value={ text && hasAccount ? account.name : value }
+          onChange={ onChange }
+          onSubmit={ onSubmit } />
+        { this.renderIcon() }
+      </div>
+    );
+  }
+
+  renderIcon () {
+    const { value } = this.props;
+
+    if (!value || !value.length) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.icon }>
+        <IdentityIcon
+          inline center
+          address={ value } />
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { accountsInfo } = state.personal;
+  const { tokens } = state.balances;
+
+  return {
+    accountsInfo,
+    tokens
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(InputAddress);

js/src/ui/Form/InputAddressSelect/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 './inputAddressSelect';

js/src/ui/Form/InputAddressSelect/inputAddressSelect.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/>.
+*/
+.inputselect {
+  position: relative;
+}
+
+.inputselect svg {
+  padding-right: 84px;
+}
+
+.toggle {
+  position: absolute !important;
+  top: 38px;
+  right: 0;
+  display: inline-block !important;
+  width: auto !important;
+}

js/src/ui/Form/InputAddressSelect/inputAddressSelect.js

@@ -0,0 +1,127 @@
+// 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 { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Toggle } from 'material-ui';
+
+import AddressSelect from '../AddressSelect';
+import InputAddress from '../InputAddress';
+
+import styles from './inputAddressSelect.css';
+
+class InputAddressSelect extends Component {
+  static propTypes = {
+    accounts: PropTypes.object,
+    contacts: PropTypes.object,
+    disabled: PropTypes.bool,
+    editing: PropTypes.bool,
+    error: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    value: PropTypes.string,
+    tokens: PropTypes.object,
+    onChange: PropTypes.func
+  };
+
+  state = {
+    editing: this.props.editing || false,
+    entries: []
+  }
+
+  render () {
+    const { editing } = this.state;
+
+    return (
+      <div className={ styles.inputselect }>
+        { editing ? this.renderInput() : this.renderSelect() }
+        <Toggle
+          className={ styles.toggle }
+          label='Edit'
+          labelPosition='right'
+          toggled={ editing }
+          onToggle={ this.onToggle } />
+      </div>
+    );
+  }
+
+  renderInput () {
+    const { disabled, error, hint, label, value, tokens } = this.props;
+
+    return (
+      <InputAddress
+        disabled={ disabled }
+        error={ error }
+        hint={ hint }
+        label={ label }
+        value={ value }
+        tokens={ tokens }
+        onChange={ this.onChangeInput } />
+    );
+  }
+
+  renderSelect () {
+    const { accounts, contacts, disabled, error, hint, label, value, tokens } = this.props;
+
+    return (
+      <AddressSelect
+        accounts={ accounts }
+        contacts={ contacts }
+        disabled={ disabled }
+        label={ label }
+        hint={ hint }
+        error={ error }
+        value={ value }
+        tokens={ tokens }
+        onChange={ this.onChangeSelect } />
+    );
+  }
+
+  onToggle = () => {
+    const { editing } = this.state;
+
+    this.setState({
+      editing: !editing
+    });
+  }
+
+  onChangeInput = (event, value) => {
+    this.props.onChange(event, value);
+  }
+
+  onChangeSelect = (event, value) => {
+    this.props.onChange(event, value);
+  }
+}
+
+function mapStateToProps (state) {
+  const { accounts, contacts } = state.personal;
+
+  return {
+    accounts,
+    contacts
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(InputAddressSelect);

js/src/ui/Form/InputInline/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 './inputInline';

js/src/ui/Form/InputInline/inputInline.css

@@ -0,0 +1,19 @@
+/* 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/>.
+*/
+.inlineedit {
+  cursor: pointer;
+}

js/src/ui/Form/InputInline/inputInline.js

@@ -0,0 +1,94 @@
+// 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 Input from '../Input';
+
+import styles from './inputInline.css';
+
+export default class InputInline extends Component {
+  static propTypes = {
+    error: PropTypes.string,
+    hint: PropTypes.string,
+    label: PropTypes.string,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onSubmit: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    type: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.number, PropTypes.string
+    ]),
+    static: PropTypes.oneOfType([
+      PropTypes.node, PropTypes.string
+    ])
+  }
+
+  state = {
+    editing: false
+  }
+
+  render () {
+    const { editing } = this.state;
+    const { error, label, hint, type, value } = this.props;
+
+    if (!editing) {
+      return (
+        <div
+          className={ styles.inlineedit }
+          onClick={ this.onToggle }>
+          { this.props.static || value }
+        </div>
+      );
+    }
+
+    return (
+      <Input
+        error={ error }
+        label={ label }
+        hint={ hint }
+        type={ type }
+        value={ value }
+        onBlur={ this.onBlur }
+        onChange={ this.props.onChange }
+        onKeyDown={ this.onKeyDown }
+        onSubmit={ this.props.onSubmit } />
+    );
+  }
+
+  onBlur = () => {
+    this.onToggle();
+
+    if (this.props.onBlur) {
+      this.props.onBlur();
+    }
+  }
+
+  onToggle = () => {
+    this.setState({
+      editing: !this.state.editing
+    });
+  }
+
+  onKeyDown = (event) => {
+    if (event.keyCode === 13) {
+      this.onToggle();
+    }
+
+    this.props.onKeyDown && this.props.onKeyDown(event);
+  }
+}

js/src/ui/Form/Select/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 './select';

js/src/ui/Form/Select/select.js

@@ -0,0 +1,71 @@
+// 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 { SelectField } from 'material-ui';
+
+// TODO: duplicated in Input
+const UNDERLINE_DISABLED = {
+  borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
+};
+
+const UNDERLINE_NORMAL = {
+  borderBottom: 'solid 2px'
+};
+
+const NAME_ID = ' ';
+
+export default class Select extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    error: PropTypes.string,
+    hint: PropTypes.string,
+    label: PropTypes.string,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    type: PropTypes.string,
+    value: PropTypes.any
+  }
+
+  render () {
+    const { disabled, error, label, hint, value, children, className, onBlur, onChange, onKeyDown } = this.props;
+
+    return (
+      <SelectField
+        className={ className }
+        autoComplete='off'
+        disabled={ disabled }
+        errorText={ error }
+        floatingLabelFixed
+        floatingLabelText={ label }
+        fullWidth
+        hintText={ hint }
+        name={ NAME_ID }
+        id={ NAME_ID }
+        underlineDisabledStyle={ UNDERLINE_DISABLED }
+        underlineStyle={ UNDERLINE_NORMAL }
+        value={ value }
+        onBlur={ onBlur }
+        onChange={ onChange }
+        onKeyDown={ onKeyDown }>
+        { children }
+      </SelectField>
+    );
+  }
+}

js/src/ui/Form/form.css

@@ -0,0 +1,33 @@
+/* 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/>.
+*/
+.form {
+  margin-top: -1em;
+}
+
+.autofill {
+  height: 0;
+  width: 1px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+:root .form input:-webkit-autofill {
+  display: none;
+  opacity: 0;
+}

js/src/ui/Form/form.js

@@ -0,0 +1,40 @@
+// 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 styles from './form.css';
+
+export default class Form extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render () {
+    // HACK: hidden inputs to disable Chrome's autocomplete
+    return (
+      <form
+        autoComplete='new-password'
+        className={ styles.form }>
+        <div className={ styles.autofill }>
+          <input type='text' name='fakeusernameremembered' />
+          <input type='password' name='fakepasswordremembered' />
+        </div>
+        { this.props.children }
+      </form>
+    );
+  }
+}

js/src/ui/Form/index.js

@@ -0,0 +1,34 @@
+// 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 AddressSelect from './AddressSelect';
+import FormWrap from './FormWrap';
+import Input from './Input';
+import InputAddress from './InputAddress';
+import InputAddressSelect from './InputAddressSelect';
+import InputInline from './InputInline';
+import Select from './Select';
+
+export default from './form';
+export {
+  AddressSelect,
+  FormWrap,
+  Input,
+  InputAddress,
+  InputAddressSelect,
+  InputInline,
+  Select
+};