Add functionalities to multi-sig wallet (#3729)

* WIP Sending tokens in multi-sig wallet

* Working Token transfer for multi-sig wallet #3282

* Add operation hash to transfer modal

* Add existing wallet from address #3282

* Wallet delete redirect to Wallets/Accounts #3282

* Rightly check balance in Transfer // Get all accounts balances #3282

* Fix linting

* Better Header UI for Wallet

* Use the `~` webpack alias

* Use Webpack `~` alias

js/src/api/contract/contract.js

@@ -189,15 +189,21 @@ export default class Contract {
     });
   }
 
-  _encodeOptions (func, options, values) {
+  getCallData = (func, options, values) => {
+    let data = options.data;
+
     const tokens = func ? this._abi.encodeTokens(func.inputParamTypes(), values) : null;
     const call = tokens ? func.encodeCall(tokens) : null;
 
-    if (options.data && options.data.substr(0, 2) === '0x') {
+    if (data && data.substr(0, 2) === '0x') {
-      options.data = options.data.substr(2);
+      data = data.substr(2);
     }
-    options.data = `0x${options.data || ''}${call || ''}`;
 
+    return `0x${data || ''}${call || ''}`;
+  }
+
+  _encodeOptions (func, options, values) {
+    options.data = this.getCallData(func, options, values);
     return options;
   }
 
@@ -209,10 +215,10 @@ export default class Contract {
 
   _bindFunction = (func) => {
     func.call = (options, values = []) => {
-      const callData = this._encodeOptions(func, this._addOptionsTo(options), values);
+      const callParams = this._encodeOptions(func, this._addOptionsTo(options), values);
 
       return this._api.eth
-        .call(callData)
+        .call(callParams)
         .then((encoded) => func.decodeOutput(encoded))
         .then((tokens) => tokens.map((token) => token.value))
         .then((returns) => returns.length === 1 ? returns[0] : returns);

js/src/dapps/registry/Records/records.js

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

js/src/modals/CreateWallet/WalletDetails/walletDetails.js

@@ -16,18 +16,62 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { Form, TypedInput, Input, AddressSelect } from '../../../ui';
+import { Form, TypedInput, Input, AddressSelect, InputAddress } from '~/ui';
-import { parseAbiType } from '../../../util/abi';
+import { parseAbiType } from '~/util/abi';
+
+import styles from '../createWallet.css';
 
 export default class WalletDetails extends Component {
   static propTypes = {
     accounts: PropTypes.object.isRequired,
     wallet: PropTypes.object.isRequired,
     errors: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func.isRequired,
+    walletType: PropTypes.string.isRequired
   };
 
   render () {
+    const { walletType } = this.props;
+
+    if (walletType === 'WATCH') {
+      return this.renderWatchDetails();
+    }
+
+    return this.renderMultisigDetails();
+  }
+
+  renderWatchDetails () {
+    const { wallet, errors } = this.props;
+
+    return (
+      <Form>
+        <InputAddress
+          label='wallet address'
+          hint='the wallet contract address'
+          value={ wallet.address }
+          error={ errors.address }
+          onChange={ this.onAddressChange }
+        />
+
+        <Input
+          label='wallet name'
+          hint='the local name for this wallet'
+          value={ wallet.name }
+          error={ errors.name }
+          onChange={ this.onNameChange }
+        />
+
+        <Input
+          label='wallet description (optional)'
+          hint='the local description for this wallet'
+          value={ wallet.description }
+          onChange={ this.onDescriptionChange }
+        />
+      </Form>
+    );
+  }
+
+  renderMultisigDetails () {
     const { accounts, wallet, errors } = this.props;
 
     return (
@@ -64,6 +108,7 @@ export default class WalletDetails extends Component {
           param={ parseAbiType('address[]') }
         />
 
+        <div className={ styles.splitInput }>
           <TypedInput
             label='required owners'
             hint='number of required owners to accept a transaction'
@@ -71,6 +116,7 @@ export default class WalletDetails extends Component {
             error={ errors.required }
             onChange={ this.onRequiredChange }
             param={ parseAbiType('uint') }
+            min={ 1 }
           />
 
           <TypedInput
@@ -81,10 +127,15 @@ export default class WalletDetails extends Component {
             onChange={ this.onDaylimitChange }
             param={ parseAbiType('uint') }
           />
+        </div>
       </Form>
     );
   }
 
+  onAddressChange = (_, address) => {
+    this.props.onChange({ address });
+  }
+
   onAccoutChange = (_, account) => {
     this.props.onChange({ account });
   }

js/src/modals/CreateWallet/WalletInfo/walletInfo.js

@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { CompletedStep, IdentityIcon, CopyToClipboard } from '../../../ui';
+import { CompletedStep, IdentityIcon, CopyToClipboard } from '~/ui';
 
 import styles from '../createWallet.css';
 
@@ -34,15 +34,21 @@ export default class WalletInfo extends Component {
     daylimit: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number
-    ]).isRequired
+    ]).isRequired,
+
+    deployed: PropTypes.bool
   };
 
   render () {
-    const { address, required, daylimit, name } = this.props;
+    const { address, required, daylimit, name, deployed } = this.props;
 
     return (
       <CompletedStep>
-        <div><code>{ name }</code> has been deployed at</div>
+        <div>
+          <code>{ name }</code>
+          <span> has been </span>
+          <span> { deployed ? 'deployed' : 'added' } at </span>
+        </div>
         <div>
           <CopyToClipboard data={ address } label='copy address to clipboard' />
           <IdentityIcon address={ address } inline center className={ styles.identityicon } />
@@ -63,9 +69,9 @@ export default class WalletInfo extends Component {
   }
 
   renderOwners () {
-    const { account, owners } = this.props;
+    const { account, owners, deployed } = this.props;
 
-    return [].concat(account, owners).map((address, id) => (
+    return [].concat(deployed ? account : null, owners).filter((a) => a).map((address, id) => (
       <div key={ id } className={ styles.owner }>
         <IdentityIcon address={ address } inline center className={ styles.identityicon } />
         <div className={ styles.address }>{ this.addressToString(address) }</div>

js/src/modals/CreateWallet/WalletType/index.js

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

js/src/modals/CreateWallet/WalletType/walletType.js

@@ -0,0 +1,58 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { RadioButtons } from '~/ui';
+
+// import styles from '../createWallet.css';
+
+export default class WalletType extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    type: PropTypes.string.isRequired
+  };
+
+  render () {
+    const { type } = this.props;
+
+    return (
+      <RadioButtons
+        name='contractType'
+        value={ type }
+        values={ this.getTypes() }
+        onChange={ this.onTypeChange }
+      />
+    );
+  }
+
+  getTypes () {
+    return [
+      {
+        label: 'Multi-Sig wallet', key: 'MULTISIG',
+        description: 'A standard multi-signature Wallet'
+      },
+      {
+        label: 'Watch a wallet', key: 'WATCH',
+        description: 'Add an existing wallet to your accounts'
+      }
+    ];
+  }
+
+  onTypeChange = (type) => {
+    this.props.onChange(type.key);
+  }
+}

js/src/modals/CreateWallet/createWallet.css

@@ -37,3 +37,22 @@
     height: 24px;
   }
 }
+
+.splitInput {
+  display: flex;
+  flex-direction: row;
+
+  > * {
+    flex: 1;
+
+    margin: 0 0.25em;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

js/src/modals/CreateWallet/createWallet.js

@@ -21,8 +21,9 @@ import ActionDone from 'material-ui/svg-icons/action/done';
 import ContentClear from 'material-ui/svg-icons/content/clear';
 import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
 
-import { Button, Modal, TxHash, BusyStep } from '../../ui';
+import { Button, Modal, TxHash, BusyStep } from '~/ui';
 
+import WalletType from './WalletType';
 import WalletDetails from './WalletDetails';
 import WalletInfo from './WalletInfo';
 import CreateWalletStore from './createWalletStore';
@@ -64,7 +65,7 @@ export default class CreateWallet extends Component {
         visible
         actions={ this.renderDialogActions() }
         current={ stage }
-        steps={ steps }
+        steps={ steps.map((s) => s.title) }
         waiting={ waiting }
       >
         { this.renderPage() }
@@ -98,24 +99,35 @@ export default class CreateWallet extends Component {
             required={ this.store.wallet.required }
             daylimit={ this.store.wallet.daylimit }
             name={ this.store.wallet.name }
+
+            deployed={ this.store.deployed }
           />
         );
 
-      default:
       case 'DETAILS':
         return (
           <WalletDetails
             accounts={ accounts }
             wallet={ this.store.wallet }
             errors={ this.store.errors }
+            walletType={ this.store.walletType }
             onChange={ this.store.onChange }
           />
         );
+
+      default:
+      case 'TYPE':
+        return (
+          <WalletType
+            onChange={ this.store.onTypeChange }
+            type={ this.store.walletType }
+          />
+        );
     }
   }
 
   renderDialogActions () {
-    const { step, hasErrors, rejected, onCreate } = this.store;
+    const { step, hasErrors, rejected, onCreate, onNext, onAdd } = this.store;
 
     const cancelBtn = (
       <Button
@@ -149,12 +161,11 @@ export default class CreateWallet extends Component {
       />
     );
 
-    const createBtn = (
+    const nextBtn = (
       <Button
         icon={ <NavigationArrowForward /> }
-        label='Create'
+        label='Next'
-        disabled={ hasErrors }
+        onClick={ onNext }
-        onClick={ onCreate }
       />
     );
 
@@ -169,9 +180,30 @@ export default class CreateWallet extends Component {
       case 'INFO':
         return [ doneBtn ];
 
-      default:
       case 'DETAILS':
-        return [ cancelBtn, createBtn ];
+        if (this.store.walletType === 'WATCH') {
+          return [ cancelBtn, (
+            <Button
+              icon={ <NavigationArrowForward /> }
+              label='Add'
+              disabled={ hasErrors }
+              onClick={ onAdd }
+            />
+          ) ];
+        }
+
+        return [ cancelBtn, (
+          <Button
+            icon={ <NavigationArrowForward /> }
+            label='Create'
+            disabled={ hasErrors }
+            onClick={ onCreate }
+          />
+        ) ];
+
+      default:
+      case 'TYPE':
+        return [ cancelBtn, nextBtn ];
 
     }
   }

js/src/modals/CreateWallet/createWalletStore.js

@@ -16,26 +16,29 @@
 
 import { observable, computed, action, transaction } from 'mobx';
 
-import { ERRORS, validateUint, validateAddress, validateName } from '../../util/validation';
+import { validateUint, validateAddress, validateName } from '../../util/validation';
-import { ERROR_CODES } from '../../api/transport/error';
+import { ERROR_CODES } from '~/api/transport/error';
 
-import { wallet as walletAbi } from '../../contracts/abi';
+import Contract from '~/api/contract';
-import { wallet as walletCode } from '../../contracts/code';
+import { wallet as walletAbi } from '~/contracts/abi';
+import { wallet as walletCode } from '~/contracts/code';
+
+import WalletsUtils from '~/util/wallets';
 
 const STEPS = {
+  TYPE: { title: 'wallet type' },
   DETAILS: { title: 'wallet details' },
   DEPLOYMENT: { title: 'wallet deployment', waiting: true },
   INFO: { title: 'wallet informaton' }
 };
 
-const STEPS_KEYS = Object.keys(STEPS);
-
 export default class CreateWalletStore {
   @observable step = null;
   @observable rejected = false;
 
   @observable deployState = null;
   @observable deployError = null;
+  @observable deployed = false;
 
   @observable txhash = null;
 
@@ -49,44 +52,102 @@ export default class CreateWalletStore {
     name: '',
     description: ''
   };
+  @observable walletType = 'MULTISIG';
 
   @observable errors = {
     account: null,
+    address: null,
     owners: null,
     required: null,
     daylimit: null,
-
+    name: null
-    name: ERRORS.invalidName
   };
 
   @computed get stage () {
-    return STEPS_KEYS.findIndex((k) => k === this.step);
+    return this.stepsKeys.findIndex((k) => k === this.step);
   }
 
   @computed get hasErrors () {
-    return !!Object.values(this.errors).find((e) => !!e);
+    return !!Object.keys(this.errors)
+      .filter((errorKey) => {
+        if (this.walletType === 'WATCH') {
+          return ['address', 'name'].includes(errorKey);
         }
 
-  steps = Object.values(STEPS).map((s) => s.title);
+        return errorKey !== 'address';
-  waiting = Object.values(STEPS)
+      })
+      .find((key) => !!this.errors[key]);
+  }
+
+  @computed get stepsKeys () {
+    return this.steps.map((s) => s.key);
+  }
+
+  @computed get steps () {
+    return Object
+      .keys(STEPS)
+      .map((key) => {
+        return {
+          ...STEPS[key],
+          key
+        };
+      })
+      .filter((step) => {
+        return (this.walletType !== 'WATCH' || step.key !== 'DEPLOYMENT');
+      });
+  }
+
+  @computed get waiting () {
+    this.steps
       .map((s, idx) => ({ idx, waiting: s.waiting }))
       .filter((s) => s.waiting)
       .map((s) => s.idx);
+  }
 
   constructor (api, accounts) {
     this.api = api;
 
-    this.step = STEPS_KEYS[0];
+    this.step = this.stepsKeys[0];
     this.wallet.account = Object.values(accounts)[0].address;
+    this.validateWallet(this.wallet);
+  }
+
+  @action onTypeChange = (type) => {
+    this.walletType = type;
+    this.validateWallet(this.wallet);
+  }
+
+  @action onNext = () => {
+    const stepIndex = this.stepsKeys.findIndex((k) => k === this.step) + 1;
+    this.step = this.stepsKeys[stepIndex];
   }
 
   @action onChange = (_wallet) => {
     const newWallet = Object.assign({}, this.wallet, _wallet);
-    const { errors, wallet } = this.validateWallet(newWallet);
+    this.validateWallet(newWallet);
+  }
 
+  @action onAdd = () => {
+    if (this.hasErrors) {
+      return;
+    }
+
+    const walletContract = new Contract(this.api, walletAbi).at(this.wallet.address);
+
+    return Promise
+      .all([
+        WalletsUtils.fetchRequire(walletContract),
+        WalletsUtils.fetchOwners(walletContract),
+        WalletsUtils.fetchDailylimit(walletContract)
+      ])
+      .then(([ require, owners, dailylimit ]) => {
         transaction(() => {
-      this.wallet = wallet;
+          this.wallet.owners = owners;
-      this.errors = errors;
+          this.wallet.required = require.toNumber();
+          this.wallet.dailylimit = dailylimit.limit;
+        });
+
+        return this.addWallet(this.wallet);
       });
   }
 
@@ -97,7 +158,7 @@ export default class CreateWalletStore {
 
     this.step = 'DEPLOYMENT';
 
-    const { account, owners, required, daylimit, name, description } = this.wallet;
+    const { account, owners, required, daylimit } = this.wallet;
 
     const options = {
       data: walletCode,
@@ -108,24 +169,9 @@ export default class CreateWalletStore {
       .newContract(walletAbi)
       .deploy(options, [ owners, required, daylimit ], this.onDeploymentState)
       .then((address) => {
-        return Promise
+        this.deployed = true;
-          .all([
-            this.api.parity.setAccountName(address, name),
-            this.api.parity.setAccountMeta(address, {
-              abi: walletAbi,
-              wallet: true,
-              timestamp: Date.now(),
-              deleted: false,
-              description,
-              name
-            })
-          ])
-          .then(() => {
-            transaction(() => {
         this.wallet.address = address;
-              this.step = 'INFO';
+        return this.addWallet(this.wallet);
-            });
-          });
       })
       .catch((error) => {
         if (error.code === ERROR_CODES.REQUEST_REJECTED) {
@@ -138,6 +184,27 @@ export default class CreateWalletStore {
       });
   }
 
+  @action addWallet = (wallet) => {
+    const { address, name, description } = wallet;
+
+    return Promise
+      .all([
+        this.api.parity.setAccountName(address, name),
+        this.api.parity.setAccountMeta(address, {
+          abi: walletAbi,
+          wallet: true,
+          timestamp: Date.now(),
+          deleted: false,
+          description,
+          name,
+          tags: ['wallet']
+        })
+      ])
+      .then(() => {
+        this.step = 'INFO';
+      });
+  }
+
   onDeploymentState = (error, data) => {
     if (error) {
       return console.error('createWallet::onDeploymentState', error);
@@ -173,13 +240,15 @@ export default class CreateWalletStore {
     }
   }
 
-  validateWallet = (_wallet) => {
+  @action validateWallet = (_wallet) => {
+    const addressValidation = validateAddress(_wallet.address);
     const accountValidation = validateAddress(_wallet.account);
     const requiredValidation = validateUint(_wallet.required);
     const daylimitValidation = validateUint(_wallet.daylimit);
     const nameValidation = validateName(_wallet.name);
 
     const errors = {
+      address: addressValidation.addressError,
       account: accountValidation.addressError,
       required: requiredValidation.valueError,
       daylimit: daylimitValidation.valueError,
@@ -188,12 +257,16 @@ export default class CreateWalletStore {
 
     const wallet = {
       ..._wallet,
+      address: addressValidation.address,
       account: accountValidation.address,
       required: requiredValidation.value,
       daylimit: daylimitValidation.value,
       name: nameValidation.name
     };
 
-    return { errors, wallet };
+    transaction(() => {
+      this.wallet = wallet;
+      this.errors = errors;
+    });
   }
 }

js/src/modals/DeleteAccount/deleteAccount.js

@@ -19,7 +19,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { ConfirmDialog, IdentityIcon, IdentityName, Input } from '~/ui';
-import { newError } from '../../redux/actions';
+import { newError } from '~/redux/actions';
 
 import styles from './deleteAccount.css';
 

js/src/modals/Transfer/Details/details.js

@@ -239,11 +239,7 @@ export default class Details extends Component {
   }
 
   renderTokenSelect () {
-    const { balance, images, tag, wallet } = this.props;
+    const { balance, images, tag } = this.props;
-
-    if (wallet) {
-      return null;
-    }
 
     return (
       <TokenSelect

js/src/modals/Transfer/store.js

@@ -16,7 +16,11 @@
 
 import { observable, computed, action, transaction } from 'mobx';
 import BigNumber from 'bignumber.js';
+import { uniq } from 'lodash';
 
+import { wallet as walletAbi } from '~/contracts/abi';
+import { bytesToHex } from '~/api/util/format';
+import Contract from '~/api/contract';
 import ERRORS from './errors';
 import { ERROR_CODES } from '~/api/transport/error';
 import { DEFAULT_GAS, DEFAULT_GASPRICE, MAX_GAS_ESTIMATION } from '../../util/constants';
@@ -71,6 +75,9 @@ export default class TransferStore {
   gasLimit = null;
   onClose = null;
 
+  senders = null;
+  sendersBalances = null;
+
   isWallet = false;
   wallet = null;
 
@@ -108,19 +115,23 @@ export default class TransferStore {
   constructor (api, props) {
     this.api = api;
 
-    const { account, balance, gasLimit, senders, onClose } = props;
+    const { account, balance, gasLimit, senders, onClose, newError, sendersBalances } = props;
 
     this.account = account;
     this.balance = balance;
     this.gasLimit = gasLimit;
     this.onClose = onClose;
     this.isWallet = account && account.wallet;
+    this.newError = newError;
 
     if (this.isWallet) {
       this.wallet = props.wallet;
+      this.walletContract = new Contract(this.api, walletAbi);
     }
 
     if (senders) {
+      this.senders = senders;
+      this.sendersBalances = sendersBalances;
       this.senderError = ERRORS.requireSender;
     }
   }
@@ -217,6 +228,10 @@ export default class TransferStore {
           this.txhash = txhash;
           this.busyState = 'Your transaction has been posted to the network';
         });
+
+        if (this.isWallet) {
+          return this._attachWalletOperation(txhash);
+        }
       })
       .catch((error) => {
         this.sending = false;
@@ -224,6 +239,34 @@ export default class TransferStore {
       });
   }
 
+  @action _attachWalletOperation = (txhash) => {
+    let ethSubscriptionId = null;
+
+    return this.api.subscribe('eth_blockNumber', () => {
+      this.api.eth
+        .getTransactionReceipt(txhash)
+        .then((tx) => {
+          if (!tx) {
+            return;
+          }
+
+          const logs = this.walletContract.parseEventLogs(tx.logs);
+          const operations = uniq(logs
+            .filter((log) => log && log.params && log.params.operation)
+            .map((log) => bytesToHex(log.params.operation.value)));
+
+          if (operations.length > 0) {
+            this.operation = operations[0];
+          }
+
+          this.api.unsubscribe(ethSubscriptionId);
+          ethSubscriptionId = null;
+        });
+    }).then((subId) => {
+      ethSubscriptionId = subId;
+    });
+  }
+
   @action _onUpdateAll = (valueAll) => {
     this.valueAll = valueAll;
     this.recalculateGas();
@@ -355,19 +398,29 @@ export default class TransferStore {
   }
 
   @action recalculate = () => {
-    const { account, balance } = this;
+    const { account } = this;
 
-    if (!account || !balance) {
+    if (!account || !this.balance) {
+      return;
+    }
+
+    const balance = this.senders
+      ? this.sendersBalances[this.sender]
+      : this.balance;
+
+    if (!balance) {
       return;
     }
 
     const { gas, gasPrice, tag, valueAll, isEth } = this;
 
     const gasTotal = new BigNumber(gasPrice || 0).mul(new BigNumber(gas || 0));
-    const balance_ = balance.tokens.find((b) => tag === b.token.tag);
+
     const availableEth = new BigNumber(balance.tokens[0].value);
-    const available = new BigNumber(balance_.value);
+
-    const format = new BigNumber(balance_.token.format || 1);
+    const senderBalance = this.balance.tokens.find((b) => tag === b.token.tag);
+    const available = new BigNumber(senderBalance.value);
+    const format = new BigNumber(senderBalance.token.format || 1);
 
     let { value, valueError } = this;
     let totalEth = gasTotal;
@@ -409,26 +462,52 @@ export default class TransferStore {
     return this._getTransferMethod().postTransaction(options, values);
   }
 
-  estimateGas () {
+  _estimateGas (forceToken = false) {
-    const { options, values } = this._getTransferParams(true);
+    const { options, values } = this._getTransferParams(true, forceToken);
-    return this._getTransferMethod(true).estimateGas(options, values);
+    return this._getTransferMethod(true, forceToken).estimateGas(options, values);
   }
 
-  _getTransferMethod (gas = false) {
+  estimateGas () {
+    if (this.isEth || !this.isWallet) {
+      return this._estimateGas();
+    }
+
+    return Promise
+      .all([
+        this._estimateGas(true),
+        this._estimateGas()
+      ])
+      .then((results) => results[0].plus(results[1]));
+  }
+
+  _getTransferMethod (gas = false, forceToken = false) {
     const { isEth, isWallet } = this;
 
-    if (isEth && !isWallet) {
+    if (isEth && !isWallet && !forceToken) {
       return gas ? this.api.eth : this.api.parity;
     }
 
-    if (isWallet) {
+    if (isWallet && !forceToken) {
       return this.wallet.instance.execute;
     }
 
     return this.token.contract.instance.transfer;
   }
 
-  _getTransferParams (gas = false) {
+  _getData (gas = false) {
+    const { isEth, isWallet } = this;
+
+    if (!isWallet || isEth) {
+      return this.data && this.data.length ? this.data : '';
+    }
+
+    const func = this._getTransferMethod(gas, true);
+    const { options, values } = this._getTransferParams(gas, true);
+
+    return this.token.contract.getCallData(func, options, values);
+  }
+
+  _getTransferParams (gas = false, forceToken = false) {
     const { isEth, isWallet } = this;
 
     const to = (isEth && !isWallet) ? this.recipient
@@ -446,23 +525,26 @@ export default class TransferStore {
       options.gas = MAX_GAS_ESTIMATION;
     }
 
-    if (isEth && !isWallet) {
+    if (isEth && !isWallet && !forceToken) {
       options.value = this.api.util.toWei(this.value || 0);
-
+      options.data = this._getData(gas);
-      if (this.data && this.data.length) {
-        options.data = this.data;
-      }
 
       return { options, values: [] };
     }
 
-    const values = isWallet
+    if (isWallet && !forceToken) {
-      ? [
+      const to = isEth ? this.recipient : this.token.contract.address;
-        this.recipient,
+      const value = isEth ? this.api.util.toWei(this.value || 0) : new BigNumber(0);
-        this.api.util.toWei(this.value || 0),
+
-        this.data || ''
+      const values = [
-      ]
+        to, value,
-      : [
+        this._getData(gas)
+      ];
+
+      return { options, values };
+    }
+
+    const values = [
       this.recipient,
       new BigNumber(this.value || 0).mul(this.token.format).toFixed(0)
     ];

js/src/modals/Transfer/transfer.js

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { observer } from 'mobx-react';
+import { pick } from 'lodash';
 
 import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
 import ContentClear from 'material-ui/svg-icons/content/clear';
@@ -25,7 +26,7 @@ import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
 import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
 
 import { newError } from '~/ui/Errors/actions';
-import { BusyStep, CompletedStep, Button, IdentityIcon, Modal, TxHash } from '~/ui';
+import { BusyStep, CompletedStep, Button, IdentityIcon, Modal, TxHash, Input } from '~/ui';
 import { nullableProptype } from '~/util/proptypes';
 
 import Details from './Details';
@@ -45,10 +46,10 @@ class Transfer extends Component {
     gasLimit: PropTypes.object.isRequired,
     images: PropTypes.object.isRequired,
 
-    account: PropTypes.object,
     senders: nullableProptype(PropTypes.object),
+    sendersBalances: nullableProptype(PropTypes.object),
+    account: PropTypes.object,
     balance: PropTypes.object,
-    balances: PropTypes.object,
     wallet: PropTypes.object,
     onClose: PropTypes.func
   }
@@ -133,6 +134,25 @@ class Transfer extends Component {
     return (
       <CompletedStep>
         <TxHash hash={ txhash } />
+        {
+          this.store.operation
+          ? (
+            <div>
+              <br />
+              <p>
+                This transaction needs confirmation from other owners.
+                <Input
+                  style={ { width: '50%', margin: '0 auto' } }
+                  value={ this.store.operation }
+                  label='operation hash'
+                  readOnly
+                  allowCopy
+                />
+              </p>
+            </div>
+          )
+          : null
+        }
       </CompletedStep>
     );
   }
@@ -277,7 +297,9 @@ function mapStateToProps (initState, initProps) {
 
   return (state) => {
     const { gasLimit } = state.nodeStatus;
-    return { gasLimit, wallet, senders };
+    const sendersBalances = senders ? pick(state.balances.balances, Object.keys(senders)) : null;
+
+    return { gasLimit, wallet, senders, sendersBalances };
   };
 }
 

js/src/redux/providers/balancesActions.js

@@ -113,7 +113,7 @@ export function fetchTokens (_tokenIds) {
 export function fetchBalances (_addresses) {
   return (dispatch, getState) => {
     const { api, personal } = getState();
-    const { visibleAccounts } = personal;
+    const { visibleAccounts, accounts } = personal;
 
     const addresses = uniq(_addresses || visibleAccounts || []);
 
@@ -123,12 +123,14 @@ export function fetchBalances (_addresses) {
 
     const fullFetch = addresses.length === 1;
 
+    const fetchedAddresses = uniq(addresses.concat(Object.keys(accounts)));
+
     return Promise
-      .all(addresses.map((addr) => fetchAccount(addr, api, fullFetch)))
+      .all(fetchedAddresses.map((addr) => fetchAccount(addr, api, fullFetch)))
       .then((accountsBalances) => {
         const balances = {};
 
-        addresses.forEach((addr, idx) => {
+        fetchedAddresses.forEach((addr, idx) => {
           balances[addr] = accountsBalances[idx];
         });
 

js/src/redux/providers/walletActions.js

@@ -14,16 +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, uniq, range } from 'lodash';
+import { isEqual, uniq } from 'lodash';
 
-import Contract from '../../api/contract';
+import Contract from '~/api/contract';
-import { wallet as WALLET_ABI } from '../../contracts/abi';
+import { wallet as WALLET_ABI } from '~/contracts/abi';
-import { bytesToHex, toHex } from '../../api/util/format';
+import { bytesToHex, toHex } from '~/api/util/format';
 
-import { ERROR_CODES } from '../../api/transport/error';
+import { ERROR_CODES } from '~/api/transport/error';
 import { MAX_GAS_ESTIMATION } from '../../util/constants';
 
-import { newError } from '../../ui/Errors/actions';
+import WalletsUtils from '~/util/wallets';
+
+import { newError } from '~/ui/Errors/actions';
 
 const UPDATE_OWNERS = 'owners';
 const UPDATE_REQUIRE = 'require';
@@ -247,58 +249,9 @@ function fetchWalletInfo (contract, update, getState) {
 }
 
 function fetchWalletTransactions (contract) {
-  const walletInstance = contract.instance;
+  return WalletsUtils
-  const signatures = {
+    .fetchTransactions(contract)
-    single: toHex(walletInstance.SingleTransact.signature),
+    .then((transactions) => {
-    multi: toHex(walletInstance.MultiTransact.signature),
-    deposit: toHex(walletInstance.Deposit.signature)
-  };
-
-  return contract
-    .getAllLogs({
-      topics: [ [ signatures.single, signatures.multi, signatures.deposit ] ]
-    })
-    .then((logs) => {
-      return logs.sort((logA, logB) => {
-        const comp = logB.blockNumber.comparedTo(logA.blockNumber);
-
-        if (comp !== 0) {
-          return comp;
-        }
-
-        return logB.transactionIndex.comparedTo(logA.transactionIndex);
-      });
-    })
-    .then((logs) => {
-      const transactions = logs.map((log) => {
-        const signature = toHex(log.topics[0]);
-
-        const value = log.params.value.value;
-        const from = signature === signatures.deposit
-          ? log.params['_from'].value
-          : contract.address;
-
-        const to = signature === signatures.deposit
-          ? contract.address
-          : log.params.to.value;
-
-        const transaction = {
-          transactionHash: log.transactionHash,
-          blockNumber: log.blockNumber,
-          from, to, value
-        };
-
-        if (log.params.operation) {
-          transaction.operation = bytesToHex(log.params.operation.value);
-        }
-
-        if (log.params.data) {
-          transaction.data = log.params.data.value;
-        }
-
-        return transaction;
-      });
-
       return {
         key: UPDATE_TRANSACTIONS,
         value: transactions
@@ -307,13 +260,8 @@ function fetchWalletTransactions (contract) {
 }
 
 function fetchWalletOwners (contract) {
-  const walletInstance = contract.instance;
+  return WalletsUtils
-
+    .fetchOwners(contract)
-  return walletInstance
-    .m_numOwners.call()
-    .then((mNumOwners) => {
-      return Promise.all(range(mNumOwners.toNumber()).map((idx) => walletInstance.getOwner.call({}, [ idx ])));
-    })
     .then((value) => {
       return {
         key: UPDATE_OWNERS,
@@ -323,10 +271,8 @@ function fetchWalletOwners (contract) {
 }
 
 function fetchWalletRequire (contract) {
-  const walletInstance = contract.instance;
+  return WalletsUtils
-
+    .fetchRequire(contract)
-  return walletInstance
-    .m_required.call()
     .then((value) => {
       return {
         key: UPDATE_REQUIRE,
@@ -336,22 +282,12 @@ function fetchWalletRequire (contract) {
 }
 
 function fetchWalletDailylimit (contract) {
-  const walletInstance = contract.instance;
+  return WalletsUtils
-
+    .fetchDailylimit(contract)
-  return Promise
+    .then((value) => {
-    .all([
-      walletInstance.m_dailyLimit.call(),
-      walletInstance.m_spentToday.call(),
-      walletInstance.m_lastDay.call()
-    ])
-    .then((values) => {
       return {
         key: UPDATE_DAILYLIMIT,
-        value: {
+        value
-          limit: values[0],
-          spent: values[1],
-          last: values[2]
-        }
       };
     });
 }

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

@@ -120,7 +120,7 @@ export default class AutoComplete extends Component {
     switch (keycode(event)) {
       case 'down':
         const { menu } = muiAutocomplete.refs;
-        menu.handleKeyDown(event);
+        menu && menu.handleKeyDown(event);
         this.setState({ fakeBlur: true });
         break;
 
@@ -133,7 +133,7 @@ export default class AutoComplete extends Component {
         const e = new CustomEvent('down');
         e.which = 40;
 
-        muiAutocomplete.handleKeyDown(e);
+        muiAutocomplete && muiAutocomplete.handleKeyDown(e);
         break;
     }
   }

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

@@ -66,7 +66,8 @@ export default class Input extends Component {
       PropTypes.number, PropTypes.string
     ]),
     min: PropTypes.any,
-    max: PropTypes.any
+    max: PropTypes.any,
+    style: PropTypes.object
   };
 
   static defaultProps = {
@@ -74,7 +75,8 @@ export default class Input extends Component {
     readOnly: false,
     allowCopy: false,
     hideUnderline: false,
-    floatCopy: false
+    floatCopy: false,
+    style: {}
   }
 
   state = {
@@ -89,7 +91,8 @@ export default class Input extends Component {
 
   render () {
     const { value } = this.state;
-    const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type, min, max } = this.props;
+    const { children, className, hideUnderline, disabled, error, label } = this.props;
+    const { hint, multiLine, rows, type, min, max, style } = this.props;
 
     const readOnly = this.props.readOnly || disabled;
 
@@ -105,7 +108,7 @@ export default class Input extends Component {
     }
 
     return (
-      <div className={ styles.container }>
+      <div className={ styles.container } style={ style }>
         { this.renderCopyButton() }
         <TextField
           autoComplete='off'

js/src/ui/Form/RadioButtons/radioButtons.js

@@ -37,7 +37,10 @@ export default class RadioButtons extends Component {
   render () {
     const { value, values } = this.props;
 
-    const index = parseInt(value);
+    const index = Number.isNaN(parseInt(value))
+      ? values.findIndex((val) => val.key === value)
+      : parseInt(value);
+
     const selectedValue = typeof value !== 'object' ? values[index] : value;
     const key = this.getKey(selectedValue, index);
 

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

@@ -40,7 +40,14 @@ export default class TypedInput extends Component {
     error: PropTypes.any,
     value: PropTypes.any,
     label: PropTypes.string,
-    hint: PropTypes.string
+    hint: PropTypes.string,
+    min: PropTypes.number,
+    max: PropTypes.number
+  };
+
+  static defaultProps = {
+    min: null,
+    max: null
   };
 
   render () {
@@ -90,16 +97,22 @@ export default class TypedInput extends Component {
     };
 
     const style = {
-      width: 32,
+      width: 24,
-      height: 32,
+      height: 24,
       padding: 0
     };
 
+    const plusStyle = {
+      ...style,
+      backgroundColor: 'rgba(255, 255, 255, 0.25)',
+      borderRadius: '50%'
+    };
+
     return (
-      <div>
+      <div style={ { marginTop: '0.75em' } }>
         <IconButton
           iconStyle={ iconStyle }
-          style={ style }
+          style={ plusStyle }
           onTouchTap={ this.onAddField }
         >
           <AddIcon />
@@ -145,7 +158,7 @@ export default class TypedInput extends Component {
   }
 
   renderNumber () {
-    const { label, value, error, param, hint } = this.props;
+    const { label, value, error, param, hint, min, max } = this.props;
 
     return (
       <Input
@@ -153,9 +166,10 @@ export default class TypedInput extends Component {
         hint={ hint }
         value={ value }
         error={ error }
-        onSubmit={ this.onSubmit }
+        onChange={ this.onChange }
         type='number'
-        min={ param.signed ? null : 0 }
+        min={ min !== null ? min : (param.signed ? null : 0) }
+        max={ max !== null ? max : null }
       />
     );
   }

js/src/util/wallets.js

@@ -0,0 +1,107 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { range } from 'lodash';
+
+import { bytesToHex, toHex } from '~/api/util/format';
+
+export default class WalletsUtils {
+
+  static fetchRequire (walletContract) {
+    return walletContract.instance.m_required.call();
+  }
+
+  static fetchOwners (walletContract) {
+    const walletInstance = walletContract.instance;
+    return walletInstance
+      .m_numOwners.call()
+      .then((mNumOwners) => {
+        return Promise.all(range(mNumOwners.toNumber()).map((idx) => walletInstance.getOwner.call({}, [ idx ])));
+      });
+  }
+
+  static fetchDailylimit (walletContract) {
+    const walletInstance = walletContract.instance;
+
+    return Promise
+      .all([
+        walletInstance.m_dailyLimit.call(),
+        walletInstance.m_spentToday.call(),
+        walletInstance.m_lastDay.call()
+      ])
+      .then(([ limit, spent, last ]) => ({
+        limit, spent, last
+      }));
+  }
+
+  static fetchTransactions (walletContract) {
+    const walletInstance = walletContract.instance;
+    const signatures = {
+      single: toHex(walletInstance.SingleTransact.signature),
+      multi: toHex(walletInstance.MultiTransact.signature),
+      deposit: toHex(walletInstance.Deposit.signature)
+    };
+
+    return walletContract
+      .getAllLogs({
+        topics: [ [ signatures.single, signatures.multi, signatures.deposit ] ]
+      })
+      .then((logs) => {
+        return logs.sort((logA, logB) => {
+          const comp = logB.blockNumber.comparedTo(logA.blockNumber);
+
+          if (comp !== 0) {
+            return comp;
+          }
+
+          return logB.transactionIndex.comparedTo(logA.transactionIndex);
+        });
+      })
+      .then((logs) => {
+        const transactions = logs.map((log) => {
+          const signature = toHex(log.topics[0]);
+
+          const value = log.params.value.value;
+          const from = signature === signatures.deposit
+            ? log.params['_from'].value
+            : walletContract.address;
+
+          const to = signature === signatures.deposit
+            ? walletContract.address
+            : log.params.to.value;
+
+          const transaction = {
+            transactionHash: log.transactionHash,
+            blockNumber: log.blockNumber,
+            from, to, value
+          };
+
+          if (log.params.operation) {
+            transaction.operation = bytesToHex(log.params.operation.value);
+          }
+
+          if (log.params.data) {
+            transaction.data = log.params.data.value;
+          }
+
+          return transaction;
+        });
+
+        return transactions;
+      });
+  }
+
+}

js/src/views/Account/Header/header.js

@@ -25,16 +25,23 @@ import styles from './header.css';
 export default class Header extends Component {
   static contextTypes = {
     api: PropTypes.object
-  }
+  };
 
   static propTypes = {
     account: PropTypes.object,
-    balance: PropTypes.object
+    balance: PropTypes.object,
-  }
+    className: PropTypes.string,
+    children: PropTypes.node
+  };
+
+  static defaultProps = {
+    className: '',
+    children: null
+  };
 
   render () {
     const { api } = this.context;
-    const { account, balance } = this.props;
+    const { account, balance, className, children } = this.props;
     const { address, meta, uuid } = account;
 
     if (!account) {
@@ -46,7 +53,7 @@ export default class Header extends Component {
       : <div className={ styles.uuidline }>uuid: { uuid }</div>;
 
     return (
-      <div>
+      <div className={ className }>
         <Container>
           <IdentityIcon
             address={ address } />
@@ -74,6 +81,7 @@ export default class Header extends Component {
               dappsUrl={ api.dappsUrl }
             />
           </div>
+          { children }
         </Container>
       </div>
     );

js/src/views/Accounts/accounts.js

@@ -86,8 +86,15 @@ class Accounts extends Component {
         { this.renderNewWalletDialog() }
         { this.renderActionbar() }
 
-        { this.renderAccounts() }
+        <Page>
+          <Tooltip
+            className={ styles.accountTooltip }
+            text='your accounts are visible for easy access, allowing you to edit the meta information, make transfers, view transactions and fund the account'
+          />
+
           { this.renderWallets() }
+          { this.renderAccounts() }
+        </Page>
       </div>
     );
   }
@@ -115,7 +122,6 @@ class Accounts extends Component {
     const { searchValues, sortOrder } = this.state;
 
     return (
-      <Page>
       <List
         search={ searchValues }
         accounts={ accounts }
@@ -123,10 +129,6 @@ class Accounts extends Component {
         empty={ !hasAccounts }
         order={ sortOrder }
         handleAddSearchToken={ this.onAddSearchToken } />
-        <Tooltip
-          className={ styles.accountTooltip }
-          text='your accounts are visible for easy access, allowing you to edit the meta information, make transfers, view transactions and fund the account' />
-      </Page>
     );
   }
 
@@ -139,7 +141,6 @@ class Accounts extends Component {
     const { searchValues, sortOrder } = this.state;
 
     return (
-      <Page>
       <List
         link='wallet'
         search={ searchValues }
@@ -149,7 +150,6 @@ class Accounts extends Component {
         order={ sortOrder }
         handleAddSearchToken={ this.onAddSearchToken }
       />
-      </Page>
     );
   }
 

js/src/views/Address/Delete/delete.js

@@ -19,7 +19,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { ConfirmDialog, IdentityIcon, IdentityName } from '~/ui';
-import { newError } from '../../../redux/actions';
+import { newError } from '~/redux/actions';
 
 import styles from '../address.css';
 
@@ -27,16 +27,17 @@ class Delete extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired,
     router: PropTypes.object
-  }
+  };
 
   static propTypes = {
+    route: PropTypes.string.isRequired,
+
     address: PropTypes.string,
     account: PropTypes.object,
-    route: PropTypes.string.isRequired,
     visible: PropTypes.bool,
     onClose: PropTypes.func,
     newError: PropTypes.func
-  }
+  };
 
   render () {
     const { account, visible } = this.props;

js/src/views/Contract/contract.js

@@ -23,7 +23,7 @@ import ContentCreate from 'material-ui/svg-icons/content/create';
 import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
 import ContentClear from 'material-ui/svg-icons/content/clear';
 
-import { newError } from '../../redux/actions';
+import { newError } from '~/redux/actions';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';
 
 import { EditMeta, ExecuteContract } from '~/modals';

js/src/views/Dapps/dappsStore.js

@@ -19,7 +19,7 @@ import { action, computed, observable, transaction } from 'mobx';
 import store from 'store';
 
 import Contracts from '~/contracts';
-import { hashToImageUrl } from '../../redux/util';
+import { hashToImageUrl } from '~/redux/util';
 
 import builtinApps from './builtin.json';
 

js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js

@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 
 import ReactTooltip from 'react-tooltip';
 
-import { MethodDecoding } from '../../../../ui';
+import { MethodDecoding } from '~/ui';
 
 import * as tUtil from '../util/transaction';
 import Account from '../Account';

js/src/views/Signer/components/TransactionPending/TransactionPending.js

@@ -64,7 +64,7 @@ export default class TransactionPending extends Component {
   }
 
   render () {
-    const { className, id, transaction, store } = this.props;
+    const { className, id, transaction, store, isTest } = this.props;
     const { from, value } = transaction;
     const { totalValue } = this.state;
 
@@ -76,6 +76,7 @@ export default class TransactionPending extends Component {
           id={ id }
           value={ value }
           from={ from }
+          isTest={ isTest }
           fromBalance={ fromBalance }
           className={ styles.transactionDetails }
           transaction={ transaction }

js/src/views/Status/actions/clipboard.js

@@ -17,6 +17,6 @@
 import { createAction } from 'redux-actions';
 
 import { identity } from '../util';
-import { withError } from '../../../redux/util';
+import { withError } from '~/redux/util';
 
 export const copyToClipboard = createAction('copy toClipboard', identity, withError(identity));

js/src/views/Status/actions/logger.js

@@ -17,7 +17,7 @@
 import { createAction } from 'redux-actions';
 
 import { identity } from '../util';
-import { withError } from '../../../redux/util';
+import { withError } from '~/redux/util';
 
 export const updateLogging = createAction(
   'update logging', identity, withError(flag => `logging updated to ${flag}`)

js/src/views/Status/actions/rpc.js

@@ -17,7 +17,7 @@
 import { createAction } from 'redux-actions';
 
 import { identity } from '../util';
-import { withError } from '../../../redux/util';
+import { withError } from '~/redux/util';
 
 export const error = createAction('error rpc', identity,
   withError(() => 'error processing rpc call. check console for details', 'error')

js/src/views/Status/containers/StatusPage/StatusPage.js

@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from '../../../../redux/actions';
+import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from '~/redux/actions';
 
 import Debug from '../../components/Debug';
 import Status from '../../components/Status';

js/src/views/Wallet/Confirmations/confirmations.js

@@ -20,13 +20,13 @@ import ReactTooltip from 'react-tooltip';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { confirmOperation, revokeOperation } from '../../../redux/providers/walletActions';
+import { confirmOperation, revokeOperation } from '~/redux/providers/walletActions';
-import { bytesToHex } from '../../../api/util/format';
+import { bytesToHex } from '~/api/util/format';
-import { Container, InputAddress, Button, IdentityIcon } from '../../../ui';
+import { Container, InputAddress, Button, IdentityIcon } from '~/ui';
-import { TxRow } from '../../../ui/TxList/txList';
+import { TxRow } from '~/ui/TxList/txList';
 
 import styles from '../wallet.css';
-import txListStyles from '../../../ui/TxList/txList.css';
+import txListStyles from '~/ui/TxList/txList.css';
 
 class WalletConfirmations extends Component {
   static contextTypes = {

js/src/views/Wallet/Details/details.js

@@ -15,9 +15,8 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import moment from 'moment';
 
-import { Container, InputAddress } from '../../../ui';
+import { Container, InputAddress } from '~/ui';
 
 import styles from '../wallet.css';
 
@@ -29,18 +28,21 @@ export default class WalletDetails extends Component {
   static propTypes = {
     owners: PropTypes.array,
     require: PropTypes.object,
-    dailylimit: PropTypes.object
+    className: PropTypes.string
+  };
+
+  static defaultProps = {
+    className: ''
   };
 
   render () {
-    return (
+    const { className } = this.props;
-      <div className={ styles.details }>
-        <Container title='Owners'>
-          { this.renderOwners() }
-        </Container>
 
+    return (
+      <div className={ [ styles.details, className ].join(' ') }>
         <Container title='Details'>
           { this.renderDetails() }
+          { this.renderOwners() }
         </Container>
       </div>
     );
@@ -70,17 +72,12 @@ export default class WalletDetails extends Component {
   }
 
   renderDetails () {
-    const { require, dailylimit } = this.props;
+    const { require } = this.props;
-    const { api } = this.context;
 
-    if (!dailylimit || !dailylimit.limit) {
+    if (!require) {
       return null;
     }
 
-    const limit = api.util.fromWei(dailylimit.limit).toFormat(3);
-    const spent = api.util.fromWei(dailylimit.spent).toFormat(3);
-    const date = moment(dailylimit.last.toNumber() * 24 * 3600 * 1000);
-
     return (
       <div>
         <p>
@@ -88,14 +85,6 @@ export default class WalletDetails extends Component {
           <span className={ styles.detail }>{ require.toFormat() } owners</span>
           <span>to validate any action (transactions, modifications).</span>
         </p>
-
-        <p>
-          <span className={ styles.detail }>{ spent }<span className={ styles.eth } /></span>
-          <span>has been spent today, out of</span>
-          <span className={ styles.detail }>{ limit }<span className={ styles.eth } /></span>
-          <span>set as the daily limit, which has been reset on</span>
-          <span className={ styles.detail }>{ date.format('LL') }</span>
-        </p>
       </div>
     );
   }

js/src/views/Wallet/Transactions/transactions.js

@@ -16,11 +16,11 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { bytesToHex } from '../../../api/util/format';
+import { bytesToHex } from '~/api/util/format';
-import { Container } from '../../../ui';
+import { Container } from '~/ui';
-import { TxRow } from '../../../ui/TxList/txList';
+import { TxRow } from '~/ui/TxList/txList';
 
-import txListStyles from '../../../ui/TxList/txList.css';
+import txListStyles from '~/ui/TxList/txList.css';
 
 export default class WalletTransactions extends Component {
   static propTypes = {

js/src/views/Wallet/wallet.css

@@ -23,7 +23,6 @@
 
   > * {
     flex: 1;
-    margin: 0.125em;
     height: auto;
 
     &:first-child {
@@ -36,6 +35,38 @@
   }
 }
 
+.owners {
+  margin-top: 0.75em;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 1em 0.5em 0.5em;
+
+  > * {
+    margin-bottom: 0.5em;
+  }
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+
+  .header {
+    flex: 1;
+    margin-right: 0.25em;
+  }
+
+  .details {
+    flex: 1;
+    margin-left: 0.25em;
+  }
+
+  > * {
+    height: auto;
+  }
+}
+
 .detail {
   font-size: 1.125em;
   color: white;

js/src/views/Wallet/wallet.js

@@ -17,18 +17,23 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import moment from 'moment';
+
 import ContentCreate from 'material-ui/svg-icons/content/create';
+import ActionDelete from 'material-ui/svg-icons/action/delete';
 import ContentSend from 'material-ui/svg-icons/content/send';
 
-import { EditMeta, Transfer } from '../../modals';
+import { nullableProptype } from '~/util/proptypes';
-import { Actionbar, Button, Page, Loading } from '../../ui';
+import { EditMeta, Transfer } from '~/modals';
+import { Actionbar, Button, Page, Loading } from '~/ui';
 
+import Delete from '../Address/Delete';
 import Header from '../Account/Header';
 import WalletDetails from './Details';
 import WalletConfirmations from './Confirmations';
 import WalletTransactions from './Transactions';
 
-import { setVisibleAccounts } from '../../redux/providers/personalActions';
+import { setVisibleAccounts } from '~/redux/providers/personalActions';
 
 import styles from './wallet.css';
 
@@ -59,17 +64,18 @@ class Wallet extends Component {
 
   static propTypes = {
     setVisibleAccounts: PropTypes.func.isRequired,
+    balance: nullableProptype(PropTypes.object.isRequired),
     images: PropTypes.object.isRequired,
     address: PropTypes.string.isRequired,
     wallets: PropTypes.object.isRequired,
     wallet: PropTypes.object.isRequired,
-    balances: PropTypes.object.isRequired,
     isTest: PropTypes.bool.isRequired
   };
 
   state = {
     showEditDialog: false,
-    showTransferDialog: false
+    showTransferDialog: false,
+    showDeleteDialog: false
   };
 
   componentDidMount () {
@@ -96,34 +102,74 @@ class Wallet extends Component {
   }
 
   render () {
-    const { wallets, balances, address } = this.props;
+    const { wallets, balance, address } = this.props;
 
     const wallet = (wallets || {})[address];
-    const balance = (balances || {})[address];
 
     if (!wallet) {
       return null;
     }
 
+    const { owners, require, dailylimit } = this.props.wallet;
+
     return (
       <div className={ styles.wallet }>
         { this.renderEditDialog(wallet) }
         { this.renderTransferDialog() }
+        { this.renderDeleteDialog(wallet) }
         { this.renderActionbar() }
         <Page>
+          <div className={ styles.info }>
             <Header
+              className={ styles.header }
               account={ wallet }
               balance={ balance }
+            >
+              { this.renderInfos() }
+            </Header>
+
+            <WalletDetails
+              className={ styles.details }
+              owners={ owners }
+              require={ require }
+              dailylimit={ dailylimit }
             />
+          </div>
           { this.renderDetails() }
         </Page>
       </div>
     );
   }
 
+  renderInfos () {
+    const { dailylimit } = this.props.wallet;
+    const { api } = this.context;
+
+    if (!dailylimit || !dailylimit.limit) {
+      return null;
+    }
+
+    const limit = api.util.fromWei(dailylimit.limit).toFormat(3);
+    const spent = api.util.fromWei(dailylimit.spent).toFormat(3);
+    const date = moment(dailylimit.last.toNumber() * 24 * 3600 * 1000);
+
+    return (
+      <div>
+        <br />
+        <p>
+          <span className={ styles.detail }>{ spent }<span className={ styles.eth } /></span>
+          <span>has been spent today, out of</span>
+          <span className={ styles.detail }>{ limit }<span className={ styles.eth } /></span>
+          <span>set as the daily limit, which has been reset on</span>
+          <span className={ styles.detail }>{ date.format('LL') }</span>
+        </p>
+      </div>
+    );
+  }
+
   renderDetails () {
     const { address, isTest, wallet } = this.props;
-    const { owners, require, dailylimit, confirmations, transactions } = wallet;
+    const { owners, require, confirmations, transactions } = wallet;
 
     if (!isTest || !owners || !require) {
       return (
@@ -134,13 +180,6 @@ class Wallet extends Component {
     }
 
     return [
-      <WalletDetails
-        key='details'
-        owners={ owners }
-        require={ require }
-        dailylimit={ dailylimit }
-      />,
-
       <WalletConfirmations
         key='confirmations'
         owners={ owners }
@@ -160,9 +199,7 @@ class Wallet extends Component {
   }
 
   renderActionbar () {
-    const { address, balances } = this.props;
+    const { balance } = this.props;
-
-    const balance = balances[address];
     const showTransferButton = !!(balance && balance.tokens);
 
     const buttons = [
@@ -172,6 +209,11 @@ class Wallet extends Component {
         label='transfer'
         disabled={ !showTransferButton }
         onClick={ this.onTransferClick } />,
+      <Button
+        key='delete'
+        icon={ <ActionDelete /> }
+        label='delete wallet'
+        onClick={ this.showDeleteDialog } />,
       <Button
         key='editmeta'
         icon={ <ContentCreate /> }
@@ -186,6 +228,18 @@ class Wallet extends Component {
     );
   }
 
+  renderDeleteDialog (account) {
+    const { showDeleteDialog } = this.state;
+
+    return (
+      <Delete
+        account={ account }
+        visible={ showDeleteDialog }
+        route='/accounts'
+        onClose={ this.closeDeleteDialog } />
+    );
+  }
+
   renderEditDialog (wallet) {
     const { showEditDialog } = this.state;
 
@@ -208,15 +262,13 @@ class Wallet extends Component {
       return null;
     }
 
-    const { wallets, balances, images, address } = this.props;
+    const { wallets, balance, images, address } = this.props;
     const wallet = wallets[address];
-    const balance = balances[address];
 
     return (
       <Transfer
         account={ wallet }
         balance={ balance }
-        balances={ balances }
         images={ images }
         onClose={ this.onTransferClose }
       />
@@ -238,6 +290,14 @@ class Wallet extends Component {
   onTransferClose = () => {
     this.onTransferClick();
   }
+
+  closeDeleteDialog = () => {
+    this.setState({ showDeleteDialog: false });
+  }
+
+  showDeleteDialog = () => {
+    this.setState({ showDeleteDialog: true });
+  }
 }
 
 function mapStateToProps (_, initProps) {
@@ -248,12 +308,14 @@ function mapStateToProps (_, initProps) {
     const { wallets } = state.personal;
     const { balances } = state.balances;
     const { images } = state;
+
     const wallet = state.wallet.wallets[address] || {};
+    const balance = balances[address] || null;
 
     return {
       isTest,
       wallets,
-      balances,
+      balance,
       images,
       address,
       wallet