Merge branch 'master' into ng-fix-parity-jsapi

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.46",
+  "version": "0.2.49",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

js/src/api/util/format.js

@@ -17,3 +17,15 @@
 export function bytesToHex (bytes) {
   return '0x' + bytes.map((b) => ('0' + b.toString(16)).slice(-2)).join('');
 }
+
+export function hex2Ascii (_hex) {
+  const hex = /^(?:0x)?(.*)$/.exec(_hex.toString())[1];
+
+  let str = '';
+
+  for (let i = 0; i < hex.length; i += 2) {
+    str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
+  }
+
+  return str;
+}

js/src/api/util/index.js

@@ -16,7 +16,7 @@
 
 import { isAddress as isAddressValid, toChecksumAddress } from '../../abi/util/address';
 import { decodeCallData, decodeMethodInput, methodToAbi } from './decode';
-import { bytesToHex } from './format';
+import { bytesToHex, hex2Ascii } from './format';
 import { fromWei, toWei } from './wei';
 import { sha3 } from './sha3';
 import { isArray, isFunction, isHex, isInstanceOf, isString } from './types';
@@ -30,6 +30,7 @@ export default {
   isInstanceOf,
   isString,
   bytesToHex,
+  hex2Ascii,
   createIdentityImg,
   decodeCallData,
   decodeMethodInput,

js/src/contracts/contracts.js

@@ -18,6 +18,7 @@ import DappReg from './dappreg';
 import Registry from './registry';
 import SignatureReg from './signaturereg';
 import TokenReg from './tokenreg';
+import GithubHint from './githubhint';
 
 let instance = null;
 
@@ -30,6 +31,7 @@ export default class Contracts {
     this._dappreg = new DappReg(api, this._registry);
     this._signaturereg = new SignatureReg(api, this._registry);
     this._tokenreg = new TokenReg(api, this._registry);
+    this._githubhint = new GithubHint(api, this._registry);
   }
 
   get registry () {
@@ -48,6 +50,10 @@ export default class Contracts {
     return this._tokenreg;
   }
 
+  get githubHint () {
+    return this._githubhint;
+  }
+
   static create (api) {
     return new Contracts(api);
   }

js/src/contracts/githubhint.js

@@ -0,0 +1,32 @@
+// 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 class GithubHint {
+  constructor (api, registry) {
+    this._api = api;
+    this._registry = registry;
+
+    this.getInstance();
+  }
+
+  getContract () {
+    return this._registry.getContract('githubhint');
+  }
+
+  getInstance () {
+    return this.getContract().instance;
+  }
+}

js/src/contracts/registry.js

@@ -42,7 +42,7 @@ export default class Registry {
     });
   }
 
-  getContractInstance (_name) {
+  getContract (_name) {
     const name = _name.toLowerCase();
 
     return new Promise((resolve, reject) => {
@@ -54,13 +54,19 @@ export default class Registry {
       this
         .lookupAddress(name)
         .then((address) => {
-          this._contracts[name] = this._api.newContract(abis[name], address).instance;
+          this._contracts[name] = this._api.newContract(abis[name], address);
           resolve(this._contracts[name]);
         })
         .catch(reject);
     });
   }
 
+  getContractInstance (_name) {
+    return this
+      .getContract(_name)
+      .then((contract) => contract.instance);
+  }
+
   lookupAddress (_name) {
     const name = _name.toLowerCase();
     const sha3 = this._api.util.sha3(name);

js/src/contracts/tokenreg.js

@@ -22,8 +22,12 @@ export default class TokenReg {
     this.getInstance();
   }
 
+  getContract () {
+    return this._registry.getContract('tokenreg');
+  }
+
   getInstance () {
-    return this._registry.getContractInstance('tokenreg');
+    return this.getContract().instance;
   }
 
   tokenCount () {

js/src/dapps/basiccoin/Deploy/Event/event.css

@@ -46,11 +46,22 @@ a.link, a.link:hover, a.link:visited {
 }
 
 .address {
+  max-width: 250px;
   text-align: left;
+
+  div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .description {
   text-align: left;
+
+  div {
+    white-space: nowrap;
+  }
 }
 
 .center {

js/src/dapps/basiccoin/Deploy/Event/event.js

@@ -58,6 +58,7 @@ export default class Event extends Component {
         <td className={ styles.description }>
           <div>{ isPending ? '' : coin.tla }</div>
           <div>{ isPending ? '' : coin.name }</div>
+          <div>{ this.renderAddress(event.params.coin) }</div>
         </td>
         <td className={ styles.address }>
           { this.renderAddress(event.params.owner) }

js/src/dapps/basiccoin/Overview/Owner/owner.css

@@ -46,3 +46,9 @@
 .icon {
   margin: 0 0 -4px 1em;
 }
+
+.byline {
+  opacity: 0.75;
+  font-size: 0.75em;
+  padding-top: 0.25em;
+}

js/src/dapps/basiccoin/Overview/Owner/owner.js

@@ -68,6 +68,9 @@ export default class Owner extends Component {
         <Token
           address={ token.address }
           tokenreg={ token.tokenreg } />
+        <div className={ styles.byline }>
+          { token.address }
+        </div>
       </div>
     ));
   }

js/src/dapps/tokenreg/Accounts/actions.js

@@ -46,8 +46,6 @@ export const loadAccounts = () => (dispatch) => {
           address
         }));
 
-      console.log('accounts', accountsList);
-
       dispatch(setAccounts(accountsList));
       dispatch(setAccountsInfo(accountsInfo));
       dispatch(setSelectedAccount(accountsList[0].address));

js/src/dapps/tokenreg/Actions/Query/query.js

@@ -42,12 +42,9 @@ export default class QueryAction extends Component {
 
     onClose: PropTypes.func.isRequired,
     handleQueryToken: PropTypes.func.isRequired,
-    handleQueryMetaLookup: PropTypes.func.isRequired,
 
     data: PropTypes.object,
-    notFound: PropTypes.bool,
-    metaLoading: PropTypes.bool,
-    metaData: PropTypes.object
+    notFound: PropTypes.bool
   }
 
   state = initState;
@@ -131,11 +128,8 @@ export default class QueryAction extends Component {
     return (
       <Token
         fullWidth
-        handleMetaLookup={ this.props.handleQueryMetaLookup }
-        isMetaLoading={ this.props.metaLoading }
-        meta={ this.props.metaData }
-        { ...data }
-        />
+        tla={ data.tla }
+      />
     );
   }
 

js/src/dapps/tokenreg/Actions/actions.js

@@ -16,8 +16,6 @@
 
 import { getTokenTotalSupply } from '../utils';
 
-const { sha3, bytesToHex } = window.parity.api.util;
-
 export const SET_REGISTER_SENDING = 'SET_REGISTER_SENDING';
 export const setRegisterSending = (isSending) => ({
   type: SET_REGISTER_SENDING,
@@ -41,8 +39,6 @@ export const registerCompleted = () => ({
 });
 
 export const registerToken = (tokenData) => (dispatch, getState) => {
-  console.log('registering token', tokenData);
-
   const state = getState();
   const contractInstance = state.status.contract.instance;
   const fee = state.status.contract.fee;
@@ -83,8 +79,6 @@ export const registerToken = (tokenData) => (dispatch, getState) => {
     })
     .then((gasEstimate) => {
       options.gas = gasEstimate.mul(1.2).toFixed(0);
-      console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
-
       return contractInstance.register.postTransaction(options, values);
     })
     .then((result) => {
@@ -183,34 +177,3 @@ export const queryToken = (key, query) => (dispatch, getState) => {
       dispatch(setQueryLoading(false));
     });
 };
-
-export const queryTokenMeta = (id, query) => (dispatch, getState) => {
-  console.log('loading token meta', query);
-
-  const state = getState();
-  const contractInstance = state.status.contract.instance;
-
-  const key = sha3(query);
-
-  const startDate = Date.now();
-  dispatch(setQueryMetaLoading(true));
-
-  contractInstance
-    .meta
-    .call({}, [ id, key ])
-    .then((value) => {
-      const meta = {
-        key, query,
-        value: value.find(v => v !== 0) ? bytesToHex(value) : null
-      };
-
-      dispatch(setQueryMeta(meta));
-
-      setTimeout(() => {
-        dispatch(setQueryMetaLoading(false));
-      }, 500 - (Date.now() - startDate));
-    })
-    .catch((e) => {
-      console.error('load meta query error', e);
-    });
-};

js/src/dapps/tokenreg/Actions/component.js

@@ -37,7 +37,6 @@ export default class Actions extends Component {
 
     handleQueryToken: PropTypes.func.isRequired,
     handleQueryClose: PropTypes.func.isRequired,
-    handleQueryMetaLookup: PropTypes.func.isRequired,
     query: PropTypes.object.isRequired
   };
 
@@ -82,7 +81,6 @@ export default class Actions extends Component {
           show={ this.state.show[ QUERY_ACTION ] }
           onClose={ this.onQueryClose }
           handleQueryToken={ this.props.handleQueryToken }
-          handleQueryMetaLookup={ this.props.handleQueryMetaLookup }
           { ...this.props.query } />
       </div>
     );

js/src/dapps/tokenreg/Actions/container.js

@@ -19,7 +19,7 @@ import { connect } from 'react-redux';
 
 import Actions from './component';
 
-import { registerToken, registerReset, queryToken, queryReset, queryTokenMeta } from './actions';
+import { registerToken, registerReset, queryToken, queryReset } from './actions';
 
 class TokensContainer extends Component {
 
@@ -49,9 +49,6 @@ const mapDispatchToProps = (dispatch) => {
     },
     handleQueryClose: () => {
       dispatch(queryReset());
-    },
-    handleQueryMetaLookup: (id, query) => {
-      dispatch(queryTokenMeta(id, query));
     }
   };
 };

js/src/dapps/tokenreg/Application/application.css

@@ -19,6 +19,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: 10em;
 }
 
 .warning {

js/src/dapps/tokenreg/Status/actions.js

@@ -14,11 +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 {
-  registry as registryAbi,
-  tokenreg as tokenregAbi,
-  githubhint as githubhintAbi
-} from '../../../contracts/abi';
+import Contracts from '../../../contracts';
 
 import { loadToken, setTokenPending, deleteToken, setTokenData } from '../Tokens/actions';
 
@@ -34,43 +30,31 @@ export const FIND_CONTRACT = 'FIND_CONTRACT';
 export const loadContract = () => (dispatch) => {
   dispatch(setLoading(true));
 
-  api.parity
-    .registryAddress()
-    .then((registryAddress) => {
-      console.log(`registry found at ${registryAddress}`);
-      const registry = api.newContract(registryAbi, registryAddress).instance;
-
-      return Promise.all([
-        registry.getAddress.call({}, [api.util.sha3('tokenreg'), 'A']),
-        registry.getAddress.call({}, [api.util.sha3('githubhint'), 'A'])
-      ]);
-    })
-    .then(([ tokenregAddress, githubhintAddress ]) => {
-      console.log(`tokenreg was found at ${tokenregAddress}`);
-
-      const tokenregContract = api
-        .newContract(tokenregAbi, tokenregAddress);
-
-      const githubhintContract = api
-        .newContract(githubhintAbi, githubhintAddress);
+  const { tokenReg, githubHint } = new Contracts(api);
 
+  return Promise
+    .all([
+      tokenReg.getContract(),
+      githubHint.getContract()
+    ])
+    .then(([ tokenRegContract, githubHintContract ]) => {
       dispatch(setContractDetails({
-        address: tokenregAddress,
-        instance: tokenregContract.instance,
-        raw: tokenregContract
+        address: tokenRegContract.address,
+        instance: tokenRegContract.instance,
+        raw: tokenRegContract
       }));
 
       dispatch(setGithubhintDetails({
-        address: githubhintAddress,
-        instance: githubhintContract.instance,
-        raw: githubhintContract
+        address: githubHintContract.address,
+        instance: githubHintContract.instance,
+        raw: githubHintContract
       }));
 
       dispatch(loadContractDetails());
       dispatch(subscribeEvents());
     })
     .catch((error) => {
-      console.error('loadContract error', error);
+      throw error;
     });
 };
 
@@ -78,7 +62,7 @@ export const LOAD_CONTRACT_DETAILS = 'LOAD_CONTRACT_DETAILS';
 export const loadContractDetails = () => (dispatch, getState) => {
   const state = getState();
 
-  const instance = state.status.contract.instance;
+  const { instance } = state.status.contract;
 
   Promise
     .all([
@@ -87,8 +71,6 @@ export const loadContractDetails = () => (dispatch, getState) => {
       instance.fee.call()
     ])
     .then(([accounts, owner, fee]) => {
-      console.log(`owner as ${owner}, fee set at ${fee.toFormat()}`);
-
       const isOwner = accounts.filter(a => a === owner).length > 0;
 
       dispatch(setContractDetails({
@@ -119,14 +101,14 @@ export const setGithubhintDetails = (details) => ({
 export const subscribeEvents = () => (dispatch, getState) => {
   const state = getState();
 
-  const contract = state.status.contract.raw;
+  const { raw } = state.status.contract;
   const previousSubscriptionId = state.status.subscriptionId;
 
   if (previousSubscriptionId) {
-    contract.unsubscribe(previousSubscriptionId);
+    raw.unsubscribe(previousSubscriptionId);
   }
 
-  contract
+  raw
     .subscribe(null, {
       fromBlock: 'latest',
       toBlock: 'pending',
@@ -187,7 +169,7 @@ export const subscribeEvents = () => (dispatch, getState) => {
           ));
         }
 
-        console.log('new log event', log);
+        console.warn('unknown log event', log);
       });
     })
     .then((subscriptionId) => {

js/src/dapps/tokenreg/Status/reducer.js

@@ -27,15 +27,13 @@ const initialState = {
   contract: {
     address: null,
     instance: null,
-    raw: null,
     owner: null,
     isOwner: false,
     fee: null
   },
   githubhint: {
     address: null,
-    instance: null,
-    raw: null
+    instance: null
   }
 };
 

js/src/dapps/tokenreg/Tokens/Token/index.js

@@ -14,4 +14,4 @@
 // 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 './token';
+export default from './tokenContainer';

js/src/dapps/tokenreg/Tokens/Token/token.js

@@ -57,15 +57,28 @@ export default class Token extends Component {
     isLoading: PropTypes.bool,
     isPending: PropTypes.bool,
     isTokenOwner: PropTypes.bool.isRequired,
-    isContractOwner: PropTypes.bool.isRequired,
+    isContractOwner: PropTypes.bool,
 
     fullWidth: PropTypes.bool
   };
 
-  state = {
-    metaKeyIndex: 0
+  static defaultProps = {
+    isContractOwner: false
   };
 
+  state = {
+    metaKeyIndex: 0,
+    showMeta: false
+  };
+
+  shouldComponentUpdate (nextProps) {
+    if (nextProps.isLoading && this.props.isLoading) {
+      return false;
+    }
+
+    return true;
+  }
+
   render () {
     const { isLoading, fullWidth } = this.props;
 
@@ -237,7 +250,12 @@ export default class Token extends Component {
   }
 
   renderMeta (meta) {
-    const isMetaLoading = this.props.isMetaLoading;
+    const { isMetaLoading } = this.props;
+    const { showMeta } = this.state;
+
+    if (!showMeta) {
+      return null;
+    }
 
     if (isMetaLoading) {
       return (<div>
@@ -331,6 +349,7 @@ export default class Token extends Component {
     const key = metaDataKeys[keyIndex].value;
     const index = this.props.index;
 
+    this.setState({ showMeta: true });
     this.props.handleMetaLookup(index, key);
   }
 

js/src/dapps/tokenreg/Tokens/Token/tokenContainer.js

@@ -0,0 +1,73 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import Token from './token';
+
+import { queryTokenMeta, unregisterToken, addTokenMeta } from '../actions';
+
+class TokenContainer extends Component {
+  static propTypes = {
+    handleMetaLookup: PropTypes.func.isRequired,
+    handleUnregister: PropTypes.func.isRequired,
+    handleAddMeta: PropTypes.func.isRequired,
+
+    tla: PropTypes.string.isRequired
+  };
+
+  render () {
+    return (
+      <Token
+        { ...this.props }
+      />
+    );
+  }
+}
+
+const mapStateToProps = (_, initProps) => {
+  const { tla } = initProps;
+
+  return (state) => {
+    const { isOwner } = state.status.contract;
+    const { tokens } = state.tokens;
+    const token = tokens.find((t) => t.tla === tla);
+
+    return { ...token, isContractOwner: isOwner };
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    handleMetaLookup: (index, query) => {
+      dispatch(queryTokenMeta(index, query));
+    },
+
+    handleUnregister: (index) => {
+      dispatch(unregisterToken(index));
+    },
+
+    handleAddMeta: (index, key, value) => {
+      dispatch(addTokenMeta(index, key, value));
+    }
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TokenContainer);

js/src/dapps/tokenreg/Tokens/actions.js

@@ -67,8 +67,6 @@ export const deleteToken = (index) => ({
 });
 
 export const loadTokens = () => (dispatch, getState) => {
-  console.log('loading tokens...');
-
   const state = getState();
   const contractInstance = state.status.contract.instance;
 
@@ -79,7 +77,6 @@ export const loadTokens = () => (dispatch, getState) => {
     .call()
     .then((count) => {
       const tokenCount = parseInt(count);
-      console.log(`token count: ${tokenCount}`);
       dispatch(setTokenCount(tokenCount));
 
       for (let i = 0; i < tokenCount; i++) {
@@ -94,8 +91,6 @@ export const loadTokens = () => (dispatch, getState) => {
 };
 
 export const loadToken = (index) => (dispatch, getState) => {
-  console.log('loading token', index);
-
   const state = getState();
   const contractInstance = state.status.contract.instance;
 
@@ -144,7 +139,7 @@ export const loadToken = (index) => (dispatch, getState) => {
       }
 
       data.totalSupply = data.totalSupply.toNumber();
-      console.log(`token loaded: #${index}`, data);
+
       dispatch(setTokenData(index, data));
       dispatch(setTokenLoading(index, false));
     })
@@ -159,8 +154,6 @@ export const loadToken = (index) => (dispatch, getState) => {
 };
 
 export const queryTokenMeta = (index, query) => (dispatch, getState) => {
-  console.log('loading token meta', index, query);
-
   const state = getState();
   const contractInstance = state.status.contract.instance;
 
@@ -176,7 +169,6 @@ export const queryTokenMeta = (index, query) => (dispatch, getState) => {
         value: value.find(v => v !== 0) ? bytesToHex(value) : null
       };
 
-      console.log(`token meta loaded: #${index}`, value);
       dispatch(setTokenMeta(index, meta));
 
       setTimeout(() => {
@@ -189,8 +181,6 @@ export const queryTokenMeta = (index, query) => (dispatch, getState) => {
 };
 
 export const addTokenMeta = (index, key, value) => (dispatch, getState) => {
-  console.log('add token meta', index, key, value);
-
   const state = getState();
   const contractInstance = state.status.contract.instance;
   const token = state.tokens.tokens.find(t => t.index === index);
@@ -203,8 +193,6 @@ export const addTokenMeta = (index, key, value) => (dispatch, getState) => {
     .estimateGas(options, values)
     .then((gasEstimate) => {
       options.gas = gasEstimate.mul(1.2).toFixed(0);
-      console.log(`addTokenMeta: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
-
       return contractInstance.setMeta.postTransaction(options, values);
     })
     .catch((e) => {
@@ -213,8 +201,6 @@ export const addTokenMeta = (index, key, value) => (dispatch, getState) => {
 };
 
 export const addGithubhintURL = (from, key, url) => (dispatch, getState) => {
-  console.log('add githubhint url', key, url);
-
   const state = getState();
   const contractInstance = state.status.githubhint.instance;
 
@@ -227,8 +213,6 @@ export const addGithubhintURL = (from, key, url) => (dispatch, getState) => {
     .estimateGas(options, values)
     .then((gasEstimate) => {
       options.gas = gasEstimate.mul(1.2).toFixed(0);
-      console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
-
       return contractInstance.hintURL.postTransaction(options, values);
     })
     .catch((e) => {
@@ -237,8 +221,6 @@ export const addGithubhintURL = (from, key, url) => (dispatch, getState) => {
 };
 
 export const unregisterToken = (index) => (dispatch, getState) => {
-  console.log('unregistering token', index);
-
   const { contract } = getState().status;
   const { instance, owner } = contract;
 
@@ -252,8 +234,6 @@ export const unregisterToken = (index) => (dispatch, getState) => {
     .estimateGas(options, values)
     .then((gasEstimate) => {
       options.gas = gasEstimate.mul(1.2).toFixed(0);
-      console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
-
       return instance.unregister.postTransaction(options, values);
     })
     .catch((e) => {

js/src/dapps/tokenreg/Tokens/container.js

@@ -19,16 +19,13 @@ import { connect } from 'react-redux';
 
 import Tokens from './tokens';
 
-import { loadTokens, queryTokenMeta, unregisterToken, addTokenMeta } from './actions';
+import { loadTokens } from './actions';
 
 class TokensContainer extends Component {
   static propTypes = {
-    isOwner: PropTypes.bool,
     isLoading: PropTypes.bool,
     tokens: PropTypes.array,
-    tokenCount: PropTypes.number,
-    onLoadTokens: PropTypes.func,
-    accounts: PropTypes.array
+    onLoadTokens: PropTypes.func
   };
 
   componentDidMount () {
@@ -36,7 +33,6 @@ class TokensContainer extends Component {
   }
 
   render () {
-    console.log(this.props);
     return (
       <Tokens
         { ...this.props }
@@ -46,30 +42,19 @@ class TokensContainer extends Component {
 }
 
 const mapStateToProps = (state) => {
-  const { list } = state.accounts;
-  const { isLoading, tokens, tokenCount } = state.tokens;
+  const { isLoading, tokens } = state.tokens;
 
-  const { isOwner } = state.status.contract;
+  const filteredTokens = tokens
+    .filter((token) => token && token.tla)
+    .map((token) => ({ tla: token.tla, owner: token.owner }));
 
-  return { isLoading, tokens, tokenCount, isOwner, accounts: list };
+  return { isLoading, tokens: filteredTokens };
 };
 
 const mapDispatchToProps = (dispatch) => {
   return {
     onLoadTokens: () => {
       dispatch(loadTokens());
-    },
-
-    handleMetaLookup: (index, query) => {
-      dispatch(queryTokenMeta(index, query));
-    },
-
-    handleUnregister: (index) => {
-      dispatch(unregisterToken(index));
-    },
-
-    handleAddMeta: (index, key, value) => {
-      dispatch(addTokenMeta(index, key, value));
     }
   };
 };

js/src/dapps/tokenreg/Tokens/tokens.js

@@ -23,13 +23,8 @@ import styles from './tokens.css';
 
 export default class Tokens extends Component {
   static propTypes = {
-    handleAddMeta: PropTypes.func.isRequired,
-    handleUnregister: PropTypes.func.isRequired,
-    handleMetaLookup: PropTypes.func.isRequired,
-    isOwner: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    tokens: PropTypes.array,
-    accounts: PropTypes.array
+    tokens: PropTypes.array
   };
 
   render () {
@@ -45,24 +40,12 @@ export default class Tokens extends Component {
   }
 
   renderTokens (tokens) {
-    const { accounts, isOwner } = this.props;
-
-    return tokens.map((token, index) => {
-      if (!token || !token.tla) {
-        return null;
-      }
-
-      const isTokenOwner = !!accounts.find((account) => account.address === token.owner);
-
+    return tokens.map((token) => {
       return (
         <Token
-          { ...token }
-          handleUnregister={ this.props.handleUnregister }
-          handleMetaLookup={ this.props.handleMetaLookup }
-          handleAddMeta={ this.props.handleAddMeta }
-          key={ index }
-          isTokenOwner={ isTokenOwner }
-          isContractOwner={ isOwner } />
+          key={ token.tla }
+          tla={ token.tla }
+        />
       );
     });
   }

js/src/index.js

@@ -25,6 +25,7 @@ import ReactDOM from 'react-dom';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 import { createHashHistory } from 'history';
 import { Redirect, Router, Route, useRouterHistory } from 'react-router';
+import qs from 'querystring';
 
 import SecureApi from './secureApi';
 import ContractInstances from './contracts';
@@ -45,6 +46,7 @@ import './index.html';
 
 injectTapEventPlugin();
 
+const AUTH_HASH = '#/auth?';
 const parityUrl = process.env.PARITY_URL ||
   (
     process.env.NODE_ENV === 'production'
@@ -52,7 +54,12 @@ const parityUrl = process.env.PARITY_URL ||
     : '127.0.0.1:8180'
   );
 
-const api = new SecureApi(`ws://${parityUrl}`);
+let token = null;
+if (window.location.hash && window.location.hash.indexOf(AUTH_HASH) === 0) {
+  token = qs.parse(window.location.hash.substr(AUTH_HASH.length)).token;
+}
+
+const api = new SecureApi(`ws://${parityUrl}`, token);
 ContractInstances.create(api);
 
 const store = initStore(api);
@@ -67,6 +74,7 @@ ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
     <Router className={ styles.reset } history={ routerHistory }>
       <Redirect from='/' to='/accounts' />
+      <Redirect from='/auth' to='/accounts' query={ {} } />
       <Redirect from='/settings' to='/settings/views' />
       <Route path='/' component={ Application }>
         <Route path='accounts' component={ Accounts } />

js/src/modals/AddContract/addContract.js

@@ -227,6 +227,7 @@ export default class AddContract extends Component {
   onEditAbi = (abiIn) => {
     const { api } = this.context;
     const { abi, abiError, abiParsed } = validateAbi(abiIn, api);
+
     this.setState({ abi, abiError, abiParsed });
   }
 

js/src/modals/Transfer/transfer.js

@@ -314,7 +314,7 @@ export default class Transfer extends Component {
     }
 
     const token = balance.tokens.find((balance) => balance.token.tag === tag).token;
-    const s = new BigNumber(num).mul(token.format || 1).toString();
+    const s = new BigNumber(num).mul(token.format || 1).toFixed();
 
     if (s.indexOf('.') !== -1) {
       return ERRORS.invalidDecimals;
@@ -516,6 +516,13 @@ export default class Transfer extends Component {
   }
 
   recalculateGas = () => {
+    if (!this.isValid()) {
+      this.setState({
+        gas: '0'
+      }, this.recalculate);
+      return;
+    }
+
     (this.state.isEth
       ? this._estimateGasEth()
       : this._estimateGasToken()

js/src/secureApi.js

@@ -19,12 +19,13 @@ import Api from './api';
 const sysuiToken = window.localStorage.getItem('sysuiToken');
 
 export default class SecureApi extends Api {
-  constructor (url) {
+  constructor (url, nextToken) {
     super(new Api.Transport.Ws(url, sysuiToken));
 
     this._isConnecting = true;
     this._connectState = sysuiToken === 'initial' ? 1 : 0;
     this._needsToken = false;
+    this._nextToken = nextToken;
     this._dappsPort = 8080;
     this._dappsInterface = null;
     this._signerPort = 8180;
@@ -57,7 +58,11 @@ export default class SecureApi extends Api {
         if (isConnected) {
           return this.connectSuccess();
         } else if (lastError) {
-          this.updateToken('initial', 1);
+          const nextToken = this._nextToken || 'initial';
+          const nextState = this._nextToken ? 0 : 1;
+
+          this._nextToken = null;
+          this.updateToken(nextToken, nextState);
         }
         break;
 

js/src/ui/Actionbar/Export/export.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+
 import FileSaver from 'file-saver';
 import FileDownloadIcon from 'material-ui/svg-icons/file/file-download';
 
@@ -38,19 +39,18 @@ class ActionbarExport extends Component {
         className={ className }
         icon={ <FileDownloadIcon /> }
         label='export'
-        onClick={ this.onDownloadBackup } />
+        onClick={ this.handleExport }
+      />
     );
   }
 
-  onDownloadBackup = () => {
+  handleExport = () => {
     const { filename, content } = this.props;
 
-    const text = (typeof content === 'string')
-      ? content
-      : JSON.stringify(content, null, 4);
+    const text = JSON.stringify(content, null, 4);
 
-    const blob = new Blob([ text ], { type: 'text/plain;charset=utf-8' });
-    FileSaver.saveAs(blob, filename);
+    const blob = new Blob([ text ], { type: 'application/json' });
+    FileSaver.saveAs(blob, `${filename}.json`);
   }
 }
 

js/src/ui/Actionbar/Sort/sort.js

@@ -15,6 +15,8 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { observer } from 'mobx-react';
+
 import IconMenu from 'material-ui/IconMenu';
 import MenuItem from 'material-ui/MenuItem';
 
@@ -22,11 +24,15 @@ import SortIcon from 'material-ui/svg-icons/content/sort';
 
 import { Button } from '../../';
 
+import SortStore from './sortStore';
 import styles from './sort.css';
 
+@observer
 export default class ActionbarSort extends Component {
   static propTypes = {
+    id: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
+
     order: PropTypes.string,
     showDefault: PropTypes.bool,
     metas: PropTypes.array
@@ -37,8 +43,10 @@ export default class ActionbarSort extends Component {
     showDefault: true
   }
 
-  state = {
-    menuOpen: false
+  store = new SortStore(this.props);
+
+  componentDidMount () {
+    this.store.restoreSavedOrder();
   }
 
   render () {
@@ -51,12 +59,12 @@ export default class ActionbarSort extends Component {
             className={ styles.sortButton }
             label=''
             icon={ <SortIcon /> }
-            onClick={ this.handleMenuOpen }
+            onClick={ this.store.handleMenuOpen }
             />
         }
-        open={ this.state.menuOpen }
-        onRequestChange={ this.handleMenuChange }
-        onItemTouchTap={ this.handleSortChange }
+        open={ this.store.menuOpen }
+        onRequestChange={ this.store.handleMenuChange }
+        onItemTouchTap={ this.store.handleSortChange }
         targetOrigin={ { horizontal: 'right', vertical: 'top' } }
         anchorOrigin={ { horizontal: 'right', vertical: 'top' } }
         touchTapCloseDelay={ 0 }
@@ -109,16 +117,4 @@ export default class ActionbarSort extends Component {
     );
   }
 
-  handleSortChange = (event, child) => {
-    const order = child.props.value;
-    this.props.onChange(order);
-  }
-
-  handleMenuOpen = () => {
-    this.setState({ menuOpen: true });
-  }
-
-  handleMenuChange = (open) => {
-    this.setState({ menuOpen: open });
-  }
 }

js/src/ui/Actionbar/Sort/sortStore.js

@@ -0,0 +1,71 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, observable } from 'mobx';
+import store from 'store';
+
+const LS_STORE_KEY = '_parity::sortStore';
+
+export default class SortStore {
+  @observable menuOpen = false;
+
+  constructor (props) {
+    const { id, onChange } = props;
+
+    this.onChange = onChange;
+    this.id = id;
+  }
+
+  @action handleMenuOpen = () => {
+    this.menuOpen = true;
+  }
+
+  @action handleMenuChange = (open) => {
+    this.menuOpen = open;
+  }
+
+  @action handleSortChange = (event, child) => {
+    const order = child.props.value;
+    this.onChange(order);
+    this.saveOrder(order);
+  }
+
+  @action restoreSavedOrder = () => {
+    const order = this.getSavedOrder();
+    this.onChange(order);
+  }
+
+  getSavedOrder = () => {
+    return (this.getSavedOrders())[this.id];
+  }
+
+  getSavedOrders = () => {
+    return store.get(LS_STORE_KEY) || {};
+  }
+
+  setSavedOrders = (orders) => {
+    store.set(LS_STORE_KEY, orders);
+  }
+
+  saveOrder = (order) => {
+    const orders = {
+      ...this.getSavedOrders(),
+      [ this.id ]: order
+    };
+
+    this.setSavedOrders(orders);
+  }
+}

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

@@ -16,6 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { TextField } from 'material-ui';
+import { noop } from 'lodash';
 
 import CopyToClipboard from '../../CopyToClipboard';
 
@@ -81,7 +82,7 @@ export default class Input extends Component {
   }
 
   componentWillReceiveProps (newProps) {
-    if (newProps.value !== this.props.value) {
+    if ((newProps.value !== this.props.value) && (newProps.value !== this.state.value)) {
       this.setValue(newProps.value);
     }
   }
@@ -131,6 +132,7 @@ export default class Input extends Component {
           onBlur={ this.onBlur }
           onChange={ this.onChange }
           onKeyDown={ this.onKeyDown }
+          onPaste={ this.onPaste }
           inputStyle={ inputStyle }
           min={ min }
           max={ max }
@@ -142,7 +144,7 @@ export default class Input extends Component {
   }
 
   renderCopyButton () {
-    const { allowCopy, hideUnderline, label, hint, floatCopy } = this.props;
+    const { allowCopy, label, hint, floatCopy } = this.props;
     const { value } = this.state;
 
     if (!allowCopy) {
@@ -157,7 +159,7 @@ export default class Input extends Component {
       ? allowCopy
       : value;
 
-    if (hideUnderline && !label) {
+    if (!label) {
       style.marginBottom = 2;
     } else if (label && !hint) {
       style.marginBottom = 4;
@@ -180,9 +182,10 @@ export default class Input extends Component {
   }
 
   onChange = (event, value) => {
-    this.setValue(value);
-
-    this.props.onChange && this.props.onChange(event, value);
+    event.persist();
+    this.setValue(value, () => {
+      this.props.onChange && this.props.onChange(event, value);
+    });
   }
 
   onBlur = (event) => {
@@ -196,6 +199,14 @@ export default class Input extends Component {
     this.props.onBlur && this.props.onBlur(event);
   }
 
+  onPaste = (event) => {
+    const value = event.clipboardData.getData('Text');
+
+    window.setTimeout(() => {
+      this.onSubmit(value);
+    }, 0);
+  }
+
   onKeyDown = (event) => {
     const { value } = event.target;
 
@@ -209,12 +220,12 @@ export default class Input extends Component {
   }
 
   onSubmit = (value) => {
-    this.setValue(value);
-
-    this.props.onSubmit && this.props.onSubmit(value);
+    this.setValue(value, () => {
+      this.props.onSubmit && this.props.onSubmit(value);
+    });
   }
 
-  setValue (value) {
-    this.setState({ value });
+  setValue (value, cb = noop) {
+    this.setState({ value }, cb);
   }
 }

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

@@ -20,6 +20,7 @@
 
 .input input {
   padding-left: 48px !important;
+  box-sizing: border-box;
 }
 
 .inputEmpty input {

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

@@ -76,6 +76,7 @@ class InputAddress extends Component {
     }
 
     const classes = [disabled ? styles.iconDisabled : styles.icon];
+
     if (!label) {
       classes.push(styles.noLabel);
     }

js/src/ui/MethodDecoding/methodDecoding.css

@@ -18,6 +18,12 @@
 .container {
 }
 
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .details,
 .gasDetails {
   color: #aaa;
@@ -46,7 +52,7 @@
 .highlight {
 }
 
-.inputs {
+.inputs, .addressContainer {
   padding-left: 2em;
 }
 
@@ -73,3 +79,7 @@
   margin-bottom: -10px;
   margin-right: 0.5em;
 }
+
+.inputData {
+  word-break: break-all;
+}

js/src/ui/MethodDecoding/methodDecoding.js

@@ -18,14 +18,14 @@ import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import CircularProgress from 'material-ui/CircularProgress';
 
 import Contracts from '../../contracts';
-import IdentityIcon from '../IdentityIcon';
-import IdentityName from '../IdentityName';
 import { Input, InputAddress } from '../Form';
 
 import styles from './methodDecoding.css';
 
+const ASCII_INPUT = /^[a-z0-9\s,?;.:/!()-_@'"#]+$/i;
 const CONTRACT_CREATE = '0x60606040';
 const TOKEN_METHODS = {
   '0xa9059cbb': 'transfer(to,value)'
@@ -53,20 +53,36 @@ class MethodDecoding extends Component {
     token: null,
     isContract: false,
     isDeploy: false,
-    isReceived: false
+    isReceived: false,
+    isLoading: true
   }
 
   componentWillMount () {
-    this.lookup();
+    const lookupResult = this.lookup();
+
+    if (typeof lookupResult === 'object' && typeof lookupResult.then === 'function') {
+      lookupResult.then(() => this.setState({ isLoading: false }));
+    } else {
+      this.setState({ isLoading: false });
+    }
   }
 
   render () {
     const { transaction } = this.props;
+    const { isLoading } = this.state;
 
     if (!transaction) {
       return null;
     }
 
+    if (isLoading) {
+      return (
+        <div className={ styles.loading }>
+          <CircularProgress size={ 60 } thickness={ 2 } />
+        </div>
+      );
+    }
+
     return (
       <div className={ styles.container }>
         { this.renderAction() }
@@ -82,26 +98,33 @@ class MethodDecoding extends Component {
 
     return (
       <div className={ styles.gasDetails }>
-        { historic ? 'Provided' : 'Provides' } <span className={ styles.highlight }>{ gas.toFormat(0) } gas ({ gasPrice.div(1000000).toFormat(0) }M/<small>ETH</small>)</span> for a total transaction value of <span className={ styles.highlight }>{ this.renderEtherValue(gasValue) }</span>
+        <span>{ historic ? 'Provided' : 'Provides' } </span>
+        <span className={ styles.highlight }>
+          { gas.toFormat(0) } gas ({ gasPrice.div(1000000).toFormat(0) }M/<small>ETH</small>)
+        </span>
+        <span> for a total transaction value of </span>
+        <span className={ styles.highlight }>{ this.renderEtherValue(gasValue) }</span>
       </div>
     );
   }
 
   renderAction () {
-    const { methodName, methodInputs, methodSignature, token, isDeploy, isReceived } = this.state;
+    const { methodName, methodInputs, methodSignature, token, isDeploy, isReceived, isContract } = this.state;
 
     if (isDeploy) {
       return this.renderDeploy();
     }
 
-    if (methodSignature) {
+    if (isContract && methodSignature) {
       if (token && TOKEN_METHODS[methodSignature] && methodInputs) {
         return this.renderTokenAction();
       }
 
-      return methodName
-        ? this.renderSignatureMethod()
-        : this.renderUnknownMethod();
+      if (methodName) {
+        return this.renderSignatureMethod();
+      }
+
+      return this.renderUnknownMethod();
     }
 
     return isReceived
@@ -109,6 +132,28 @@ class MethodDecoding extends Component {
       : this.renderValueTransfer();
   }
 
+  renderInputValue () {
+    const { api } = this.context;
+    const { transaction } = this.props;
+
+    if (!/^(0x)?([0]*[1-9a-f]+[0]*)+$/.test(transaction.input)) {
+      return null;
+    }
+
+    const ascii = api.util.hex2Ascii(transaction.input);
+
+    const text = ASCII_INPUT.test(ascii)
+      ? ascii
+      : transaction.input;
+
+    return (
+      <div>
+        <span>with the input &nbsp;</span>
+        <code className={ styles.inputData }>{ text }</code>
+      </div>
+    );
+  }
+
   renderTokenAction () {
     const { historic } = this.props;
     const { methodSignature, methodInputs } = this.state;
@@ -120,7 +165,15 @@ class MethodDecoding extends Component {
       default:
         return (
           <div className={ styles.details }>
-            { historic ? 'Transferred' : 'Will transfer' } <span className={ styles.highlight }>{ this.renderTokenValue(value.value) }</span> to <span className={ styles.highlight }>{ this.renderAddressName(address) }</span>.
+            <div>
+              <span>{ historic ? 'Transferred' : 'Will transfer' } </span>
+              <span className={ styles.highlight }>
+                { this.renderTokenValue(value.value) }
+              </span>
+              <span> to </span>
+            </div>
+
+            { this.renderAddressName(address) }
           </div>
         );
     }
@@ -139,7 +192,11 @@ class MethodDecoding extends Component {
 
     return (
       <div className={ styles.details }>
-        Deployed a contract at address <span className={ styles.highlight }>{ this.renderAddressName(transaction.creates, false) }</span>
+        <div>
+          <span>Deployed a contract at address </span>
+        </div>
+
+        { this.renderAddressName(transaction.creates, false) }
       </div>
     );
   }
@@ -150,7 +207,16 @@ class MethodDecoding extends Component {
 
     return (
       <div className={ styles.details }>
-        { historic ? 'Received' : 'Will receive' } <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span> from { isContract ? 'the contract' : '' } <span className={ styles.highlight }>{ this.renderAddressName(transaction.from) }</span>
+        <div>
+          <span>{ historic ? 'Received' : 'Will receive' } </span>
+          <span className={ styles.highlight }>
+            { this.renderEtherValue(transaction.value) }
+          </span>
+          <span> from { isContract ? 'the contract' : '' } </span>
+        </div>
+
+        { this.renderAddressName(transaction.from) }
+        { this.renderInputValue() }
       </div>
     );
   }
@@ -161,19 +227,44 @@ class MethodDecoding extends Component {
 
     return (
       <div className={ styles.details }>
-        { historic ? 'Transferred' : 'Will transfer' } <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span> to { isContract ? 'the contract' : '' } <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>
+        <div>
+          <span>{ historic ? 'Transferred' : 'Will transfer' } </span>
+          <span className={ styles.highlight }>
+            { this.renderEtherValue(transaction.value) }
+          </span>
+          <span> to { isContract ? 'the contract' : '' } </span>
+        </div>
+
+        { this.renderAddressName(transaction.to) }
+        { this.renderInputValue() }
       </div>
     );
   }
 
   renderSignatureMethod () {
     const { historic, transaction } = this.props;
-    const { methodName } = this.state;
+    const { methodName, methodInputs } = this.state;
 
     return (
       <div className={ styles.details }>
         <div className={ styles.description }>
-          { historic ? 'Executed' : 'Will execute' } the <span className={ styles.name }>{ methodName }</span> function on the contract <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>, transferring <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span>, passing the following parameters:
+          <div>
+            <span>{ historic ? 'Executed' : 'Will execute' } the </span>
+            <span className={ styles.name }>{ methodName }</span>
+            <span> function on the contract </span>
+          </div>
+
+          { this.renderAddressName(transaction.to) }
+
+          <div>
+            <span>transferring </span>
+            <span className={ styles.highlight }>
+              { this.renderEtherValue(transaction.value) }
+            </span>
+            <span>
+              { methodInputs.length ? ', passing the following parameters:' : '.' }
+            </span>
+          </div>
         </div>
         <div className={ styles.inputs }>
           { this.renderInputs() }
@@ -187,7 +278,21 @@ class MethodDecoding extends Component {
 
     return (
       <div className={ styles.details }>
-        { historic ? 'Executed' : 'Will execute' } <span className={ styles.name }>an unknown/unregistered</span> method on the contract <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>, transferring <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span>.
+        <div>
+          <span>{ historic ? 'Executed' : 'Will execute' } </span>
+          <span className={ styles.name }>an unknown/unregistered</span>
+          <span> method on the contract </span>
+        </div>
+
+        { this.renderAddressName(transaction.to) }
+
+        <div>
+          <span>transferring </span>
+          <span className={ styles.highlight }>
+            { this.renderEtherValue(transaction.value) }
+          </span>
+          <span>.</span>
+        </div>
       </div>
     );
   }
@@ -239,7 +344,7 @@ class MethodDecoding extends Component {
 
     return (
       <span className={ styles.tokenValue }>
-        { value.div(token.format).toFormat(5) }<small>{ token.tag }</small>
+        { value.div(token.format).toFormat(5) }<small> { token.tag }</small>
       </span>
     );
   }
@@ -250,17 +355,21 @@ class MethodDecoding extends Component {
 
     return (
       <span className={ styles.etherValue }>
-        { ether.toFormat(5) }<small>ETH</small>
+        { ether.toFormat(5) }<small> ETH</small>
       </span>
     );
   }
 
   renderAddressName (address, withName = true) {
     return (
-      <span className={ styles.address }>
-        <IdentityIcon center inline address={ address } className={ styles.identityicon } />
-        { withName ? <IdentityName address={ address } /> : address }
-      </span>
+      <div className={ styles.addressContainer }>
+        <InputAddress
+          disabled
+          className={ styles.address }
+          value={ address }
+          text={ withName }
+        />
+      </div>
     );
   }
 
@@ -284,44 +393,57 @@ class MethodDecoding extends Component {
       return;
     }
 
-    const { signature, paramdata } = api.util.decodeCallData(transaction.input);
-    this.setState({ methodSignature: signature, methodParams: paramdata });
-
-    if (!signature || signature === CONTRACT_CREATE || transaction.creates) {
-      this.setState({ isDeploy: true });
+    if (contractAddress === '0x') {
       return;
     }
 
-    Promise
-      .all([
-        api.eth.getCode(contractAddress),
-        Contracts.get().signatureReg.lookup(signature)
-      ])
-      .then(([bytecode, method]) => {
-        let methodInputs = null;
-        let methodName = null;
+    return api.eth
+      .getCode(contractAddress || transaction.creates)
+      .then((bytecode) => {
+        const isContract = bytecode && /^(0x)?([0]*[1-9a-f]+[0]*)+$/.test(bytecode);
 
-        if (method && method.length) {
-          const { methodParams } = this.state;
-          const abi = api.util.methodToAbi(method);
+        this.setState({ isContract });
 
-          methodName = abi.name;
-          methodInputs = api.util
-            .decodeMethodInput(abi, methodParams)
-            .map((value, index) => {
-              const type = abi.inputs[index].type;
-
-              return { type, value };
-            });
+        if (!isContract) {
+          return;
         }
 
-        this.setState({
-          method,
-          methodName,
-          methodInputs,
-          bytecode,
-          isContract: bytecode && bytecode !== '0x'
-        });
+        const { signature, paramdata } = api.util.decodeCallData(transaction.input);
+        this.setState({ methodSignature: signature, methodParams: paramdata });
+
+        if (!signature || signature === CONTRACT_CREATE || transaction.creates) {
+          this.setState({ isDeploy: true });
+          return;
+        }
+
+        return Contracts.get()
+          .signatureReg
+          .lookup(signature)
+          .then((method) => {
+            let methodInputs = null;
+            let methodName = null;
+
+            if (method && method.length) {
+              const { methodParams } = this.state;
+              const abi = api.util.methodToAbi(method);
+
+              methodName = abi.name;
+              methodInputs = api.util
+                .decodeMethodInput(abi, methodParams)
+                .map((value, index) => {
+                  const type = abi.inputs[index].type;
+
+                  return { type, value };
+                });
+            }
+
+            this.setState({
+              method,
+              methodName,
+              methodInputs,
+              bytecode
+            });
+          });
       })
       .catch((error) => {
         console.warn('lookup', error);

js/src/util/validation.js

@@ -44,7 +44,7 @@ export function validateAbi (abi, api) {
 
     // Validate each elements of the Array
     const invalidIndex = abiParsed
-      .map((o) => isValidAbiEvent(o, api) || isValidAbiFunction(o, api))
+      .map((o) => isValidAbiEvent(o, api) || isValidAbiFunction(o, api) || isAbiFallback(o))
       .findIndex((valid) => !valid);
 
     if (invalidIndex !== -1) {
@@ -74,6 +74,14 @@ function isValidAbiFunction (object, api) {
     (object.inputs && api.util.isArray(object.inputs));
 }
 
+function isAbiFallback (object) {
+  if (!object) {
+    return false;
+  }
+
+  return object.type === 'fallback';
+}
+
 function isValidAbiEvent (object, api) {
   if (!object) {
     return false;

js/src/views/Accounts/accounts.js

@@ -22,7 +22,7 @@ import { uniq } from 'lodash';
 
 import List from './List';
 import { CreateAccount } from '../../modals';
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page, Tooltip } from '../../ui';
+import { Actionbar, ActionbarExport, ActionbarSearch, ActionbarSort, Button, Page, Tooltip } from '../../ui';
 
 import styles from './accounts.css';
 
@@ -90,12 +90,15 @@ class Accounts extends Component {
     return (
       <ActionbarSort
         key='sortAccounts'
+        id='sortAccounts'
         order={ this.state.sortOrder }
         onChange={ onChange } />
     );
   }
 
   renderActionbar () {
+    const { accounts } = this.props;
+
     const buttons = [
       <Button
         key='newAccount'
@@ -103,6 +106,11 @@ class Accounts extends Component {
         label='new account'
         onClick={ this.onNewAccountClick } />,
 
+      <ActionbarExport
+        key='exportAccounts'
+        content={ accounts }
+        filename='accounts' />,
+
       this.renderSearchButton(),
       this.renderSortButton()
     ];

js/src/views/Addresses/addresses.js

@@ -75,6 +75,7 @@ class Addresses extends Component {
     return (
       <ActionbarSort
         key='sortAccounts'
+        id='sortAddresses'
         order={ this.state.sortOrder }
         onChange={ onChange } />
     );
@@ -106,7 +107,7 @@ class Addresses extends Component {
       <ActionbarExport
         key='exportAddressbook'
         content={ contacts }
-        filename='addressbook.json' />,
+        filename='addressbook' />,
 
       <ActionbarImport
         key='importAddressbook'

js/src/views/Contracts/contracts.js

@@ -82,6 +82,7 @@ class Contracts extends Component {
     return (
       <ActionbarSort
         key='sortAccounts'
+        id='sortContracts'
         order={ this.state.sortOrder }
         metas={ [
           { key: 'timestamp', label: 'date' }

js/src/views/Signer/components/Account/Account.css

@@ -17,6 +17,9 @@
 .acc {
   text-align: center;
   display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
 }
 
 .acc > * {
@@ -35,10 +38,13 @@
 }
 
 .name {
-  text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
-  display: lock;
+  display: block;
   vertical-align: middle;
   text-transform: uppercase;
+
+  span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 }

js/src/views/Signer/components/TransactionFinished/TransactionFinished.css

@@ -38,7 +38,9 @@
 }
 
 .transactionDetails {
-  margin-right: 321px;
+  padding-right: 321px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .isConfirmed {

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

@@ -19,7 +19,9 @@
 }
 
 .transactionDetails {
-  margin-right: 321px;
+  padding-right: 321px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .mainContainer {

js/src/views/Signer/containers/Embedded/embedded.css

@@ -15,6 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .signer {
+  width: 916px;
 }
 
 .pending {