From 7e600b5a82d5eb0e655b3a2fa018fcd0e9aee933 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 28 Dec 2016 18:09:45 +0100
Subject: [PATCH 01/28] Store for EditPassword Modal (#3979)

* External store (WIP)

* address & meta

* Add editable (WIP)

* View converted (WIP)

* Single API stub creation

* Testing (WIP)

* Simplified meta assign

* Tests running

* Fix duplicate exports

* Fix tags not editable
---
 js/src/modals/EditMeta/editMeta.js            |   2 +-
 js/src/modals/EditMeta/editMeta.spec.js       |   9 +-
 js/src/modals/EditMeta/editMeta.test.js       |  14 +-
 js/src/modals/EditMeta/store.js               |  26 +-
 js/src/modals/EditMeta/store.spec.js          |  16 +-
 .../modals/PasswordManager/passwordManager.js | 501 ++++++++----------
 .../PasswordManager/passwordManager.spec.js   |  81 +++
 .../PasswordManager/passwordManager.test.js   |  43 ++
 js/src/modals/PasswordManager/store.js        | 161 ++++++
 js/src/modals/PasswordManager/store.spec.js   | 103 ++++
 js/src/redux/actions.js                       |   2 +
 js/src/ui/Icons/index.js                      |   2 +
 js/src/views/Account/Header/header.js         |   2 +-
 13 files changed, 658 insertions(+), 304 deletions(-)
 create mode 100644 js/src/modals/PasswordManager/passwordManager.spec.js
 create mode 100644 js/src/modals/PasswordManager/passwordManager.test.js
 create mode 100644 js/src/modals/PasswordManager/store.js
 create mode 100644 js/src/modals/PasswordManager/store.spec.js

diff --git a/js/src/modals/EditMeta/editMeta.js b/js/src/modals/EditMeta/editMeta.js
index aea7a7060..8b5e14939 100644
--- a/js/src/modals/EditMeta/editMeta.js
+++ b/js/src/modals/EditMeta/editMeta.js
@@ -85,7 +85,7 @@ export default class EditMeta extends Component {
                 defaultMessage='(optional) tags' />
             }
             onTokensChange={ this.store.setTags }
-            tokens={ tags } />
+            tokens={ tags.slice() } />
         </Form>
       </Modal>
     );
diff --git a/js/src/modals/EditMeta/editMeta.spec.js b/js/src/modals/EditMeta/editMeta.spec.js
index b490fcdaf..917f32076 100644
--- a/js/src/modals/EditMeta/editMeta.spec.js
+++ b/js/src/modals/EditMeta/editMeta.spec.js
@@ -20,7 +20,7 @@ import sinon from 'sinon';
 
 import EditMeta from './';
 
-import { ACCOUNT } from './editMeta.test.js';
+import { ACCOUNT, createApi } from './editMeta.test.js';
 
 let component;
 let onClose;
@@ -35,12 +35,7 @@ function render (props) {
       onClose={ onClose } />,
     {
       context: {
-        api: {
-          parity: {
-            setAccountName: sinon.stub().resolves(),
-            setAccountMeta: sinon.stub().resolves()
-          }
-        }
+        api: createApi()
       }
     }
   );
diff --git a/js/src/modals/EditMeta/editMeta.test.js b/js/src/modals/EditMeta/editMeta.test.js
index 7f359a405..98bd61fea 100644
--- a/js/src/modals/EditMeta/editMeta.test.js
+++ b/js/src/modals/EditMeta/editMeta.test.js
@@ -14,6 +14,8 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import sinon from 'sinon';
+
 const ACCOUNT = {
   address: '0x123456789a123456789a123456789a123456789a',
   meta: {
@@ -39,7 +41,17 @@ const ADDRESS = {
   name: 'Random address'
 };
 
+function createApi () {
+  return {
+    parity: {
+      setAccountName: sinon.stub().resolves(),
+      setAccountMeta: sinon.stub().resolves()
+    }
+  };
+}
+
 export {
   ACCOUNT,
-  ADDRESS
+  ADDRESS,
+  createApi
 };
diff --git a/js/src/modals/EditMeta/store.js b/js/src/modals/EditMeta/store.js
index 3f0355e84..b2d71c63a 100644
--- a/js/src/modals/EditMeta/store.js
+++ b/js/src/modals/EditMeta/store.js
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { action, computed, observable, toJS, transaction } from 'mobx';
+import { action, computed, observable, transaction } from 'mobx';
 
 import { newError } from '~/redux/actions';
 import { validateName } from '~/util/validation';
@@ -23,25 +23,27 @@ export default class Store {
   @observable address = null;
   @observable isAccount = false;
   @observable description = null;
-  @observable meta = {};
+  @observable meta = null;
   @observable name = null;
   @observable nameError = null;
   @observable passwordHint = null;
-  @observable tags = [];
+  @observable tags = null;
 
   constructor (api, account) {
     const { address, name, meta, uuid } = account;
 
     this._api = api;
 
-    this.isAccount = !!uuid;
-    this.address = address;
-    this.meta = Object.assign({}, meta || {});
-    this.name = name || '';
+    transaction(() => {
+      this.isAccount = !!uuid;
+      this.address = address;
+      this.meta = meta || {};
+      this.name = name || '';
 
-    this.description = this.meta.description || '';
-    this.passwordHint = this.meta.passwordHint || '';
-    this.tags = [].concat((meta || {}).tags || []);
+      this.description = this.meta.description || '';
+      this.passwordHint = this.meta.passwordHint || '';
+      this.tags = this.meta.tags && this.meta.tags.peek() || [];
+    });
   }
 
   @computed get hasError () {
@@ -70,7 +72,7 @@ export default class Store {
   }
 
   @action setTags = (tags) => {
-    this.tags = [].concat(tags);
+    this.tags = tags.slice();
   }
 
   save () {
@@ -86,7 +88,7 @@ export default class Store {
     return Promise
       .all([
         this._api.parity.setAccountName(this.address, this.name),
-        this._api.parity.setAccountMeta(this.address, Object.assign({}, toJS(this.meta), meta))
+        this._api.parity.setAccountMeta(this.address, Object.assign({}, this.meta, meta))
       ])
       .catch((error) => {
         console.error('onSave', error);
diff --git a/js/src/modals/EditMeta/store.spec.js b/js/src/modals/EditMeta/store.spec.js
index e69656e96..c707d1f6c 100644
--- a/js/src/modals/EditMeta/store.spec.js
+++ b/js/src/modals/EditMeta/store.spec.js
@@ -14,22 +14,14 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { toJS } from 'mobx';
-import sinon from 'sinon';
-
 import Store from './store';
-import { ACCOUNT, ADDRESS } from './editMeta.test.js';
+import { ACCOUNT, ADDRESS, createApi } from './editMeta.test.js';
 
 let api;
 let store;
 
 function createStore (account) {
-  api = {
-    parity: {
-      setAccountName: sinon.stub().resolves(),
-      setAccountMeta: sinon.stub().resolves()
-    }
-  };
+  api = createApi();
 
   store = new Store(api, account);
 
@@ -56,12 +48,12 @@ describe('modals/EditMeta/Store', () => {
       });
 
       it('extracts the tags', () => {
-        expect(store.tags.peek()).to.deep.equal(ACCOUNT.meta.tags);
+        expect(store.tags).to.deep.equal(ACCOUNT.meta.tags);
       });
 
       describe('meta', () => {
         it('extracts the full meta', () => {
-          expect(toJS(store.meta)).to.deep.equal(ACCOUNT.meta);
+          expect(store.meta).to.deep.equal(ACCOUNT.meta);
         });
 
         it('extracts the description', () => {
diff --git a/js/src/modals/PasswordManager/passwordManager.js b/js/src/modals/PasswordManager/passwordManager.js
index 8121e14d2..0f7a08f27 100644
--- a/js/src/modals/PasswordManager/passwordManager.js
+++ b/js/src/modals/PasswordManager/passwordManager.js
@@ -14,54 +14,55 @@
 // 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 ContentClear from 'material-ui/svg-icons/content/clear';
-import CheckIcon from 'material-ui/svg-icons/navigation/check';
-import SendIcon from 'material-ui/svg-icons/content/send';
-
-import { Tabs, Tab } from 'material-ui/Tabs';
 import Paper from 'material-ui/Paper';
+import { Tabs, Tab } from 'material-ui/Tabs';
+import { observer } from 'mobx-react';
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { showSnackbar } from '~/redux/providers/snackbarActions';
-
-import Form, { Input } from '~/ui/Form';
+import { newError, showSnackbar } from '~/redux/actions';
 import { Button, Modal, IdentityName, IdentityIcon } from '~/ui';
+import Form, { Input } from '~/ui/Form';
+import { CancelIcon, CheckIcon, SendIcon } from '~/ui/Icons';
 
+import Store, { CHANGE_ACTION, TEST_ACTION } from './store';
 import styles from './passwordManager.css';
 
-const TEST_ACTION = 'TEST_ACTION';
-const CHANGE_ACTION = 'CHANGE_ACTION';
+const MSG_SUCCESS_STYLE = {
+  backgroundColor: 'rgba(174, 213, 129, 0.75)'
+};
+const MSG_FAILURE_STYLE = {
+  backgroundColor: 'rgba(229, 115, 115, 0.75)'
+};
+const TABS_INKBAR_STYLE = {
+  backgroundColor: 'rgba(255, 255, 255, 0.55)'
+};
+const TABS_ITEM_STYLE = {
+  backgroundColor: 'rgba(255, 255, 255, 0.05)'
+};
 
-class PasswordManager extends Component {
+@observer
+export default class PasswordManager extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
 
   static propTypes = {
     account: PropTypes.object.isRequired,
-    showSnackbar: PropTypes.func.isRequired,
     onClose: PropTypes.func
   }
 
-  state = {
-    action: TEST_ACTION,
-    waiting: false,
-    showMessage: false,
-    message: { value: '', success: true },
-    currentPass: '',
-    newPass: '',
-    repeatNewPass: '',
-    repeatValid: true,
-    passwordHint: this.props.account.meta && this.props.account.meta.passwordHint || ''
-  }
+  store = new Store(this.context.api, this.props.account);
 
   render () {
     return (
       <Modal
         actions={ this.renderDialogActions() }
-        title='Password Manager'
+        title={
+          <FormattedMessage
+            id='passwordChange.title'
+            defaultMessage='Password Manager' />
+        }
         visible>
         { this.renderAccount() }
         { this.renderPage() }
@@ -71,150 +72,168 @@ class PasswordManager extends Component {
   }
 
   renderMessage () {
-    const { message, showMessage } = this.state;
+    const { infoMessage } = this.store;
 
-    const style = message.success
-      ? {
-        backgroundColor: 'rgba(174, 213, 129, 0.75)'
-      }
-      : {
-        backgroundColor: 'rgba(229, 115, 115, 0.75)'
-      };
-
-    const classes = [ styles.message ];
-
-    if (!showMessage) {
-      classes.push(styles.hideMessage);
+    if (!infoMessage) {
+      return null;
     }
 
     return (
       <Paper
-        zDepth={ 1 }
-        style={ style }
-        className={ classes.join(' ') }>
-        { message.value }
+        className={ `${styles.message}` }
+        style={
+          infoMessage.success
+            ? MSG_SUCCESS_STYLE
+            : MSG_FAILURE_STYLE
+        }
+        zDepth={ 1 }>
+        { infoMessage.value }
       </Paper>
     );
   }
 
   renderAccount () {
-    const { account } = this.props;
-    const { address, meta } = account;
-
-    const passwordHint = meta && meta.passwordHint
-      ? (
-        <span className={ styles.passwordHint }>
-          <span className={ styles.hintLabel }>Hint </span>
-          { meta.passwordHint }
-        </span>
-      )
-      : null;
+    const { address, passwordHint } = this.store;
 
     return (
       <div className={ styles.accountContainer }>
-        <IdentityIcon
-          address={ address }
-        />
+        <IdentityIcon address={ address } />
         <div className={ styles.accountInfos }>
           <IdentityName
-            className={ styles.accountName }
             address={ address }
-            unknown
-          />
+            className={ styles.accountName }
+            unknown />
           <span className={ styles.accountAddress }>
             { address }
           </span>
-          { passwordHint }
+          <span className={ styles.passwordHint }>
+            <span className={ styles.hintLabel }>Hint </span>
+            { passwordHint || '-' }
+          </span>
         </div>
       </div>
     );
   }
 
   renderPage () {
-    const { account } = this.props;
-    const { waiting, repeatValid } = this.state;
-    const disabled = !!waiting;
-
-    const repeatError = repeatValid
-      ? null
-      : 'the two passwords differ';
-
-    const { meta } = account;
-    const passwordHint = meta && meta.passwordHint || '';
+    const { busy, isRepeatValid, passwordHint } = this.store;
 
     return (
       <Tabs
-        inkBarStyle={ {
-          backgroundColor: 'rgba(255, 255, 255, 0.55)'
-        } }
-        tabItemContainerStyle={ {
-          backgroundColor: 'rgba(255, 255, 255, 0.05)'
-        } }
-      >
+        inkBarStyle={ TABS_INKBAR_STYLE }
+        tabItemContainerStyle={ TABS_ITEM_STYLE }>
         <Tab
-          onActive={ this.handleTestActive }
-          label='Test Password'
-        >
-          <Form
-            className={ styles.form }
-          >
+          label={
+            <FormattedMessage
+              id='passwordChange.tabTest.label'
+              defaultMessage='Test Password' />
+          }
+          onActive={ this.onActivateTestTab }>
+          <Form className={ styles.form }>
             <div>
               <Input
-                label='password'
-                hint='your current password for this account'
-                type='password'
+                disabled={ busy }
+                hint={
+                  <FormattedMessage
+                    id='passwordChange.testPassword.hint'
+                    defaultMessage='your account password' />
+                }
+                label={
+                  <FormattedMessage
+                    id='passwordChange.testPassword.label'
+                    defaultMessage='password' />
+                }
+                onChange={ this.onEditTestPassword }
+                onSubmit={ this.testPassword }
                 submitOnBlur={ false }
-                disabled={ disabled }
-                onSubmit={ this.handleTestPassword }
-                onChange={ this.onEditCurrent } />
+                type='password' />
             </div>
           </Form>
         </Tab>
         <Tab
-          onActive={ this.handleChangeActive }
-          label='Change Password'
-        >
-          <Form
-            className={ styles.form }
-          >
+          label={
+            <FormattedMessage
+              id='passwordChange.tabChange.label'
+              defaultMessage='Change Password' />
+          }
+          onActive={ this.onActivateChangeTab }>
+          <Form className={ styles.form }>
             <div>
               <Input
-                label='current password'
-                hint='your current password for this account'
-                type='password'
+                disabled={ busy }
+                hint={
+                  <FormattedMessage
+                    id='passwordChange.currentPassword.hint'
+                    defaultMessage='your current password for this account' />
+                }
+                label={
+                  <FormattedMessage
+                    id='passwordChange.currentPassword.label'
+                    defaultMessage='current password' />
+                }
+                onChange={ this.onEditCurrentPassword }
+                onSubmit={ this.changePassword }
                 submitOnBlur={ false }
-                disabled={ disabled }
-                onSubmit={ this.handleChangePassword }
-                onChange={ this.onEditCurrent } />
+                type='password' />
               <Input
-                label='(optional) new password hint'
-                hint='hint for the new password'
+                disabled={ busy }
+                hint={
+                  <FormattedMessage
+                    id='passwordChange.passwordHint.hint'
+                    defaultMessage='hint for the new password' />
+                }
+                label={
+                  <FormattedMessage
+                    id='passwordChange.passwordHint.label'
+                    defaultMessage='(optional) new password hint' />
+                }
+                onChange={ this.onEditNewPasswordHint }
+                onSubmit={ this.changePassword }
                 submitOnBlur={ false }
-                value={ passwordHint }
-                disabled={ disabled }
-                onSubmit={ this.handleChangePassword }
-                onChange={ this.onEditHint } />
+                value={ passwordHint } />
               <div className={ styles.passwords }>
                 <div className={ styles.password }>
                   <Input
-                    label='new password'
-                    hint='the new password for this account'
-                    type='password'
+                    disabled={ busy }
+                    hint={
+                      <FormattedMessage
+                        id='passwordChange.newPassword.hint'
+                        defaultMessage='the new password for this account' />
+                    }
+                    label={
+                      <FormattedMessage
+                        id='passwordChange.newPassword.label'
+                        defaultMessage='new password' />
+                    }
+                    onChange={ this.onEditNewPassword }
+                    onSubmit={ this.changePassword }
                     submitOnBlur={ false }
-                    disabled={ disabled }
-                    onSubmit={ this.handleChangePassword }
-                    onChange={ this.onEditNew } />
+                    type='password' />
                 </div>
                 <div className={ styles.password }>
                   <Input
-                    label='repeat new password'
-                    hint='repeat the new password for this account'
-                    type='password'
+                    disabled={ busy }
+                    error={
+                      isRepeatValid
+                        ? null
+                        : <FormattedMessage
+                          id='passwordChange.repeatPassword.error'
+                          defaultMessage='the supplied passwords do not match' />
+                    }
+                    hint={
+                      <FormattedMessage
+                        id='passwordChange.repeatPassword.hint'
+                        defaultMessage='repeat the new password for this account' />
+                    }
+                    label={
+                      <FormattedMessage
+                        id='passwordChange.repeatPassword.label'
+                        defaultMessage='repeat new password' />
+                    }
+                    onChange={ this.onEditNewPasswordRepeat }
+                    onSubmit={ this.changePassword }
                     submitOnBlur={ false }
-                    error={ repeatError }
-                    disabled={ disabled }
-                    onSubmit={ this.handleChangePassword }
-                    onChange={ this.onEditRepeatNew } />
+                    type='password' />
                 </div>
               </div>
             </div>
@@ -225,176 +244,118 @@ class PasswordManager extends Component {
   }
 
   renderDialogActions () {
+    const { actionTab, busy, isRepeatValid } = this.store;
     const { onClose } = this.props;
-    const { action, waiting, repeatValid } = this.state;
 
     const cancelBtn = (
       <Button
-        icon={ <ContentClear /> }
-        label='Cancel'
+        icon={ <CancelIcon /> }
+        key='cancel'
+        label={
+          <FormattedMessage
+            id='passwordChange.button.cancel'
+            defaultMessage='Cancel' />
+        }
         onClick={ onClose } />
     );
 
-    if (waiting) {
-      const waitingBtn = (
+    if (busy) {
+      return [
+        cancelBtn,
         <Button
           disabled
-          label='Wait...' />
-      );
-
-      return [ cancelBtn, waitingBtn ];
+          key='wait'
+          label={
+            <FormattedMessage
+              id='passwordChange.button.wait'
+              defaultMessage='Wait...' />
+          } />
+      ];
     }
 
-    if (action === TEST_ACTION) {
-      const testBtn = (
+    if (actionTab === TEST_ACTION) {
+      return [
+        cancelBtn,
         <Button
           icon={ <CheckIcon /> }
-          label='Test'
-          onClick={ this.handleTestPassword } />
-      );
-
-      return [ cancelBtn, testBtn ];
+          key='test'
+          label={
+            <FormattedMessage
+              id='passwordChange.button.test'
+              defaultMessage='Test' />
+          }
+          onClick={ this.testPassword } />
+      ];
     }
 
-    const changeBtn = (
+    return [
+      cancelBtn,
       <Button
-        disabled={ !repeatValid }
+        disabled={ !isRepeatValid }
         icon={ <SendIcon /> }
-        label='Change'
-        onClick={ this.handleChangePassword } />
-    );
-
-    return [ cancelBtn, changeBtn ];
-  }
-
-  onEditCurrent = (event, value) => {
-    this.setState({
-      currentPass: value,
-      showMessage: false
-    });
-  }
-
-  onEditNew = (event, value) => {
-    const repeatValid = value === this.state.repeatNewPass;
-
-    this.setState({
-      newPass: value,
-      showMessage: false,
-      repeatValid
-    });
-  }
-
-  onEditRepeatNew = (event, value) => {
-    const repeatValid = value === this.state.newPass;
-
-    this.setState({
-      repeatNewPass: value,
-      showMessage: false,
-      repeatValid
-    });
-  }
-
-  onEditHint = (event, value) => {
-    this.setState({
-      passwordHint: value,
-      showMessage: false
-    });
-  }
-
-  handleTestActive = () => {
-    this.setState({
-      action: TEST_ACTION,
-      showMessage: false
-    });
-  }
-
-  handleChangeActive = () => {
-    this.setState({
-      action: CHANGE_ACTION,
-      showMessage: false
-    });
-  }
-
-  handleTestPassword = () => {
-    const { account } = this.props;
-    const { currentPass } = this.state;
-
-    this.setState({ waiting: true, showMessage: false });
-
-    this.context
-      .api.parity
-      .testPassword(account.address, currentPass)
-      .then(correct => {
-        const message = correct
-          ? { value: 'This password is correct', success: true }
-          : { value: 'This password is not correct', success: false };
-
-        this.setState({ waiting: false, message, showMessage: true });
-      })
-      .catch(e => {
-        console.error('passwordManager::handleTestPassword', e);
-        this.setState({ waiting: false });
-      });
-  }
-
-  handleChangePassword = () => {
-    const { account, showSnackbar, onClose } = this.props;
-    const { currentPass, newPass, repeatNewPass, passwordHint } = this.state;
-
-    if (repeatNewPass !== newPass) {
-      return;
-    }
-
-    this.setState({ waiting: true, showMessage: false });
-
-    this.context
-      .api.parity
-      .testPassword(account.address, currentPass)
-      .then(correct => {
-        if (!correct) {
-          const message = {
-            value: 'This provided current password is not correct',
-            success: false
-          };
-
-          this.setState({ waiting: false, message, showMessage: true });
-
-          return false;
+        key='change'
+        label={
+          <FormattedMessage
+            id='passwordChange.button.change'
+            defaultMessage='Change' />
         }
+        onClick={ this.changePassword } />
+    ];
+  }
 
-        const meta = Object.assign({}, account.meta, {
-          passwordHint
-        });
+  onActivateChangeTab = () => {
+    this.store.setActionTab(CHANGE_ACTION);
+  }
 
-        return Promise.all([
-          this.context
-            .api.parity
-            .setAccountMeta(account.address, meta),
+  onActivateTestTab = () => {
+    this.store.setActionTab(TEST_ACTION);
+  }
 
-          this.context
-            .api.parity
-            .changePassword(account.address, currentPass, newPass)
-        ])
-          .then(() => {
-            showSnackbar(<div>Your password has been successfully changed.</div>);
-            this.setState({ waiting: false, showMessage: false });
-            onClose();
-          });
+  onEditCurrentPassword = (event, password) => {
+    this.store.setPassword(password);
+  }
+
+  onEditNewPassword = (event, password) => {
+    this.store.setNewPassword(password);
+  }
+
+  onEditNewPasswordHint = (event, passwordHint) => {
+    this.store.setNewPasswordHint(passwordHint);
+  }
+
+  onEditNewPasswordRepeat = (event, password) => {
+    this.store.setNewPasswordRepeat(password);
+  }
+
+  onEditTestPassword = (event, password) => {
+    this.store.setValidatePassword(password);
+  }
+
+  changePassword = () => {
+    return this.store
+      .changePassword()
+      .then((result) => {
+        if (result) {
+          showSnackbar(
+            <div>
+              <FormattedMessage
+                id='passwordChange.success'
+                defaultMessage='Your password has been successfully changed' />
+            </div>
+          );
+          this.props.onClose();
+        }
       })
-      .catch(e => {
-        console.error('passwordManager::handleChangePassword', e);
-        this.setState({ waiting: false });
+      .catch((error) => {
+        newError(error);
+      });
+  }
+
+  testPassword = () => {
+    return this.store
+      .testPassword()
+      .catch((error) => {
+        newError(error);
       });
   }
 }
-
-function mapDispatchToProps (dispatch) {
-  return bindActionCreators({
-    showSnackbar
-  }, dispatch);
-}
-
-export default connect(
-  null,
-  mapDispatchToProps
-)(PasswordManager);
diff --git a/js/src/modals/PasswordManager/passwordManager.spec.js b/js/src/modals/PasswordManager/passwordManager.spec.js
new file mode 100644
index 000000000..744d0ffa3
--- /dev/null
+++ b/js/src/modals/PasswordManager/passwordManager.spec.js
@@ -0,0 +1,81 @@
+// Copyright 2015, 2016 Parity Technologies (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 { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import PasswordManager from './';
+
+import { ACCOUNT, createApi } from './passwordManager.test.js';
+
+let component;
+let onClose;
+
+function render (props) {
+  onClose = sinon.stub();
+
+  component = shallow(
+    <PasswordManager
+      { ...props }
+      account={ ACCOUNT }
+      onClose={ onClose } />,
+    {
+      context: {
+        api: createApi()
+      }
+    }
+  );
+
+  return component;
+}
+
+describe('modals/PasswordManager', () => {
+  describe('rendering', () => {
+    it('renders defaults', () => {
+      expect(render()).to.be.ok;
+    });
+  });
+
+  describe('actions', () => {
+    beforeEach(() => {
+      render();
+    });
+
+    describe('changePassword', () => {
+      it('calls store.changePassword & props.onClose', () => {
+        const instance = component.instance();
+        sinon.spy(instance.store, 'changePassword');
+
+        instance.changePassword().then(() => {
+          expect(instance.store.changePassword).to.have.been.called;
+          expect(onClose).to.have.been.called;
+        });
+      });
+    });
+
+    describe('testPassword', () => {
+      it('calls store.testPassword', () => {
+        const instance = component.instance();
+        sinon.spy(instance.store, 'testPassword');
+
+        instance.testPassword().then(() => {
+          expect(instance.store.testPassword).to.have.been.called;
+        });
+      });
+    });
+  });
+});
diff --git a/js/src/modals/PasswordManager/passwordManager.test.js b/js/src/modals/PasswordManager/passwordManager.test.js
new file mode 100644
index 000000000..9a8f883ec
--- /dev/null
+++ b/js/src/modals/PasswordManager/passwordManager.test.js
@@ -0,0 +1,43 @@
+// Copyright 2015, 2016 Parity Technologies (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 sinon from 'sinon';
+
+const ACCOUNT = {
+  address: '0x123456789a123456789a123456789a123456789a',
+  meta: {
+    description: 'Call me bob',
+    passwordHint: 'some hint',
+    tags: ['testing']
+  },
+  name: 'Bobby',
+  uuid: '123-456'
+};
+
+function createApi (result = true) {
+  return {
+    parity: {
+      changePassword: sinon.stub().resolves(result),
+      setAccountMeta: sinon.stub().resolves(result),
+      testPassword: sinon.stub().resolves(result)
+    }
+  };
+}
+
+export {
+  ACCOUNT,
+  createApi
+};
diff --git a/js/src/modals/PasswordManager/store.js b/js/src/modals/PasswordManager/store.js
new file mode 100644
index 000000000..c60576e0f
--- /dev/null
+++ b/js/src/modals/PasswordManager/store.js
@@ -0,0 +1,161 @@
+// Copyright 2015, 2016 Parity Technologies (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 { action, computed, observable, transaction } from 'mobx';
+
+const CHANGE_ACTION = 'CHANGE_ACTION';
+const TEST_ACTION = 'TEST_ACTION';
+
+export default class Store {
+  @observable actionTab = TEST_ACTION;
+  @observable address = null;
+  @observable busy = false;
+  @observable infoMessage = null;
+  @observable meta = null;
+  @observable newPassword = '';
+  @observable newPasswordHint = '';
+  @observable newPasswordRepeat = '';
+  @observable password = '';
+  @observable passwordHint = '';
+  @observable validatePassword = '';
+
+  constructor (api, account) {
+    this._api = api;
+
+    this.address = account.address;
+    this.meta = account.meta || {};
+    this.passwordHint = this.meta.passwordHint || '';
+  }
+
+  @computed get isRepeatValid () {
+    return this.newPasswordRepeat === this.newPassword;
+  }
+
+  @action setActionTab = (actionTab) => {
+    transaction(() => {
+      this.actionTab = actionTab;
+      this.setInfoMessage();
+    });
+  }
+
+  @action setBusy = (busy, message) => {
+    transaction(() => {
+      this.busy = busy;
+      this.setInfoMessage(message);
+    });
+  }
+
+  @action setInfoMessage = (message = null) => {
+    this.infoMessage = message;
+  }
+
+  @action setPassword = (password) => {
+    transaction(() => {
+      this.password = password;
+      this.setInfoMessage();
+    });
+  }
+
+  @action setNewPassword = (password) => {
+    transaction(() => {
+      this.newPassword = password;
+      this.setInfoMessage();
+    });
+  }
+
+  @action setNewPasswordHint = (passwordHint) => {
+    transaction(() => {
+      this.newPasswordHint = passwordHint;
+      this.setInfoMessage();
+    });
+  }
+
+  @action setNewPasswordRepeat = (password) => {
+    transaction(() => {
+      this.newPasswordRepeat = password;
+      this.setInfoMessage();
+    });
+  }
+
+  @action setValidatePassword = (password) => {
+    transaction(() => {
+      this.validatePassword = password;
+      this.setInfoMessage();
+    });
+  }
+
+  changePassword = () => {
+    if (!this.isRepeatValid) {
+      return Promise.resolve(false);
+    }
+
+    this.setBusy(true);
+
+    return this
+      .testPassword(this.password)
+      .then((result) => {
+        if (!result) {
+          return false;
+        }
+
+        const meta = Object.assign({}, this.meta, {
+          passwordHint: this.newPasswordHint
+        });
+
+        return Promise
+          .all([
+            this._api.parity.setAccountMeta(this.address, meta),
+            this._api.parity.changePassword(this.address, this.password, this.newPassword)
+          ])
+          .then(() => {
+            this.setBusy(false);
+            return true;
+          });
+      })
+      .catch((error) => {
+        console.error('changePassword', error);
+        this.setBusy(false);
+        throw error;
+      });
+  }
+
+  testPassword = (password) => {
+    this.setBusy(false);
+
+    return this._api.parity
+      .testPassword(this.address, password || this.validatePassword)
+      .then((success) => {
+        this.setBusy(false, {
+          success,
+          value: success
+            ? 'This password is correct'
+            : 'This password is not correct'
+        });
+
+        return success;
+      })
+      .catch((error) => {
+        console.error('testPassword', error);
+        this.setBusy(false);
+        throw error;
+      });
+  }
+}
+
+export {
+  CHANGE_ACTION,
+  TEST_ACTION
+};
diff --git a/js/src/modals/PasswordManager/store.spec.js b/js/src/modals/PasswordManager/store.spec.js
new file mode 100644
index 000000000..a7c9642b6
--- /dev/null
+++ b/js/src/modals/PasswordManager/store.spec.js
@@ -0,0 +1,103 @@
+// Copyright 2015, 2016 Parity Technologies (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 Store from './store';
+import { ACCOUNT, createApi } from './passwordManager.test.js';
+
+let api;
+let store;
+
+function createStore (account) {
+  api = createApi();
+  store = new Store(api, account);
+
+  return store;
+}
+
+describe('modals/PasswordManager/Store', () => {
+  beforeEach(() => {
+    createStore(ACCOUNT);
+  });
+
+  describe('constructor', () => {
+    it('extracts the address', () => {
+      expect(store.address).to.equal(ACCOUNT.address);
+    });
+
+    describe('meta', () => {
+      it('extracts the full meta', () => {
+        expect(store.meta).to.deep.equal(ACCOUNT.meta);
+      });
+
+      it('extracts the passwordHint', () => {
+        expect(store.passwordHint).to.equal(ACCOUNT.meta.passwordHint);
+      });
+    });
+  });
+
+  describe('operations', () => {
+    const CUR_PASSWORD = 'aPassW0rd';
+    const NEW_PASSWORD = 'br@ndNEW';
+    const NEW_HINT = 'something new to test';
+
+    describe('changePassword', () => {
+      beforeEach(() => {
+        store.setPassword(CUR_PASSWORD);
+        store.setNewPasswordHint(NEW_HINT);
+        store.setNewPassword(NEW_PASSWORD);
+        store.setNewPasswordRepeat(NEW_PASSWORD);
+      });
+
+      it('calls parity.testPassword with current password', () => {
+        return store.changePassword().then(() => {
+          expect(api.parity.testPassword).to.have.been.calledWith(ACCOUNT.address, CUR_PASSWORD);
+        });
+      });
+
+      it('calls parity.setAccountMeta with new hint', () => {
+        return store.changePassword().then(() => {
+          expect(api.parity.setAccountMeta).to.have.been.calledWith(ACCOUNT.address, Object.assign({}, ACCOUNT.meta, {
+            passwordHint: NEW_HINT
+          }));
+        });
+      });
+
+      it('calls parity.changePassword with the new password', () => {
+        return store.changePassword().then(() => {
+          expect(api.parity.changePassword).to.have.been.calledWith(ACCOUNT.address, CUR_PASSWORD, NEW_PASSWORD);
+        });
+      });
+    });
+
+    describe('testPassword', () => {
+      beforeEach(() => {
+        store.setValidatePassword(CUR_PASSWORD);
+      });
+
+      it('calls parity.testPassword', () => {
+        return store.testPassword().then(() => {
+          expect(api.parity.testPassword).to.have.been.calledWith(ACCOUNT.address, CUR_PASSWORD);
+        });
+      });
+
+      it('sets the infoMessage for success/failure', () => {
+        return store.testPassword().then(() => {
+          expect(store.infoMessage).not.to.be.null;
+        });
+      });
+    });
+  });
+});
diff --git a/js/src/redux/actions.js b/js/src/redux/actions.js
index 0be511bd3..0618adfd3 100644
--- a/js/src/redux/actions.js
+++ b/js/src/redux/actions.js
@@ -16,6 +16,7 @@
 
 import { newError } from '~/ui/Errors/actions';
 import { setAddressImage } from './providers/imagesActions';
+import { showSnackbar } from './providers/snackbarActions';
 import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from './providers/statusActions';
 import { toggleView } from '~/views/Settings/actions';
 
@@ -23,6 +24,7 @@ export {
   newError,
   clearStatusLogs,
   setAddressImage,
+  showSnackbar,
   toggleStatusLogs,
   toggleStatusRefresh,
   toggleView
diff --git a/js/src/ui/Icons/index.js b/js/src/ui/Icons/index.js
index 84061f8ed..8901d7dc7 100644
--- a/js/src/ui/Icons/index.js
+++ b/js/src/ui/Icons/index.js
@@ -24,6 +24,7 @@ import LockedIcon from 'material-ui/svg-icons/action/lock-outline';
 import NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
 import PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
 import SaveIcon from 'material-ui/svg-icons/content/save';
+import SendIcon from 'material-ui/svg-icons/content/send';
 import SnoozeIcon from 'material-ui/svg-icons/av/snooze';
 import VisibleIcon from 'material-ui/svg-icons/image/remove-red-eye';
 
@@ -38,6 +39,7 @@ export {
   NextIcon,
   PrevIcon,
   SaveIcon,
+  SendIcon,
   SnoozeIcon,
   VisibleIcon
 };
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
index 058c20db3..9245e0a1a 100644
--- a/js/src/views/Account/Header/header.js
+++ b/js/src/views/Account/Header/header.js
@@ -72,7 +72,7 @@ export default class Header extends Component {
           </div>
 
           <div className={ styles.tags }>
-            <Tags tags={ meta.tags } />
+            <Tags tags={ meta.tags.slice() } />
           </div>
           <div className={ styles.balances }>
             <Balance

From 8677c3b91f05fd625bf949c0ab0457b58f743a1d Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 28 Dec 2016 18:09:54 +0100
Subject: [PATCH 02/28] Cleanup AddContract with store (#3981)

* Splits (WIP)

* Expand getters & setters

* Initial abi type set

* Expand

* Don't rely on passed api

* Store tests in place

* Allow RadioButtons to accept MobX arrays

* Fixes for manual testing
---
 js/src/modals/AddContract/addContract.js      | 283 ++++++++----------
 js/src/modals/AddContract/addContract.spec.js |  55 ++++
 js/src/modals/AddContract/addContract.test.js |  38 +++
 js/src/modals/AddContract/store.js            | 126 ++++++++
 js/src/modals/AddContract/store.spec.js       | 171 +++++++++++
 js/src/modals/AddContract/types.js            |  81 +++++
 js/src/ui/Form/RadioButtons/radioButtons.js   |  39 ++-
 js/src/util/proptypes.js                      |   7 +
 js/src/util/validation.js                     |  14 +-
 9 files changed, 634 insertions(+), 180 deletions(-)
 create mode 100644 js/src/modals/AddContract/addContract.spec.js
 create mode 100644 js/src/modals/AddContract/addContract.test.js
 create mode 100644 js/src/modals/AddContract/store.js
 create mode 100644 js/src/modals/AddContract/store.spec.js
 create mode 100644 js/src/modals/AddContract/types.js

diff --git a/js/src/modals/AddContract/addContract.js b/js/src/modals/AddContract/addContract.js
index 0d04438c3..c5e7aac61 100644
--- a/js/src/modals/AddContract/addContract.js
+++ b/js/src/modals/AddContract/addContract.js
@@ -14,38 +14,17 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
-import ContentAdd from 'material-ui/svg-icons/content/add';
-import ContentClear from 'material-ui/svg-icons/content/clear';
-import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
-import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
+import { FormattedMessage } from 'react-intl';
 
+import { newError } from '~/redux/actions';
 import { Button, Modal, Form, Input, InputAddress, RadioButtons } from '~/ui';
-import { ERRORS, validateAbi, validateAddress, validateName } from '~/util/validation';
+import { AddIcon, CancelIcon, NextIcon, PrevIcon } from '~/ui/Icons';
 
-import { eip20, wallet } from '~/contracts/abi';
-
-const ABI_TYPES = [
-  {
-    label: 'Token', readOnly: true, value: JSON.stringify(eip20),
-    type: 'token',
-    description: (<span>A standard <a href='https://github.com/ethereum/EIPs/issues/20' target='_blank'>ERC 20</a> token</span>)
-  },
-  {
-    label: 'Multisig Wallet', readOnly: true,
-    type: 'multisig',
-    value: JSON.stringify(wallet),
-    description: (<span>Official Multisig contract: <a href='https://github.com/ethereum/dapp-bin/blob/master/wallet/wallet.sol' target='_blank'>see contract code</a></span>)
-  },
-  {
-    label: 'Custom Contract', value: '',
-    type: 'custom',
-    description: 'Contract created from custom ABI'
-  }
-];
-
-const STEPS = [ 'choose a contract type', 'enter contract details' ];
+import Store from './store';
 
+@observer
 export default class AddContract extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
@@ -56,219 +35,217 @@ export default class AddContract extends Component {
     onClose: PropTypes.func
   };
 
-  state = {
-    abi: '',
-    abiError: ERRORS.invalidAbi,
-    abiType: ABI_TYPES[2],
-    abiTypeIndex: 2,
-    abiParsed: null,
-    address: '',
-    addressError: ERRORS.invalidAddress,
-    name: '',
-    nameError: ERRORS.invalidName,
-    description: '',
-    step: 0
-  };
-
-  componentDidMount () {
-    this.onChangeABIType(null, this.state.abiTypeIndex);
-  }
+  store = new Store(this.context.api, this.props.contracts);
 
   render () {
-    const { step } = this.state;
+    const { step } = this.store;
 
     return (
       <Modal
-        visible
         actions={ this.renderDialogActions() }
-        steps={ STEPS }
         current={ step }
-      >
-        { this.renderStep(step) }
+        steps={ [
+          <FormattedMessage
+            id='addContract.title.type'
+            defaultMessage='choose a contract type'
+            key='type' />,
+          <FormattedMessage
+            id='addContract.title.details'
+            defaultMessage='enter contract details'
+            key='details' />
+        ] }
+        visible>
+        { this.renderStep() }
       </Modal>
     );
   }
 
-  renderStep (step) {
+  renderStep () {
+    const { step } = this.store;
+
     switch (step) {
       case 0:
         return this.renderContractTypeSelector();
+
       default:
         return this.renderFields();
     }
   }
 
   renderContractTypeSelector () {
-    const { abiTypeIndex } = this.state;
+    const { abiTypeIndex, abiTypes } = this.store;
 
     return (
       <RadioButtons
         name='contractType'
         value={ abiTypeIndex }
-        values={ this.getAbiTypes() }
+        values={ abiTypes }
         onChange={ this.onChangeABIType }
       />
     );
   }
 
   renderDialogActions () {
-    const { addressError, nameError, step } = this.state;
-    const hasError = !!(addressError || nameError);
+    const { step } = this.store;
 
     const cancelBtn = (
       <Button
-        icon={ <ContentClear /> }
-        label='Cancel'
+        icon={ <CancelIcon /> }
+        key='cancel'
+        label={
+          <FormattedMessage
+            id='addContract.button.cancel'
+            defaultMessage='Cancel' />
+        }
         onClick={ this.onClose } />
     );
 
     if (step === 0) {
-      const nextBtn = (
+      return [
+        cancelBtn,
         <Button
-          icon={ <NavigationArrowForward /> }
-          label='Next'
+          icon={ <NextIcon /> }
+          key='next'
+          label={
+            <FormattedMessage
+              id='addContract.button.next'
+              defaultMessage='Next' />
+          }
           onClick={ this.onNext } />
-      );
-
-      return [ cancelBtn, nextBtn ];
+      ];
     }
 
-    const prevBtn = (
+    return [
+      cancelBtn,
       <Button
-        icon={ <NavigationArrowBack /> }
-        label='Back'
-        onClick={ this.onPrev } />
-    );
-
-    const addBtn = (
+        icon={ <PrevIcon /> }
+        key='prev'
+        label={
+          <FormattedMessage
+            id='addContract.button.prev'
+            defaultMessage='Back' />
+        }
+        onClick={ this.onPrev } />,
       <Button
-        icon={ <ContentAdd /> }
-        label='Add Contract'
-        disabled={ hasError }
+        icon={ <AddIcon /> }
+        key='add'
+        label={
+          <FormattedMessage
+            id='addContract.button.add'
+            defaultMessage='Add Contract' />
+        }
+        disabled={ this.store.hasError }
         onClick={ this.onAdd } />
-    );
-
-    return [ cancelBtn, prevBtn, addBtn ];
+    ];
   }
 
   renderFields () {
-    const { abi, abiError, address, addressError, description, name, nameError, abiType } = this.state;
+    const { abi, abiError, abiType, address, addressError, description, name, nameError } = this.store;
 
     return (
       <Form>
         <InputAddress
-          label='network address'
-          hint='the network address for the contract'
           error={ addressError }
-          value={ address }
-          onSubmit={ this.onEditAddress }
+          hint={
+            <FormattedMessage
+              id='addContract.address.hint'
+              defaultMessage='the network address for the contract' />
+          }
+          label={
+            <FormattedMessage
+              id='addContract.address.label'
+              defaultMessage='network address' />
+          }
           onChange={ this.onChangeAddress }
-        />
+          onSubmit={ this.onEditAddress }
+          value={ address } />
         <Input
-          label='contract name'
-          hint='a descriptive name for the contract'
           error={ nameError }
-          value={ name }
-          onSubmit={ this.onEditName } />
+          hint={
+            <FormattedMessage
+              id='addContract.name.hint'
+              defaultMessage='a descriptive name for the contract' />
+          }
+          label={
+            <FormattedMessage
+              id='addContract.name.label'
+              defaultMessage='contract name' />
+          }
+          onSubmit={ this.onEditName }
+          value={ name } />
         <Input
-          multiLine
-          rows={ 1 }
-          label='(optional) contract description'
-          hint='an expanded description for the entry'
-          value={ description }
-          onSubmit={ this.onEditDescription } />
-
+          hint={
+            <FormattedMessage
+              id='addContract.description.hint'
+              defaultMessage='an expanded description for the entry' />
+          }
+          label={
+            <FormattedMessage
+              id='addContract.description.label'
+              defaultMessage='(optional) contract description' />
+          }
+          onSubmit={ this.onEditDescription }
+          value={ description } />
         <Input
-          label='contract abi'
-          hint='the abi for the contract'
           error={ abiError }
-          value={ abi }
-          readOnly={ abiType.readOnly }
+          hint={
+            <FormattedMessage
+              id='addContract.abi.hint'
+              defaultMessage='the abi for the contract' />
+          }
+          label={
+            <FormattedMessage
+              id='addContract.abi.label'
+              defaultMessage='contract abi' />
+          }
           onSubmit={ this.onEditAbi }
-        />
+          readOnly={ abiType.readOnly }
+          value={ abi } />
       </Form>
     );
   }
 
-  getAbiTypes () {
-    return ABI_TYPES.map((type, index) => ({
-      label: type.label,
-      description: type.description,
-      key: index,
-      ...type
-    }));
-  }
-
   onNext = () => {
-    this.setState({ step: this.state.step + 1 });
+    this.store.nextStep();
   }
 
   onPrev = () => {
-    this.setState({ step: this.state.step - 1 });
+    this.store.prevStep();
   }
 
   onChangeABIType = (value, index) => {
-    const abiType = value || ABI_TYPES[index];
-    this.setState({ abiTypeIndex: index, abiType });
-    this.onEditAbi(abiType.value);
+    this.store.setAbiTypeIndex(index);
   }
 
-  onEditAbi = (abiIn) => {
-    const { api } = this.context;
-    const { abi, abiError, abiParsed } = validateAbi(abiIn, api);
-
-    this.setState({ abi, abiError, abiParsed });
+  onEditAbi = (abi) => {
+    this.store.setAbi(abi);
   }
 
-  onChangeAddress = (event, value) => {
-    this.onEditAddress(value);
+  onChangeAddress = (event, address) => {
+    this.onEditAddress(address);
   }
 
-  onEditAddress = (_address) => {
-    const { contracts } = this.props;
-    let { address, addressError } = validateAddress(_address);
-
-    if (!addressError) {
-      const contract = contracts[address];
-
-      if (contract) {
-        addressError = ERRORS.duplicateAddress;
-      }
-    }
-
-    this.setState({
-      address,
-      addressError
-    });
+  onEditAddress = (address) => {
+    this.store.setAddress(address);
   }
 
   onEditDescription = (description) => {
-    this.setState({ description });
+    this.store.setDescription(description);
   }
 
   onEditName = (name) => {
-    this.setState(validateName(name));
+    this.store.setName(name);
   }
 
   onAdd = () => {
-    const { api } = this.context;
-    const { abiParsed, address, name, description, abiType } = this.state;
-
-    Promise.all([
-      api.parity.setAccountName(address, name),
-      api.parity.setAccountMeta(address, {
-        contract: true,
-        deleted: false,
-        timestamp: Date.now(),
-        abi: abiParsed,
-        type: abiType.type,
-        description
+    return this.store
+      .addContract()
+      .then(() => {
+        this.onClose();
       })
-    ]).catch((error) => {
-      console.error('onAdd', error);
-    });
-
-    this.props.onClose();
+      .catch((error) => {
+        newError(error);
+      });
   }
 
   onClose = () => {
diff --git a/js/src/modals/AddContract/addContract.spec.js b/js/src/modals/AddContract/addContract.spec.js
new file mode 100644
index 000000000..d65e06f67
--- /dev/null
+++ b/js/src/modals/AddContract/addContract.spec.js
@@ -0,0 +1,55 @@
+// Copyright 2015, 2016 Parity Technologies (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 { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import AddContract from './';
+
+import { CONTRACTS, createApi } from './addContract.test.js';
+
+let component;
+let onClose;
+
+function renderShallow (props) {
+  onClose = sinon.stub();
+  component = shallow(
+    <AddContract
+      { ...props }
+      contracts={ CONTRACTS }
+      onClose={ onClose } />,
+    {
+      context: {
+        api: createApi()
+      }
+    }
+  );
+
+  return component;
+}
+
+describe('modals/AddContract', () => {
+  describe('rendering', () => {
+    beforeEach(() => {
+      renderShallow();
+    });
+
+    it('renders the defauls', () => {
+      expect(component).to.be.ok;
+    });
+  });
+});
diff --git a/js/src/modals/AddContract/addContract.test.js b/js/src/modals/AddContract/addContract.test.js
new file mode 100644
index 000000000..5dc2af293
--- /dev/null
+++ b/js/src/modals/AddContract/addContract.test.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Parity Technologies (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 sinon from 'sinon';
+
+const ABI = '[{"constant":true,"inputs":[],"name":"totalDonated","outputs":[{"name":"","type":"uint256"}],"type":"function"}]';
+
+const CONTRACTS = {
+  '0x1234567890123456789012345678901234567890': {}
+};
+
+function createApi () {
+  return {
+    parity: {
+      setAccountMeta: sinon.stub().resolves(),
+      setAccountName: sinon.stub().resolves()
+    }
+  };
+}
+
+export {
+  ABI,
+  CONTRACTS,
+  createApi
+};
diff --git a/js/src/modals/AddContract/store.js b/js/src/modals/AddContract/store.js
new file mode 100644
index 000000000..d69df7be1
--- /dev/null
+++ b/js/src/modals/AddContract/store.js
@@ -0,0 +1,126 @@
+// Copyright 2015, 2016 Parity Technologies (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 { action, computed, observable, transaction } from 'mobx';
+
+import { ERRORS, validateAbi, validateAddress, validateName } from '~/util/validation';
+
+import { ABI_TYPES } from './types';
+
+export default class Store {
+  @observable abi = '';
+  @observable abiError = ERRORS.invalidAbi;
+  @observable abiParsed = null;
+  @observable abiTypes = ABI_TYPES;
+  @observable abiTypeIndex = 0;
+  @observable address = '';
+  @observable addressError = ERRORS.invalidAddress;
+  @observable description = '';
+  @observable name = '';
+  @observable nameError = ERRORS.invalidName;
+  @observable step = 0;
+
+  constructor (api, contracts) {
+    this._api = api;
+    this._contracts = contracts;
+
+    this.setAbiTypeIndex(2);
+  }
+
+  @computed get abiType () {
+    return this.abiTypes[this.abiTypeIndex];
+  }
+
+  @computed get hasError () {
+    return !!(this.abiError || this.addressError || this.nameError);
+  }
+
+  @action nextStep = () => {
+    this.step++;
+  }
+
+  @action prevStep = () => {
+    this.step--;
+  }
+
+  @action setAbi = (_abi) => {
+    const { abi, abiError, abiParsed } = validateAbi(_abi);
+
+    transaction(() => {
+      this.abi = abi;
+      this.abiError = abiError;
+      this.abiParsed = abiParsed;
+    });
+  }
+
+  @action setAbiTypeIndex = (abiTypeIndex) => {
+    transaction(() => {
+      this.abiTypeIndex = abiTypeIndex;
+      this.setAbi(this.abiTypes[abiTypeIndex].value);
+    });
+  }
+
+  @action setAddress = (_address) => {
+    let { address, addressError } = validateAddress(_address);
+
+    if (!addressError) {
+      const contract = this._contracts[address];
+
+      if (contract) {
+        addressError = ERRORS.duplicateAddress;
+      }
+    }
+
+    transaction(() => {
+      this.address = address;
+      this.addressError = addressError;
+    });
+  }
+
+  @action setDescription = (description) => {
+    this.description = description;
+  }
+
+  @action setName = (_name) => {
+    const { name, nameError } = validateName(_name);
+
+    transaction(() => {
+      this.name = name;
+      this.nameError = nameError;
+    });
+  }
+
+  addContract () {
+    const meta = {
+      contract: true,
+      deleted: false,
+      timestamp: Date.now(),
+      abi: this.abiParsed,
+      type: this.abiType.type,
+      description: this.description
+    };
+
+    return Promise
+      .all([
+        this._api.parity.setAccountName(this.address, this.name),
+        this._api.parity.setAccountMeta(this.address, meta)
+      ])
+      .catch((error) => {
+        console.error('addContract', error);
+        throw error;
+      });
+  }
+}
diff --git a/js/src/modals/AddContract/store.spec.js b/js/src/modals/AddContract/store.spec.js
new file mode 100644
index 000000000..e309ac4f6
--- /dev/null
+++ b/js/src/modals/AddContract/store.spec.js
@@ -0,0 +1,171 @@
+// Copyright 2015, 2016 Parity Technologies (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 Store from './store';
+
+import { ABI, CONTRACTS, createApi } from './addContract.test.js';
+
+const INVALID_ADDR = '0x123';
+const VALID_ADDR = '0x5A5eFF38DA95b0D58b6C616f2699168B480953C9';
+const DUPE_ADDR = Object.keys(CONTRACTS)[0];
+
+let api;
+let store;
+
+function createStore () {
+  api = createApi();
+  store = new Store(api, CONTRACTS);
+}
+
+describe('modals/AddContract/Store', () => {
+  beforeEach(() => {
+    createStore();
+  });
+
+  describe('constructor', () => {
+    it('creates an instance', () => {
+      expect(store).to.be.ok;
+    });
+
+    it('defaults to custom ABI', () => {
+      expect(store.abiType.type).to.equal('custom');
+    });
+  });
+
+  describe('@actions', () => {
+    describe('nextStep/prevStep', () => {
+      it('moves to the next/prev step', () => {
+        expect(store.step).to.equal(0);
+        store.nextStep();
+        expect(store.step).to.equal(1);
+        store.prevStep();
+        expect(store.step).to.equal(0);
+      });
+    });
+
+    describe('setAbiTypeIndex', () => {
+      beforeEach(() => {
+        store.setAbiTypeIndex(1);
+      });
+
+      it('changes the index', () => {
+        expect(store.abiTypeIndex).to.equal(1);
+      });
+
+      it('changes the abi', () => {
+        expect(store.abi).to.deep.equal(store.abiTypes[1].value);
+      });
+    });
+
+    describe('setAddress', () => {
+      it('sets a valid address', () => {
+        store.setAddress(VALID_ADDR);
+        expect(store.address).to.equal(VALID_ADDR);
+        expect(store.addressError).to.be.null;
+      });
+
+      it('sets the error on invalid address', () => {
+        store.setAddress(INVALID_ADDR);
+        expect(store.address).to.equal(INVALID_ADDR);
+        expect(store.addressError).not.to.be.null;
+      });
+
+      it('sets the error on suplicate address', () => {
+        store.setAddress(DUPE_ADDR);
+        expect(store.address).to.equal(DUPE_ADDR);
+        expect(store.addressError).not.to.be.null;
+      });
+    });
+
+    describe('setDescription', () => {
+      it('sets the description', () => {
+        store.setDescription('test description');
+        expect(store.description).to.equal('test description');
+      });
+    });
+
+    describe('setName', () => {
+      it('sets the name', () => {
+        store.setName('some name');
+        expect(store.name).to.equal('some name');
+        expect(store.nameError).to.be.null;
+      });
+
+      it('sets the error', () => {
+        store.setName('s');
+        expect(store.name).to.equal('s');
+        expect(store.nameError).not.to.be.null;
+      });
+    });
+  });
+
+  describe('@computed', () => {
+    describe('abiType', () => {
+      it('matches the index', () => {
+        expect(store.abiType).to.deep.equal(store.abiTypes[2]);
+      });
+    });
+
+    describe('hasError', () => {
+      beforeEach(() => {
+        store.setAddress(VALID_ADDR);
+        store.setName('valid name');
+        store.setAbi(ABI);
+      });
+
+      it('is false with no errors', () => {
+        expect(store.hasError).to.be.false;
+      });
+
+      it('is true with address error', () => {
+        store.setAddress(DUPE_ADDR);
+        expect(store.hasError).to.be.true;
+      });
+
+      it('is true with name error', () => {
+        store.setName('s');
+        expect(store.hasError).to.be.true;
+      });
+
+      it('is true with abi error', () => {
+        store.setAbi('');
+        expect(store.hasError).to.be.true;
+      });
+    });
+  });
+
+  describe('interactions', () => {
+    describe('addContract', () => {
+      beforeEach(() => {
+        store.setAddress(VALID_ADDR);
+        store.setName('valid name');
+        store.setAbi(ABI);
+      });
+
+      it('sets the account name', () => {
+        return store.addContract().then(() => {
+          expect(api.parity.setAccountName).to.have.been.calledWith(VALID_ADDR, 'valid name');
+        });
+      });
+
+      it('sets the account meta', () => {
+        return store.addContract().then(() => {
+          expect(api.parity.setAccountMeta).to.have.been.called;
+        });
+      });
+    });
+  });
+});
diff --git a/js/src/modals/AddContract/types.js b/js/src/modals/AddContract/types.js
new file mode 100644
index 000000000..9f64173f6
--- /dev/null
+++ b/js/src/modals/AddContract/types.js
@@ -0,0 +1,81 @@
+// Copyright 2015, 2016 Parity Technologies (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 from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { eip20, wallet } from '~/contracts/abi';
+
+const ABI_TYPES = [
+  {
+    description:
+      <FormattedMessage
+        id='addContract.abiType.token.description'
+        defaultMessage='A standard {erc20} token'
+        values={ {
+          erc20:
+            <a href='https://github.com/ethereum/EIPs/issues/20' target='_blank'>
+              <FormattedMessage
+                id='addContract.abiType.token.erc20'
+                defaultMessage='ERC 20' />
+            </a>
+        } } />,
+    label:
+      <FormattedMessage
+        id='addContract.abiType.token.label'
+        defaultMessage='Token' />,
+    readOnly: true,
+    type: 'token',
+    value: JSON.stringify(eip20)
+  },
+  {
+    description:
+      <FormattedMessage
+        id='addContract.abiType.multisigWallet.description'
+        defaultMessage='Ethereum Multisig contract {link}'
+        values={ {
+          link:
+            <a href='https://github.com/ethereum/dapp-bin/blob/master/wallet/wallet.sol' target='_blank'>
+              <FormattedMessage
+                id='addContract.abiType.multisigWallet.link'
+                defaultMessage='see contract code' />
+            </a>
+        } } />,
+    label:
+      <FormattedMessage
+        id='addContract.abiType.multisigWallet.label'
+        defaultMessage='Multisig Wallet' />,
+    readOnly: true,
+    type: 'multisig',
+    value: JSON.stringify(wallet)
+  },
+  {
+    description:
+      <FormattedMessage
+        id='addContract.abiType.custom.description'
+        defaultMessage='Contract created from custom ABI' />,
+    label:
+      <FormattedMessage
+        id='addContract.abiType.custom.label'
+        defaultMessage='Custom Contract' />,
+    type: 'custom',
+    value: ''
+  }
+];
+
+export {
+  ABI_TYPES
+};
diff --git a/js/src/ui/Form/RadioButtons/radioButtons.js b/js/src/ui/Form/RadioButtons/radioButtons.js
index d9489c6aa..e18a884be 100644
--- a/js/src/ui/Form/RadioButtons/radioButtons.js
+++ b/js/src/ui/Form/RadioButtons/radioButtons.js
@@ -14,19 +14,18 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
 import React, { Component, PropTypes } from 'react';
 
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
-
+import { arrayOrObjectProptype } from '~/util/proptypes';
 import styles from './radioButtons.css';
 
 export default class RadioButtons extends Component {
   static propTypes = {
+    name: PropTypes.string,
     onChange: PropTypes.func.isRequired,
-    values: PropTypes.array.isRequired,
-
     value: PropTypes.any,
-    name: PropTypes.string
+    values: arrayOrObjectProptype().isRequired
   };
 
   static defaultProps = {
@@ -40,16 +39,16 @@ export default class RadioButtons extends Component {
     const index = Number.isNaN(parseInt(value))
       ? values.findIndex((val) => val.key === value)
       : parseInt(value);
-
-    const selectedValue = typeof value !== 'object' ? values[index] : value;
+    const selectedValue = typeof value !== 'object'
+      ? values[index]
+      : value;
     const key = this.getKey(selectedValue, index);
 
     return (
       <RadioButtonGroup
-        valueSelected={ key }
         name={ name }
         onChange={ this.onChange }
-      >
+        valueSelected={ key } >
         { this.renderContent() }
       </RadioButtonGroup>
     );
@@ -59,7 +58,9 @@ export default class RadioButtons extends Component {
     const { values } = this.props;
 
     return values.map((value, index) => {
-      const label = typeof value === 'string' ? value : value.label || '';
+      const label = typeof value === 'string'
+        ? value
+        : value.label || '';
       const description = (typeof value !== 'string' && value.description) || null;
       const key = this.getKey(value, index);
 
@@ -67,28 +68,26 @@ export default class RadioButtons extends Component {
         <RadioButton
           className={ styles.spaced }
           key={ index }
-
-          value={ key }
-          label={ (
+          label={
             <div className={ styles.typeContainer }>
               <span>{ label }</span>
               {
                 description
-                ? (
-                  <span className={ styles.desc }>{ description }</span>
-                )
+                ? <span className={ styles.desc }>{ description }</span>
                 : null
               }
             </div>
-          ) }
-        />
+          }
+          value={ key } />
       );
     });
   }
 
   getKey (value, index) {
     if (typeof value !== 'string') {
-      return typeof value.key === 'undefined' ? index : value.key;
+      return typeof value.key === 'undefined'
+        ? index
+        : value.key;
     }
 
     return index;
@@ -96,8 +95,8 @@ export default class RadioButtons extends Component {
 
   onChange = (event, index) => {
     const { onChange, values } = this.props;
-
     const value = values[index] || values.find((v) => v.key === index);
+
     onChange(value, index);
   }
 }
diff --git a/js/src/util/proptypes.js b/js/src/util/proptypes.js
index 1f993768e..58b54f775 100644
--- a/js/src/util/proptypes.js
+++ b/js/src/util/proptypes.js
@@ -16,6 +16,13 @@
 
 import { PropTypes } from 'react';
 
+export function arrayOrObjectProptype () {
+  return PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object
+  ]);
+}
+
 export function nullableProptype (type) {
   return PropTypes.oneOfType([
     PropTypes.oneOf([ null ]),
diff --git a/js/src/util/validation.js b/js/src/util/validation.js
index 6838c2e71..a789300b4 100644
--- a/js/src/util/validation.js
+++ b/js/src/util/validation.js
@@ -35,21 +35,21 @@ export const ERRORS = {
   gasBlockLimit: 'the transaction execution will exceed the block gas limit'
 };
 
-export function validateAbi (abi, api) {
+export function validateAbi (abi) {
   let abiError = null;
   let abiParsed = null;
 
   try {
     abiParsed = JSON.parse(abi);
 
-    if (!api.util.isArray(abiParsed)) {
+    if (!util.isArray(abiParsed)) {
       abiError = ERRORS.invalidAbi;
       return { abi, abiError, abiParsed };
     }
 
     // Validate each elements of the Array
     const invalidIndex = abiParsed
-      .map((o) => isValidAbiEvent(o, api) || isValidAbiFunction(o, api) || isAbiFallback(o))
+      .map((o) => isValidAbiEvent(o) || isValidAbiFunction(o) || isAbiFallback(o))
       .findIndex((valid) => !valid);
 
     if (invalidIndex !== -1) {
@@ -70,13 +70,13 @@ export function validateAbi (abi, api) {
   };
 }
 
-function isValidAbiFunction (object, api) {
+function isValidAbiFunction (object) {
   if (!object) {
     return false;
   }
 
   return ((object.type === 'function' && object.name) || object.type === 'constructor') &&
-    (object.inputs && api.util.isArray(object.inputs));
+    (object.inputs && util.isArray(object.inputs));
 }
 
 function isAbiFallback (object) {
@@ -87,14 +87,14 @@ function isAbiFallback (object) {
   return object.type === 'fallback';
 }
 
-function isValidAbiEvent (object, api) {
+function isValidAbiEvent (object) {
   if (!object) {
     return false;
   }
 
   return (object.type === 'event') &&
     (object.name) &&
-    (object.inputs && api.util.isArray(object.inputs));
+    (object.inputs && util.isArray(object.inputs));
 }
 
 export function validateAddress (address) {

From a3fe74ac697efafe3c6f2430a6f0c1d65fd1a0b3 Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Wed, 28 Dec 2016 17:53:25 +0000
Subject: [PATCH 03/28] [ci skip] js-precompiled 20161228-175047

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index c0e94737d..c72a873f3 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#d95a7dd2cc7469dc58af77743ec3ebc65e51cf36"
+source = "git+https://github.com/ethcore/js-precompiled.git#696c891a568eeed8bfe0484fd6a30bc68cfe9f2b"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 242676eb0..607fbf1fd 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.152",
+  "version": "0.2.153",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 34aee26a2e4744170d7ba402d599d33b9a985b52 Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Thu, 29 Dec 2016 04:20:52 +0000
Subject: [PATCH 04/28] [ci skip] js-precompiled 20161229-041755

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index c72a873f3..f7916219e 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#696c891a568eeed8bfe0484fd6a30bc68cfe9f2b"
+source = "git+https://github.com/ethcore/js-precompiled.git#d04ae84851120cfbb45120a2f42dd102a82739b8"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 607fbf1fd..b6df91ae0 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.153",
+  "version": "0.2.154",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 4101396fc431854d77671c68b595e2c613ddec9f Mon Sep 17 00:00:00 2001
From: Robert Habermeier <rphmeier@gmail.com>
Date: Thu, 29 Dec 2016 11:06:00 +0100
Subject: [PATCH 05/28] remove node journal: dead code

---
 util/src/trie/journal.rs | 103 ---------------------------------------
 util/src/trie/mod.rs     |   2 -
 util/src/trie/node.rs    |  41 ----------------
 3 files changed, 146 deletions(-)
 delete mode 100644 util/src/trie/journal.rs

diff --git a/util/src/trie/journal.rs b/util/src/trie/journal.rs
deleted file mode 100644
index c863dd8a4..000000000
--- a/util/src/trie/journal.rs
+++ /dev/null
@@ -1,103 +0,0 @@
-// Copyright 2015, 2016 Parity Technologies (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/>.
-
-use std::default::Default;
-use sha3::*;
-use hash::H256;
-use bytes::*;
-use rlp::*;
-use hashdb::*;
-
-/// Type of operation for the backing database - either a new node or a node deletion.
-#[derive(Debug)]
-enum Operation {
-	New(H256, DBValue),
-	Delete(H256),
-}
-
-/// How many insertions and removals were done in an `apply` operation.
-pub struct Score {
-	/// Number of insertions.
-	pub inserts: usize,
-	/// Number of removals.
-	pub removes: usize,
-}
-
-/// A journal of operations on the backing database.
-#[derive(Debug)]
-pub struct Journal (Vec<Operation>);
-
-impl Default for Journal {
-	fn default() -> Self {
-		Journal::new()
-	}
-}
-
-impl Journal {
-	/// Create a new, empty, object.
-	pub fn new() -> Journal { Journal(vec![]) }
-
-	/// Given the RLP that encodes a node, append a reference to that node `out` and leave `journal`
-	/// such that the reference is valid, once applied.
-	pub fn new_node(&mut self, rlp: DBValue, out: &mut RlpStream) {
-		if rlp.len() >= 32 {
-			let rlp_sha3 = rlp.sha3();
-
-			trace!("new_node: reference node {:?} => {:?}", rlp_sha3, &*rlp);
-			out.append(&rlp_sha3);
-			self.0.push(Operation::New(rlp_sha3, rlp));
-		}
-		else {
-			trace!("new_node: inline node {:?}", &*rlp);
-			out.append_raw(&rlp, 1);
-		}
-	}
-
-	/// Given the RLP that encodes a now-unused node, leave `journal` in such a state that it is noted.
-	pub fn delete_node_sha3(&mut self, old_sha3: H256) {
-		trace!("delete_node:  {:?}", old_sha3);
-		self.0.push(Operation::Delete(old_sha3));
-	}
-
-	/// Register an RLP-encoded node for deletion (given a slice), if it needs to be deleted.
-	pub fn delete_node(&mut self, old: &[u8]) {
-		let r = Rlp::new(old);
-		if r.is_data() && r.size() == 32 {
-			self.delete_node_sha3(r.as_val());
-		}
-	}
-
-	/// Apply this journal to the HashDB `db` and return the number of insertions and removals done.
-	pub fn apply(self, db: &mut HashDB) -> Score {
-		trace!("applying {:?} changes", self.0.len());
-		let mut ret = Score{inserts: 0, removes: 0};
-		for d in self.0 {
-			match d {
-				Operation::Delete(h) => {
-					trace!("TrieDBMut::apply --- {:?}", &h);
-					db.remove(&h);
-					ret.removes += 1;
-				},
-				Operation::New(h, d) => {
-					trace!("TrieDBMut::apply +++ {:?} -> {:?}", &h, d.pretty());
-					db.emplace(h, d);
-					ret.inserts += 1;
-				}
-			}
-		}
-		ret
-	}
-}
diff --git a/util/src/trie/mod.rs b/util/src/trie/mod.rs
index 6a0e588c3..151760c8c 100644
--- a/util/src/trie/mod.rs
+++ b/util/src/trie/mod.rs
@@ -22,8 +22,6 @@ use hashdb::{HashDB, DBValue};
 
 /// Export the standardmap module.
 pub mod standardmap;
-/// Export the journal module.
-pub mod journal;
 /// Export the node module.
 pub mod node;
 /// Export the triedb module.
diff --git a/util/src/trie/node.rs b/util/src/trie/node.rs
index e21fc8b3f..44f1f3bfa 100644
--- a/util/src/trie/node.rs
+++ b/util/src/trie/node.rs
@@ -18,7 +18,6 @@ use elastic_array::ElasticArray36;
 use nibbleslice::*;
 use bytes::*;
 use rlp::*;
-use super::journal::*;
 use hashdb::DBValue;
 
 /// Partial node key type.
@@ -123,44 +122,4 @@ impl Node {
 			}
 		}
 	}
-
-	/// Encode the node, adding it to `journal` if necessary and return the RLP valid for
-	/// insertion into a parent node.
-	pub fn encoded_and_added(&self, journal: &mut Journal) -> DBValue {
-		let mut stream = RlpStream::new();
-		match *self {
-			Node::Leaf(ref slice, ref value) => {
-				stream.begin_list(2);
-				stream.append(&&**slice);
-				stream.append(&&**value);
-			},
-			Node::Extension(ref slice, ref raw_rlp) => {
-				stream.begin_list(2);
-				stream.append(&&**slice);
-				stream.append_raw(&&**raw_rlp, 1);
-			},
-			Node::Branch(ref nodes, ref value) => {
-				stream.begin_list(17);
-				for i in 0..16 {
-					stream.append_raw(&*nodes[i], 1);
-				}
-				match *value {
-					Some(ref n) => { stream.append(&&**n); },
-					None => { stream.append_empty_data(); },
-				}
-			},
-			Node::Empty => {
-				stream.append_empty_data();
-			}
-		}
-		let node = DBValue::from_slice(stream.as_raw());
-		match node.len() {
-			0 ... 31 => node,
-			_ => {
-				let mut stream = RlpStream::new();
-				journal.new_node(node, &mut stream);
-				DBValue::from_slice(stream.as_raw())
-			}
-		}
-	}
 }

From 9814251a2870a0879e3277d8ed52fa3013328f3c Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Thu, 29 Dec 2016 19:47:53 +0100
Subject: [PATCH 06/28] Add Email and Registry lookups to Address Selector
 (#3992)

* Move AccountSelect values to MobX store

* Mail registry + small fixes

* Add Registry to AddressSelect lookups + Nav fixes

* Fix linting

* PR Grumbles

* Fix tests and propTypes
---
 .../DetailsStep/detailsStep.spec.js           |   4 +-
 .../ExecuteContract/executeContract.spec.js   |   4 +-
 .../ExecuteContract/executeContract.test.js   |  12 +
 js/src/ui/AccountCard/accountCard.css         |   5 +
 js/src/ui/AccountCard/accountCard.js          |  15 +-
 js/src/ui/Form/AddressSelect/addressSelect.js | 177 ++++++--------
 .../Form/AddressSelect/addressSelectStore.js  | 222 ++++++++++++++++++
 7 files changed, 327 insertions(+), 112 deletions(-)
 create mode 100644 js/src/ui/Form/AddressSelect/addressSelectStore.js

diff --git a/js/src/modals/ExecuteContract/DetailsStep/detailsStep.spec.js b/js/src/modals/ExecuteContract/DetailsStep/detailsStep.spec.js
index 5c59940eb..3622b9805 100644
--- a/js/src/modals/ExecuteContract/DetailsStep/detailsStep.spec.js
+++ b/js/src/modals/ExecuteContract/DetailsStep/detailsStep.spec.js
@@ -22,7 +22,7 @@ import { ContextProvider, muiTheme } from '~/ui';
 
 import DetailsStep from './';
 
-import { STORE, CONTRACT } from '../executeContract.test.js';
+import { createApi, STORE, CONTRACT } from '../executeContract.test.js';
 
 let component;
 let onAmountChange;
@@ -41,7 +41,7 @@ function render (props) {
   onValueChange = sinon.stub();
 
   component = mount(
-    <ContextProvider api={ {} } muiTheme={ muiTheme } store={ STORE }>
+    <ContextProvider api={ createApi() } muiTheme={ muiTheme } store={ STORE }>
       <DetailsStep
         { ...props }
         contract={ CONTRACT }
diff --git a/js/src/modals/ExecuteContract/executeContract.spec.js b/js/src/modals/ExecuteContract/executeContract.spec.js
index cca4fb2e4..aad966502 100644
--- a/js/src/modals/ExecuteContract/executeContract.spec.js
+++ b/js/src/modals/ExecuteContract/executeContract.spec.js
@@ -20,7 +20,7 @@ import sinon from 'sinon';
 
 import ExecuteContract from './';
 
-import { CONTRACT, STORE } from './executeContract.test.js';
+import { createApi, CONTRACT, STORE } from './executeContract.test.js';
 
 let component;
 let onClose;
@@ -36,7 +36,7 @@ function render (props) {
       contract={ CONTRACT }
       onClose={ onClose }
       onFromAddressChange={ onFromAddressChange } />,
-      { context: { api: {}, store: STORE } }
+      { context: { api: createApi(), store: STORE } }
   ).find('ExecuteContract').shallow();
 
   return component;
diff --git a/js/src/modals/ExecuteContract/executeContract.test.js b/js/src/modals/ExecuteContract/executeContract.test.js
index cf2e1d294..ce196408d 100644
--- a/js/src/modals/ExecuteContract/executeContract.test.js
+++ b/js/src/modals/ExecuteContract/executeContract.test.js
@@ -64,7 +64,19 @@ const STORE = {
   }
 };
 
+function createApi (result = true) {
+  return {
+    parity: {
+      registryAddress: sinon.stub().resolves('0x0000000000000000000000000000000000000000')
+    },
+    util: {
+      sha3: sinon.stub().resolves('0x0000000000000000000000000000000000000000')
+    }
+  };
+}
+
 export {
+  createApi,
   CONTRACT,
   STORE
 };
diff --git a/js/src/ui/AccountCard/accountCard.css b/js/src/ui/AccountCard/accountCard.css
index 67b1704bc..5820ddf2f 100644
--- a/js/src/ui/AccountCard/accountCard.css
+++ b/js/src/ui/AccountCard/accountCard.css
@@ -52,6 +52,11 @@
   }
 }
 
+.description {
+  font-size: 0.75em;
+  color: rgba(255, 255, 255, 0.5);
+}
+
 .accountInfo {
   flex: 1;
 
diff --git a/js/src/ui/AccountCard/accountCard.js b/js/src/ui/AccountCard/accountCard.js
index 3c0062b22..518dfaaa6 100644
--- a/js/src/ui/AccountCard/accountCard.js
+++ b/js/src/ui/AccountCard/accountCard.js
@@ -43,7 +43,7 @@ export default class AccountCard extends Component {
     const { account } = this.props;
     const { copied } = this.state;
 
-    const { address, name, meta = {} } = account;
+    const { address, name, description, meta = {} } = account;
 
     const displayName = (name && name.toUpperCase()) || address;
     const { tags = [] } = meta;
@@ -70,6 +70,7 @@ export default class AccountCard extends Component {
           </div>
 
           { this.renderTags(tags, address) }
+          { this.renderDescription(description) }
           { this.renderAddress(displayName, address) }
           { this.renderBalance(address) }
         </div>
@@ -77,6 +78,18 @@ export default class AccountCard extends Component {
     );
   }
 
+  renderDescription (description) {
+    if (!description) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.description }>
+        <span>{ description }</span>
+      </div>
+    );
+  }
+
   renderAddress (name, address) {
     if (name === address) {
       return null;
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index 86f4b191b..fcf48ab94 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -19,6 +19,7 @@ import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import keycode, { codes } from 'keycode';
 import { FormattedMessage } from 'react-intl';
+import { observer } from 'mobx-react';
 
 import TextFieldUnderline from 'material-ui/TextField/TextFieldUnderline';
 
@@ -26,7 +27,9 @@ import AccountCard from '~/ui/AccountCard';
 import InputAddress from '~/ui/Form/InputAddress';
 import Portal from '~/ui/Portal';
 import { validateAddress } from '~/util/validation';
+import { nodeOrStringProptype } from '~/util/proptypes';
 
+import AddressSelectStore from './addressSelectStore';
 import styles from './addressSelect.css';
 
 const BOTTOM_BORDER_STYLE = { borderBottom: 'solid 3px' };
@@ -34,8 +37,10 @@ const BOTTOM_BORDER_STYLE = { borderBottom: 'solid 3px' };
 // Current Form ID
 let currentId = 1;
 
+@observer
 class AddressSelect extends Component {
   static contextTypes = {
+    api: PropTypes.object.isRequired,
     muiTheme: PropTypes.object.isRequired
   };
 
@@ -55,24 +60,25 @@ class AddressSelect extends Component {
     // Optional props
     allowInput: PropTypes.bool,
     disabled: PropTypes.bool,
-    error: PropTypes.string,
-    hint: PropTypes.string,
-    label: PropTypes.string,
-    value: PropTypes.string
+    error: nodeOrStringProptype(),
+    hint: nodeOrStringProptype(),
+    label: nodeOrStringProptype(),
+    value: nodeOrStringProptype()
   };
 
   static defaultProps = {
     value: ''
   };
 
+  store = new AddressSelectStore(this.context.api);
+
   state = {
     expanded: false,
     focused: false,
     focusedCat: null,
     focusedItem: null,
     inputFocused: false,
-    inputValue: '',
-    values: []
+    inputValue: ''
   };
 
   componentWillMount () {
@@ -80,7 +86,7 @@ class AddressSelect extends Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    if (this.values && this.values.length > 0) {
+    if (this.store.values && this.store.values.length > 0) {
       return;
     }
 
@@ -88,36 +94,7 @@ class AddressSelect extends Component {
   }
 
   setValues (props = this.props) {
-    const { accounts = {}, contracts = {}, contacts = {}, wallets = {} } = props;
-
-    const accountsN = Object.keys(accounts).length;
-    const contractsN = Object.keys(contracts).length;
-    const contactsN = Object.keys(contacts).length;
-    const walletsN = Object.keys(wallets).length;
-
-    if (accountsN + contractsN + contactsN + walletsN === 0) {
-      return;
-    }
-
-    this.values = [
-      {
-        label: 'accounts',
-        values: [].concat(
-          Object.values(wallets),
-          Object.values(accounts)
-        )
-      },
-      {
-        label: 'contacts',
-        values: Object.values(contacts)
-      },
-      {
-        label: 'contracts',
-        values: Object.values(contracts)
-      }
-    ].filter((cat) => cat.values.length > 0);
-
-    this.handleChange();
+    this.store.setValues(props);
   }
 
   render () {
@@ -216,6 +193,7 @@ class AddressSelect extends Component {
         </div>
 
         { this.renderCurrentInput() }
+        { this.renderRegistryValues() }
         { this.renderAccounts() }
       </Portal>
     );
@@ -241,8 +219,28 @@ class AddressSelect extends Component {
     );
   }
 
+  renderRegistryValues () {
+    const { registryValues } = this.store;
+
+    if (registryValues.length === 0) {
+      return null;
+    }
+
+    const accounts = registryValues
+      .map((registryValue, index) => {
+        const account = { ...registryValue, index: `${registryValue.address}_${index}` };
+        return this.renderAccountCard(account);
+      });
+
+    return (
+      <div>
+        { accounts }
+      </div>
+    );
+  }
+
   renderAccounts () {
-    const { values } = this.state;
+    const { values } = this.store;
 
     if (values.length === 0) {
       return (
@@ -257,8 +255,8 @@ class AddressSelect extends Component {
       );
     }
 
-    const categories = values.map((category) => {
-      return this.renderCategory(category.label, category.values);
+    const categories = values.map((category, index) => {
+      return this.renderCategory(category, index);
     });
 
     return (
@@ -268,7 +266,8 @@ class AddressSelect extends Component {
     );
   }
 
-  renderCategory (name, values = []) {
+  renderCategory (category, index) {
+    const { label, key, values = [] } = category;
     let content;
 
     if (values.length === 0) {
@@ -292,8 +291,8 @@ class AddressSelect extends Component {
     }
 
     return (
-      <div className={ styles.category } key={ name }>
-        <div className={ styles.title }>{ name }</div>
+      <div className={ styles.category } key={ `${key}_${index}` }>
+        <div className={ styles.title }>{ label }</div>
         { content }
       </div>
     );
@@ -306,7 +305,7 @@ class AddressSelect extends Component {
     const balance = balances[address];
     const account = {
       ...accountsInfo[address],
-      address, index
+      ..._account
     };
 
     return (
@@ -325,9 +324,10 @@ class AddressSelect extends Component {
     this.inputRef = refId;
   }
 
-  handleCustomInput = () => {
+  validateCustomInput = () => {
     const { allowInput } = this.props;
-    const { inputValue, values } = this.state;
+    const { inputValue } = this.store;
+    const { values } = this.store;
 
     // If input is HEX and allowInput === true, send it
     if (allowInput && inputValue && /^(0x)?([0-9a-f])+$/i.test(inputValue)) {
@@ -335,8 +335,8 @@ class AddressSelect extends Component {
     }
 
     // If only one value, select it
-    if (values.length === 1 && values[0].values.length === 1) {
-      const value = values[0].values[0];
+    if (values.reduce((cur, cat) => cur + cat.values.length, 0) === 1) {
+      const value = values.find((cat) => cat.values.length > 0).values[0];
       return this.handleClick(value.address);
     }
   }
@@ -361,7 +361,7 @@ class AddressSelect extends Component {
       case 'enter':
         const index = this.state.focusedItem;
         if (!index) {
-          return this.handleCustomInput();
+          return this.validateCustomInput();
         }
 
         return this.handleDOMAction(`account_${index}`, 'click');
@@ -408,10 +408,11 @@ class AddressSelect extends Component {
   }
 
   handleNavigation = (direction, event) => {
-    const { focusedItem, focusedCat, values } = this.state;
+    const { focusedItem, focusedCat } = this.state;
+    const { values } = this.store;
 
     // Don't do anything if no values
-    if (values.length === 0) {
+    if (values.reduce((cur, cat) => cur + cat.values.length, 0) === 0) {
       return event;
     }
 
@@ -423,7 +424,12 @@ class AddressSelect extends Component {
 
       event.preventDefault();
 
-      const nextValues = values[focusedCat || 0];
+      const firstCat = values.findIndex((cat) => cat.values.length > 0);
+      const nextCat = focusedCat && values[focusedCat].values.length > 0
+        ? focusedCat
+        : firstCat;
+
+      const nextValues = values[nextCat];
       const nextFocus = nextValues ? nextValues.values[0] : null;
       return this.focusItem(nextFocus && nextFocus.index || 1);
     }
@@ -457,12 +463,21 @@ class AddressSelect extends Component {
 
     // If right: next category
     if (direction === 'right') {
-      nextCategory = Math.min(prevCategoryIndex + 1, values.length - 1);
+      const categoryShift = values
+        .slice(prevCategoryIndex + 1, values.length)
+        .findIndex((cat) => cat.values.length > 0) + 1;
+
+      nextCategory = Math.min(prevCategoryIndex + categoryShift, values.length - 1);
     }
 
     // If right: previous category
     if (direction === 'left') {
-      nextCategory = Math.max(prevCategoryIndex - 1, 0);
+      const categoryShift = values
+        .slice(0, prevCategoryIndex)
+        .reverse()
+        .findIndex((cat) => cat.values.length > 0) + 1;
+
+      nextCategory = Math.max(prevCategoryIndex - categoryShift, 0);
     }
 
     // If left or right: try to keep the horizontal index
@@ -525,43 +540,6 @@ class AddressSelect extends Component {
     this.setState({ expanded: false });
   }
 
-  /**
-   * Filter the given values based on the given
-   * filter
-   */
-  filterValues = (values = [], _filter = '') => {
-    const filter = _filter.toLowerCase();
-
-    return values
-      // Remove empty accounts
-      .filter((a) => a)
-      .filter((account) => {
-        const address = account.address.toLowerCase();
-        const inAddress = address.includes(filter);
-
-        if (!account.name || inAddress) {
-          return inAddress;
-        }
-
-        const name = account.name.toLowerCase();
-        const inName = name.includes(filter);
-        const { meta = {} } = account;
-
-        if (!meta.tags || inName) {
-          return inName;
-        }
-
-        const tags = (meta.tags || []).join('');
-        return tags.includes(filter);
-      })
-      .sort((accA, accB) => {
-        const nameA = accA.name || accA.address;
-        const nameB = accB.name || accB.address;
-
-        return nameA.localeCompare(nameB);
-      });
-  }
-
   handleInputBlur = () => {
     this.setState({ inputFocused: false });
   }
@@ -572,25 +550,10 @@ class AddressSelect extends Component {
 
   handleChange = (event = { target: {} }) => {
     const { value = '' } = event.target;
-    let index = 0;
 
-    const values = this.values
-      .map((category) => {
-        const filteredValues = this
-          .filterValues(category.values, value)
-          .map((value) => {
-            index++;
-            return { ...value, index: parseInt(index) };
-          });
-
-        return {
-          label: category.label,
-          values: filteredValues
-        };
-      });
+    this.store.handleChange(value);
 
     this.setState({
-      values,
       focusedItem: null,
       inputValue: value
     });
diff --git a/js/src/ui/Form/AddressSelect/addressSelectStore.js b/js/src/ui/Form/AddressSelect/addressSelectStore.js
new file mode 100644
index 000000000..61eec13fb
--- /dev/null
+++ b/js/src/ui/Form/AddressSelect/addressSelectStore.js
@@ -0,0 +1,222 @@
+// Copyright 2015, 2016 Parity Technologies (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 from 'react';
+import { observable, action } from 'mobx';
+import { flatMap } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+
+import Contracts from '~/contracts';
+import { sha3 } from '~/api/util/sha3';
+
+export default class AddressSelectStore {
+
+  @observable values = [];
+  @observable registryValues = [];
+
+  initValues = [];
+  regLookups = [];
+
+  constructor (api) {
+    this.api = api;
+
+    const { registry } = Contracts.create(api);
+
+    registry
+      .getContract('emailverification')
+      .then((emailVerification) => {
+        this.regLookups.push({
+          lookup: (value) => {
+            return emailVerification
+              .instance
+              .reverse.call({}, [ sha3(value) ]);
+          },
+          describe: (value) => (
+            <FormattedMessage
+              id='addressSelect.fromEmail'
+              defaultMessage='Verified using email {value}'
+              values={ {
+                value
+              } }
+            />
+          )
+        });
+      });
+
+    registry
+      .getInstance()
+      .then((registryInstance) => {
+        this.regLookups.push({
+          lookup: (value) => {
+            return registryInstance
+              .getAddress.call({}, [ sha3(value), 'A' ]);
+          },
+          describe: (value) => (
+            <FormattedMessage
+              id='addressSelect.fromRegistry'
+              defaultMessage='{value} (from registry)'
+              values={ {
+                value
+              } }
+            />
+          )
+        });
+      });
+  }
+
+  @action setValues (props) {
+    const { accounts = {}, contracts = {}, contacts = {}, wallets = {} } = props;
+
+    const accountsN = Object.keys(accounts).length;
+    const contractsN = Object.keys(contracts).length;
+    const contactsN = Object.keys(contacts).length;
+    const walletsN = Object.keys(wallets).length;
+
+    if (accountsN + contractsN + contactsN + walletsN === 0) {
+      return;
+    }
+
+    this.initValues = [
+      {
+        key: 'accounts',
+        label: (
+          <FormattedMessage
+            id='addressSelect.labels.accounts'
+            defaultMessage='accounts'
+          />
+        ),
+        values: [].concat(
+          Object.values(wallets),
+          Object.values(accounts)
+        )
+      },
+      {
+        key: 'contacts',
+        label: (
+          <FormattedMessage
+            id='addressSelect.labels.contacts'
+            defaultMessage='contacts'
+          />
+        ),
+        values: Object.values(contacts)
+      },
+      {
+        key: 'contracts',
+        label: (
+          <FormattedMessage
+            id='addressSelect.labels.contracts'
+            defaultMessage='contracts'
+          />
+        ),
+        values: Object.values(contracts)
+      }
+    ].filter((cat) => cat.values.length > 0);
+
+    this.handleChange();
+  }
+
+  @action handleChange = (value = '') => {
+    let index = 0;
+
+    this.values = this.initValues
+      .map((category) => {
+        const filteredValues = this
+          .filterValues(category.values, value)
+          .map((value) => {
+            index++;
+
+            return {
+              index: parseInt(index),
+              ...value
+            };
+          });
+
+        return {
+          label: category.label,
+          values: filteredValues
+        };
+      });
+
+    // Registries Lookup
+    this.registryValues = [];
+
+    const lookups = this.regLookups.map((regLookup) => regLookup.lookup(value));
+
+    Promise
+      .all(lookups)
+      .then((results) => {
+        return results
+          .map((result, index) => {
+            if (/^(0x)?0*$/.test(result)) {
+              return;
+            }
+
+            const lowercaseResult = result.toLowerCase();
+
+            const account = flatMap(this.initValues, (cat) => cat.values)
+              .find((account) => account.address.toLowerCase() === lowercaseResult);
+
+            return {
+              description: this.regLookups[index].describe(value),
+              address: result,
+              name: account && account.name || value
+            };
+          })
+          .filter((data) => data);
+      })
+      .then((registryValues) => {
+        this.registryValues = registryValues;
+      });
+  }
+
+  /**
+   * Filter the given values based on the given
+   * filter
+   */
+  filterValues = (values = [], _filter = '') => {
+    const filter = _filter.toLowerCase();
+
+    return values
+      // Remove empty accounts
+      .filter((a) => a)
+      .filter((account) => {
+        const address = account.address.toLowerCase();
+        const inAddress = address.includes(filter);
+
+        if (!account.name || inAddress) {
+          return inAddress;
+        }
+
+        const name = account.name.toLowerCase();
+        const inName = name.includes(filter);
+        const { meta = {} } = account;
+
+        if (!meta.tags || inName) {
+          return inName;
+        }
+
+        const tags = (meta.tags || []).join('');
+        return tags.includes(filter);
+      })
+      .sort((accA, accB) => {
+        const nameA = accA.name || accA.address;
+        const nameB = accB.name || accB.address;
+
+        return nameA.localeCompare(nameB);
+      });
+  }
+
+}

From b24fc97cb6dba924389d9b2632f7ac9f628a36de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20Drwi=C4=99ga?= <tomusdrw@users.noreply.github.com>
Date: Thu, 29 Dec 2016 19:48:28 +0100
Subject: [PATCH 07/28] Correct log index in transaction receipt (#3995)

* Moving logs to separate, testable function

* Adding test

* Fixing log index

* Adding transaction log index

* Fixing rpc tests

* Making interface of  a bit cleaner.
---
 ethcore/src/blockchain/blockchain.rs |   9 +-
 ethcore/src/client/client.rs         | 193 ++++++++++++++++++++-------
 ethcore/src/tests/client.rs          |   1 -
 ethcore/src/types/log_entry.rs       |   2 +
 ethcore/src/types/transaction.rs     |   2 +-
 rpc/src/v1/tests/mocked/eth.rs       |  19 ++-
 rpc/src/v1/types/log.rs              |  10 +-
 rpc/src/v1/types/receipt.rs          |   3 +-
 8 files changed, 179 insertions(+), 60 deletions(-)

diff --git a/ethcore/src/blockchain/blockchain.rs b/ethcore/src/blockchain/blockchain.rs
index 1226a5abe..62e9af250 100644
--- a/ethcore/src/blockchain/blockchain.rs
+++ b/ethcore/src/blockchain/blockchain.rs
@@ -378,7 +378,8 @@ impl BlockProvider for BlockChain {
 					.enumerate()
 					.flat_map(move |(index, (mut logs, tx_hash))| {
 						let current_log_index = log_index;
-						log_index -= logs.len();
+						let no_of_logs = logs.len();
+						log_index -= no_of_logs;
 
 						logs.reverse();
 						logs.into_iter()
@@ -390,6 +391,7 @@ impl BlockProvider for BlockChain {
 								transaction_hash: tx_hash,
 								// iterating in reverse order
 								transaction_index: receipts_len - index - 1,
+								transaction_log_index: no_of_logs - i - 1,
 								log_index: current_log_index - i - 1,
 							})
 					})
@@ -1936,6 +1938,7 @@ mod tests {
 				block_number: block1.header().number(),
 				transaction_hash: tx_hash1.clone(),
 				transaction_index: 0,
+				transaction_log_index: 0,
 				log_index: 0,
 			},
 			LocalizedLogEntry {
@@ -1944,6 +1947,7 @@ mod tests {
 				block_number: block1.header().number(),
 				transaction_hash: tx_hash1.clone(),
 				transaction_index: 0,
+				transaction_log_index: 1,
 				log_index: 1,
 			},
 			LocalizedLogEntry {
@@ -1952,6 +1956,7 @@ mod tests {
 				block_number: block1.header().number(),
 				transaction_hash: tx_hash2.clone(),
 				transaction_index: 1,
+				transaction_log_index: 0,
 				log_index: 2,
 			},
 			LocalizedLogEntry {
@@ -1960,6 +1965,7 @@ mod tests {
 				block_number: block2.header().number(),
 				transaction_hash: tx_hash3.clone(),
 				transaction_index: 0,
+				transaction_log_index: 0,
 				log_index: 0,
 			}
 		]);
@@ -1970,6 +1976,7 @@ mod tests {
 				block_number: block2.header().number(),
 				transaction_hash: tx_hash3.clone(),
 				transaction_index: 0,
+				transaction_log_index: 0,
 				log_index: 0,
 			}
 		]);
diff --git a/ethcore/src/client/client.rs b/ethcore/src/client/client.rs
index 48ff03095..f57b1248a 100644
--- a/ethcore/src/client/client.rs
+++ b/ethcore/src/client/client.rs
@@ -59,7 +59,7 @@ use client::{
 use client::Error as ClientError;
 use env_info::EnvInfo;
 use executive::{Executive, Executed, TransactOptions, contract_address};
-use receipt::LocalizedReceipt;
+use receipt::{Receipt, LocalizedReceipt};
 use trace::{TraceDB, ImportRequest as TraceImportRequest, LocalizedTrace, Database as TraceDatabase};
 use trace;
 use trace::FlatTransactionTraces;
@@ -837,7 +837,6 @@ impl snapshot::DatabaseRestore for Client {
 	}
 }
 
-
 impl BlockChainClient for Client {
 	fn call(&self, t: &SignedTransaction, block: BlockId, analytics: CallAnalytics) -> Result<Executed, CallError> {
 		let header = self.block_header(block).ok_or(CallError::StatePruned)?;
@@ -1134,53 +1133,23 @@ impl BlockChainClient for Client {
 		let chain = self.chain.read();
 		self.transaction_address(id)
 			.and_then(|address| chain.block_number(&address.block_hash).and_then(|block_number| {
-			let t = chain.block_body(&address.block_hash)
-				.and_then(|body| {
-					body.view().localized_transaction_at(&address.block_hash, block_number, address.index)
-				});
+				let transaction = chain.block_body(&address.block_hash)
+					.and_then(|body| body.view().localized_transaction_at(&address.block_hash, block_number, address.index));
 
-			let tx_and_sender = t.and_then(|tx| tx.sender().ok().map(|sender| (tx, sender)));
-
-			match (tx_and_sender, chain.transaction_receipt(&address)) {
-				(Some((tx, sender)), Some(receipt)) => {
-					let block_hash = tx.block_hash.clone();
-					let block_number = tx.block_number.clone();
-					let transaction_hash = tx.hash();
-					let transaction_index = tx.transaction_index;
-					let prior_gas_used = match tx.transaction_index {
-						0 => U256::zero(),
-						i => {
-							let prior_address = TransactionAddress { block_hash: address.block_hash, index: i - 1 };
-							let prior_receipt = chain.transaction_receipt(&prior_address).expect("Transaction receipt at `address` exists; `prior_address` has lower index in same block; qed");
-							prior_receipt.gas_used
-						}
-					};
-					Some(LocalizedReceipt {
-						transaction_hash: tx.hash(),
-						transaction_index: tx.transaction_index,
-						block_hash: tx.block_hash,
-						block_number: tx.block_number,
-						cumulative_gas_used: receipt.gas_used,
-						gas_used: receipt.gas_used - prior_gas_used,
-						contract_address: match tx.action {
-							Action::Call(_) => None,
-							Action::Create => Some(contract_address(&sender, &tx.nonce))
-						},
-						logs: receipt.logs.into_iter().enumerate().map(|(i, log)| LocalizedLogEntry {
-							entry: log,
-							block_hash: block_hash.clone(),
-							block_number: block_number,
-							transaction_hash: transaction_hash.clone(),
-							transaction_index: transaction_index,
-							log_index: i
-						}).collect(),
-						log_bloom: receipt.log_bloom,
-						state_root: receipt.state_root,
+				let previous_receipts = (0..address.index + 1)
+					.map(|index| {
+						let mut address = address.clone();
+						address.index = index;
+						chain.transaction_receipt(&address)
 					})
-				},
-				_ => None
-			}
-		}))
+					.collect();
+				match (transaction, previous_receipts) {
+					(Some(transaction), Some(previous_receipts)) => {
+						Some(transaction_receipt(transaction, previous_receipts))
+					},
+					_ => None,
+				}
+			}))
 	}
 
 	fn tree_route(&self, from: &H256, to: &H256) -> Option<TreeRoute> {
@@ -1535,6 +1504,49 @@ impl Drop for Client {
 	}
 }
 
+/// Returns `LocalizedReceipt` given `LocalizedTransaction`
+/// and a vector of receipts from given block up to transaction index.
+fn transaction_receipt(tx: LocalizedTransaction, mut receipts: Vec<Receipt>) -> LocalizedReceipt {
+	assert_eq!(receipts.len(), tx.transaction_index + 1, "All previous receipts are provided.");
+
+	let sender = tx.sender()
+		.expect("LocalizedTransaction is part of the blockchain; We have only valid transactions in chain; qed");
+	let receipt = receipts.pop().expect("Current receipt is provided; qed");
+	let prior_gas_used = match tx.transaction_index {
+		0 => 0.into(),
+		i => receipts.get(i - 1).expect("All previous receipts are provided; qed").gas_used,
+	};
+	let no_of_logs = receipts.into_iter().map(|receipt| receipt.logs.len()).sum::<usize>();
+	let transaction_hash = tx.hash();
+	let block_hash = tx.block_hash;
+	let block_number = tx.block_number;
+	let transaction_index = tx.transaction_index;
+
+	LocalizedReceipt {
+		transaction_hash: transaction_hash,
+		transaction_index: transaction_index,
+		block_hash: block_hash,
+		block_number:block_number,
+		cumulative_gas_used: receipt.gas_used,
+		gas_used: receipt.gas_used - prior_gas_used,
+		contract_address: match tx.action {
+			Action::Call(_) => None,
+			Action::Create => Some(contract_address(&sender, &tx.nonce))
+		},
+		logs: receipt.logs.into_iter().enumerate().map(|(i, log)| LocalizedLogEntry {
+			entry: log,
+			block_hash: block_hash,
+			block_number: block_number,
+			transaction_hash: transaction_hash,
+			transaction_index: transaction_index,
+			transaction_log_index: i,
+			log_index: no_of_logs + i,
+		}).collect(),
+		log_bloom: receipt.log_bloom,
+		state_root: receipt.state_root,
+	}
+}
+
 #[cfg(test)]
 mod tests {
 
@@ -1570,4 +1582,91 @@ mod tests {
 
 		assert!(client.tree_route(&genesis, &new_hash).is_none());
 	}
+
+	#[test]
+	fn should_return_correct_log_index() {
+		use super::transaction_receipt;
+		use ethkey::KeyPair;
+		use log_entry::{LogEntry, LocalizedLogEntry};
+		use receipt::{Receipt, LocalizedReceipt};
+		use transaction::{Transaction, LocalizedTransaction, Action};
+		use util::Hashable;
+
+		// given
+		let key = KeyPair::from_secret("test".sha3()).unwrap();
+		let secret = key.secret();
+
+		let block_number = 1;
+		let block_hash = 5.into();
+		let state_root = 99.into();
+		let gas_used = 10.into();
+		let raw_tx = Transaction {
+			nonce: 0.into(),
+			gas_price: 0.into(),
+			gas: 21000.into(),
+			action: Action::Call(10.into()),
+			value: 0.into(),
+			data: vec![],
+		};
+		let tx1 = raw_tx.clone().sign(secret, None);
+		let transaction = LocalizedTransaction {
+			signed: tx1.clone(),
+			block_number: block_number,
+			block_hash: block_hash,
+			transaction_index: 1,
+		};
+		let logs = vec![LogEntry {
+			address: 5.into(),
+			topics: vec![],
+			data: vec![],
+		}, LogEntry {
+			address: 15.into(),
+			topics: vec![],
+			data: vec![],
+		}];
+		let receipts = vec![Receipt {
+			state_root: state_root,
+			gas_used: 5.into(),
+			log_bloom: Default::default(),
+			logs: vec![logs[0].clone()],
+		}, Receipt {
+			state_root: state_root,
+			gas_used: gas_used,
+			log_bloom: Default::default(),
+			logs: logs.clone(),
+		}];
+
+		// when
+		let receipt = transaction_receipt(transaction, receipts);
+
+		// then
+		assert_eq!(receipt, LocalizedReceipt {
+			transaction_hash: tx1.hash(),
+			transaction_index: 1,
+			block_hash: block_hash,
+			block_number: block_number,
+			cumulative_gas_used: gas_used,
+			gas_used: gas_used - 5.into(),
+			contract_address: None,
+			logs: vec![LocalizedLogEntry {
+				entry: logs[0].clone(),
+				block_hash: block_hash,
+				block_number: block_number,
+				transaction_hash: tx1.hash(),
+				transaction_index: 1,
+				transaction_log_index: 0,
+				log_index: 1,
+			}, LocalizedLogEntry {
+				entry: logs[1].clone(),
+				block_hash: block_hash,
+				block_number: block_number,
+				transaction_hash: tx1.hash(),
+				transaction_index: 1,
+				transaction_log_index: 1,
+				log_index: 2,
+			}],
+			log_bloom: Default::default(),
+			state_root: state_root,
+		});
+	}
 }
diff --git a/ethcore/src/tests/client.rs b/ethcore/src/tests/client.rs
index c6a9d8157..0dfd8434d 100644
--- a/ethcore/src/tests/client.rs
+++ b/ethcore/src/tests/client.rs
@@ -320,4 +320,3 @@ fn does_not_propagate_delayed_transactions() {
 	assert_eq!(2, client.ready_transactions().len());
 	assert_eq!(2, client.miner().pending_transactions().len());
 }
-
diff --git a/ethcore/src/types/log_entry.rs b/ethcore/src/types/log_entry.rs
index 1fbb4305f..79b93b04e 100644
--- a/ethcore/src/types/log_entry.rs
+++ b/ethcore/src/types/log_entry.rs
@@ -97,6 +97,8 @@ pub struct LocalizedLogEntry {
 	pub transaction_index: usize,
 	/// Log position in the block.
 	pub log_index: usize,
+	/// Log position in the transaction.
+	pub transaction_log_index: usize,
 }
 
 impl Deref for LocalizedLogEntry {
diff --git a/ethcore/src/types/transaction.rs b/ethcore/src/types/transaction.rs
index 77a6a99a9..4bd34da18 100644
--- a/ethcore/src/types/transaction.rs
+++ b/ethcore/src/types/transaction.rs
@@ -373,7 +373,7 @@ impl SignedTransaction {
 }
 
 /// Signed Transaction that is a part of canon blockchain.
-#[derive(Debug, PartialEq, Eq)]
+#[derive(Debug, Clone, PartialEq, Eq)]
 #[cfg_attr(feature = "ipc", binary)]
 pub struct LocalizedTransaction {
 	/// Signed part.
diff --git a/rpc/src/v1/tests/mocked/eth.rs b/rpc/src/v1/tests/mocked/eth.rs
index c0566589e..2adc50fc7 100644
--- a/rpc/src/v1/tests/mocked/eth.rs
+++ b/rpc/src/v1/tests/mocked/eth.rs
@@ -193,6 +193,7 @@ fn rpc_eth_logs() {
 			data: vec![1,2,3],
 		},
 		transaction_index: 0,
+		transaction_log_index: 0,
 		transaction_hash: H256::default(),
 		log_index: 0,
 	}, LocalizedLogEntry {
@@ -204,8 +205,9 @@ fn rpc_eth_logs() {
 			data: vec![1,2,3],
 		},
 		transaction_index: 0,
+		transaction_log_index: 1,
 		transaction_hash: H256::default(),
-		log_index: 0,
+		log_index: 1,
 	}]);
 
 
@@ -213,8 +215,8 @@ fn rpc_eth_logs() {
 	let request2 = r#"{"jsonrpc": "2.0", "method": "eth_getLogs", "params": [{"limit":1}], "id": 1}"#;
 	let request3 = r#"{"jsonrpc": "2.0", "method": "eth_getLogs", "params": [{"limit":0}], "id": 1}"#;
 
-	let response1 = r#"{"jsonrpc":"2.0","result":[{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x0","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","type":"mined"},{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x0","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","type":"mined"}],"id":1}"#;
-	let response2 = r#"{"jsonrpc":"2.0","result":[{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x0","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","type":"mined"}],"id":1}"#;
+	let response1 = r#"{"jsonrpc":"2.0","result":[{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x0","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","transactionLogIndex":"0x0","type":"mined"},{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x1","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","transactionLogIndex":"0x1","type":"mined"}],"id":1}"#;
+	let response2 = r#"{"jsonrpc":"2.0","result":[{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x1","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","transactionLogIndex":"0x1","type":"mined"}],"id":1}"#;
 	let response3 = r#"{"jsonrpc":"2.0","result":[],"id":1}"#;
 
 	assert_eq!(tester.io.handle_request_sync(request1), Some(response1.to_owned()));
@@ -235,6 +237,7 @@ fn rpc_logs_filter() {
 			data: vec![1,2,3],
 		},
 		transaction_index: 0,
+		transaction_log_index: 0,
 		transaction_hash: H256::default(),
 		log_index: 0,
 	}, LocalizedLogEntry {
@@ -246,8 +249,9 @@ fn rpc_logs_filter() {
 			data: vec![1,2,3],
 		},
 		transaction_index: 0,
+		transaction_log_index: 1,
 		transaction_hash: H256::default(),
-		log_index: 0,
+		log_index: 1,
 	}]);
 
 	// Register filters first
@@ -261,8 +265,8 @@ fn rpc_logs_filter() {
 
 	let request_changes1 = r#"{"jsonrpc": "2.0", "method": "eth_getFilterChanges", "params": ["0x0"], "id": 1}"#;
 	let request_changes2 = r#"{"jsonrpc": "2.0", "method": "eth_getFilterChanges", "params": ["0x1"], "id": 1}"#;
-	let response1 = r#"{"jsonrpc":"2.0","result":[{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x0","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","type":"mined"},{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x0","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","type":"mined"}],"id":1}"#;
-	let response2 = r#"{"jsonrpc":"2.0","result":[{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x0","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","type":"mined"}],"id":1}"#;
+	let response1 = r#"{"jsonrpc":"2.0","result":[{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x0","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","transactionLogIndex":"0x0","type":"mined"},{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x1","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","transactionLogIndex":"0x1","type":"mined"}],"id":1}"#;
+	let response2 = r#"{"jsonrpc":"2.0","result":[{"address":"0x0000000000000000000000000000000000000000","blockHash":"0x0000000000000000000000000000000000000000000000000000000000000000","blockNumber":"0x1","data":"0x010203","logIndex":"0x1","topics":[],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","transactionLogIndex":"0x1","type":"mined"}],"id":1}"#;
 
 	assert_eq!(tester.io.handle_request_sync(request_changes1), Some(response1.to_owned()));
 	assert_eq!(tester.io.handle_request_sync(request_changes2), Some(response2.to_owned()));
@@ -951,6 +955,7 @@ fn rpc_eth_transaction_receipt() {
 			block_number: 0x4510c,
 			transaction_hash: H256::new(),
 			transaction_index: 0,
+			transaction_log_index: 0,
 			log_index: 1,
 		}],
 		log_bloom: 0.into(),
@@ -967,7 +972,7 @@ fn rpc_eth_transaction_receipt() {
 		"params": ["0xb903239f8543d04b5dc1ba6579132b143087c68db1b2168786408fcbce568238"],
 		"id": 1
 	}"#;
-	let response = r#"{"jsonrpc":"2.0","result":{"blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","contractAddress":null,"cumulativeGasUsed":"0x20","gasUsed":"0x10","logs":[{"address":"0x33990122638b9132ca29c723bdf037f1a891a70c","blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","data":"0x","logIndex":"0x1","topics":["0xa6697e974e6a320f454390be03f74955e8978f1a6971ea6730542e37b66179bc","0x4861736852656700000000000000000000000000000000000000000000000000"],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","type":"mined"}],"logsBloom":"0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000","root":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0"},"id":1}"#;
+	let response = r#"{"jsonrpc":"2.0","result":{"blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","contractAddress":null,"cumulativeGasUsed":"0x20","gasUsed":"0x10","logs":[{"address":"0x33990122638b9132ca29c723bdf037f1a891a70c","blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","data":"0x","logIndex":"0x1","topics":["0xa6697e974e6a320f454390be03f74955e8978f1a6971ea6730542e37b66179bc","0x4861736852656700000000000000000000000000000000000000000000000000"],"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","transactionLogIndex":"0x0","type":"mined"}],"logsBloom":"0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000","root":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0"},"id":1}"#;
 
 	assert_eq!(tester.io.handle_request_sync(request), Some(response.to_owned()));
 }
diff --git a/rpc/src/v1/types/log.rs b/rpc/src/v1/types/log.rs
index f5e7faca5..00bcbf69c 100644
--- a/rpc/src/v1/types/log.rs
+++ b/rpc/src/v1/types/log.rs
@@ -38,9 +38,12 @@ pub struct Log {
 	/// Transaction Index
 	#[serde(rename="transactionIndex")]
 	pub transaction_index: Option<U256>,
-	/// Log Index
+	/// Log Index in Block
 	#[serde(rename="logIndex")]
 	pub log_index: Option<U256>,
+	/// Log Index in Transaction
+	#[serde(rename="transactionLogIndex")]
+	pub transaction_log_index: Option<U256>,
 	/// Log Type
 	#[serde(rename="type")]
 	pub log_type: String,
@@ -57,6 +60,7 @@ impl From<LocalizedLogEntry> for Log {
 			transaction_hash: Some(e.transaction_hash.into()),
 			transaction_index: Some(e.transaction_index.into()),
 			log_index: Some(e.log_index.into()),
+			transaction_log_index: Some(e.transaction_log_index.into()),
 			log_type: "mined".to_owned(),
 		}
 	}
@@ -73,6 +77,7 @@ impl From<LogEntry> for Log {
 			transaction_hash: None,
 			transaction_index: None,
 			log_index: None,
+			transaction_log_index: None,
 			log_type: "pending".to_owned(),
 		}
 	}
@@ -86,7 +91,7 @@ mod tests {
 
 	#[test]
 	fn log_serialization() {
-		let s = r#"{"address":"0x33990122638b9132ca29c723bdf037f1a891a70c","topics":["0xa6697e974e6a320f454390be03f74955e8978f1a6971ea6730542e37b66179bc","0x4861736852656700000000000000000000000000000000000000000000000000"],"data":"0x","blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","logIndex":"0x1","type":"mined"}"#;
+		let s = r#"{"address":"0x33990122638b9132ca29c723bdf037f1a891a70c","topics":["0xa6697e974e6a320f454390be03f74955e8978f1a6971ea6730542e37b66179bc","0x4861736852656700000000000000000000000000000000000000000000000000"],"data":"0x","blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","logIndex":"0x1","transactionLogIndex":"0x1","type":"mined"}"#;
 
 		let log = Log {
 			address: H160::from_str("33990122638b9132ca29c723bdf037f1a891a70c").unwrap(),
@@ -99,6 +104,7 @@ mod tests {
 			block_number: Some(U256::from(0x4510c)),
 			transaction_hash: Some(H256::default()),
 			transaction_index: Some(U256::default()),
+			transaction_log_index: Some(1.into()),
 			log_index: Some(U256::from(1)),
 			log_type: "mined".to_owned(),
 		};
diff --git a/rpc/src/v1/types/receipt.rs b/rpc/src/v1/types/receipt.rs
index 1b98b1086..a8c388f17 100644
--- a/rpc/src/v1/types/receipt.rs
+++ b/rpc/src/v1/types/receipt.rs
@@ -109,7 +109,7 @@ mod tests {
 
 	#[test]
 	fn receipt_serialization() {
-		let s = r#"{"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","cumulativeGasUsed":"0x20","gasUsed":"0x10","contractAddress":null,"logs":[{"address":"0x33990122638b9132ca29c723bdf037f1a891a70c","topics":["0xa6697e974e6a320f454390be03f74955e8978f1a6971ea6730542e37b66179bc","0x4861736852656700000000000000000000000000000000000000000000000000"],"data":"0x","blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","logIndex":"0x1","type":"mined"}],"root":"0x000000000000000000000000000000000000000000000000000000000000000a","logsBloom":"0x0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000f"}"#;
+		let s = r#"{"transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","cumulativeGasUsed":"0x20","gasUsed":"0x10","contractAddress":null,"logs":[{"address":"0x33990122638b9132ca29c723bdf037f1a891a70c","topics":["0xa6697e974e6a320f454390be03f74955e8978f1a6971ea6730542e37b66179bc","0x4861736852656700000000000000000000000000000000000000000000000000"],"data":"0x","blockHash":"0xed76641c68a1c641aee09a94b3b471f4dc0316efe5ac19cf488e2674cf8d05b5","blockNumber":"0x4510c","transactionHash":"0x0000000000000000000000000000000000000000000000000000000000000000","transactionIndex":"0x0","logIndex":"0x1","transactionLogIndex":null,"type":"mined"}],"root":"0x000000000000000000000000000000000000000000000000000000000000000a","logsBloom":"0x0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000f"}"#;
 
 		let receipt = Receipt {
 			transaction_hash: Some(0.into()),
@@ -130,6 +130,7 @@ mod tests {
 				block_number: Some(0x4510c.into()),
 				transaction_hash: Some(0.into()),
 				transaction_index: Some(0.into()),
+				transaction_log_index: None,
 				log_index: Some(1.into()),
 				log_type: "mined".into(),
 			}],

From 75f2644e6ae1469e1a4623f1a1e316b1e867b8cf Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Thu, 29 Dec 2016 19:48:39 +0100
Subject: [PATCH 08/28] Update dev dependencies and make Webpack less verbose
 (#3997)

* Update dev dependencies // Less verbose Webpack

* Fix linting fro JSX
---
 js/package.json                               | 43 ++++++++++---------
 js/src/modals/AddContract/types.js            | 36 ++++++++++------
 js/src/modals/CreateAccount/errors.js         | 23 ++++++----
 .../modals/DeployContract/deployContract.js   | 27 ++++++++----
 .../modals/ExecuteContract/executeContract.js | 29 ++++++++-----
 js/webpack/libraries.js                       |  2 +-
 js/webpack/shared.js                          |  5 +++
 7 files changed, 100 insertions(+), 65 deletions(-)

diff --git a/js/package.json b/js/package.json
index b6df91ae0..16640c31a 100644
--- a/js/package.json
+++ b/js/package.json
@@ -26,9 +26,9 @@
   ],
   "scripts": {
     "build": "npm run build:lib && npm run build:dll && npm run build:app",
-    "build:app": "webpack --config webpack/app --progress",
-    "build:lib": "webpack --config webpack/libraries --progress",
-    "build:dll": "webpack --config webpack/vendor --progress",
+    "build:app": "webpack --config webpack/app",
+    "build:lib": "webpack --config webpack/libraries",
+    "build:dll": "webpack --config webpack/vendor",
     "ci:build": "npm run ci:build:lib && npm run ci:build:dll && npm run ci:build:app",
     "ci:build:app": "NODE_ENV=production webpack --config webpack/app",
     "ci:build:lib": "NODE_ENV=production webpack --config webpack/libraries",
@@ -51,19 +51,19 @@
   },
   "devDependencies": {
     "babel-cli": "6.18.0",
-    "babel-core": "6.20.0",
+    "babel-core": "6.21.0",
     "babel-eslint": "7.1.1",
     "babel-loader": "6.2.10",
-    "babel-plugin-lodash": "3.2.10",
+    "babel-plugin-lodash": "3.2.11",
     "babel-plugin-react-intl": "2.2.0",
-    "babel-plugin-transform-class-properties": "6.18.0",
+    "babel-plugin-transform-class-properties": "6.19.0",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-plugin-transform-object-rest-spread": "6.20.2",
     "babel-plugin-transform-react-remove-prop-types": "0.2.11",
     "babel-plugin-transform-runtime": "6.15.0",
     "babel-plugin-webpack-alias": "2.1.2",
     "babel-polyfill": "6.20.0",
-    "babel-preset-env": "1.0.2",
+    "babel-preset-env": "1.1.4",
     "babel-preset-es2015": "6.18.0",
     "babel-preset-es2016": "6.16.0",
     "babel-preset-es2017": "6.16.0",
@@ -80,57 +80,58 @@
     "coveralls": "2.11.15",
     "css-loader": "0.26.1",
     "ejs-loader": "0.3.0",
-    "enzyme": "2.6.0",
+    "enzyme": "2.7.0",
     "eslint": "3.11.1",
     "eslint-config-semistandard": "7.0.0",
     "eslint-config-standard": "6.2.1",
     "eslint-config-standard-react": "4.2.0",
     "eslint-plugin-promise": "3.4.0",
-    "eslint-plugin-react": "6.7.1",
+    "eslint-plugin-react": "6.8.0",
     "eslint-plugin-standard": "2.0.1",
     "express": "4.14.0",
     "extract-loader": "0.1.0",
     "extract-text-webpack-plugin": "2.0.0-beta.4",
     "file-loader": "0.9.0",
-    "happypack": "3.0.0",
+    "happypack": "3.0.2",
     "html-loader": "0.4.4",
     "html-webpack-plugin": "2.24.1",
-    "http-proxy-middleware": "0.17.2",
+    "http-proxy-middleware": "0.17.3",
     "husky": "0.11.9",
     "ignore-styles": "5.0.1",
-    "image-webpack-loader": "3.0.0",
+    "image-webpack-loader": "3.1.0",
     "istanbul": "1.0.0-alpha.2",
-    "jsdom": "9.8.3",
+    "jsdom": "9.9.1",
     "json-loader": "0.5.4",
     "mocha": "3.2.0",
     "mock-local-storage": "1.0.2",
-    "mock-socket": "6.0.3",
+    "mock-socket": "6.0.4",
     "nock": "9.0.2",
     "postcss-import": "9.0.0",
-    "postcss-loader": "1.2.0",
+    "postcss-loader": "1.2.1",
     "postcss-nested": "1.0.0",
     "postcss-simple-vars": "3.0.0",
     "progress": "1.1.8",
+    "progress-bar-webpack-plugin": "1.9.1",
     "raw-loader": "0.5.1",
     "react-addons-perf": "15.4.1",
     "react-addons-test-utils": "15.4.1",
     "react-hot-loader": "3.0.0-beta.6",
     "react-intl-aggregate-webpack-plugin": "0.0.1",
     "rucksack-css": "0.9.1",
-    "script-ext-html-webpack-plugin": "1.3.4",
+    "script-ext-html-webpack-plugin": "1.3.5",
     "serviceworker-webpack-plugin": "0.1.7",
     "sinon": "1.17.6",
     "sinon-as-promised": "4.0.2",
     "sinon-chai": "2.8.0",
     "style-loader": "0.13.1",
-    "stylelint": "7.6.0",
-    "stylelint-config-standard": "15.0.0",
+    "stylelint": "7.7.0",
+    "stylelint-config-standard": "15.0.1",
     "url-loader": "0.5.7",
     "webpack": "2.2.0-rc.2",
-    "webpack-dev-middleware": "1.8.4",
+    "webpack-dev-middleware": "1.9.0",
     "webpack-error-notification": "0.1.6",
-    "webpack-hot-middleware": "2.13.2",
-    "websocket": "1.0.23"
+    "webpack-hot-middleware": "2.14.0",
+    "websocket": "1.0.24"
   },
   "dependencies": {
     "bignumber.js": "3.0.1",
diff --git a/js/src/modals/AddContract/types.js b/js/src/modals/AddContract/types.js
index 9f64173f6..3b16b9651 100644
--- a/js/src/modals/AddContract/types.js
+++ b/js/src/modals/AddContract/types.js
@@ -21,56 +21,64 @@ import { eip20, wallet } from '~/contracts/abi';
 
 const ABI_TYPES = [
   {
-    description:
+    description: (
       <FormattedMessage
         id='addContract.abiType.token.description'
         defaultMessage='A standard {erc20} token'
         values={ {
-          erc20:
+          erc20: (
             <a href='https://github.com/ethereum/EIPs/issues/20' target='_blank'>
               <FormattedMessage
                 id='addContract.abiType.token.erc20'
                 defaultMessage='ERC 20' />
             </a>
-        } } />,
-    label:
+          )
+        } } />
+    ),
+    label: (
       <FormattedMessage
         id='addContract.abiType.token.label'
-        defaultMessage='Token' />,
+        defaultMessage='Token' />
+    ),
     readOnly: true,
     type: 'token',
     value: JSON.stringify(eip20)
   },
   {
-    description:
+    description: (
       <FormattedMessage
         id='addContract.abiType.multisigWallet.description'
         defaultMessage='Ethereum Multisig contract {link}'
         values={ {
-          link:
+          link: (
             <a href='https://github.com/ethereum/dapp-bin/blob/master/wallet/wallet.sol' target='_blank'>
               <FormattedMessage
                 id='addContract.abiType.multisigWallet.link'
                 defaultMessage='see contract code' />
             </a>
-        } } />,
-    label:
+          )
+        } } />
+    ),
+    label: (
       <FormattedMessage
         id='addContract.abiType.multisigWallet.label'
-        defaultMessage='Multisig Wallet' />,
+        defaultMessage='Multisig Wallet' />
+    ),
     readOnly: true,
     type: 'multisig',
     value: JSON.stringify(wallet)
   },
   {
-    description:
+    description: (
       <FormattedMessage
         id='addContract.abiType.custom.description'
-        defaultMessage='Contract created from custom ABI' />,
-    label:
+        defaultMessage='Contract created from custom ABI' />
+    ),
+    label: (
       <FormattedMessage
         id='addContract.abiType.custom.label'
-        defaultMessage='Custom Contract' />,
+        defaultMessage='Custom Contract' />
+    ),
     type: 'custom',
     value: ''
   }
diff --git a/js/src/modals/CreateAccount/errors.js b/js/src/modals/CreateAccount/errors.js
index 3edd75423..25293926f 100644
--- a/js/src/modals/CreateAccount/errors.js
+++ b/js/src/modals/CreateAccount/errors.js
@@ -18,28 +18,33 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 export default {
-  noFile:
+  noFile: (
     <FormattedMessage
       id='createAccount.error.noFile'
-      defaultMessage='select a valid wallet file to import' />,
+      defaultMessage='select a valid wallet file to import' />
+  ),
 
-  noKey:
+  noKey: (
     <FormattedMessage
       id='createAccount.error.noKey'
-      defaultMessage='you need to provide the raw private key' />,
+      defaultMessage='you need to provide the raw private key' />
+  ),
 
-  noMatchPassword:
+  noMatchPassword: (
     <FormattedMessage
       id='createAccount.error.noMatchPassword'
-      defaultMessage='the supplied passwords does not match' />,
+      defaultMessage='the supplied passwords does not match' />
+  ),
 
-  noName:
+  noName: (
     <FormattedMessage
       id='createAccount.error.noName'
-      defaultMessage='you need to specify a valid name for the account' />,
+      defaultMessage='you need to specify a valid name for the account' />
+  ),
 
-  invalidKey:
+  invalidKey: (
     <FormattedMessage
       id='createAccount.error.invalidKey'
       defaultMessage='the raw key needs to be hex, 64 characters in length and contain the prefix "0x"' />
+  )
 };
diff --git a/js/src/modals/DeployContract/deployContract.js b/js/src/modals/DeployContract/deployContract.js
index 3df992855..d2aacc607 100644
--- a/js/src/modals/DeployContract/deployContract.js
+++ b/js/src/modals/DeployContract/deployContract.js
@@ -34,29 +34,33 @@ import { ERROR_CODES } from '~/api/transport/error';
 
 const STEPS = {
   CONTRACT_DETAILS: {
-    title:
+    title: (
       <FormattedMessage
         id='deployContract.title.details'
         defaultMessage='contract details' />
+    )
   },
   CONTRACT_PARAMETERS: {
-    title:
+    title: (
       <FormattedMessage
         id='deployContract.title.parameters'
         defaultMessage='contract parameters' />
+    )
   },
   DEPLOYMENT: {
     waiting: true,
-    title:
+    title: (
       <FormattedMessage
         id='deployContract.title.deployment'
         defaultMessage='deployment' />
+    )
   },
   COMPLETED: {
-    title:
+    title: (
       <FormattedMessage
         id='deployContract.title.completed'
         defaultMessage='completed' />
+    )
   }
 };
 
@@ -495,48 +499,53 @@ class DeployContract extends Component {
       case 'estimateGas':
       case 'postTransaction':
         this.setState({
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.preparing'
               defaultMessage='Preparing transaction for network transmission' />
+          )
         });
         return;
 
       case 'checkRequest':
         this.setState({
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.waitSigner'
               defaultMessage='Waiting for confirmation of the transaction in the Parity Secure Signer' />
+          )
         });
         return;
 
       case 'getTransactionReceipt':
         this.setState({
           txhash: data.txhash,
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.waitReceipt'
               defaultMessage='Waiting for the contract deployment transaction receipt' />
+          )
         });
         return;
 
       case 'hasReceipt':
       case 'getCode':
         this.setState({
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.validatingCode'
               defaultMessage='Validating the deployed contract code' />
+          )
         });
         return;
 
       case 'completed':
         this.setState({
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.completed'
               defaultMessage='The contract deployment has been completed' />
+          )
         });
         return;
 
diff --git a/js/src/modals/ExecuteContract/executeContract.js b/js/src/modals/ExecuteContract/executeContract.js
index 224a68dbb..0836b1bf1 100644
--- a/js/src/modals/ExecuteContract/executeContract.js
+++ b/js/src/modals/ExecuteContract/executeContract.js
@@ -39,26 +39,31 @@ const STEP_BUSY_OR_ADVANCED = 1;
 const STEP_BUSY = 2;
 
 const TITLES = {
-  transfer:
+  transfer: (
     <FormattedMessage
       id='executeContract.steps.transfer'
-      defaultMessage='function details' />,
-  sending:
+      defaultMessage='function details' />
+  ),
+  sending: (
     <FormattedMessage
       id='executeContract.steps.sending'
-      defaultMessage='sending' />,
-  complete:
+      defaultMessage='sending' />
+  ),
+  complete: (
     <FormattedMessage
       id='executeContract.steps.complete'
-      defaultMessage='complete' />,
-  advanced:
+      defaultMessage='complete' />
+  ),
+  advanced: (
     <FormattedMessage
       id='executeContract.steps.advanced'
-      defaultMessage='advanced options' />,
-  rejected:
+      defaultMessage='advanced options' />
+  ),
+  rejected: (
     <FormattedMessage
       id='executeContract.steps.rejected'
       defaultMessage='rejected' />
+  )
 };
 const STAGES_BASIC = [TITLES.transfer, TITLES.sending, TITLES.complete];
 const STAGES_ADVANCED = [TITLES.transfer, TITLES.advanced, TITLES.sending, TITLES.complete];
@@ -398,10 +403,11 @@ class ExecuteContract extends Component {
       .postTransaction(options, values)
       .then((requestId) => {
         this.setState({
-          busyState:
+          busyState: (
             <FormattedMessage
               id='executeContract.busy.waitAuth'
               defaultMessage='Waiting for authorization in the Parity Signer' />
+          )
         });
 
         return api
@@ -420,10 +426,11 @@ class ExecuteContract extends Component {
           sending: false,
           step: finalstep,
           txhash,
-          busyState:
+          busyState: (
             <FormattedMessage
               id='executeContract.busy.posted'
               defaultMessage='Your transaction has been posted to the network' />
+          )
         });
       })
       .catch((error) => {
diff --git a/js/webpack/libraries.js b/js/webpack/libraries.js
index a4e57d7d1..3b8d8b92c 100644
--- a/js/webpack/libraries.js
+++ b/js/webpack/libraries.js
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-// Run with `webpack --config webpack.libraries.js --progress`
+// Run with `webpack --config webpack.libraries.js`
 
 const path = require('path');
 
diff --git a/js/webpack/shared.js b/js/webpack/shared.js
index ec011242e..bd7e6f38a 100644
--- a/js/webpack/shared.js
+++ b/js/webpack/shared.js
@@ -24,6 +24,7 @@ const postcssNested = require('postcss-nested');
 const postcssVars = require('postcss-simple-vars');
 const rucksack = require('rucksack-css');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
@@ -79,6 +80,10 @@ function getPlugins (_isProd = isProd) {
   ];
 
   const plugins = [
+    new ProgressBarPlugin({
+      format: '[:msg] [:bar] ' + ':percent' + ' (:elapsed seconds)'
+    }),
+
     // NB: HappyPack is not yet working with Webpack 2... (as of Nov. 26)
 
     // new HappyPack({

From b5f616263065b640af5287c09c9b3950ae0f9705 Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Thu, 29 Dec 2016 18:59:55 +0000
Subject: [PATCH 09/28] [ci skip] js-precompiled 20161229-185700

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index f7916219e..7aacadeab 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#d04ae84851120cfbb45120a2f42dd102a82739b8"
+source = "git+https://github.com/ethcore/js-precompiled.git#fc7604165a9f0fa2c28fdfec8fccf82ec95e2cd5"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 16640c31a..376f68e87 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.154",
+  "version": "0.2.155",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 37c607d7b0cd536063dccfde0e92f4390f2f4d1d Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 29 Dec 2016 21:01:36 +0100
Subject: [PATCH 10/28] Don't slice non-existent tags (#4000)

---
 js/src/ui/Tags/tags.js                | 4 +++-
 js/src/views/Account/Header/header.js | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/src/ui/Tags/tags.js b/js/src/ui/Tags/tags.js
index 63b31fea1..bc86e6f3b 100644
--- a/js/src/ui/Tags/tags.js
+++ b/js/src/ui/Tags/tags.js
@@ -16,13 +16,15 @@
 
 import React, { Component, PropTypes } from 'react';
 
+import { arrayOrObjectProptype } from '~/util/proptypes';
+
 import styles from './tags.css';
 
 export default class Tags extends Component {
   static propTypes = {
     handleAddSearchToken: PropTypes.func,
     setRefs: PropTypes.func,
-    tags: PropTypes.array
+    tags: arrayOrObjectProptype()
   }
 
   render () {
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
index 9245e0a1a..058c20db3 100644
--- a/js/src/views/Account/Header/header.js
+++ b/js/src/views/Account/Header/header.js
@@ -72,7 +72,7 @@ export default class Header extends Component {
           </div>
 
           <div className={ styles.tags }>
-            <Tags tags={ meta.tags.slice() } />
+            <Tags tags={ meta.tags } />
           </div>
           <div className={ styles.balances }>
             <Balance

From 02ea3ab0f86a4691cf8d761b65bf9002bf99cf3a Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Thu, 29 Dec 2016 20:10:35 +0000
Subject: [PATCH 11/28] [ci skip] js-precompiled 20161229-200742

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 7aacadeab..0d7563e1f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#fc7604165a9f0fa2c28fdfec8fccf82ec95e2cd5"
+source = "git+https://github.com/ethcore/js-precompiled.git#411717767823812415ad01764985afbac6920533"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 376f68e87..11770005b 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.155",
+  "version": "0.2.156",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 88c0329a318374202e90b069e4f82499919d3707 Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Fri, 30 Dec 2016 04:13:29 +0000
Subject: [PATCH 12/28] [ci skip] js-precompiled 20161230-041039

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 0d7563e1f..0e38f0a73 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#411717767823812415ad01764985afbac6920533"
+source = "git+https://github.com/ethcore/js-precompiled.git#78ca8ccb3c00725ea8d51c1f78afe6f6ad563695"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 11770005b..30c5a1ed4 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.156",
+  "version": "0.2.157",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From fd41a10319ee1689d2d7dc74a355c1694e978d85 Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Fri, 30 Dec 2016 12:28:12 +0100
Subject: [PATCH 13/28] Make Wallet first-class citizens (#3990)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fixed hint in Address Select + Wallet as first-class-citizen

* Separate Owned and not Owned Wallets

* Fix balance not updating

* Fix MethodDecoding for Contract Deployment

* Fix TypedInput params

* Fix Token Transfer for Wallet

* Small change to contracts

* Fix wallets shown twice

* Fix separation of accounts and wallets in Accounts

* Fix linting

* Execute contract methods from Wallet ✓

* Fixing linting

* Wallet as first-class citizen: Part 1 (Manual) #3784

* Lower level wallet transaction convertion

* Fix linting

* Proper autoFocus on right Signer input

* PR Grumble: don't show Wallets in dApps Permissions

* Add postTransaction and gasEstimate wrapper methods

* Extract Wallet postTx and gasEstimate to utils + PATCH api

* Remove invalid test

It's totally valid for input's length not to be a multiple of 32 bytes. EG. for Wallet Contracts

* Merge master

* Fix linting

* Fix merge issue

* Rename Portal

* Rename Protal => Portal (typo)
---
 js/src/abi/encoder/encoder.js                 | 47 +++++-----
 js/src/abi/spec/interface.js                  |  4 +
 js/src/api/api.js                             |  6 +-
 js/src/api/contract/contract.js               | 26 ++++--
 js/src/api/transport/ws/ws.js                 |  5 +-
 js/src/api/util/decode.js                     |  2 -
 js/src/api/util/decode.spec.js                |  4 -
 js/src/index.js                               |  2 +
 .../WalletDetails/walletDetails.js            |  6 +-
 .../modals/DeployContract/deployContract.js   | 10 +-
 .../modals/ExecuteContract/executeContract.js |  1 +
 js/src/modals/Transfer/store.js               | 16 +---
 .../modals/WalletSettings/walletSettings.js   | 14 +--
 .../WalletSettings/walletSettingsStore.js     |  2 +
 js/src/redux/providers/balancesActions.js     |  4 +-
 js/src/redux/providers/personalActions.js     | 59 ++++++++++--
 js/src/redux/providers/personalReducer.js     |  9 +-
 js/src/redux/providers/signerReducer.js       |  2 +-
 js/src/ui/Form/AddressSelect/addressSelect.js | 12 ++-
 .../Form/AddressSelect/addressSelectStore.js  | 10 +-
 js/src/ui/Form/Input/input.js                 |  4 +-
 .../InputAddressSelect/inputAddressSelect.js  |  9 +-
 js/src/ui/Form/TypedInput/typedInput.js       | 30 +++---
 .../ui/MethodDecoding/methodDecodingStore.js  | 13 ++-
 js/src/ui/Portal/portal.js                    |  8 +-
 js/src/ui/TxHash/txHash.js                    |  2 +-
 js/src/util/tx.js                             | 83 +++++++++++++++++
 js/src/util/wallets.js                        | 81 +++++++++++++++-
 js/src/views/Account/Header/header.js         |  1 -
 js/src/views/Accounts/List/list.js            |  5 +-
 js/src/views/Accounts/Summary/summary.js      |  6 +-
 js/src/views/Accounts/accounts.js             | 62 +++++--------
 js/src/views/Dapps/dapps.js                   | 10 +-
 .../RequestPending/requestPending.js          |  6 +-
 .../components/SignRequest/signRequest.js     | 17 +++-
 .../TransactionPending/transactionPending.js  |  8 +-
 .../transactionPendingFormConfirm.js          | 60 ++++++++++--
 .../transactionPendingForm.js                 | 13 ++-
 .../Signer/containers/Embedded/embedded.js    |  3 +-
 .../containers/RequestsPage/requestsPage.js   |  3 +-
 js/src/views/Wallet/Details/details.js        | 22 +++--
 .../views/Wallet/Transactions/transactions.js |  4 +-
 js/src/views/Wallet/wallet.js                 | 92 +++++++++++--------
 js/webpack/libraries.js                       |  7 ++
 js/webpack/npm.js                             |  3 +
 js/webpack/vendor.js                          |  7 ++
 46 files changed, 570 insertions(+), 230 deletions(-)

diff --git a/js/src/abi/encoder/encoder.js b/js/src/abi/encoder/encoder.js
index 8634b9511..6797e978d 100644
--- a/js/src/abi/encoder/encoder.js
+++ b/js/src/abi/encoder/encoder.js
@@ -25,7 +25,7 @@ export default class Encoder {
       throw new Error('tokens should be array of Token');
     }
 
-    const mediates = tokens.map((token) => Encoder.encodeToken(token));
+    const mediates = tokens.map((token, index) => Encoder.encodeToken(token, index));
     const inits = mediates
       .map((mediate, idx) => mediate.init(Mediate.offsetFor(mediates, idx)))
       .join('');
@@ -36,37 +36,40 @@ export default class Encoder {
     return `${inits}${closings}`;
   }
 
-  static encodeToken (token) {
+  static encodeToken (token, index = 0) {
     if (!isInstanceOf(token, Token)) {
       throw new Error('token should be instanceof Token');
     }
 
-    switch (token.type) {
-      case 'address':
-        return new Mediate('raw', padAddress(token.value));
+    try {
+      switch (token.type) {
+        case 'address':
+          return new Mediate('raw', padAddress(token.value));
 
-      case 'int':
-      case 'uint':
-        return new Mediate('raw', padU32(token.value));
+        case 'int':
+        case 'uint':
+          return new Mediate('raw', padU32(token.value));
 
-      case 'bool':
-        return new Mediate('raw', padBool(token.value));
+        case 'bool':
+          return new Mediate('raw', padBool(token.value));
 
-      case 'fixedBytes':
-        return new Mediate('raw', padFixedBytes(token.value));
+        case 'fixedBytes':
+          return new Mediate('raw', padFixedBytes(token.value));
 
-      case 'bytes':
-        return new Mediate('prefixed', padBytes(token.value));
+        case 'bytes':
+          return new Mediate('prefixed', padBytes(token.value));
 
-      case 'string':
-        return new Mediate('prefixed', padString(token.value));
+        case 'string':
+          return new Mediate('prefixed', padString(token.value));
 
-      case 'fixedArray':
-      case 'array':
-        return new Mediate(token.type, token.value.map((token) => Encoder.encodeToken(token)));
-
-      default:
-        throw new Error(`Invalid token type ${token.type} in encodeToken`);
+        case 'fixedArray':
+        case 'array':
+          return new Mediate(token.type, token.value.map((token) => Encoder.encodeToken(token)));
+      }
+    } catch (e) {
+      throw new Error(`Cannot encode token #${index} [${token.type}: ${token.value}]. ${e.message}`);
     }
+
+    throw new Error(`Invalid token type ${token.type} in encodeToken`);
   }
 }
diff --git a/js/src/abi/spec/interface.js b/js/src/abi/spec/interface.js
index 9116f5ca3..3e1b5de4d 100644
--- a/js/src/abi/spec/interface.js
+++ b/js/src/abi/spec/interface.js
@@ -41,6 +41,10 @@ export default class Interface {
   }
 
   encodeTokens (paramTypes, values) {
+    return Interface.encodeTokens(paramTypes, values);
+  }
+
+  static encodeTokens (paramTypes, values) {
     const createToken = function (paramType, value) {
       if (paramType.subtype) {
         return new Token(paramType.type, value.map((entry) => createToken(paramType.subtype, entry)));
diff --git a/js/src/api/api.js b/js/src/api/api.js
index 9e0ad11b8..bb622ab46 100644
--- a/js/src/api/api.js
+++ b/js/src/api/api.js
@@ -114,7 +114,11 @@ export default class Api {
             }
           })
           .catch((error) => {
-            console.error('pollMethod', error);
+            // Don't print if the request is rejected: that's ok
+            if (error.type !== 'REQUEST_REJECTED') {
+              console.error('pollMethod', error);
+            }
+
             reject(error);
           });
       };
diff --git a/js/src/api/contract/contract.js b/js/src/api/contract/contract.js
index eacb21fd1..af22191e5 100644
--- a/js/src/api/contract/contract.js
+++ b/js/src/api/contract/contract.js
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import Abi from '../../abi';
+import Abi from '~/abi';
 
 let nextSubscriptionId = 0;
 
@@ -53,6 +53,10 @@ export default class Contract {
 
     this._subscribedToBlock = false;
     this._blockSubscriptionId = null;
+
+    if (api && api.patch && api.patch.contract) {
+      api.patch.contract(this);
+    }
   }
 
   get address () {
@@ -90,8 +94,10 @@ export default class Contract {
   }
 
   deployEstimateGas (options, values) {
+    const _options = this._encodeOptions(this.constructors[0], options, values);
+
     return this._api.eth
-      .estimateGas(this._encodeOptions(this.constructors[0], options, values))
+      .estimateGas(_options)
       .then((gasEst) => {
         return [gasEst, gasEst.mul(1.2)];
       });
@@ -115,8 +121,10 @@ export default class Contract {
 
         setState({ state: 'postTransaction', gas });
 
+        const _options = this._encodeOptions(this.constructors[0], options, values);
+
         return this._api.parity
-          .postTransaction(this._encodeOptions(this.constructors[0], options, values))
+          .postTransaction(_options)
           .then((requestId) => {
             setState({ state: 'checkRequest', requestId });
             return this._pollCheckRequest(requestId);
@@ -199,7 +207,7 @@ export default class Contract {
   getCallData = (func, options, values) => {
     let data = options.data;
 
-    const tokens = func ? this._abi.encodeTokens(func.inputParamTypes(), values) : null;
+    const tokens = func ? Abi.encodeTokens(func.inputParamTypes(), values) : null;
     const call = tokens ? func.encodeCall(tokens) : null;
 
     if (data && data.substr(0, 2) === '0x') {
@@ -221,6 +229,8 @@ export default class Contract {
   }
 
   _bindFunction = (func) => {
+    func.contract = this;
+
     func.call = (options, values = []) => {
       const callParams = this._encodeOptions(func, this._addOptionsTo(options), values);
 
@@ -233,13 +243,13 @@ export default class Contract {
 
     if (!func.constant) {
       func.postTransaction = (options, values = []) => {
-        return this._api.parity
-          .postTransaction(this._encodeOptions(func, this._addOptionsTo(options), values));
+        const _options = this._encodeOptions(func, this._addOptionsTo(options), values);
+        return this._api.parity.postTransaction(_options);
       };
 
       func.estimateGas = (options, values = []) => {
-        return this._api.eth
-          .estimateGas(this._encodeOptions(func, this._addOptionsTo(options), values));
+        const _options = this._encodeOptions(func, this._addOptionsTo(options), values);
+        return this._api.eth.estimateGas(_options);
       };
     }
 
diff --git a/js/src/api/transport/ws/ws.js b/js/src/api/transport/ws/ws.js
index 43f1403ce..591cf3062 100644
--- a/js/src/api/transport/ws/ws.js
+++ b/js/src/api/transport/ws/ws.js
@@ -209,7 +209,10 @@ export default class Ws extends JsonRpcBase {
       if (result.error) {
         this.error(event.data);
 
-        console.error(`${method}(${JSON.stringify(params)}): ${result.error.code}: ${result.error.message}`);
+        // Don't print error if request rejected...
+        if (!/rejected/.test(result.error.message)) {
+          console.error(`${method}(${JSON.stringify(params)}): ${result.error.code}: ${result.error.message}`);
+        }
 
         const error = new TransportError(method, result.error.code, result.error.message);
         reject(error);
diff --git a/js/src/api/util/decode.js b/js/src/api/util/decode.js
index a6a2ddda4..0e0164bec 100644
--- a/js/src/api/util/decode.js
+++ b/js/src/api/util/decode.js
@@ -47,8 +47,6 @@ export function decodeMethodInput (methodAbi, paramdata) {
       throw new Error('Input to decodeMethodInput should be a hex value');
     } else if (paramdata.substr(0, 2) === '0x') {
       return decodeMethodInput(methodAbi, paramdata.slice(2));
-    } else if (paramdata.length % 64 !== 0) {
-      throw new Error('Parameter length in decodeMethodInput not a multiple of 64 characters');
     }
   }
 
diff --git a/js/src/api/util/decode.spec.js b/js/src/api/util/decode.spec.js
index 4652c7c5b..fa0102365 100644
--- a/js/src/api/util/decode.spec.js
+++ b/js/src/api/util/decode.spec.js
@@ -48,10 +48,6 @@ describe('api/util/decode', () => {
       expect(() => decodeMethodInput({}, 'invalid')).to.throw(/should be a hex value/);
     });
 
-    it('throws on invalid lengths', () => {
-      expect(() => decodeMethodInput({}, DATA.slice(-32))).to.throw(/not a multiple of/);
-    });
-
     it('correctly decodes valid inputs', () => {
       expect(decodeMethodInput({
         type: 'function',
diff --git a/js/src/index.js b/js/src/index.js
index 77f247b3b..72f26e12f 100644
--- a/js/src/index.js
+++ b/js/src/index.js
@@ -36,6 +36,7 @@ import ContextProvider from '~/ui/ContextProvider';
 import muiTheme from '~/ui/Theme';
 import MainApplication from './main';
 
+import { patchApi } from '~/util/tx';
 import { setApi } from '~/redux/providers/apiActions';
 
 import './environment';
@@ -60,6 +61,7 @@ if (window.location.hash && window.location.hash.indexOf(AUTH_HASH) === 0) {
 }
 
 const api = new SecureApi(`ws://${parityUrl}`, token);
+patchApi(api);
 ContractInstances.create(api);
 
 const store = initStore(api, hashHistory);
diff --git a/js/src/modals/CreateWallet/WalletDetails/walletDetails.js b/js/src/modals/CreateWallet/WalletDetails/walletDetails.js
index 17a7c68a3..bab1a09f6 100644
--- a/js/src/modals/CreateWallet/WalletDetails/walletDetails.js
+++ b/js/src/modals/CreateWallet/WalletDetails/walletDetails.js
@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { omitBy } from 'lodash';
 
 import { Form, TypedInput, Input, AddressSelect, InputAddress } from '~/ui';
 
@@ -73,6 +74,9 @@ export default class WalletDetails extends Component {
   renderMultisigDetails () {
     const { accounts, wallet, errors } = this.props;
 
+    // Wallets cannot create contracts
+    const _accounts = omitBy(accounts, (a) => a.wallet);
+
     return (
       <Form>
         <AddressSelect
@@ -81,7 +85,7 @@ export default class WalletDetails extends Component {
           value={ wallet.account }
           error={ errors.account }
           onChange={ this.onAccoutChange }
-          accounts={ accounts }
+          accounts={ _accounts }
         />
 
         <Input
diff --git a/js/src/modals/DeployContract/deployContract.js b/js/src/modals/DeployContract/deployContract.js
index d2aacc607..4d9c4f40e 100644
--- a/js/src/modals/DeployContract/deployContract.js
+++ b/js/src/modals/DeployContract/deployContract.js
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { pick } from 'lodash';
+import { pick, omitBy } from 'lodash';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -561,13 +561,19 @@ class DeployContract extends Component {
 }
 
 function mapStateToProps (initState, initProps) {
-  const fromAddresses = Object.keys(initProps.accounts);
+  const { accounts } = initProps;
+
+  // Skip Wallet accounts : they can't create Contracts
+  const _accounts = omitBy(accounts, (a) => a.wallet);
+
+  const fromAddresses = Object.keys(_accounts);
 
   return (state) => {
     const balances = pick(state.balances.balances, fromAddresses);
     const { gasLimit } = state.nodeStatus;
 
     return {
+      accounts: _accounts,
       balances,
       gasLimit
     };
diff --git a/js/src/modals/ExecuteContract/executeContract.js b/js/src/modals/ExecuteContract/executeContract.js
index 0836b1bf1..594ad3922 100644
--- a/js/src/modals/ExecuteContract/executeContract.js
+++ b/js/src/modals/ExecuteContract/executeContract.js
@@ -389,6 +389,7 @@ class ExecuteContract extends Component {
     const { advancedOptions, amount, func, minBlock, values } = this.state;
     const steps = advancedOptions ? STAGES_ADVANCED : STAGES_BASIC;
     const finalstep = steps.length - 1;
+
     const options = {
       gas: this.gasStore.gas,
       gasPrice: this.gasStore.price,
diff --git a/js/src/modals/Transfer/store.js b/js/src/modals/Transfer/store.js
index c65a25fab..d2796b098 100644
--- a/js/src/modals/Transfer/store.js
+++ b/js/src/modals/Transfer/store.js
@@ -383,9 +383,7 @@ export default class TransferStore {
 
     const senderBalance = this.balance.tokens.find((b) => tag === b.token.tag);
     const format = new BigNumber(senderBalance.token.format || 1);
-    const available = isWallet
-      ? this.api.util.fromWei(new BigNumber(senderBalance.value))
-      : (new BigNumber(senderBalance.value)).div(format);
+    const available = new BigNumber(senderBalance.value).div(format);
 
     let { value, valueError } = this;
     let totalEth = gasTotal;
@@ -428,7 +426,6 @@ export default class TransferStore {
 
   send () {
     const { options, values } = this._getTransferParams();
-
     options.minBlock = new BigNumber(this.minBlock || 0).gt(0) ? this.minBlock : null;
 
     return this._getTransferMethod().postTransaction(options, values);
@@ -440,16 +437,7 @@ export default class TransferStore {
   }
 
   estimateGas () {
-    if (this.isEth || !this.isWallet) {
-      return this._estimateGas();
-    }
-
-    return Promise
-      .all([
-        this._estimateGas(true),
-        this._estimateGas()
-      ])
-      .then((results) => results[0].plus(results[1]));
+    return this._estimateGas();
   }
 
   _getTransferMethod (gas = false, forceToken = false) {
diff --git a/js/src/modals/WalletSettings/walletSettings.js b/js/src/modals/WalletSettings/walletSettings.js
index 088c0d657..36b8eb1b6 100644
--- a/js/src/modals/WalletSettings/walletSettings.js
+++ b/js/src/modals/WalletSettings/walletSettings.js
@@ -36,7 +36,7 @@ class WalletSettings extends Component {
   };
 
   static propTypes = {
-    accounts: PropTypes.object.isRequired,
+    accountsInfo: PropTypes.object.isRequired,
     wallet: PropTypes.object.isRequired,
     onClose: PropTypes.func.isRequired,
     senders: PropTypes.object.isRequired
@@ -113,7 +113,7 @@ class WalletSettings extends Component {
       default:
       case 'EDIT':
         const { wallet, errors } = this.store;
-        const { accounts, senders } = this.props;
+        const { accountsInfo, senders } = this.props;
 
         return (
           <Form>
@@ -137,7 +137,7 @@ class WalletSettings extends Component {
               label='other wallet owners'
               value={ wallet.owners.slice() }
               onChange={ this.store.onOwnersChange }
-              accounts={ accounts }
+              accounts={ accountsInfo }
               param='address[]'
             />
 
@@ -190,7 +190,7 @@ class WalletSettings extends Component {
   }
 
   renderChange (change) {
-    const { accounts } = this.props;
+    const { accountsInfo } = this.props;
 
     switch (change.type) {
       case 'dailylimit':
@@ -229,7 +229,7 @@ class WalletSettings extends Component {
               <InputAddress
                 disabled
                 value={ change.value }
-                accounts={ accounts }
+                accounts={ accountsInfo }
               />
             </div>
           </div>
@@ -243,7 +243,7 @@ class WalletSettings extends Component {
               <InputAddress
                 disabled
                 value={ change.value }
-                accounts={ accounts }
+                accounts={ accountsInfo }
               />
             </div>
           </div>
@@ -329,7 +329,7 @@ function mapStateToProps (initState, initProps) {
   const senders = pick(accounts, owners);
 
   return () => {
-    return { accounts: accountsInfo, senders };
+    return { accountsInfo, senders };
   };
 }
 
diff --git a/js/src/modals/WalletSettings/walletSettingsStore.js b/js/src/modals/WalletSettings/walletSettingsStore.js
index 6db4469c3..6d70b8de3 100644
--- a/js/src/modals/WalletSettings/walletSettingsStore.js
+++ b/js/src/modals/WalletSettings/walletSettingsStore.js
@@ -28,6 +28,8 @@ const STEPS = {
 };
 
 export default class WalletSettingsStore {
+  accounts = {};
+
   @observable step = null;
   @observable requests = [];
   @observable deployState = '';
diff --git a/js/src/redux/providers/balancesActions.js b/js/src/redux/providers/balancesActions.js
index 838f850d5..b99c44fcb 100644
--- a/js/src/redux/providers/balancesActions.js
+++ b/js/src/redux/providers/balancesActions.js
@@ -175,7 +175,7 @@ export function fetchBalances (_addresses) {
     const { api, personal } = getState();
     const { visibleAccounts, accounts } = personal;
 
-    const addresses = uniq(_addresses || visibleAccounts || []);
+    const addresses = uniq((_addresses || visibleAccounts || []).concat(Object.keys(accounts)));
 
     if (addresses.length === 0) {
       return Promise.resolve();
@@ -183,7 +183,7 @@ export function fetchBalances (_addresses) {
 
     const fullFetch = addresses.length === 1;
 
-    const addressesToFetch = uniq(addresses.concat(Object.keys(accounts)));
+    const addressesToFetch = uniq(addresses);
 
     return Promise
       .all(addressesToFetch.map((addr) => fetchAccount(addr, api, fullFetch)))
diff --git a/js/src/redux/providers/personalActions.js b/js/src/redux/providers/personalActions.js
index 7ca7c3374..1ed39c05a 100644
--- a/js/src/redux/providers/personalActions.js
+++ b/js/src/redux/providers/personalActions.js
@@ -14,14 +14,18 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { isEqual } from 'lodash';
+import { isEqual, intersection } from 'lodash';
 
 import { fetchBalances } from './balancesActions';
 import { attachWallets } from './walletActions';
 
+import Contract from '~/api/contract';
 import MethodDecodingStore from '~/ui/MethodDecoding/methodDecodingStore';
+import WalletsUtils from '~/util/wallets';
+import { wallet as WalletAbi } from '~/contracts/abi';
 
 export function personalAccountsInfo (accountsInfo) {
+  const addresses = [];
   const accounts = {};
   const contacts = {};
   const contracts = {};
@@ -32,6 +36,7 @@ export function personalAccountsInfo (accountsInfo) {
     .filter((account) => account.uuid || !account.meta.deleted)
     .forEach((account) => {
       if (account.uuid) {
+        addresses.push(account.address);
         accounts[account.address] = account;
       } else if (account.meta.wallet) {
         account.wallet = true;
@@ -46,14 +51,52 @@ export function personalAccountsInfo (accountsInfo) {
   // Load user contracts for Method Decoding
   MethodDecodingStore.loadContracts(contracts);
 
-  return (dispatch) => {
-    const data = {
-      accountsInfo,
-      accounts, contacts, contracts, wallets
-    };
+  return (dispatch, getState) => {
+    const { api } = getState();
 
-    dispatch(_personalAccountsInfo(data));
-    dispatch(attachWallets(wallets));
+    const _fetchOwners = Object
+      .values(wallets)
+      .map((wallet) => {
+        const walletContract = new Contract(api, WalletAbi);
+        return WalletsUtils.fetchOwners(walletContract.at(wallet.address));
+      });
+
+    Promise
+      .all(_fetchOwners)
+      .then((walletsOwners) => {
+        return Object
+          .values(wallets)
+          .map((wallet, index) => {
+            wallet.owners = walletsOwners[index].map((owner) => ({
+              address: owner,
+              name: accountsInfo[owner] && accountsInfo[owner].name || owner
+            }));
+
+            return wallet;
+          });
+      })
+      .then((_wallets) => {
+        _wallets.forEach((wallet) => {
+          const owners = wallet.owners.map((o) => o.address);
+
+          // Owners ∩ Addresses not null : Wallet is owned
+          // by one of the accounts
+          if (intersection(owners, addresses).length > 0) {
+            accounts[wallet.address] = wallet;
+          } else {
+            contacts[wallet.address] = wallet;
+          }
+        });
+
+        const data = {
+          accountsInfo,
+          accounts, contacts, contracts
+        };
+
+        dispatch(_personalAccountsInfo(data));
+        dispatch(attachWallets(wallets));
+        dispatch(fetchBalances());
+      });
   };
 }
 
diff --git a/js/src/redux/providers/personalReducer.js b/js/src/redux/providers/personalReducer.js
index 19ee421f0..daadd54b3 100644
--- a/js/src/redux/providers/personalReducer.js
+++ b/js/src/redux/providers/personalReducer.js
@@ -25,14 +25,13 @@ const initialState = {
   hasContacts: false,
   contracts: {},
   hasContracts: false,
-  wallet: {},
-  hasWallets: false,
   visibleAccounts: []
 };
 
 export default handleActions({
   personalAccountsInfo (state, action) {
-    const { accountsInfo, accounts, contacts, contracts, wallets } = action;
+    const accountsInfo = action.accountsInfo || state.accountsInfo;
+    const { accounts, contacts, contracts } = action;
 
     return Object.assign({}, state, {
       accountsInfo,
@@ -41,9 +40,7 @@ export default handleActions({
       contacts,
       hasContacts: Object.keys(contacts).length !== 0,
       contracts,
-      hasContracts: Object.keys(contracts).length !== 0,
-      wallets,
-      hasWallets: Object.keys(wallets).length !== 0
+      hasContracts: Object.keys(contracts).length !== 0
     });
   },
 
diff --git a/js/src/redux/providers/signerReducer.js b/js/src/redux/providers/signerReducer.js
index c6d55f140..835fe8a70 100644
--- a/js/src/redux/providers/signerReducer.js
+++ b/js/src/redux/providers/signerReducer.js
@@ -90,7 +90,7 @@ export default handleActions({
   signerSuccessRejectRequest (state, action) {
     const { id } = action.payload;
     const rejected = Object.assign(
-      state.pending.find(p => p.id === id),
+      state.pending.find(p => p.id === id) || { id },
       { status: 'rejected' }
     );
     return {
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index fcf48ab94..31e4d2207 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -26,8 +26,8 @@ import TextFieldUnderline from 'material-ui/TextField/TextFieldUnderline';
 import AccountCard from '~/ui/AccountCard';
 import InputAddress from '~/ui/Form/InputAddress';
 import Portal from '~/ui/Portal';
-import { validateAddress } from '~/util/validation';
 import { nodeOrStringProptype } from '~/util/proptypes';
+import { validateAddress } from '~/util/validation';
 
 import AddressSelectStore from './addressSelectStore';
 import styles from './addressSelect.css';
@@ -40,6 +40,7 @@ let currentId = 1;
 @observer
 class AddressSelect extends Component {
   static contextTypes = {
+    intl: React.PropTypes.object.isRequired,
     api: PropTypes.object.isRequired,
     muiTheme: PropTypes.object.isRequired
   };
@@ -55,7 +56,6 @@ class AddressSelect extends Component {
     contacts: PropTypes.object,
     contracts: PropTypes.object,
     tokens: PropTypes.object,
-    wallets: PropTypes.object,
 
     // Optional props
     allowInput: PropTypes.bool,
@@ -160,6 +160,12 @@ class AddressSelect extends Component {
     }
 
     const id = `addressSelect_${++currentId}`;
+    const ilHint = typeof hint === 'string' || !(hint && hint.props)
+      ? (hint || '')
+      : this.context.intl.formatMessage(
+        hint.props,
+        hint.props.values || {}
+      );
 
     return (
       <Portal
@@ -174,7 +180,7 @@ class AddressSelect extends Component {
         <input
           id={ id }
           className={ styles.input }
-          placeholder={ hint }
+          placeholder={ ilHint }
 
           onBlur={ this.handleInputBlur }
           onFocus={ this.handleInputFocus }
diff --git a/js/src/ui/Form/AddressSelect/addressSelectStore.js b/js/src/ui/Form/AddressSelect/addressSelectStore.js
index 61eec13fb..b6827b9cc 100644
--- a/js/src/ui/Form/AddressSelect/addressSelectStore.js
+++ b/js/src/ui/Form/AddressSelect/addressSelectStore.js
@@ -78,14 +78,13 @@ export default class AddressSelectStore {
   }
 
   @action setValues (props) {
-    const { accounts = {}, contracts = {}, contacts = {}, wallets = {} } = props;
+    const { accounts = {}, contracts = {}, contacts = {} } = props;
 
     const accountsN = Object.keys(accounts).length;
     const contractsN = Object.keys(contracts).length;
     const contactsN = Object.keys(contacts).length;
-    const walletsN = Object.keys(wallets).length;
 
-    if (accountsN + contractsN + contactsN + walletsN === 0) {
+    if (accountsN + contractsN + contactsN === 0) {
       return;
     }
 
@@ -98,10 +97,7 @@ export default class AddressSelectStore {
             defaultMessage='accounts'
           />
         ),
-        values: [].concat(
-          Object.values(wallets),
-          Object.values(accounts)
-        )
+        values: Object.values(accounts)
       },
       {
         key: 'contacts',
diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js
index 616bf23b1..d82ed8cf4 100644
--- a/js/src/ui/Form/Input/input.js
+++ b/js/src/ui/Form/Input/input.js
@@ -51,6 +51,7 @@ export default class Input extends Component {
       PropTypes.string,
       PropTypes.bool
     ]),
+    autoFocus: PropTypes.bool,
     children: PropTypes.node,
     className: PropTypes.string,
     disabled: PropTypes.bool,
@@ -112,7 +113,7 @@ export default class Input extends Component {
 
   render () {
     const { value } = this.state;
-    const { children, className, hideUnderline, disabled, error, focused, label } = this.props;
+    const { autoFocus, children, className, hideUnderline, disabled, error, focused, label } = this.props;
     const { hint, onClick, onFocus, multiLine, rows, type, min, max, style, tabIndex } = this.props;
 
     const readOnly = this.props.readOnly || disabled;
@@ -138,6 +139,7 @@ export default class Input extends Component {
         { this.renderCopyButton() }
         <TextField
           autoComplete='off'
+          autoFocus={ autoFocus }
           className={ className }
           errorText={ error }
           floatingLabelFixed
diff --git a/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
index 59fb81458..5655550fd 100644
--- a/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
+++ b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
@@ -25,7 +25,6 @@ class InputAddressSelect extends Component {
     accounts: PropTypes.object.isRequired,
     contacts: PropTypes.object.isRequired,
     contracts: PropTypes.object.isRequired,
-    wallets: PropTypes.object.isRequired,
     error: PropTypes.string,
     label: PropTypes.string,
     hint: PropTypes.string,
@@ -34,7 +33,7 @@ class InputAddressSelect extends Component {
   };
 
   render () {
-    const { accounts, contacts, contracts, wallets, label, hint, error, value, onChange } = this.props;
+    const { accounts, contacts, contracts, label, hint, error, value, onChange } = this.props;
 
     return (
       <AddressSelect
@@ -42,7 +41,6 @@ class InputAddressSelect extends Component {
         accounts={ accounts }
         contacts={ contacts }
         contracts={ contracts }
-        wallets={ wallets }
         error={ error }
         label={ label }
         hint={ hint }
@@ -53,13 +51,12 @@ class InputAddressSelect extends Component {
 }
 
 function mapStateToProps (state) {
-  const { accounts, contacts, contracts, wallets } = state.personal;
+  const { accounts, contacts, contracts } = state.personal;
 
   return {
     accounts,
     contacts,
-    contracts,
-    wallets
+    contracts
   };
 }
 
diff --git a/js/src/ui/Form/TypedInput/typedInput.js b/js/src/ui/Form/TypedInput/typedInput.js
index 230b59c70..b0a8be98d 100644
--- a/js/src/ui/Form/TypedInput/typedInput.js
+++ b/js/src/ui/Form/TypedInput/typedInput.js
@@ -67,15 +67,7 @@ export default class TypedInput extends Component {
   }
 
   render () {
-    const { param } = this.props;
-
-    if (typeof param === 'string') {
-      const parsedParam = parseAbiType(param);
-
-      if (parsedParam) {
-        return this.renderParam(parsedParam);
-      }
-    }
+    const param = this.getParam();
 
     if (param) {
       return this.renderParam(param);
@@ -234,7 +226,8 @@ export default class TypedInput extends Component {
   }
 
   renderInteger (value = this.props.value, onChange = this.onChange) {
-    const { label, error, param, hint, min, max } = this.props;
+    const { label, error, hint, min, max } = this.props;
+    const param = this.getParam();
 
     const realValue = value && typeof value.toNumber === 'function'
       ? value.toNumber()
@@ -263,7 +256,8 @@ export default class TypedInput extends Component {
    * @see https://github.com/facebook/react/issues/1549
    */
   renderFloat (value = this.props.value, onChange = this.onChange) {
-    const { label, error, param, hint, min, max } = this.props;
+    const { label, error, hint, min, max } = this.props;
+    const param = this.getParam();
 
     const realValue = value && typeof value.toNumber === 'function'
       ? value.toNumber()
@@ -379,7 +373,9 @@ export default class TypedInput extends Component {
   }
 
   onAddField = () => {
-    const { value, onChange, param } = this.props;
+    const { value, onChange } = this.props;
+    const param = this.getParam();
+
     const newValues = [].concat(value, param.subtype.default);
 
     onChange(newValues);
@@ -392,4 +388,14 @@ export default class TypedInput extends Component {
     onChange(newValues);
   }
 
+  getParam = () => {
+    const { param } = this.props;
+
+    if (typeof param === 'string') {
+      return parseAbiType(param);
+    }
+
+    return param;
+  }
+
 }
diff --git a/js/src/ui/MethodDecoding/methodDecodingStore.js b/js/src/ui/MethodDecoding/methodDecodingStore.js
index 3b5ccb5b0..5d518d3a9 100644
--- a/js/src/ui/MethodDecoding/methodDecodingStore.js
+++ b/js/src/ui/MethodDecoding/methodDecodingStore.js
@@ -118,6 +118,15 @@ export default class MethodDecodingStore {
       return Promise.resolve(result);
     }
 
+    try {
+      const { signature } = this.api.util.decodeCallData(input);
+
+      if (signature === CONTRACT_CREATE || transaction.creates) {
+        result.contract = true;
+        return Promise.resolve({ ...result, deploy: true });
+      }
+    } catch (e) {}
+
     return this
       .isContract(contractAddress || transaction.creates)
       .then((isContract) => {
@@ -132,7 +141,7 @@ export default class MethodDecodingStore {
         result.params = paramdata;
 
         // Contract deployment
-        if (!signature || signature === CONTRACT_CREATE || transaction.creates) {
+        if (!signature) {
           return Promise.resolve({ ...result, deploy: true });
         }
 
@@ -192,7 +201,7 @@ export default class MethodDecodingStore {
    */
   isContract (contractAddress) {
     // If zero address, it isn't a contract
-    if (/^(0x)?0*$/.test(contractAddress)) {
+    if (!contractAddress || /^(0x)?0*$/.test(contractAddress)) {
       return Promise.resolve(false);
     }
 
diff --git a/js/src/ui/Portal/portal.js b/js/src/ui/Portal/portal.js
index f81127540..8ab96c151 100644
--- a/js/src/ui/Portal/portal.js
+++ b/js/src/ui/Portal/portal.js
@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
-import Portal from 'react-portal';
+import ReactPortal from 'react-portal';
 import keycode from 'keycode';
 
 import { CloseIcon } from '~/ui/Icons';
@@ -24,7 +24,7 @@ import ParityBackground from '~/ui/ParityBackground';
 
 import styles from './portal.css';
 
-export default class Protal extends Component {
+export default class Portal extends Component {
 
   static propTypes = {
     onClose: PropTypes.func.isRequired,
@@ -65,7 +65,7 @@ export default class Protal extends Component {
     }
 
     return (
-      <Portal isOpened onClose={ this.handleClose }>
+      <ReactPortal isOpened onClose={ this.handleClose }>
         <div
           className={ classes.join(' ') }
           onKeyDown={ this.handleKeyDown }
@@ -75,7 +75,7 @@ export default class Protal extends Component {
           { this.renderCloseIcon() }
           { children }
         </div>
-      </Portal>
+      </ReactPortal>
     );
   }
 
diff --git a/js/src/ui/TxHash/txHash.js b/js/src/ui/TxHash/txHash.js
index fcbe374e1..09905d594 100644
--- a/js/src/ui/TxHash/txHash.js
+++ b/js/src/ui/TxHash/txHash.js
@@ -134,7 +134,7 @@ class TxHash extends Component {
     const { api } = this.context;
     const { hash } = this.props;
 
-    if (error) {
+    if (error || !hash || /^(0x)?0*$/.test(hash)) {
       return;
     }
 
diff --git a/js/src/util/tx.js b/js/src/util/tx.js
index 591931ff3..90c78a42d 100644
--- a/js/src/util/tx.js
+++ b/js/src/util/tx.js
@@ -14,10 +14,93 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import WalletsUtils from '~/util/wallets';
+
 const isValidReceipt = (receipt) => {
   return receipt && receipt.blockNumber && receipt.blockNumber.gt(0);
 };
 
+function getTxArgs (func, options, values = []) {
+  const { contract } = func;
+  const { api } = contract;
+  const address = options.from;
+
+  if (!address) {
+    return Promise.resolve({ func, options, values });
+  }
+
+  return WalletsUtils
+    .isWallet(api, address)
+    .then((isWallet) => {
+      if (!isWallet) {
+        return { func, options, values };
+      }
+
+      options.data = contract.getCallData(func, options, values);
+      options.to = options.to || contract.address;
+
+      if (!options.to) {
+        return { func, options, values };
+      }
+
+      return WalletsUtils
+        .getCallArgs(api, options, values)
+        .then((callArgs) => {
+          if (!callArgs) {
+            return { func, options, values };
+          }
+
+          return callArgs;
+        });
+    });
+}
+
+export function estimateGas (_func, _options, _values = []) {
+  return getTxArgs(_func, _options, _values)
+    .then((callArgs) => {
+      const { func, options, values } = callArgs;
+      return func._estimateGas(options, values);
+    })
+    .then((gas) => {
+      return WalletsUtils
+        .isWallet(_func.contract.api, _options.from)
+        .then((isWallet) => {
+          if (isWallet) {
+            return gas.mul(1.5);
+          }
+
+          return gas;
+        });
+    });
+}
+
+export function postTransaction (_func, _options, _values = []) {
+  return getTxArgs(_func, _options, _values)
+    .then((callArgs) => {
+      const { func, options, values } = callArgs;
+      return func._postTransaction(options, values);
+    });
+}
+
+export function patchApi (api) {
+  api.patch = {
+    ...api.patch,
+    contract: patchContract
+  };
+}
+
+export function patchContract (contract) {
+  contract._functions.forEach((func) => {
+    if (!func.constant) {
+      func._postTransaction = func.postTransaction;
+      func._estimateGas = func.estimateGas;
+
+      func.postTransaction = postTransaction.bind(contract, func);
+      func.estimateGas = estimateGas.bind(contract, func);
+    }
+  });
+}
+
 export function checkIfTxFailed (api, tx, gasSent) {
   return api.pollMethod('eth_getTransactionReceipt', tx)
   .then((receipt) => {
diff --git a/js/src/util/wallets.js b/js/src/util/wallets.js
index 3732840d8..739a1e3c2 100644
--- a/js/src/util/wallets.js
+++ b/js/src/util/wallets.js
@@ -14,13 +14,92 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { range, uniq } from 'lodash';
+import BigNumber from 'bignumber.js';
+import { intersection, range, uniq } from 'lodash';
 
+import Contract from '~/api/contract';
 import { bytesToHex, toHex } from '~/api/util/format';
 import { validateAddress } from '~/util/validation';
+import WalletAbi from '~/contracts/abi/wallet.json';
+
+const _cachedWalletLookup = {};
 
 export default class WalletsUtils {
 
+  static getCallArgs (api, options, values = []) {
+    const walletContract = new Contract(api, WalletAbi);
+
+    const promises = [
+      api.parity.accountsInfo(),
+      WalletsUtils.fetchOwners(walletContract.at(options.from))
+    ];
+
+    return Promise
+      .all(promises)
+      .then(([ accounts, owners ]) => {
+        const addresses = Object.keys(accounts);
+        const owner = intersection(addresses, owners).pop();
+
+        if (!owner) {
+          return false;
+        }
+
+        return owner;
+      })
+      .then((owner) => {
+        if (!owner) {
+          return false;
+        }
+
+        const _options = Object.assign({}, options);
+        const { from, to, value = new BigNumber(0), data } = options;
+
+        delete _options.data;
+
+        const nextValues = [ to, value, data ];
+        const nextOptions = {
+          ..._options,
+          from: owner,
+          to: from,
+          value: new BigNumber(0)
+        };
+
+        const execFunc = walletContract.instance.execute;
+
+        return { func: execFunc, options: nextOptions, values: nextValues };
+      });
+  }
+
+  /**
+   * Check whether the given address could be
+   * a Wallet. The result is cached in order not
+   * to make unnecessary calls on non-wallet accounts
+   */
+  static isWallet (api, address) {
+    if (!_cachedWalletLookup[address]) {
+      const walletContract = new Contract(api, WalletAbi);
+
+      _cachedWalletLookup[address] = walletContract
+        .at(address)
+        .instance
+        .m_numOwners
+        .call()
+        .then((result) => {
+          if (!result || result.equals(0)) {
+            return false;
+          }
+
+          return true;
+        })
+        .then((bool) => {
+          _cachedWalletLookup[address] = Promise.resolve(bool);
+          return bool;
+        });
+    }
+
+    return _cachedWalletLookup[address];
+  }
+
   static fetchRequire (walletContract) {
     return walletContract.instance.m_required.call();
   }
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
index 058c20db3..6e508d05e 100644
--- a/js/src/views/Account/Header/header.js
+++ b/js/src/views/Account/Header/header.js
@@ -42,7 +42,6 @@ export default class Header extends Component {
   render () {
     const { account, balance, className, children, hideName } = this.props;
     const { address, meta, uuid } = account;
-
     if (!account) {
       return null;
     }
diff --git a/js/src/views/Accounts/List/list.js b/js/src/views/Accounts/List/list.js
index 2bd7fadc1..9cebdda6e 100644
--- a/js/src/views/Accounts/List/list.js
+++ b/js/src/views/Accounts/List/list.js
@@ -34,7 +34,6 @@ class List extends Component {
     order: PropTypes.string,
     orderFallback: PropTypes.string,
     search: PropTypes.array,
-    walletsOwners: PropTypes.object,
 
     fetchCertifiers: PropTypes.func.isRequired,
     fetchCertifications: PropTypes.func.isRequired,
@@ -58,7 +57,7 @@ class List extends Component {
   }
 
   renderAccounts () {
-    const { accounts, balances, empty, link, walletsOwners, handleAddSearchToken } = this.props;
+    const { accounts, balances, empty, link, handleAddSearchToken } = this.props;
 
     if (empty) {
       return (
@@ -76,7 +75,7 @@ class List extends Component {
       const account = accounts[address] || {};
       const balance = balances[address] || {};
 
-      const owners = walletsOwners && walletsOwners[address] || null;
+      const owners = account.owners || null;
 
       return (
         <div
diff --git a/js/src/views/Accounts/Summary/summary.js b/js/src/views/Accounts/Summary/summary.js
index 3b1d64d18..55e868c08 100644
--- a/js/src/views/Accounts/Summary/summary.js
+++ b/js/src/views/Accounts/Summary/summary.js
@@ -157,7 +157,11 @@ export default class Summary extends Component {
     const { link, noLink, account, name } = this.props;
 
     const { address } = account;
-    const viewLink = `/${link || 'accounts'}/${address}`;
+    const baseLink = account.wallet
+      ? 'wallet'
+      : link || 'accounts';
+
+    const viewLink = `/${baseLink}/${address}`;
 
     const content = (
       <IdentityName address={ address } name={ name } unknown />
diff --git a/js/src/views/Accounts/accounts.js b/js/src/views/Accounts/accounts.js
index 70b6f770a..06322e436 100644
--- a/js/src/views/Accounts/accounts.js
+++ b/js/src/views/Accounts/accounts.js
@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import ContentAdd from 'material-ui/svg-icons/content/add';
-import { uniq, isEqual } from 'lodash';
+import { uniq, isEqual, pickBy, omitBy } from 'lodash';
 
 import List from './List';
 import { CreateAccount, CreateWallet } from '~/modals';
@@ -36,9 +36,6 @@ class Accounts extends Component {
     setVisibleAccounts: PropTypes.func.isRequired,
     accounts: PropTypes.object.isRequired,
     hasAccounts: PropTypes.bool.isRequired,
-    wallets: PropTypes.object.isRequired,
-    walletsOwners: PropTypes.object.isRequired,
-    hasWallets: PropTypes.bool.isRequired,
 
     balances: PropTypes.object
   }
@@ -62,8 +59,8 @@ class Accounts extends Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    const prevAddresses = Object.keys({ ...this.props.accounts, ...this.props.wallets });
-    const nextAddresses = Object.keys({ ...nextProps.accounts, ...nextProps.wallets });
+    const prevAddresses = Object.keys(this.props.accounts);
+    const nextAddresses = Object.keys(nextProps.accounts);
 
     if (prevAddresses.length !== nextAddresses.length || !isEqual(prevAddresses.sort(), nextAddresses.sort())) {
       this.setVisibleAccounts(nextProps);
@@ -75,8 +72,8 @@ class Accounts extends Component {
   }
 
   setVisibleAccounts (props = this.props) {
-    const { accounts, wallets, setVisibleAccounts } = props;
-    const addresses = Object.keys({ ...accounts, ...wallets });
+    const { accounts, setVisibleAccounts } = props;
+    const addresses = Object.keys(accounts);
     setVisibleAccounts(addresses);
   }
 
@@ -115,30 +112,38 @@ class Accounts extends Component {
   }
 
   renderAccounts () {
+    const { accounts, balances } = this.props;
+
+    const _accounts = omitBy(accounts, (a) => a.wallet);
+    const _hasAccounts = Object.keys(_accounts).length > 0;
+
     if (!this.state.show) {
-      return this.renderLoading(this.props.accounts);
+      return this.renderLoading(_accounts);
     }
 
-    const { accounts, hasAccounts, balances } = this.props;
     const { searchValues, sortOrder } = this.state;
 
     return (
       <List
         search={ searchValues }
-        accounts={ accounts }
+        accounts={ _accounts }
         balances={ balances }
-        empty={ !hasAccounts }
+        empty={ !_hasAccounts }
         order={ sortOrder }
         handleAddSearchToken={ this.onAddSearchToken } />
     );
   }
 
   renderWallets () {
+    const { accounts, balances } = this.props;
+
+    const wallets = pickBy(accounts, (a) => a.wallet);
+    const hasWallets = Object.keys(wallets).length > 0;
+
     if (!this.state.show) {
-      return this.renderLoading(this.props.wallets);
+      return this.renderLoading(wallets);
     }
 
-    const { wallets, hasWallets, balances, walletsOwners } = this.props;
     const { searchValues, sortOrder } = this.state;
 
     if (!wallets || Object.keys(wallets).length === 0) {
@@ -154,7 +159,6 @@ class Accounts extends Component {
         empty={ !hasWallets }
         order={ sortOrder }
         handleAddSearchToken={ this.onAddSearchToken }
-        walletsOwners={ walletsOwners }
       />
     );
   }
@@ -287,34 +291,12 @@ class Accounts extends Component {
 }
 
 function mapStateToProps (state) {
-  const { accounts, hasAccounts, wallets, hasWallets, accountsInfo } = state.personal;
+  const { accounts, hasAccounts } = state.personal;
   const { balances } = state.balances;
-  const walletsInfo = state.wallet.wallets;
-
-  const walletsOwners = Object
-    .keys(walletsInfo)
-    .map((wallet) => {
-      const owners = walletsInfo[wallet].owners || [];
-
-      return {
-        owners: owners.map((owner) => ({
-          address: owner,
-          name: accountsInfo[owner] && accountsInfo[owner].name || owner
-        })),
-        address: wallet
-      };
-    })
-    .reduce((walletsOwners, wallet) => {
-      walletsOwners[wallet.address] = wallet.owners;
-      return walletsOwners;
-    }, {});
 
   return {
-    accounts,
-    hasAccounts,
-    wallets,
-    walletsOwners,
-    hasWallets,
+    accounts: accounts,
+    hasAccounts: hasAccounts,
     balances
   };
 }
diff --git a/js/src/views/Dapps/dapps.js b/js/src/views/Dapps/dapps.js
index 6462e1af9..e800263e4 100644
--- a/js/src/views/Dapps/dapps.js
+++ b/js/src/views/Dapps/dapps.js
@@ -20,6 +20,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { omitBy } from 'lodash';
 
 import { AddDapps, DappPermissions } from '~/modals';
 import PermissionStore from '~/modals/DappPermissions/store';
@@ -150,8 +151,15 @@ class Dapps extends Component {
 function mapStateToProps (state) {
   const { accounts } = state.personal;
 
+  /**
+   * Do not show the Wallet Accounts in the Dapps
+   * Permissions Modal. This will come in v1.6, but
+   * for now it would break dApps using Web3...
+   */
+  const _accounts = omitBy(accounts, (account) => account.wallet);
+
   return {
-    accounts
+    accounts: _accounts
   };
 }
 
diff --git a/js/src/views/Signer/components/RequestPending/requestPending.js b/js/src/views/Signer/components/RequestPending/requestPending.js
index 84783a614..3e8586063 100644
--- a/js/src/views/Signer/components/RequestPending/requestPending.js
+++ b/js/src/views/Signer/components/RequestPending/requestPending.js
@@ -23,6 +23,7 @@ export default class RequestPending extends Component {
   static propTypes = {
     className: PropTypes.string,
     date: PropTypes.instanceOf(Date).isRequired,
+    focus: PropTypes.bool,
     gasLimit: PropTypes.object.isRequired,
     id: PropTypes.object.isRequired,
     isSending: PropTypes.bool.isRequired,
@@ -38,6 +39,7 @@ export default class RequestPending extends Component {
   };
 
   static defaultProps = {
+    focus: false,
     isSending: false
   };
 
@@ -49,7 +51,7 @@ export default class RequestPending extends Component {
   };
 
   render () {
-    const { className, date, gasLimit, id, isSending, isTest, onReject, payload, store } = this.props;
+    const { className, date, focus, gasLimit, id, isSending, isTest, onReject, payload, store } = this.props;
 
     if (payload.sign) {
       const { sign } = payload;
@@ -58,6 +60,7 @@ export default class RequestPending extends Component {
         <SignRequest
           address={ sign.address }
           className={ className }
+          focus={ focus }
           hash={ sign.hash }
           id={ id }
           isFinished={ false }
@@ -75,6 +78,7 @@ export default class RequestPending extends Component {
         <TransactionPending
           className={ className }
           date={ date }
+          focus={ focus }
           gasLimit={ gasLimit }
           id={ id }
           isSending={ isSending }
diff --git a/js/src/views/Signer/components/SignRequest/signRequest.js b/js/src/views/Signer/components/SignRequest/signRequest.js
index 783e5b9f6..6eea11057 100644
--- a/js/src/views/Signer/components/SignRequest/signRequest.js
+++ b/js/src/views/Signer/components/SignRequest/signRequest.js
@@ -30,13 +30,19 @@ export default class SignRequest extends Component {
     address: PropTypes.string.isRequired,
     hash: PropTypes.string.isRequired,
     isFinished: PropTypes.bool.isRequired,
+    isTest: PropTypes.bool.isRequired,
+    store: PropTypes.object.isRequired,
+
+    className: PropTypes.string,
+    focus: PropTypes.bool,
     isSending: PropTypes.bool,
     onConfirm: PropTypes.func,
     onReject: PropTypes.func,
-    status: PropTypes.string,
-    className: PropTypes.string,
-    isTest: PropTypes.bool.isRequired,
-    store: PropTypes.object.isRequired
+    status: PropTypes.string
+  };
+
+  static defaultProps = {
+    focus: false
   };
 
   componentWillMount () {
@@ -81,7 +87,7 @@ export default class SignRequest extends Component {
   }
 
   renderActions () {
-    const { address, isFinished, status } = this.props;
+    const { address, focus, isFinished, status } = this.props;
 
     if (isFinished) {
       if (status === 'confirmed') {
@@ -111,6 +117,7 @@ export default class SignRequest extends Component {
     return (
       <TransactionPendingForm
         address={ address }
+        focus={ focus }
         isSending={ this.props.isSending }
         onConfirm={ this.onConfirm }
         onReject={ this.onReject }
diff --git a/js/src/views/Signer/components/TransactionPending/transactionPending.js b/js/src/views/Signer/components/TransactionPending/transactionPending.js
index dc07de99a..fc575c8cd 100644
--- a/js/src/views/Signer/components/TransactionPending/transactionPending.js
+++ b/js/src/views/Signer/components/TransactionPending/transactionPending.js
@@ -35,6 +35,7 @@ export default class TransactionPending extends Component {
   static propTypes = {
     className: PropTypes.string,
     date: PropTypes.instanceOf(Date).isRequired,
+    focus: PropTypes.bool,
     gasLimit: PropTypes.object,
     id: PropTypes.object.isRequired,
     isSending: PropTypes.bool.isRequired,
@@ -53,6 +54,10 @@ export default class TransactionPending extends Component {
     }).isRequired
   };
 
+  static defaultProps = {
+    focus: false
+  };
+
   gasStore = new GasPriceEditor.Store(this.context.api, {
     gas: this.props.transaction.gas.toFixed(),
     gasLimit: this.props.gasLimit,
@@ -80,7 +85,7 @@ export default class TransactionPending extends Component {
   }
 
   renderTransaction () {
-    const { className, id, isSending, isTest, store, transaction } = this.props;
+    const { className, focus, id, isSending, isTest, store, transaction } = this.props;
     const { totalValue } = this.state;
     const { from, value } = transaction;
 
@@ -100,6 +105,7 @@ export default class TransactionPending extends Component {
           value={ value } />
         <TransactionPendingForm
           address={ from }
+          focus={ focus }
           isSending={ isSending }
           onConfirm={ this.onConfirm }
           onReject={ this.onReject } />
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/transactionPendingFormConfirm.js b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/transactionPendingFormConfirm.js
index 360125d9f..02b7ef266 100644
--- a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/transactionPendingFormConfirm.js
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/transactionPendingFormConfirm.js
@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import RaisedButton from 'material-ui/RaisedButton';
@@ -26,11 +27,16 @@ import styles from './transactionPendingFormConfirm.css';
 
 class TransactionPendingFormConfirm extends Component {
   static propTypes = {
-    accounts: PropTypes.object.isRequired,
+    account: PropTypes.object.isRequired,
     address: PropTypes.string.isRequired,
     isSending: PropTypes.bool.isRequired,
-    onConfirm: PropTypes.func.isRequired
-  }
+    onConfirm: PropTypes.func.isRequired,
+    focus: PropTypes.bool
+  };
+
+  static defaultProps = {
+    focus: false
+  };
 
   id = Math.random(); // for tooltip
 
@@ -40,10 +46,39 @@ class TransactionPendingFormConfirm extends Component {
     walletError: null
   }
 
+  componentDidMount () {
+    this.focus();
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (!this.props.focus && nextProps.focus) {
+      this.focus(nextProps);
+    }
+  }
+
+  /**
+   * Properly focus on the input element when needed.
+   * This might be fixed some day in MaterialUI with
+   * an autoFocus prop.
+   *
+   * @see https://github.com/callemall/material-ui/issues/5632
+   */
+  focus (props = this.props) {
+    if (props.focus) {
+      const textNode = ReactDOM.findDOMNode(this.refs.input);
+
+      if (!textNode) {
+        return;
+      }
+
+      const inputNode = textNode.querySelector('input');
+      inputNode && inputNode.focus();
+    }
+  }
+
   render () {
-    const { accounts, address, isSending } = this.props;
+    const { account, address, isSending } = this.props;
     const { password, wallet, walletError } = this.state;
-    const account = accounts[address] || {};
     const isExternal = !account.uuid;
 
     const passwordHint = account.meta && account.meta.passwordHint
@@ -72,8 +107,10 @@ class TransactionPendingFormConfirm extends Component {
             }
             onChange={ this.onModifyPassword }
             onKeyDown={ this.onKeyDown }
+            ref='input'
             type='password'
-            value={ password } />
+            value={ password }
+          />
           <div className={ styles.passwordHint }>
             { passwordHint }
           </div>
@@ -178,11 +215,14 @@ class TransactionPendingFormConfirm extends Component {
   }
 }
 
-function mapStateToProps (state) {
-  const { accounts } = state.personal;
+function mapStateToProps (initState, initProps) {
+  const { accounts } = initState.personal;
+  const { address } = initProps;
 
-  return {
-    accounts
+  const account = accounts[address] || {};
+
+  return () => {
+    return { account };
   };
 }
 
diff --git a/js/src/views/Signer/components/TransactionPendingForm/transactionPendingForm.js b/js/src/views/Signer/components/TransactionPendingForm/transactionPendingForm.js
index f6e92761f..f0b167f27 100644
--- a/js/src/views/Signer/components/TransactionPendingForm/transactionPendingForm.js
+++ b/js/src/views/Signer/components/TransactionPendingForm/transactionPendingForm.js
@@ -28,7 +28,12 @@ export default class TransactionPendingForm extends Component {
     isSending: PropTypes.bool.isRequired,
     onConfirm: PropTypes.func.isRequired,
     onReject: PropTypes.func.isRequired,
-    className: PropTypes.string
+    className: PropTypes.string,
+    focus: PropTypes.bool
+  };
+
+  static defaultProps = {
+    focus: false
   };
 
   state = {
@@ -47,7 +52,7 @@ export default class TransactionPendingForm extends Component {
   }
 
   renderForm () {
-    const { address, isSending, onConfirm, onReject } = this.props;
+    const { address, focus, isSending, onConfirm, onReject } = this.props;
 
     if (this.state.isRejectOpen) {
       return (
@@ -59,8 +64,10 @@ export default class TransactionPendingForm extends Component {
     return (
       <TransactionPendingFormConfirm
         address={ address }
+        focus={ focus }
         isSending={ isSending }
-        onConfirm={ onConfirm } />
+        onConfirm={ onConfirm }
+      />
     );
   }
 
diff --git a/js/src/views/Signer/containers/Embedded/embedded.js b/js/src/views/Signer/containers/Embedded/embedded.js
index 3fa450473..b79657430 100644
--- a/js/src/views/Signer/containers/Embedded/embedded.js
+++ b/js/src/views/Signer/containers/Embedded/embedded.js
@@ -78,7 +78,7 @@ class Embedded extends Component {
     );
   }
 
-  renderPending = (data) => {
+  renderPending = (data, index) => {
     const { actions, gasLimit, isTest } = this.props;
     const { date, id, isSending, payload } = data;
 
@@ -86,6 +86,7 @@ class Embedded extends Component {
       <RequestPending
         className={ styles.request }
         date={ date }
+        focus={ index === 0 }
         gasLimit={ gasLimit }
         id={ id }
         isSending={ isSending }
diff --git a/js/src/views/Signer/containers/RequestsPage/requestsPage.js b/js/src/views/Signer/containers/RequestsPage/requestsPage.js
index 8f2da6208..ebc955157 100644
--- a/js/src/views/Signer/containers/RequestsPage/requestsPage.js
+++ b/js/src/views/Signer/containers/RequestsPage/requestsPage.js
@@ -104,7 +104,7 @@ class RequestsPage extends Component {
     );
   }
 
-  renderPending = (data) => {
+  renderPending = (data, index) => {
     const { actions, gasLimit, isTest } = this.props;
     const { date, id, isSending, payload } = data;
 
@@ -112,6 +112,7 @@ class RequestsPage extends Component {
       <RequestPending
         className={ styles.request }
         date={ date }
+        focus={ index === 0 }
         gasLimit={ gasLimit }
         id={ id }
         isSending={ isSending }
diff --git a/js/src/views/Wallet/Details/details.js b/js/src/views/Wallet/Details/details.js
index 25141915a..98c0fd4e4 100644
--- a/js/src/views/Wallet/Details/details.js
+++ b/js/src/views/Wallet/Details/details.js
@@ -55,14 +55,20 @@ export default class WalletDetails extends Component {
       return null;
     }
 
-    const ownersList = owners.map((address, idx) => (
-      <InputAddress
-        key={ `${idx}_${address}` }
-        value={ address }
-        disabled
-        text
-      />
-    ));
+    const ownersList = owners.map((owner, idx) => {
+      const address = typeof owner === 'object'
+        ? owner.address
+        : owner;
+
+      return (
+        <InputAddress
+          key={ `${idx}_${address}` }
+          value={ address }
+          disabled
+          text
+        />
+      );
+    });
 
     return (
       <div>
diff --git a/js/src/views/Wallet/Transactions/transactions.js b/js/src/views/Wallet/Transactions/transactions.js
index aff1623a4..0f2558dfc 100644
--- a/js/src/views/Wallet/Transactions/transactions.js
+++ b/js/src/views/Wallet/Transactions/transactions.js
@@ -57,12 +57,12 @@ export default class WalletTransactions extends Component {
       );
     }
 
-    const txRows = transactions.map((transaction) => {
+    const txRows = transactions.slice(0, 15).map((transaction, index) => {
       const { transactionHash, blockNumber, from, to, value, data } = transaction;
 
       return (
         <TxRow
-          key={ transactionHash }
+          key={ `${transactionHash}_${index}` }
           tx={ {
             hash: transactionHash,
             input: data && bytesToHex(data) || '',
diff --git a/js/src/views/Wallet/wallet.js b/js/src/views/Wallet/wallet.js
index b33772c48..5fe6c957e 100644
--- a/js/src/views/Wallet/wallet.js
+++ b/js/src/views/Wallet/wallet.js
@@ -64,13 +64,14 @@ class Wallet extends Component {
   };
 
   static propTypes = {
-    setVisibleAccounts: PropTypes.func.isRequired,
+    address: PropTypes.string.isRequired,
     balance: nullableProptype(PropTypes.object.isRequired),
     images: PropTypes.object.isRequired,
-    address: PropTypes.string.isRequired,
-    wallets: PropTypes.object.isRequired,
+    isTest: PropTypes.bool.isRequired,
+    owned: PropTypes.bool.isRequired,
+    setVisibleAccounts: PropTypes.func.isRequired,
     wallet: PropTypes.object.isRequired,
-    isTest: PropTypes.bool.isRequired
+    walletAccount: nullableProptype(PropTypes.object).isRequired
   };
 
   state = {
@@ -104,28 +105,26 @@ class Wallet extends Component {
   }
 
   render () {
-    const { wallets, balance, address } = this.props;
+    const { walletAccount, balance, wallet } = this.props;
 
-    const wallet = (wallets || {})[address];
-
-    if (!wallet) {
+    if (!walletAccount) {
       return null;
     }
 
-    const { owners, require, dailylimit } = this.props.wallet;
+    const { owners, require, dailylimit } = wallet;
 
     return (
       <div className={ styles.wallet }>
-        { this.renderEditDialog(wallet) }
+        { this.renderEditDialog(walletAccount) }
         { this.renderSettingsDialog() }
         { this.renderTransferDialog() }
-        { this.renderDeleteDialog(wallet) }
+        { this.renderDeleteDialog(walletAccount) }
         { this.renderActionbar() }
         <Page>
           <div className={ styles.info }>
             <Header
               className={ styles.header }
-              account={ wallet }
+              account={ walletAccount }
               balance={ balance }
               isContract
             >
@@ -209,32 +208,47 @@ class Wallet extends Component {
   }
 
   renderActionbar () {
-    const { balance } = this.props;
+    const { balance, owned } = this.props;
     const showTransferButton = !!(balance && balance.tokens);
 
-    const buttons = [
-      <Button
-        key='transferFunds'
-        icon={ <ContentSend /> }
-        label='transfer'
-        disabled={ !showTransferButton }
-        onClick={ this.onTransferClick } />,
+    const buttons = [];
+
+    if (owned) {
+      buttons.push(
+        <Button
+          key='transferFunds'
+          icon={ <ContentSend /> }
+          label='transfer'
+          disabled={ !showTransferButton }
+          onClick={ this.onTransferClick } />
+      );
+    }
+
+    buttons.push(
       <Button
         key='delete'
         icon={ <ActionDelete /> }
         label='delete'
-        onClick={ this.showDeleteDialog } />,
+        onClick={ this.showDeleteDialog } />
+    );
+
+    buttons.push(
       <Button
         key='editmeta'
         icon={ <ContentCreate /> }
         label='edit'
-        onClick={ this.onEditClick } />,
-      <Button
-        key='settings'
-        icon={ <SettingsIcon /> }
-        label='settings'
-        onClick={ this.onSettingsClick } />
-    ];
+        onClick={ this.onEditClick } />
+    );
+
+    if (owned) {
+      buttons.push(
+        <Button
+          key='settings'
+          icon={ <SettingsIcon /> }
+          label='settings'
+          onClick={ this.onSettingsClick } />
+      );
+    }
 
     return (
       <Actionbar
@@ -293,12 +307,11 @@ class Wallet extends Component {
       return null;
     }
 
-    const { wallets, balance, images, address } = this.props;
-    const wallet = wallets[address];
+    const { walletAccount, balance, images } = this.props;
 
     return (
       <Transfer
-        account={ wallet }
+        account={ walletAccount }
         balance={ balance }
         images={ images }
         onClose={ this.onTransferClose }
@@ -342,20 +355,27 @@ function mapStateToProps (_, initProps) {
 
   return (state) => {
     const { isTest } = state.nodeStatus;
-    const { wallets } = state.personal;
+    const { accountsInfo = {}, accounts = {} } = state.personal;
     const { balances } = state.balances;
     const { images } = state;
+    const walletAccount = accounts[address] || accountsInfo[address] || null;
+
+    if (walletAccount) {
+      walletAccount.address = address;
+    }
 
     const wallet = state.wallet.wallets[address] || {};
     const balance = balances[address] || null;
+    const owned = !!accounts[address];
 
     return {
-      isTest,
-      wallets,
+      address,
       balance,
       images,
-      address,
-      wallet
+      isTest,
+      owned,
+      wallet,
+      walletAccount
     };
   };
 }
diff --git a/js/webpack/libraries.js b/js/webpack/libraries.js
index 3b8d8b92c..72bbd060f 100644
--- a/js/webpack/libraries.js
+++ b/js/webpack/libraries.js
@@ -38,6 +38,13 @@ module.exports = {
     library: '[name].js',
     libraryTarget: 'umd'
   },
+
+  resolve: {
+    alias: {
+      '~': path.resolve(__dirname, '../src')
+    }
+  },
+
   module: {
     rules: [
       {
diff --git a/js/webpack/npm.js b/js/webpack/npm.js
index a5f4b383f..ae860d00e 100644
--- a/js/webpack/npm.js
+++ b/js/webpack/npm.js
@@ -69,6 +69,9 @@ module.exports = {
   },
 
   resolve: {
+    alias: {
+      '~': path.resolve(__dirname, '../src')
+    },
     modules: [
       path.resolve('./src'),
       path.join(__dirname, '../node_modules')
diff --git a/js/webpack/vendor.js b/js/webpack/vendor.js
index daacab379..1ff9d66a8 100644
--- a/js/webpack/vendor.js
+++ b/js/webpack/vendor.js
@@ -64,6 +64,13 @@ module.exports = {
       }
     ]
   },
+
+  resolve: {
+    alias: {
+      '~': path.resolve(__dirname, '../src')
+    }
+  },
+
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, '../', `${DEST}/`),

From 2365c714d40302bc0a2cecbb3ea7ad75860499cb Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Fri, 30 Dec 2016 11:35:18 +0000
Subject: [PATCH 14/28] [ci skip] js-precompiled 20161230-113233

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 0e38f0a73..42e97b7aa 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#78ca8ccb3c00725ea8d51c1f78afe6f6ad563695"
+source = "git+https://github.com/ethcore/js-precompiled.git#c12a5e7185bc49ea4469aedd729bf739f8274289"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 30c5a1ed4..6a1794ec6 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.157",
+  "version": "0.2.158",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 29e8b2a3b828a1e27e339c338ae78901c122805a Mon Sep 17 00:00:00 2001
From: Robert Habermeier <rphmeier@gmail.com>
Date: Fri, 30 Dec 2016 15:52:49 +0100
Subject: [PATCH 15/28] parse testnet chain as ropsten

---
 parity/params.rs | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/parity/params.rs b/parity/params.rs
index bc1950165..9399b33e4 100644
--- a/parity/params.rs
+++ b/parity/params.rs
@@ -27,7 +27,7 @@ use user_defaults::UserDefaults;
 #[derive(Debug, PartialEq)]
 pub enum SpecType {
 	Mainnet,
-	Testnet,
+	Morden,
 	Ropsten,
 	Olympic,
 	Classic,
@@ -49,8 +49,8 @@ impl str::FromStr for SpecType {
 		let spec = match s {
 			"frontier" | "homestead" | "mainnet" => SpecType::Mainnet,
 			"frontier-dogmatic" | "homestead-dogmatic" | "classic" => SpecType::Classic,
-			"morden" | "testnet" | "classic-testnet" => SpecType::Testnet,
-			"ropsten" => SpecType::Ropsten,
+			"morden" | "classic-testnet" => SpecType::Morden,
+			"ropsten" | "testnet" => SpecType::Ropsten,
 			"olympic" => SpecType::Olympic,
 			"expanse" => SpecType::Expanse,
 			"dev" => SpecType::Dev,
@@ -64,7 +64,7 @@ impl SpecType {
 	pub fn spec(&self) -> Result<Spec, String> {
 		match *self {
 			SpecType::Mainnet => Ok(ethereum::new_frontier()),
-			SpecType::Testnet => Ok(ethereum::new_morden()),
+			SpecType::Morden => Ok(ethereum::new_morden()),
 			SpecType::Ropsten => Ok(ethereum::new_ropsten()),
 			SpecType::Olympic => Ok(ethereum::new_olympic()),
 			SpecType::Classic => Ok(ethereum::new_classic()),
@@ -292,12 +292,12 @@ mod tests {
 		assert_eq!(SpecType::Mainnet, "frontier".parse().unwrap());
 		assert_eq!(SpecType::Mainnet, "homestead".parse().unwrap());
 		assert_eq!(SpecType::Mainnet, "mainnet".parse().unwrap());
-		assert_eq!(SpecType::Testnet, "testnet".parse().unwrap());
-		assert_eq!(SpecType::Testnet, "morden".parse().unwrap());
+		assert_eq!(SpecType::Ropsten, "testnet".parse().unwrap());
+		assert_eq!(SpecType::Morden, "morden".parse().unwrap());
 		assert_eq!(SpecType::Ropsten, "ropsten".parse().unwrap());
 		assert_eq!(SpecType::Olympic, "olympic".parse().unwrap());
 		assert_eq!(SpecType::Classic, "classic".parse().unwrap());
-		assert_eq!(SpecType::Testnet, "classic-testnet".parse().unwrap());
+		assert_eq!(SpecType::Morden, "classic-testnet".parse().unwrap());
 	}
 
 	#[test]

From c93d3c1580341ecfe3e335310f7b205e9ff24dc3 Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Sat, 31 Dec 2016 03:34:58 +0000
Subject: [PATCH 16/28] [ci skip] js-precompiled 20161231-033147

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 42e97b7aa..e2a5c1f24 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#c12a5e7185bc49ea4469aedd729bf739f8274289"
+source = "git+https://github.com/ethcore/js-precompiled.git#fa12862ff36957458dc00bec2980ed333cafa420"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 6a1794ec6..b44c7d80c 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.158",
+  "version": "0.2.159",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 0c6a9ebbb90c0956a21c95626336ead746a3752d Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Sat, 31 Dec 2016 14:28:16 +0100
Subject: [PATCH 17/28] Work on Portal Style (#4003)

* Reduce Portal size and close on click outside

* PR Grumbles
---
 js/src/ui/Portal/portal.css | 36 +++++++++++++++++++++++++++++++-----
 js/src/ui/Portal/portal.js  | 24 +++++++++++++++++-------
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/js/src/ui/Portal/portal.css b/js/src/ui/Portal/portal.css
index 905f2cbd3..65c3b0103 100644
--- a/js/src/ui/Portal/portal.css
+++ b/js/src/ui/Portal/portal.css
@@ -15,6 +15,32 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+$left: 1.5em;
+$right: $left;
+$bottom: $left;
+$top: 20vh;
+
+.backOverlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.25);
+  z-index: -10;
+  opacity: 0;
+
+  transform-origin: 100% 0;
+  transition-property: opacity, z-index;
+  transition-duration: 0.25s;
+  transition-timing-function: ease-out;
+
+  &.expanded {
+    opacity: 1;
+    z-index: 2500;
+  }
+}
+
 .parityBackground {
   position: absolute;
   top: 0;
@@ -28,10 +54,10 @@
 .overlay {
   display: flex;
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+  top: $top;
+  left: $left;
+  width: calc(100vw - $left - $right);
+  height: calc(100vh - $top - $bottom);
 
   transform-origin: 100% 0;
   transition-property: opacity, z-index;
@@ -48,7 +74,7 @@
 
   &.expanded {
     opacity: 1;
-    z-index: 9999;
+    z-index: 3500;
   }
 }
 
diff --git a/js/src/ui/Portal/portal.js b/js/src/ui/Portal/portal.js
index 8ab96c151..91be44309 100644
--- a/js/src/ui/Portal/portal.js
+++ b/js/src/ui/Portal/portal.js
@@ -59,21 +59,26 @@ export default class Portal extends Component {
     const { children, className } = this.props;
 
     const classes = [ styles.overlay, className ];
+    const backClasses = [ styles.backOverlay ];
 
     if (expanded) {
       classes.push(styles.expanded);
+      backClasses.push(styles.expanded);
     }
 
     return (
       <ReactPortal isOpened onClose={ this.handleClose }>
-        <div
-          className={ classes.join(' ') }
-          onKeyDown={ this.handleKeyDown }
-        >
-          <ParityBackground className={ styles.parityBackground } />
+        <div className={ backClasses.join(' ') } onClick={ this.handleClose }>
+          <div
+            className={ classes.join(' ') }
+            onClick={ this.stopEvent }
+            onKeyDown={ this.handleKeyDown }
+          >
+            <ParityBackground className={ styles.parityBackground } />
 
-          { this.renderCloseIcon() }
-          { children }
+            { this.renderCloseIcon() }
+            { children }
+          </div>
         </div>
       </ReactPortal>
     );
@@ -93,6 +98,11 @@ export default class Portal extends Component {
     );
   }
 
+  stopEvent = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
   handleClose = () => {
     this.props.onClose();
   }

From 6608027c0204d8f8e3aca11f9b87f226c5569434 Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Sat, 31 Dec 2016 13:36:49 +0000
Subject: [PATCH 18/28] [ci skip] js-precompiled 20161231-133348

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index e2a5c1f24..920b24c42 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#fa12862ff36957458dc00bec2980ed333cafa420"
+source = "git+https://github.com/ethcore/js-precompiled.git#1d4635459adfc06c7d5a771ad62329184ca287c0"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index b44c7d80c..dd17a27c9 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.159",
+  "version": "0.2.160",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 2fbb0079118829c6b2221c0bd22a7f73d9ce6b25 Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Sun, 1 Jan 2017 04:24:16 +0000
Subject: [PATCH 19/28] [ci skip] js-precompiled 20170101-042119

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 920b24c42..33215e40f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#1d4635459adfc06c7d5a771ad62329184ca287c0"
+source = "git+https://github.com/ethcore/js-precompiled.git#7469ca031f5d3d0b90f38d3e9eb961d61fe0d960"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index dd17a27c9..24382ba36 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.160",
+  "version": "0.2.161",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 5210062a40f946a9d06b2a3c95c91c7a97d2081b Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Mon, 2 Jan 2017 03:35:30 +0000
Subject: [PATCH 20/28] [ci skip] js-precompiled 20170102-033239

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 33215e40f..e9d176d4d 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#7469ca031f5d3d0b90f38d3e9eb961d61fe0d960"
+source = "git+https://github.com/ethcore/js-precompiled.git#2b67f84a58c62b8e06e5fb34da2c99394716114a"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 24382ba36..cc287c72d 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.161",
+  "version": "0.2.162",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From efa36545ceb737eb2f27327f03000e47ce7e4a8d Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Tue, 3 Jan 2017 03:33:55 +0000
Subject: [PATCH 21/28] [ci skip] js-precompiled 20170103-033107

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index e9d176d4d..f818e4846 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#2b67f84a58c62b8e06e5fb34da2c99394716114a"
+source = "git+https://github.com/ethcore/js-precompiled.git#1b82b5f0d694fb2d3da71d7b0357dc50c2229d9a"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index cc287c72d..294278384 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.162",
+  "version": "0.2.163",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 04ed53e0f286dba4637c9cba9bffdc3bd3610a4c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 3 Jan 2017 17:41:21 +0100
Subject: [PATCH 22/28] Fix newError noops when not bound to dispacher (#4013)

* AddContract properly binds newError

* EditMeta properly binds newError

* PasswordManager properly binds newError

* pass null instead of empty mapStateToProps

* Add openSnackbar test & binded prop
---
 js/src/modals/AddContract/addContract.js      | 18 ++++++-
 js/src/modals/AddContract/addContract.spec.js | 47 ++++++++++++----
 js/src/modals/AddContract/addContract.test.js | 13 ++++-
 js/src/modals/EditMeta/editMeta.js            | 22 +++++++-
 js/src/modals/EditMeta/editMeta.spec.js       | 36 +++++++++----
 js/src/modals/EditMeta/editMeta.test.js       | 13 ++++-
 js/src/modals/EditMeta/store.js               |  4 +-
 .../modals/PasswordManager/passwordManager.js | 26 +++++++--
 .../PasswordManager/passwordManager.spec.js   | 53 ++++++++++++++-----
 .../PasswordManager/passwordManager.test.js   | 13 ++++-
 js/src/redux/actions.js                       |  3 +-
 js/src/redux/providers/snackbarActions.js     |  2 +-
 12 files changed, 202 insertions(+), 48 deletions(-)

diff --git a/js/src/modals/AddContract/addContract.js b/js/src/modals/AddContract/addContract.js
index c5e7aac61..49d3a4143 100644
--- a/js/src/modals/AddContract/addContract.js
+++ b/js/src/modals/AddContract/addContract.js
@@ -17,6 +17,8 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
 import { newError } from '~/redux/actions';
 import { Button, Modal, Form, Input, InputAddress, RadioButtons } from '~/ui';
@@ -25,13 +27,14 @@ import { AddIcon, CancelIcon, NextIcon, PrevIcon } from '~/ui/Icons';
 import Store from './store';
 
 @observer
-export default class AddContract extends Component {
+class AddContract extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
 
   static propTypes = {
     contracts: PropTypes.object.isRequired,
+    newError: PropTypes.func.isRequired,
     onClose: PropTypes.func
   };
 
@@ -244,7 +247,7 @@ export default class AddContract extends Component {
         this.onClose();
       })
       .catch((error) => {
-        newError(error);
+        this.props.newError(error);
       });
   }
 
@@ -252,3 +255,14 @@ export default class AddContract extends Component {
     this.props.onClose();
   }
 }
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    newError
+  }, dispatch);
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(AddContract);
diff --git a/js/src/modals/AddContract/addContract.spec.js b/js/src/modals/AddContract/addContract.spec.js
index d65e06f67..3e0bdf527 100644
--- a/js/src/modals/AddContract/addContract.spec.js
+++ b/js/src/modals/AddContract/addContract.spec.js
@@ -20,24 +20,27 @@ import sinon from 'sinon';
 
 import AddContract from './';
 
-import { CONTRACTS, createApi } from './addContract.test.js';
+import { CONTRACTS, createApi, createRedux } from './addContract.test.js';
 
+let api;
 let component;
+let instance;
 let onClose;
+let reduxStore;
 
-function renderShallow (props) {
+function render (props = {}) {
+  api = createApi();
   onClose = sinon.stub();
+  reduxStore = createRedux();
+
   component = shallow(
     <AddContract
       { ...props }
       contracts={ CONTRACTS }
       onClose={ onClose } />,
-    {
-      context: {
-        api: createApi()
-      }
-    }
-  );
+    { context: { store: reduxStore } }
+  ).find('AddContract').shallow({ context: { api } });
+  instance = component.instance();
 
   return component;
 }
@@ -45,11 +48,37 @@ function renderShallow (props) {
 describe('modals/AddContract', () => {
   describe('rendering', () => {
     beforeEach(() => {
-      renderShallow();
+      render();
     });
 
     it('renders the defauls', () => {
       expect(component).to.be.ok;
     });
   });
+
+  describe('onAdd', () => {
+    it('calls store addContract', () => {
+      sinon.stub(instance.store, 'addContract').resolves(true);
+      return instance.onAdd().then(() => {
+        expect(instance.store.addContract).to.have.been.called;
+        instance.store.addContract.restore();
+      });
+    });
+
+    it('calls closes dialog on success', () => {
+      sinon.stub(instance.store, 'addContract').resolves(true);
+      return instance.onAdd().then(() => {
+        expect(onClose).to.have.been.called;
+        instance.store.addContract.restore();
+      });
+    });
+
+    it('adds newError on failure', () => {
+      sinon.stub(instance.store, 'addContract').rejects('test');
+      return instance.onAdd().then(() => {
+        expect(reduxStore.dispatch).to.have.been.calledWith({ error: new Error('test'), type: 'newError' });
+        instance.store.addContract.restore();
+      });
+    });
+  });
 });
diff --git a/js/src/modals/AddContract/addContract.test.js b/js/src/modals/AddContract/addContract.test.js
index 5dc2af293..250d9895c 100644
--- a/js/src/modals/AddContract/addContract.test.js
+++ b/js/src/modals/AddContract/addContract.test.js
@@ -31,8 +31,19 @@ function createApi () {
   };
 }
 
+function createRedux () {
+  return {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {};
+    }
+  };
+}
+
 export {
   ABI,
   CONTRACTS,
-  createApi
+  createApi,
+  createRedux
 };
diff --git a/js/src/modals/EditMeta/editMeta.js b/js/src/modals/EditMeta/editMeta.js
index 8b5e14939..a232492ea 100644
--- a/js/src/modals/EditMeta/editMeta.js
+++ b/js/src/modals/EditMeta/editMeta.js
@@ -17,20 +17,24 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
+import { newError } from '~/redux/actions';
 import { Button, Form, Input, InputChip, Modal } from '~/ui';
 import { CancelIcon, SaveIcon } from '~/ui/Icons';
 
 import Store from './store';
 
 @observer
-export default class EditMeta extends Component {
+class EditMeta extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
 
   static propTypes = {
     account: PropTypes.object.isRequired,
+    newError: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired
   }
 
@@ -138,6 +142,20 @@ export default class EditMeta extends Component {
 
     return this.store
       .save()
-      .then(() => this.props.onClose());
+      .then(() => this.props.onClose())
+      .catch((error) => {
+        this.props.newError(error);
+      });
   }
 }
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    newError
+  }, dispatch);
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(EditMeta);
diff --git a/js/src/modals/EditMeta/editMeta.spec.js b/js/src/modals/EditMeta/editMeta.spec.js
index 917f32076..e6dac1f23 100644
--- a/js/src/modals/EditMeta/editMeta.spec.js
+++ b/js/src/modals/EditMeta/editMeta.spec.js
@@ -20,25 +20,27 @@ import sinon from 'sinon';
 
 import EditMeta from './';
 
-import { ACCOUNT, createApi } from './editMeta.test.js';
+import { ACCOUNT, createApi, createRedux } from './editMeta.test.js';
 
+let api;
 let component;
+let instance;
 let onClose;
+let reduxStore;
 
 function render (props) {
+  api = createApi();
   onClose = sinon.stub();
+  reduxStore = createRedux();
 
   component = shallow(
     <EditMeta
       { ...props }
       account={ ACCOUNT }
       onClose={ onClose } />,
-    {
-      context: {
-        api: createApi()
-      }
-    }
-  );
+    { context: { store: reduxStore } }
+  ).find('EditMeta').shallow({ context: { api } });
+  instance = component.instance();
 
   return component;
 }
@@ -56,15 +58,29 @@ describe('modals/EditMeta', () => {
     });
 
     describe('onSave', () => {
-      it('calls store.save() & props.onClose', () => {
-        const instance = component.instance();
+      it('calls store.save', () => {
         sinon.spy(instance.store, 'save');
 
-        instance.onSave().then(() => {
+        return instance.onSave().then(() => {
           expect(instance.store.save).to.have.been.called;
+          instance.store.save.restore();
+        });
+      });
+
+      it('closes the dialog on success', () => {
+        return instance.onSave().then(() => {
           expect(onClose).to.have.been.called;
         });
       });
+
+      it('adds newError on failure', () => {
+        sinon.stub(instance.store, 'save').rejects('test');
+
+        return instance.onSave().then(() => {
+          expect(reduxStore.dispatch).to.have.been.calledWith({ error: new Error('test'), type: 'newError' });
+          instance.store.save.restore();
+        });
+      });
     });
   });
 });
diff --git a/js/src/modals/EditMeta/editMeta.test.js b/js/src/modals/EditMeta/editMeta.test.js
index 98bd61fea..369debe1f 100644
--- a/js/src/modals/EditMeta/editMeta.test.js
+++ b/js/src/modals/EditMeta/editMeta.test.js
@@ -50,8 +50,19 @@ function createApi () {
   };
 }
 
+function createRedux () {
+  return {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {};
+    }
+  };
+}
+
 export {
   ACCOUNT,
   ADDRESS,
-  createApi
+  createApi,
+  createRedux
 };
diff --git a/js/src/modals/EditMeta/store.js b/js/src/modals/EditMeta/store.js
index b2d71c63a..58c5998de 100644
--- a/js/src/modals/EditMeta/store.js
+++ b/js/src/modals/EditMeta/store.js
@@ -16,7 +16,6 @@
 
 import { action, computed, observable, transaction } from 'mobx';
 
-import { newError } from '~/redux/actions';
 import { validateName } from '~/util/validation';
 
 export default class Store {
@@ -92,8 +91,7 @@ export default class Store {
       ])
       .catch((error) => {
         console.error('onSave', error);
-
-        newError(error);
+        throw error;
       });
   }
 }
diff --git a/js/src/modals/PasswordManager/passwordManager.js b/js/src/modals/PasswordManager/passwordManager.js
index 0f7a08f27..9bd6c08df 100644
--- a/js/src/modals/PasswordManager/passwordManager.js
+++ b/js/src/modals/PasswordManager/passwordManager.js
@@ -19,8 +19,10 @@ import { Tabs, Tab } from 'material-ui/Tabs';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
-import { newError, showSnackbar } from '~/redux/actions';
+import { newError, openSnackbar } from '~/redux/actions';
 import { Button, Modal, IdentityName, IdentityIcon } from '~/ui';
 import Form, { Input } from '~/ui/Form';
 import { CancelIcon, CheckIcon, SendIcon } from '~/ui/Icons';
@@ -42,13 +44,15 @@ const TABS_ITEM_STYLE = {
 };
 
 @observer
-export default class PasswordManager extends Component {
+class PasswordManager extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
 
   static propTypes = {
     account: PropTypes.object.isRequired,
+    openSnackbar: PropTypes.func.isRequired,
+    newError: PropTypes.func.isRequired,
     onClose: PropTypes.func
   }
 
@@ -336,7 +340,7 @@ export default class PasswordManager extends Component {
       .changePassword()
       .then((result) => {
         if (result) {
-          showSnackbar(
+          this.props.openSnackbar(
             <div>
               <FormattedMessage
                 id='passwordChange.success'
@@ -347,7 +351,7 @@ export default class PasswordManager extends Component {
         }
       })
       .catch((error) => {
-        newError(error);
+        this.props.newError(error);
       });
   }
 
@@ -355,7 +359,19 @@ export default class PasswordManager extends Component {
     return this.store
       .testPassword()
       .catch((error) => {
-        newError(error);
+        this.props.newError(error);
       });
   }
 }
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    openSnackbar,
+    newError
+  }, dispatch);
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(PasswordManager);
diff --git a/js/src/modals/PasswordManager/passwordManager.spec.js b/js/src/modals/PasswordManager/passwordManager.spec.js
index 744d0ffa3..bdb8828dd 100644
--- a/js/src/modals/PasswordManager/passwordManager.spec.js
+++ b/js/src/modals/PasswordManager/passwordManager.spec.js
@@ -20,25 +20,25 @@ import sinon from 'sinon';
 
 import PasswordManager from './';
 
-import { ACCOUNT, createApi } from './passwordManager.test.js';
+import { ACCOUNT, createApi, createRedux } from './passwordManager.test.js';
 
 let component;
+let instance;
 let onClose;
+let reduxStore;
 
 function render (props) {
   onClose = sinon.stub();
+  reduxStore = createRedux();
 
   component = shallow(
     <PasswordManager
       { ...props }
       account={ ACCOUNT }
       onClose={ onClose } />,
-    {
-      context: {
-        api: createApi()
-      }
-    }
-  );
+    { context: { store: reduxStore } }
+  ).find('PasswordManager').shallow({ context: { api: createApi() } });
+  instance = component.instance();
 
   return component;
 }
@@ -56,24 +56,53 @@ describe('modals/PasswordManager', () => {
     });
 
     describe('changePassword', () => {
-      it('calls store.changePassword & props.onClose', () => {
-        const instance = component.instance();
+      it('calls store.changePassword', () => {
         sinon.spy(instance.store, 'changePassword');
 
-        instance.changePassword().then(() => {
+        return instance.changePassword().then(() => {
           expect(instance.store.changePassword).to.have.been.called;
+          instance.store.changePassword.restore();
+        });
+      });
+
+      it('closes the dialog on success', () => {
+        return instance.changePassword().then(() => {
           expect(onClose).to.have.been.called;
         });
       });
+
+      it('shows snackbar on success', () => {
+        return instance.changePassword().then(() => {
+          expect(reduxStore.dispatch).to.have.been.calledWithMatch({ type: 'openSnackbar' });
+        });
+      });
+
+      it('adds newError on failure', () => {
+        sinon.stub(instance.store, 'changePassword').rejects('test');
+
+        return instance.changePassword().then(() => {
+          expect(reduxStore.dispatch).to.have.been.calledWith({ error: new Error('test'), type: 'newError' });
+          instance.store.changePassword.restore();
+        });
+      });
     });
 
     describe('testPassword', () => {
       it('calls store.testPassword', () => {
-        const instance = component.instance();
         sinon.spy(instance.store, 'testPassword');
 
-        instance.testPassword().then(() => {
+        return instance.testPassword().then(() => {
           expect(instance.store.testPassword).to.have.been.called;
+          instance.store.testPassword.restore();
+        });
+      });
+
+      it('adds newError on failure', () => {
+        sinon.stub(instance.store, 'testPassword').rejects('test');
+
+        return instance.testPassword().then(() => {
+          expect(reduxStore.dispatch).to.have.been.calledWith({ error: new Error('test'), type: 'newError' });
+          instance.store.testPassword.restore();
         });
       });
     });
diff --git a/js/src/modals/PasswordManager/passwordManager.test.js b/js/src/modals/PasswordManager/passwordManager.test.js
index 9a8f883ec..409756fde 100644
--- a/js/src/modals/PasswordManager/passwordManager.test.js
+++ b/js/src/modals/PasswordManager/passwordManager.test.js
@@ -37,7 +37,18 @@ function createApi (result = true) {
   };
 }
 
+function createRedux () {
+  return {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {};
+    }
+  };
+}
+
 export {
   ACCOUNT,
-  createApi
+  createApi,
+  createRedux
 };
diff --git a/js/src/redux/actions.js b/js/src/redux/actions.js
index 0618adfd3..773ade5fc 100644
--- a/js/src/redux/actions.js
+++ b/js/src/redux/actions.js
@@ -16,7 +16,7 @@
 
 import { newError } from '~/ui/Errors/actions';
 import { setAddressImage } from './providers/imagesActions';
-import { showSnackbar } from './providers/snackbarActions';
+import { openSnackbar, showSnackbar } from './providers/snackbarActions';
 import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from './providers/statusActions';
 import { toggleView } from '~/views/Settings/actions';
 
@@ -24,6 +24,7 @@ export {
   newError,
   clearStatusLogs,
   setAddressImage,
+  openSnackbar,
   showSnackbar,
   toggleStatusLogs,
   toggleStatusRefresh,
diff --git a/js/src/redux/providers/snackbarActions.js b/js/src/redux/providers/snackbarActions.js
index 0048854da..98dcf554f 100644
--- a/js/src/redux/providers/snackbarActions.js
+++ b/js/src/redux/providers/snackbarActions.js
@@ -20,7 +20,7 @@ export function showSnackbar (message, cooldown) {
   };
 }
 
-function openSnackbar (message, cooldown) {
+export function openSnackbar (message, cooldown) {
   return {
     type: 'openSnackbar',
     message, cooldown

From 0f41c5b847495849eebd83e55e85a62c366b6441 Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Tue, 3 Jan 2017 17:41:31 +0100
Subject: [PATCH 23/28] Fix focus on Modal (#4014)

* Fix focus on Modal #3814

* PR Grumble
---
 js/src/ui/Container/container.js | 11 +++++++++--
 js/src/ui/Modal/modal.js         | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/js/src/ui/Container/container.js b/js/src/ui/Container/container.js
index 51a6a5daa..5d4127959 100644
--- a/js/src/ui/Container/container.js
+++ b/js/src/ui/Container/container.js
@@ -30,15 +30,22 @@ export default class Container extends Component {
     compact: PropTypes.bool,
     light: PropTypes.bool,
     style: PropTypes.object,
+    tabIndex: PropTypes.number,
     title: nodeOrStringProptype()
   }
 
   render () {
-    const { children, className, compact, light, style } = this.props;
+    const { children, className, compact, light, style, tabIndex } = this.props;
     const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
 
+    const props = {};
+
+    if (Number.isInteger(tabIndex)) {
+      props.tabIndex = tabIndex;
+    }
+
     return (
-      <div className={ classes } style={ style }>
+      <div className={ classes } style={ style } { ...props }>
         <Card className={ compact ? styles.compact : styles.padded }>
           { this.renderTitle() }
           { children }
diff --git a/js/src/ui/Modal/modal.js b/js/src/ui/Modal/modal.js
index 0b56692a8..d9d6ddbaf 100644
--- a/js/src/ui/Modal/modal.js
+++ b/js/src/ui/Modal/modal.js
@@ -18,6 +18,7 @@ import { Dialog } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import ReactDOM from 'react-dom';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
@@ -49,6 +50,14 @@ class Modal extends Component {
     waiting: PropTypes.array
   }
 
+  componentDidMount () {
+    const element = ReactDOM.findDOMNode(this.refs.dialog);
+
+    if (element) {
+      element.focus();
+    }
+  }
+
   render () {
     const { muiTheme } = this.context;
     const { actions, busy, children, className, current, compact, settings, steps, title, visible, waiting } = this.props;
@@ -85,9 +94,12 @@ class Modal extends Component {
         <Container
           compact={ compact }
           light
+          ref='dialog'
           style={
             { transition: 'none' }
-          }>
+          }
+          tabIndex={ 0 }
+        >
           { children }
         </Container>
       </Dialog>

From e8ef7b357db7fce1e3a19111b6bcae9d17d40573 Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Tue, 3 Jan 2017 17:41:46 +0100
Subject: [PATCH 24/28] Use TypedInputs in Contracts view (#4015)

* Use TypedInput in Contracts

* Add right readOnly Bool TypedInput

* PR Grumbles
---
 js/src/ui/Form/AddressSelect/addressSelect.js | 24 ++++--
 js/src/ui/Form/Input/input.js                 |  2 +-
 js/src/ui/Form/InputAddress/inputAddress.js   |  6 +-
 .../InputAddressSelect/inputAddressSelect.js  | 18 +++--
 js/src/ui/Form/TypedInput/typedInput.js       | 71 ++++++++++++------
 js/src/views/Contract/Queries/inputQuery.js   | 73 +++++++------------
 js/src/views/Contract/Queries/queries.js      | 38 ++++------
 js/src/views/Contract/contract.js             |  7 +-
 8 files changed, 127 insertions(+), 112 deletions(-)

diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index 31e4d2207..ca4e1f524 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -58,11 +58,13 @@ class AddressSelect extends Component {
     tokens: PropTypes.object,
 
     // Optional props
+    allowCopy: PropTypes.bool,
     allowInput: PropTypes.bool,
     disabled: PropTypes.bool,
     error: nodeOrStringProptype(),
     hint: nodeOrStringProptype(),
     label: nodeOrStringProptype(),
+    readOnly: PropTypes.bool,
     value: nodeOrStringProptype()
   };
 
@@ -121,12 +123,12 @@ class AddressSelect extends Component {
 
   renderInput () {
     const { focused } = this.state;
-    const { accountsInfo, disabled, error, hint, label, value } = this.props;
+    const { accountsInfo, allowCopy, disabled, error, hint, label, readOnly, value } = this.props;
 
     const input = (
       <InputAddress
         accountsInfo={ accountsInfo }
-        allowCopy={ false }
+        allowCopy={ allowCopy }
         disabled={ disabled }
         error={ error }
         hint={ hint }
@@ -139,7 +141,7 @@ class AddressSelect extends Component {
       />
     );
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return input;
     }
 
@@ -152,10 +154,10 @@ class AddressSelect extends Component {
 
   renderContent () {
     const { muiTheme } = this.context;
-    const { hint, disabled, label } = this.props;
+    const { hint, disabled, label, readOnly } = this.props;
     const { expanded, inputFocused } = this.state;
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return null;
     }
 
@@ -507,6 +509,10 @@ class AddressSelect extends Component {
   }
 
   handleMainBlur = () => {
+    if (this.props.readOnly) {
+      return;
+    }
+
     if (window.document.hasFocus() && !this.state.expanded) {
       this.closing = false;
       this.setState({ focused: false });
@@ -514,7 +520,7 @@ class AddressSelect extends Component {
   }
 
   handleMainFocus = () => {
-    if (this.state.focused) {
+    if (this.state.focused || this.props.readOnly) {
       return;
     }
 
@@ -529,6 +535,12 @@ class AddressSelect extends Component {
   }
 
   handleFocus = () => {
+    const { disabled, readOnly } = this.props;
+
+    if (disabled || readOnly) {
+      return;
+    }
+
     this.setState({ expanded: true, focusedItem: null, focusedCat: null }, () => {
       window.setTimeout(() => {
         this.handleDOMAction(this.inputRef, 'focus');
diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js
index d82ed8cf4..a24dd13cb 100644
--- a/js/src/ui/Form/Input/input.js
+++ b/js/src/ui/Form/Input/input.js
@@ -185,7 +185,7 @@ export default class Input extends Component {
 
     const text = typeof allowCopy === 'string'
       ? allowCopy
-      : value;
+      : value.toString();
 
     const style = hideUnderline
       ? {}
diff --git a/js/src/ui/Form/InputAddress/inputAddress.js b/js/src/ui/Form/InputAddress/inputAddress.js
index ec70502c0..0e49317a1 100644
--- a/js/src/ui/Form/InputAddress/inputAddress.js
+++ b/js/src/ui/Form/InputAddress/inputAddress.js
@@ -78,7 +78,7 @@ class InputAddress extends Component {
     return (
       <div className={ containerClasses.join(' ') }>
         <Input
-          allowCopy={ allowCopy && (disabled ? value : false) }
+          allowCopy={ allowCopy && ((disabled || readOnly) ? value : false) }
           className={ classes.join(' ') }
           disabled={ disabled }
           error={ error }
@@ -103,13 +103,13 @@ class InputAddress extends Component {
   }
 
   renderIcon () {
-    const { value, disabled, label, allowCopy, hideUnderline } = this.props;
+    const { value, disabled, label, allowCopy, hideUnderline, readOnly } = this.props;
 
     if (!value || !value.length || !util.isAddressValid(value)) {
       return null;
     }
 
-    const classes = [disabled ? styles.iconDisabled : styles.icon];
+    const classes = [(disabled || readOnly) ? styles.iconDisabled : styles.icon];
 
     if (!label) {
       classes.push(styles.noLabel);
diff --git a/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
index 5655550fd..60a0f8d1b 100644
--- a/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
+++ b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
@@ -25,27 +25,33 @@ class InputAddressSelect extends Component {
     accounts: PropTypes.object.isRequired,
     contacts: PropTypes.object.isRequired,
     contracts: PropTypes.object.isRequired,
+
+    allowCopy: PropTypes.bool,
     error: PropTypes.string,
-    label: PropTypes.string,
     hint: PropTypes.string,
-    value: PropTypes.string,
-    onChange: PropTypes.func
+    label: PropTypes.string,
+    onChange: PropTypes.func,
+    readOnly: PropTypes.bool,
+    value: PropTypes.string
   };
 
   render () {
-    const { accounts, contacts, contracts, label, hint, error, value, onChange } = this.props;
+    const { accounts, allowCopy, contacts, contracts, label, hint, error, value, onChange, readOnly } = this.props;
 
     return (
       <AddressSelect
+        allowCopy={ allowCopy }
         allowInput
         accounts={ accounts }
         contacts={ contacts }
         contracts={ contracts }
         error={ error }
-        label={ label }
         hint={ hint }
+        label={ label }
+        onChange={ onChange }
+        readOnly={ readOnly }
         value={ value }
-        onChange={ onChange } />
+      />
     );
   }
 }
diff --git a/js/src/ui/Form/TypedInput/typedInput.js b/js/src/ui/Form/TypedInput/typedInput.js
index b0a8be98d..096be7b60 100644
--- a/js/src/ui/Form/TypedInput/typedInput.js
+++ b/js/src/ui/Form/TypedInput/typedInput.js
@@ -17,6 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { MenuItem, Toggle } from 'material-ui';
 import { range } from 'lodash';
+import BigNumber from 'bignumber.js';
 
 import IconButton from 'material-ui/IconButton';
 import AddIcon from 'material-ui/svg-icons/content/add';
@@ -33,26 +34,31 @@ import styles from './typedInput.css';
 export default class TypedInput extends Component {
 
   static propTypes = {
-    onChange: PropTypes.func.isRequired,
+    param: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string
+    ]).isRequired,
 
     accounts: PropTypes.object,
+    allowCopy: PropTypes.bool,
     error: PropTypes.any,
     hint: PropTypes.string,
     isEth: PropTypes.bool,
     label: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
-    param: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]).isRequired,
+    onChange: PropTypes.func,
+    readOnly: PropTypes.bool,
     value: PropTypes.any
   };
 
   static defaultProps = {
+    allowCopy: false,
+    isEth: null,
     min: null,
     max: null,
-    isEth: null
+    onChange: () => {},
+    readOnly: false
   };
 
   state = {
@@ -61,8 +67,11 @@ export default class TypedInput extends Component {
   };
 
   componentWillMount () {
-    if (this.props.isEth && this.props.value) {
-      this.setState({ isEth: true, ethValue: fromWei(this.props.value) });
+    const { isEth, value } = this.props;
+
+    if (typeof isEth === 'boolean' && value) {
+      const ethValue = isEth ? fromWei(value) : value;
+      this.setState({ isEth, ethValue });
     }
   }
 
@@ -78,7 +87,7 @@ export default class TypedInput extends Component {
   }
 
   renderParam (param) {
-    const { isEth } = this.props;
+    const { allowCopy, isEth, readOnly } = this.props;
     const { type } = param;
 
     if (type === ABI_TYPES.ARRAY) {
@@ -96,10 +105,12 @@ export default class TypedInput extends Component {
 
         return (
           <TypedInput
+            accounts={ accounts }
+            allowCopy={ allowCopy }
             key={ `${subtype.type}_${index}` }
             onChange={ onChange }
-            accounts={ accounts }
             param={ subtype }
+            readOnly={ readOnly }
             value={ value[index] }
           />
         );
@@ -226,21 +237,23 @@ export default class TypedInput extends Component {
   }
 
   renderInteger (value = this.props.value, onChange = this.onChange) {
-    const { label, error, hint, min, max } = this.props;
+    const { allowCopy, label, error, hint, min, max, readOnly } = this.props;
     const param = this.getParam();
 
-    const realValue = value && typeof value.toNumber === 'function'
-      ? value.toNumber()
+    const realValue = value
+      ? (new BigNumber(value))[readOnly ? 'toFormat' : 'toNumber']()
       : value;
 
     return (
       <Input
+        allowCopy={ allowCopy }
         label={ label }
         hint={ hint }
         value={ realValue }
         error={ error }
         onChange={ onChange }
-        type='number'
+        readOnly={ readOnly }
+        type={ readOnly ? 'text' : 'number' }
         step={ 1 }
         min={ min !== null ? min : (param.signed ? null : 0) }
         max={ max !== null ? max : null }
@@ -256,20 +269,22 @@ export default class TypedInput extends Component {
    * @see https://github.com/facebook/react/issues/1549
    */
   renderFloat (value = this.props.value, onChange = this.onChange) {
-    const { label, error, hint, min, max } = this.props;
+    const { allowCopy, label, error, hint, min, max, readOnly } = this.props;
     const param = this.getParam();
 
-    const realValue = value && typeof value.toNumber === 'function'
-      ? value.toNumber()
+    const realValue = value
+      ? (new BigNumber(value))[readOnly ? 'toFormat' : 'toNumber']()
       : value;
 
     return (
       <Input
+        allowCopy={ allowCopy }
         label={ label }
         hint={ hint }
         value={ realValue }
         error={ error }
         onChange={ onChange }
+        readOnly={ readOnly }
         type='text'
         min={ min !== null ? min : (param.signed ? null : 0) }
         max={ max !== null ? max : null }
@@ -278,37 +293,44 @@ export default class TypedInput extends Component {
   }
 
   renderDefault () {
-    const { label, value, error, hint } = this.props;
+    const { allowCopy, label, value, error, hint, readOnly } = this.props;
 
     return (
       <Input
+        allowCopy={ allowCopy }
         label={ label }
         hint={ hint }
         value={ value }
         error={ error }
         onSubmit={ this.onSubmit }
+        readOnly={ readOnly }
       />
     );
   }
 
   renderAddress () {
-    const { accounts, label, value, error, hint } = this.props;
+    const { accounts, allowCopy, label, value, error, hint, readOnly } = this.props;
 
     return (
       <InputAddressSelect
+        allowCopy={ allowCopy }
         accounts={ accounts }
-        label={ label }
-        hint={ hint }
-        value={ value }
         error={ error }
+        hint={ hint }
+        label={ label }
         onChange={ this.onChange }
-        editing
+        readOnly={ readOnly }
+        value={ value }
       />
     );
   }
 
   renderBoolean () {
-    const { label, value, error, hint } = this.props;
+    const { allowCopy, label, value, error, hint, readOnly } = this.props;
+
+    if (readOnly) {
+      return this.renderDefault();
+    }
 
     const boolitems = ['false', 'true'].map((bool) => {
       return (
@@ -323,6 +345,7 @@ export default class TypedInput extends Component {
 
     return (
       <Select
+        allowCopy={ allowCopy }
         error={ error }
         hint={ hint }
         label={ label }
diff --git a/js/src/views/Contract/Queries/inputQuery.js b/js/src/views/Contract/Queries/inputQuery.js
index df6b24642..ce2a858ad 100644
--- a/js/src/views/Contract/Queries/inputQuery.js
+++ b/js/src/views/Contract/Queries/inputQuery.js
@@ -19,29 +19,31 @@ import React, { Component, PropTypes } from 'react';
 import LinearProgress from 'material-ui/LinearProgress';
 import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
 
-import { Button, Input, InputAddress, InputAddressSelect } from '~/ui';
+import { Button, TypedInput } from '~/ui';
+import { arrayOrObjectProptype } from '~/util/proptypes';
 
 import styles from './queries.css';
 
 export default class InputQuery extends Component {
   static contextTypes = {
     api: PropTypes.object
-  }
+  };
 
   static propTypes = {
+    accountsInfo: PropTypes.object.isRequired,
     contract: PropTypes.object.isRequired,
-    inputs: PropTypes.array.isRequired,
-    outputs: PropTypes.array.isRequired,
+    inputs: arrayOrObjectProptype().isRequired,
+    outputs: arrayOrObjectProptype().isRequired,
     name: PropTypes.string.isRequired,
     signature: PropTypes.string.isRequired,
     className: PropTypes.string
-  }
+  };
 
   state = {
     isValid: true,
     results: [],
     values: {}
-  }
+  };
 
   render () {
     const { name, className } = this.props;
@@ -89,7 +91,7 @@ export default class InputQuery extends Component {
 
   renderResults () {
     const { results, isLoading } = this.state;
-    const { outputs } = this.props;
+    const { accountsInfo, outputs } = this.props;
 
     if (isLoading) {
       return (<LinearProgress mode='indeterminate' />);
@@ -108,25 +110,16 @@ export default class InputQuery extends Component {
       }))
       .sort((outA, outB) => outA.display.length - outB.display.length)
       .map((out, index) => {
-        let input = null;
-        if (out.type === 'address') {
-          input = (
-            <InputAddress
-              className={ styles.queryValue }
-              disabled
-              value={ out.display }
-            />
-          );
-        } else {
-          input = (
-            <Input
-              className={ styles.queryValue }
-              readOnly
-              allowCopy
-              value={ out.display }
-            />
-          );
-        }
+        const input = (
+          <TypedInput
+            accounts={ accountsInfo }
+            allowCopy
+            isEth={ false }
+            param={ out.type }
+            readOnly
+            value={ out.display }
+          />
+        );
 
         return (
           <div key={ index }>
@@ -144,8 +137,7 @@ export default class InputQuery extends Component {
     const { name, type } = input;
     const label = `${name ? `${name}: ` : ''}${type}`;
 
-    const onChange = (event, input) => {
-      const value = event && event.target.value || input;
+    const onChange = (value) => {
       const { values } = this.state;
 
       this.setState({
@@ -156,28 +148,15 @@ export default class InputQuery extends Component {
       });
     };
 
-    if (type === 'address') {
-      return (
-        <div key={ name }>
-          <InputAddressSelect
-            hint={ type }
-            label={ label }
-            value={ values[name] }
-            required
-            onChange={ onChange }
-          />
-        </div>
-      );
-    }
-
     return (
       <div key={ name }>
-        <Input
+        <TypedInput
           hint={ type }
           label={ label }
-          value={ values[name] }
-          required
+          isEth={ false }
           onChange={ onChange }
+          param={ type }
+          value={ values[name] }
         />
       </div>
     );
@@ -192,7 +171,9 @@ export default class InputQuery extends Component {
 
     if (api.util.isInstanceOf(value, BigNumber)) {
       return value.toFormat(0);
-    } else if (api.util.isArray(value)) {
+    }
+
+    if (api.util.isArray(value)) {
       return api.util.bytesToHex(value);
     }
 
diff --git a/js/src/views/Contract/Queries/queries.js b/js/src/views/Contract/Queries/queries.js
index fff7adb6b..f4746ae89 100644
--- a/js/src/views/Contract/Queries/queries.js
+++ b/js/src/views/Contract/Queries/queries.js
@@ -14,12 +14,11 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import { Card, CardTitle, CardText } from 'material-ui/Card';
 
 import InputQuery from './inputQuery';
-import { Container, Input, InputAddress } from '~/ui';
+import { Container, TypedInput } from '~/ui';
 
 import styles from './queries.css';
 
@@ -29,6 +28,7 @@ export default class Queries extends Component {
   }
 
   static propTypes = {
+    accountsInfo: PropTypes.object.isRequired,
     contract: PropTypes.object,
     values: PropTypes.object
   }
@@ -74,11 +74,12 @@ export default class Queries extends Component {
 
   renderInputQuery (fn) {
     const { abi, name, signature } = fn;
-    const { contract } = this.props;
+    const { accountsInfo, contract } = this.props;
 
     return (
       <div className={ styles.container } key={ fn.signature }>
         <InputQuery
+          accountsInfo={ accountsInfo }
           className={ styles.method }
           inputs={ abi.inputs }
           outputs={ abi.outputs }
@@ -116,34 +117,23 @@ export default class Queries extends Component {
     }
 
     const { api } = this.context;
-    let valueToDisplay = null;
+    const { accountsInfo } = this.props;
 
-    if (api.util.isInstanceOf(value, BigNumber)) {
-      valueToDisplay = value.toFormat(0);
-    } else if (api.util.isArray(value)) {
+    let valueToDisplay = value;
+
+    if (api.util.isArray(value)) {
       valueToDisplay = api.util.bytesToHex(value);
     } else if (typeof value === 'boolean') {
       valueToDisplay = value ? 'true' : 'false';
-    } else {
-      valueToDisplay = value.toString();
     }
-
-    if (type === 'address') {
-      return (
-        <InputAddress
-          className={ styles.queryValue }
-          value={ valueToDisplay }
-          disabled
-        />
-      );
-    }
-
     return (
-      <Input
-        className={ styles.queryValue }
-        value={ valueToDisplay }
-        readOnly
+      <TypedInput
+        accounts={ accountsInfo }
         allowCopy
+        isEth={ false }
+        param={ type }
+        readOnly
+        value={ valueToDisplay }
       />
     );
   }
diff --git a/js/src/views/Contract/contract.js b/js/src/views/Contract/contract.js
index b7ab705bb..d06c22b92 100644
--- a/js/src/views/Contract/contract.js
+++ b/js/src/views/Contract/contract.js
@@ -46,6 +46,7 @@ class Contract extends Component {
     setVisibleAccounts: PropTypes.func.isRequired,
 
     accounts: PropTypes.object,
+    accountsInfo: PropTypes.object,
     balances: PropTypes.object,
     contracts: PropTypes.object,
     isTest: PropTypes.bool,
@@ -115,7 +116,7 @@ class Contract extends Component {
   }
 
   render () {
-    const { balances, contracts, params, isTest } = this.props;
+    const { accountsInfo, balances, contracts, params, isTest } = this.props;
     const { allEvents, contract, queryValues, loadingEvents } = this.state;
     const account = contracts[params.address];
     const balance = balances[params.address];
@@ -138,6 +139,7 @@ class Contract extends Component {
           />
 
           <Queries
+            accountsInfo={ accountsInfo }
             contract={ contract }
             values={ queryValues }
           />
@@ -447,13 +449,14 @@ class Contract extends Component {
 }
 
 function mapStateToProps (state) {
-  const { accounts, contracts } = state.personal;
+  const { accounts, accountsInfo, contracts } = state.personal;
   const { balances } = state.balances;
   const { isTest } = state.nodeStatus;
 
   return {
     isTest,
     accounts,
+    accountsInfo,
     contracts,
     balances
   };

From 9de8ba0cf54eb76586cae1a40582bd840c5de374 Mon Sep 17 00:00:00 2001
From: Jannis Redmann <mail@jannisr.de>
Date: Tue, 3 Jan 2017 17:41:55 +0100
Subject: [PATCH 25/28] show message on new chain (#4016)

* clear account infos on new chain

* new chain: show only snackbar

* fix new chain popup :bug:
---
 js/src/redux/middleware.js                |  5 ++-
 js/src/redux/providers/chainMiddleware.js | 38 +++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 js/src/redux/providers/chainMiddleware.js

diff --git a/js/src/redux/middleware.js b/js/src/redux/middleware.js
index 91e76c45d..b62b4e5f2 100644
--- a/js/src/redux/middleware.js
+++ b/js/src/redux/middleware.js
@@ -22,6 +22,7 @@ import SignerMiddleware from './providers/signerMiddleware';
 
 import statusMiddleware from '~/views/Status/middleware';
 import CertificationsMiddleware from './providers/certifications/middleware';
+import ChainMiddleware from './providers/chainMiddleware';
 
 export default function (api, browserHistory) {
   const errors = new ErrorsMiddleware();
@@ -30,12 +31,14 @@ export default function (api, browserHistory) {
   const status = statusMiddleware();
   const certifications = new CertificationsMiddleware();
   const routeMiddleware = routerMiddleware(browserHistory);
+  const chain = new ChainMiddleware();
 
   const middleware = [
     settings.toMiddleware(),
     signer.toMiddleware(),
     errors.toMiddleware(),
-    certifications.toMiddleware()
+    certifications.toMiddleware(),
+    chain.toMiddleware()
   ];
 
   return middleware.concat(status, routeMiddleware, thunk);
diff --git a/js/src/redux/providers/chainMiddleware.js b/js/src/redux/providers/chainMiddleware.js
new file mode 100644
index 000000000..82281f3b8
--- /dev/null
+++ b/js/src/redux/providers/chainMiddleware.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Parity Technologies (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 { showSnackbar } from './snackbarActions';
+
+export default class ChainMiddleware {
+  toMiddleware () {
+    return (store) => (next) => (action) => {
+      if (action.type === 'statusCollection') {
+        const { collection } = action;
+
+        if (collection && collection.netChain) {
+          const chain = collection.netChain;
+          const { nodeStatus } = store.getState();
+
+          if (chain !== nodeStatus.netChain) {
+            store.dispatch(showSnackbar(`Switched to ${chain}. Please reload the page.`, 5000));
+          }
+        }
+      }
+
+      next(action);
+    };
+  }
+}

From 565a1b510e91b8cfae323844464a9a08e6d92a18 Mon Sep 17 00:00:00 2001
From: Jannis Redmann <mail@jannisr.de>
Date: Tue, 3 Jan 2017 17:42:05 +0100
Subject: [PATCH 26/28] refresh balances of contacts & contracts when syncing
 (#4022)

---
 js/src/redux/providers/balancesActions.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/src/redux/providers/balancesActions.js b/js/src/redux/providers/balancesActions.js
index b99c44fcb..d90cab678 100644
--- a/js/src/redux/providers/balancesActions.js
+++ b/js/src/redux/providers/balancesActions.js
@@ -173,14 +173,15 @@ export function fetchTokens (_tokenIds) {
 export function fetchBalances (_addresses) {
   return (dispatch, getState) => {
     const { api, personal } = getState();
-    const { visibleAccounts, accounts } = personal;
+    const { visibleAccounts, accountsInfo } = personal;
 
-    const addresses = uniq((_addresses || visibleAccounts || []).concat(Object.keys(accounts)));
+    const addresses = uniq((_addresses || visibleAccounts || []).concat(Object.keys(accountsInfo)));
 
     if (addresses.length === 0) {
       return Promise.resolve();
     }
 
+    // With only a single account, more info will be displayed.
     const fullFetch = addresses.length === 1;
 
     const addressesToFetch = uniq(addresses);

From 6c3b9327dd25121cc9d95ccc0e65819a110f5913 Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Tue, 3 Jan 2017 16:50:54 +0000
Subject: [PATCH 27/28] [ci skip] js-precompiled 20170103-164739

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index f818e4846..a48786b68 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#1b82b5f0d694fb2d3da71d7b0357dc50c2229d9a"
+source = "git+https://github.com/ethcore/js-precompiled.git#47b5f911967d89b81b4a202c0df4c6d588a34d3c"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 294278384..127e3ab02 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.163",
+  "version": "0.2.164",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

From 4c532f9e3da6505621535cf2a23ab2a613287f71 Mon Sep 17 00:00:00 2001
From: GitLab Build Bot <jaco+gitlab@ethcore.io>
Date: Wed, 4 Jan 2017 03:34:53 +0000
Subject: [PATCH 28/28] [ci skip] js-precompiled 20170104-033203

---
 Cargo.lock      | 2 +-
 js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index a48786b68..d20d65a90 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1500,7 +1500,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/ethcore/js-precompiled.git#47b5f911967d89b81b4a202c0df4c6d588a34d3c"
+source = "git+https://github.com/ethcore/js-precompiled.git#ebea2bf78e076916b51b04d8b24187a6a85ae440"
 dependencies = [
  "parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
diff --git a/js/package.json b/js/package.json
index 127e3ab02..2ecad7269 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.164",
+  "version": "0.2.165",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",