Merge branch 'master' into transactions-propagate

2016-11-20 13:24:08 +01:00
parent 3bfd6c5998 60922b61c9
commit 0848a9ec3c
98 changed files with 2910 additions and 449 deletions
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
  "name": "parity.js",
-  "version": "0.2.50",
+  "version": "0.2.54",
  "main": "release/index.js",
  "jsnext:main": "src/index.js",
  "author": "Parity Team <admin@parity.io>",
@@ -43,6 +43,7 @@
    "test": "mocha 'src/**/*.spec.js'",
    "test:coverage": "istanbul cover _mocha -- 'src/**/*.spec.js'",
    "test:e2e": "mocha 'src/**/*.e2e.js'",
+    "test:npm": "(cd .npmjs && npm i) && node test/npmLibrary && (rm -rf .npmjs/node_modules)",
    "prepush": "npm run lint:cached"
  },
  "devDependencies": {
@@ -101,9 +102,10 @@
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0",
    "raw-loader": "^0.5.1",
-    "react-addons-test-utils": "^15.3.0",
+    "react-addons-test-utils": "~15.3.2",
    "react-copy-to-clipboard": "^4.2.3",
-    "react-hot-loader": "^1.3.0",
+    "react-dom": "~15.3.2",
+    "react-hot-loader": "~1.3.0",
    "rucksack-css": "^0.8.6",
    "sinon": "^1.17.4",
    "sinon-as-promised": "^4.0.2",
@@ -113,7 +115,7 @@
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.2",
    "webpack-error-notification": "0.1.6",
-    "webpack-hot-middleware": "^2.7.1",
+    "webpack-hot-middleware": "~2.13.2",
    "websocket": "^1.0.23"
  },
  "dependencies": {
@@ -133,23 +135,24 @@
    "js-sha3": "^0.5.2",
    "lodash": "^4.11.1",
    "marked": "^0.3.6",
-    "material-ui": "^0.16.1",
+    "material-ui": "0.16.1",
    "material-ui-chip-input": "^0.8.0",
    "mobx": "^2.6.1",
    "mobx-react": "^3.5.8",
    "mobx-react-devtools": "^4.2.9",
    "moment": "^2.14.1",
+    "phoneformat.js": "^1.0.3",
    "qs": "^6.3.0",
-    "react": "^15.2.1",
+    "react": "~15.3.2",
    "react-ace": "^4.0.0",
-    "react-addons-css-transition-group": "^15.2.1",
+    "react-addons-css-transition-group": "~15.3.2",
    "react-chartjs-2": "^1.5.0",
-    "react-dom": "^15.2.1",
+    "react-dom": "~15.3.2",
    "react-dropzone": "^3.7.3",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.1",
    "react-router-redux": "^4.0.5",
-    "react-tap-event-plugin": "^1.0.0",
+    "react-tap-event-plugin": "~1.0.0",
    "react-tooltip": "^2.0.3",
    "recharts": "^0.15.2",
    "redux": "^3.5.2",
--- a/js/parity.package.json
+++ b/js/parity.package.json
@@ -27,6 +27,7 @@
  },
  "dependencies": {
    "bignumber.js": "^2.3.0",
-    "js-sha3": "^0.5.2"
+    "js-sha3": "^0.5.2",
+    "node-fetch": "^1.6.3"
  }
 }
--- a/js/src/api/format/input.js
+++ b/js/src/api/format/input.js
@@ -166,3 +166,11 @@ export function inTraceFilter (filterObject) {

  return filterObject;
 }
+
+export function inTraceType (whatTrace) {
+  if (isString(whatTrace)) {
+    return [whatTrace];
+  }
+
+  return whatTrace;
+}
--- a/js/src/api/format/input.spec.js
+++ b/js/src/api/format/input.spec.js
@@ -16,7 +16,7 @@

 import BigNumber from 'bignumber.js';

-import { inAddress, inBlockNumber, inData, inFilter, inHex, inNumber10, inNumber16, inOptions } from './input';
+import { inAddress, inBlockNumber, inData, inFilter, inHex, inNumber10, inNumber16, inOptions, inTraceType } from './input';
 import { isAddress } from '../../../test/types';

 describe('api/format/input', () => {
@@ -242,4 +242,16 @@ describe('api/format/input', () => {
      });
    });
  });
+
+  describe('inTraceType', () => {
+    it('returns array of types as is', () => {
+      const types = ['vmTrace', 'trace', 'stateDiff'];
+      expect(inTraceType(types)).to.deep.equal(types);
+    });
+
+    it('formats single string type into array', () => {
+      const type = 'vmTrace';
+      expect(inTraceType(type)).to.deep.equal([type]);
+    });
+  });
 });
--- a/js/src/api/format/output.js
+++ b/js/src/api/format/output.js
@@ -254,3 +254,25 @@ export function outTrace (trace) {

  return trace;
 }
+
+export function outTraces (traces) {
+  if (traces) {
+    return traces.map(outTrace);
+  }
+
+  return traces;
+}
+
+export function outTraceReplay (trace) {
+  if (trace) {
+    Object.keys(trace).forEach((key) => {
+      switch (key) {
+        case 'trace':
+          trace[key] = outTraces(trace[key]);
+          break;
+      }
+    });
+  }
+
+  return trace;
+}
--- a/js/src/api/rpc/trace/trace.e2e.js
+++ b/js/src/api/rpc/trace/trace.e2e.js
@@ -20,15 +20,25 @@ describe('ethapi.trace', () => {
  const ethapi = createHttpApi();

  describe('block', () => {
-    it('returns the latest block', () => {
-      return ethapi.trace.block().then((block) => {
-        expect(block).to.be.ok;
+    it('returns the latest block traces', () => {
+      return ethapi.trace.block().then((traces) => {
+        expect(traces).to.be.ok;
      });
    });

-    it('returns a specified block', () => {
-      return ethapi.trace.block('0x65432').then((block) => {
-        expect(block).to.be.ok;
+    it('returns traces for a specified block', () => {
+      return ethapi.trace.block('0x65432').then((traces) => {
+        expect(traces).to.be.ok;
+      });
+    });
+  });
+
+  describe('replayTransaction', () => {
+    it('returns traces for a specific transaction', () => {
+      return ethapi.eth.getBlockByNumber().then((latestBlock) => {
+        return ethapi.trace.replayTransaction(latestBlock.transactions[0]).then((traces) => {
+          expect(traces).to.be.ok;
+        });
      });
    });
  });
--- a/js/src/api/rpc/trace/trace.js
+++ b/js/src/api/rpc/trace/trace.js
@@ -14,35 +14,53 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import { inBlockNumber, inHex, inNumber16, inTraceFilter } from '../../format/input';
-import { outTrace } from '../../format/output';
+import { inBlockNumber, inData, inHex, inNumber16, inOptions, inTraceFilter, inTraceType } from '../../format/input';
+import { outTraces, outTraceReplay } from '../../format/output';

 export default class Trace {
  constructor (transport) {
    this._transport = transport;
  }

+  block (blockNumber = 'latest') {
+    return this._transport
+      .execute('trace_block', inBlockNumber(blockNumber))
+      .then(outTraces);
+  }
+
+  call (options, blockNumber = 'latest', whatTrace = ['trace']) {
+    return this._transport
+      .execute('trace_call', inOptions(options), inBlockNumber(blockNumber), inTraceType(whatTrace))
+      .then(outTraceReplay);
+  }
+
  filter (filterObj) {
    return this._transport
      .execute('trace_filter', inTraceFilter(filterObj))
-      .then(traces => traces.map(trace => outTrace(trace)));
+      .then(outTraces);
  }

  get (txHash, position) {
    return this._transport
      .execute('trace_get', inHex(txHash), inNumber16(position))
-      .then(trace => outTrace(trace));
+      .then(outTraces);
+  }
+
+  rawTransaction (data, whatTrace = ['trace']) {
+    return this._transport
+      .execute('trace_rawTransaction', inData(data), inTraceType(whatTrace))
+      .then(outTraceReplay);
+  }
+
+  replayTransaction (txHash, whatTrace = ['trace']) {
+    return this._transport
+      .execute('trace_replayTransaction', txHash, inTraceType(whatTrace))
+      .then(outTraceReplay);
  }

  transaction (txHash) {
    return this._transport
      .execute('trace_transaction', inHex(txHash))
-      .then(traces => traces.map(trace => outTrace(trace)));
-  }
-
-  block (blockNumber = 'latest') {
-    return this._transport
-      .execute('trace_block', inBlockNumber(blockNumber))
-      .then(traces => traces.map(trace => outTrace(trace)));
+      .then(outTraces);
  }
 }
--- a/js/src/api/transport/ws/ws.js
+++ b/js/src/api/transport/ws/ws.js
@@ -84,7 +84,7 @@ export default class Ws extends JsonRpcBase {
    this._connecting = false;

    if (this._autoConnect) {
-      this._connect();
+      setTimeout(() => this._connect(), 500);
    }
  }

--- a/js/src/contracts/abi/index.js
+++ b/js/src/contracts/abi/index.js
@@ -23,6 +23,7 @@ import githubhint from './githubhint.json';
 import owned from './owned.json';
 import registry from './registry.json';
 import signaturereg from './signaturereg.json';
+import smsverification from './sms-verification.json';
 import tokenreg from './tokenreg.json';
 import wallet from './wallet.json';

@@ -36,6 +37,7 @@ export {
  owned,
  registry,
  signaturereg,
+  smsverification,
  tokenreg,
  wallet
 };
--- a/js/src/contracts/abi/sms-verification.json
+++ b/js/src/contracts/abi/sms-verification.json
@@ -0,0 +1 @@
+[{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"}],"name":"certify","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"request","outputs":[],"payable":true,"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"},{"name":"_puzzle","type":"bytes32"}],"name":"puzzle","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"},{"name":"_field","type":"string"}],"name":"getAddress","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"uint256"}],"name":"setFee","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"}],"name":"revoke","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_code","type":"bytes32"}],"name":"confirm","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"drain","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"delegate","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"},{"name":"_field","type":"string"}],"name":"getUint","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setDelegate","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"}],"name":"certified","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"fee","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"},{"name":"_field","type":"string"}],"name":"get","outputs":[{"name":"","type":"bytes32"}],"payable":false,"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"}],"name":"Requested","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"},{"indexed":false,"name":"puzzle","type":"bytes32"}],"name":"Puzzled","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"}],"name":"Confirmed","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"}],"name":"Revoked","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]
--- a/js/src/contracts/contracts.js
+++ b/js/src/contracts/contracts.js
@@ -19,6 +19,7 @@ import Registry from './registry';
 import SignatureReg from './signaturereg';
 import TokenReg from './tokenreg';
 import GithubHint from './githubhint';
+import smsVerification from './sms-verification';

 let instance = null;

@@ -54,6 +55,10 @@ export default class Contracts {
    return this._githubhint;
  }

+  get smsVerification () {
+    return smsVerification;
+  }
+
  static create (api) {
    return new Contracts(api);
  }
--- a/js/src/contracts/sms-verification.js
+++ b/js/src/contracts/sms-verification.js
@@ -0,0 +1,52 @@
+// 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 { stringify } from 'querystring';
+
+export const checkIfVerified = (contract, account) => {
+  return contract.instance.certified.call({}, [account]);
+};
+
+export const checkIfRequested = (contract, account) => {
+  return new Promise((resolve, reject) => {
+    contract.subscribe('Requested', {
+      fromBlock: 0, toBlock: 'pending'
+    }, (err, logs) => {
+      if (err) {
+        return reject(err);
+      }
+      const e = logs.find((l) => {
+        return l.type === 'mined' && l.params.who && l.params.who.value === account;
+      });
+      resolve(e ? e.transactionHash : false);
+    });
+  });
+};
+
+export const postToServer = (query) => {
+  query = stringify(query);
+  return fetch('https://sms-verification.parity.io/?' + query, {
+    method: 'POST', mode: 'cors', cache: 'no-store'
+  })
+  .then((res) => {
+    return res.json().then((data) => {
+      if (res.ok) {
+        return data.message;
+      }
+      throw new Error(data.message || 'unknown error');
+    });
+  });
+};
--- a/js/src/dapps/githubhint/Application/application.css
+++ b/js/src/dapps/githubhint/Application/application.css
@@ -15,12 +15,17 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */

-.container {
+.body {
+  text-align: center;
  background: #333;
+  color: #fff;
+}
+
+.container {
  font-family: 'Roboto';
  vertical-align: middle;
  padding: 4em 0;
-  text-align: center;
+  margin: 0 0 2em 0;
 }

 .form {
@@ -98,7 +103,7 @@
  color: #333;
  background: #eee;
  border: none;
-  border-radius: 5px;
+  border-radius: 0.5em;
  width: 100%;
  font-size: 1em;
  text-align: center;
@@ -113,20 +118,29 @@
 }

 .hashError, .hashWarning, .hashOk {
-  padding-top: 0.5em;
+  margin: 0.5em 0;
  text-align: center;
+  padding: 1em 0;
+  border: 0.25em solid #333;
+  border-radius: 0.5em;
 }

 .hashError {
+  border-color: #f66;
  color: #f66;
+  background: rgba(255, 102, 102, 0.25);
 }

 .hashWarning {
+  border-color: #f80;
  color: #f80;
+  background: rgba(255, 236, 0, 0.25);
 }

 .hashOk {
-  opacity: 0.5;
+  border-color: #6f6;
+  color: #6f6;
+  background: rgba(102, 255, 102, 0.25);
 }

 .typeButtons {
--- a/js/src/dapps/githubhint/Application/application.js
+++ b/js/src/dapps/githubhint/Application/application.js
@@ -19,6 +19,7 @@ import React, { Component } from 'react';
 import { api } from '../parity';
 import { attachInterface } from '../services';
 import Button from '../Button';
+import Events from '../Events';
 import IdentityIcon from '../IdentityIcon';
 import Loading from '../Loading';

@@ -27,6 +28,8 @@ import styles from './application.css';
 const INVALID_URL_HASH = '0xc5d2460186f7233c927e7db2dcc703c0e500b653ca82273b7bfad8045d85a470';
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';

+let nextEventId = 0;
+
 export default class Application extends Component {
  state = {
    fromAddress: null,
@@ -43,7 +46,9 @@ export default class Application extends Component {
    registerState: '',
    registerType: 'file',
    repo: '',
-    repoError: null
+    repoError: null,
+    events: {},
+    eventIds: []
  }

  componentDidMount () {
@@ -75,7 +80,7 @@ export default class Application extends Component {
    let hashClass = null;
    if (contentHashError) {
      hashClass = contentHashOwner !== fromAddress ? styles.hashError : styles.hashWarning;
-    } else {
+    } else if (contentHash) {
      hashClass = styles.hashOk;
    }

@@ -116,29 +121,34 @@ export default class Application extends Component {
    }

    return (
-      <div className={ styles.container }>
-        <div className={ styles.form }>
-          <div className={ styles.typeButtons }>
-            <Button
-              disabled={ registerBusy }
-              invert={ registerType !== 'file' }
-              onClick={ this.onClickTypeNormal }>File Link</Button>
-            <Button
-              disabled={ registerBusy }
-              invert={ registerType !== 'content' }
-              onClick={ this.onClickTypeContent }>Content Bundle</Button>
-          </div>
-          <div className={ styles.box }>
-            <div className={ styles.description }>
-              Provide a valid URL to register. The content information can be used in other contracts that allows for reverse lookups, e.g. image registries, dapp registries, etc.
+      <div className={ styles.body }>
+        <div className={ styles.container }>
+          <div className={ styles.form }>
+            <div className={ styles.typeButtons }>
+              <Button
+                disabled={ registerBusy }
+                invert={ registerType !== 'file' }
+                onClick={ this.onClickTypeNormal }>File Link</Button>
+              <Button
+                disabled={ registerBusy }
+                invert={ registerType !== 'content' }
+                onClick={ this.onClickTypeContent }>Content Bundle</Button>
            </div>
-            { valueInputs }
-            <div className={ hashClass }>
-              { contentHashError || contentHash }
+            <div className={ styles.box }>
+              <div className={ styles.description }>
+                Provide a valid URL to register. The content information can be used in other contracts that allows for reverse lookups, e.g. image registries, dapp registries, etc.
+              </div>
+              { valueInputs }
+              <div className={ hashClass }>
+                { contentHashError || contentHash }
+              </div>
+              { registerBusy ? this.renderProgress() : this.renderButtons() }
            </div>
-            { registerBusy ? this.renderProgress() : this.renderButtons() }
          </div>
        </div>
+        <Events
+          eventIds={ this.state.eventIds }
+          events={ this.state.events } />
      </div>
    );
  }
@@ -285,15 +295,29 @@ export default class Application extends Component {
    }
  }

-  trackRequest (promise) {
+  trackRequest (eventId, promise) {
    return promise
      .then((signerRequestId) => {
-        this.setState({ signerRequestId, registerState: 'Transaction posted, Waiting for transaction authorization' });
+        this.setState({
+          events: Object.assign({}, this.state.events, {
+            [eventId]: Object.assign({}, this.state.events[eventId], {
+              signerRequestId,
+              registerState: 'Transaction posted, Waiting for transaction authorization'
+            })
+          })
+        });

        return api.pollMethod('parity_checkRequest', signerRequestId);
      })
      .then((txHash) => {
-        this.setState({ txHash, registerState: 'Transaction authorized, Waiting for network confirmations' });
+        this.setState({
+          events: Object.assign({}, this.state.events, {
+            [eventId]: Object.assign({}, this.state.events[eventId], {
+              txHash,
+              registerState: 'Transaction authorized, Waiting for network confirmations'
+            })
+          })
+        });

        return api.pollMethod('eth_getTransactionReceipt', txHash, (receipt) => {
          if (!receipt || !receipt.blockNumber || receipt.blockNumber.eq(0)) {
@@ -304,27 +328,72 @@ export default class Application extends Component {
        });
      })
      .then((txReceipt) => {
-        this.setState({ txReceipt, registerBusy: false, registerState: 'Network confirmed, Received transaction receipt', url: '', commit: '', repo: '', commitError: null, contentHash: '', contentHashOwner: null, contentHashError: null });
+        this.setState({
+          events: Object.assign({}, this.state.events, {
+            [eventId]: Object.assign({}, this.state.events[eventId], {
+              txReceipt,
+              registerBusy: false,
+              registerState: 'Network confirmed, Received transaction receipt'
+            })
+          })
+        });
      })
      .catch((error) => {
        console.error('onSend', error);
-        this.setState({ registerError: error.message });
+
+        this.setState({
+          events: Object.assign({}, this.state.events, {
+            [eventId]: Object.assign({}, this.state.events[eventId], {
+              registerState: error.message,
+              registerError: true,
+              registerBusy: false
+            })
+          })
+        });
      });
  }

-  registerContent (repo, commit) {
+  registerContent (contentRepo, contentCommit) {
    const { contentHash, fromAddress, instance } = this.state;
+    contentCommit = contentCommit.substr(0, 2) === '0x' ? contentCommit : `0x${contentCommit}`;

-    this.setState({ registerBusy: true, registerState: 'Estimating gas for the transaction' });
-
-    const values = [contentHash, repo, commit.substr(0, 2) === '0x' ? commit : `0x${commit}`];
+    const eventId = nextEventId++;
+    const values = [contentHash, contentRepo, contentCommit];
    const options = { from: fromAddress };

+    this.setState({
+      eventIds: [eventId].concat(this.state.eventIds),
+      events: Object.assign({}, this.state.events, {
+        [eventId]: {
+          contentHash,
+          contentRepo,
+          contentCommit,
+          fromAddress,
+          registerBusy: true,
+          registerState: 'Estimating gas for the transaction',
+          timestamp: new Date()
+        }
+      }),
+      url: '',
+      commit: '',
+      repo: '',
+      commitError: null,
+      contentHash: '',
+      contentHashOwner: null,
+      contentHashError: null
+    });
+
    this.trackRequest(
-      instance
+      eventId, instance
        .hint.estimateGas(options, values)
        .then((gas) => {
-          this.setState({ registerState: 'Gas estimated, Posting transaction to the network' });
+          this.setState({
+            events: Object.assign({}, this.state.events, {
+              [eventId]: Object.assign({}, this.state.events[eventId], {
+                registerState: 'Gas estimated, Posting transaction to the network'
+              })
+            })
+          });

          const gasPassed = gas.mul(1.2);
          options.gas = gasPassed.toFixed(0);
@@ -335,19 +404,45 @@ export default class Application extends Component {
    );
  }

-  registerUrl (url) {
+  registerUrl (contentUrl) {
    const { contentHash, fromAddress, instance } = this.state;

-    this.setState({ registerBusy: true, registerState: 'Estimating gas for the transaction' });
-
-    const values = [contentHash, url];
+    const eventId = nextEventId++;
+    const values = [contentHash, contentUrl];
    const options = { from: fromAddress };

+    this.setState({
+      eventIds: [eventId].concat(this.state.eventIds),
+      events: Object.assign({}, this.state.events, {
+        [eventId]: {
+          contentHash,
+          contentUrl,
+          fromAddress,
+          registerBusy: true,
+          registerState: 'Estimating gas for the transaction',
+          timestamp: new Date()
+        }
+      }),
+      url: '',
+      commit: '',
+      repo: '',
+      commitError: null,
+      contentHash: '',
+      contentHashOwner: null,
+      contentHashError: null
+    });
+
    this.trackRequest(
-      instance
+      eventId, instance
        .hintURL.estimateGas(options, values)
        .then((gas) => {
-          this.setState({ registerState: 'Gas estimated, Posting transaction to the network' });
+          this.setState({
+            events: Object.assign({}, this.state.events, {
+              [eventId]: Object.assign({}, this.state.events[eventId], {
+                registerState: 'Gas estimated, Posting transaction to the network'
+              })
+            })
+          });

          const gasPassed = gas.mul(1.2);
          options.gas = gasPassed.toFixed(0);
--- a/js/src/dapps/githubhint/Events/events.css
+++ b/js/src/dapps/githubhint/Events/events.css
@@ -0,0 +1,37 @@
+/* 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/>.
+*/
+
+.list {
+  border: none;
+  margin: 0 auto;
+  text-align: left;
+  vertical-align: top;
+
+  tr {
+    &[data-busy="true"] {
+      opacity: 0.5;
+    }
+
+    &[data-error="true"] {
+      color: #f66;
+    }
+  }
+
+  td {
+    padding: 0.5em;
+  }
+}
--- a/js/src/dapps/githubhint/Events/events.js
+++ b/js/src/dapps/githubhint/Events/events.js
@@ -0,0 +1,52 @@
+// 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 moment from 'moment';
+
+import styles from './events.css';
+
+export default class Events extends Component {
+  static propTypes = {
+    eventIds: PropTypes.array.isRequired,
+    events: PropTypes.array.isRequired
+  }
+
+  render () {
+    return (
+      <table className={ styles.list }>
+        <tbody>
+          { this.props.eventIds.map((id) => this.renderEvent(id, this.props.events[id])) }
+        </tbody>
+      </table>
+    );
+  }
+
+  renderEvent = (eventId, event) => {
+    return (
+      <tr key={ `event_${eventId}` } data-busy={ event.registerBusy } data-error={ event.registerError }>
+        <td>
+          <div>{ moment(event.timestamp).fromNow() }</div>
+          <div>{ event.registerState }</div>
+        </td>
+        <td>
+          <div>{ event.contentUrl || `${event.contentRepo}/${event.contentCommit}` }</div>
+          <div>{ event.contentHash }</div>
+        </td>
+      </tr>
+    );
+  }
+}
--- a/js/src/dapps/githubhint/Events/index.js
+++ b/js/src/dapps/githubhint/Events/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 './events';
--- a/js/src/jsonrpc/interfaces/trace.js
+++ b/js/src/jsonrpc/interfaces/trace.js
@@ -14,9 +14,45 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import { BlockNumber, Hash, Integer } from '../types';
+import { BlockNumber, Data, Hash, Integer } from '../types';

 export default {
+  block: {
+    desc: 'Returns traces created at given block',
+    params: [
+      {
+        type: BlockNumber,
+        desc: 'Integer block number, or \'latest\' for the last mined block or \'pending\', \'earliest\' for not yet mined transactions'
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Block traces'
+    }
+  },
+
+  call: {
+    desc: 'Returns traces for a specific call',
+    params: [
+      {
+        type: Object,
+        desc: 'Call options'
+      },
+      {
+        type: BlockNumber,
+        desc: 'The blockNumber'
+      },
+      {
+        type: Array,
+        desc: 'Type of trace, one or more of \'vmTrace\', \'trace\' and/or \'stateDiff\''
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Block traces'
+    }
+  },
+
  filter: {
    desc: 'Returns traces matching given filter',
    params: [
@@ -49,6 +85,42 @@ export default {
    }
  },

+  rawTransaction: {
+    desc: 'Traces a call to eth_sendRawTransaction without making the call, returning the traces',
+    params: [
+      {
+        type: Data,
+        desc: 'Transaction data'
+      },
+      {
+        type: Array,
+        desc: 'Type of trace, one or more of \'vmTrace\', \'trace\' and/or \'stateDiff\''
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Block traces'
+    }
+  },
+
+  replayTransaction: {
+    desc: 'Replays a transaction, returning the traces',
+    params: [
+      {
+        type: Hash,
+        desc: 'Transaction hash'
+      },
+      {
+        type: Array,
+        desc: 'Type of trace, one or more of \'vmTrace\', \'trace\' and/or \'stateDiff\''
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Block traces'
+    }
+  },
+
  transaction: {
    desc: 'Returns all traces of given transaction',
    params: [
@@ -61,19 +133,5 @@ export default {
      type: Array,
      desc: 'Traces of given transaction'
    }
-  },
-
-  block: {
-    desc: 'Returns traces created at given block',
-    params: [
-      {
-        type: BlockNumber,
-        desc: 'Integer block number, or \'latest\' for the last mined block or \'pending\', \'earliest\' for not yet mined transactions'
-      }
-    ],
-    returns: {
-      type: Array,
-      desc: 'Block traces'
-    }
  }
 };
--- a/js/src/library.js
+++ b/js/src/library.js
@@ -14,10 +14,22 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

+import 'babel-polyfill/dist/polyfill.js';
+import es6Promise from 'es6-promise';
+es6Promise.polyfill();
+
+const isNode = typeof global !== 'undefined' && typeof global !== 'undefined';
+const isBrowser = typeof self !== 'undefined' && typeof self.window !== 'undefined';
+
+if (isBrowser) {
+  require('whatwg-fetch');
+}
+
+if (isNode) {
+  global.fetch = require('node-fetch');
+}
+
 import Abi from './abi';
 import Api from './api';

-export {
-  Abi,
-  Api
-};
+module.exports = { Api, Abi };
--- a/js/src/modals/AddContract/addContract.css
+++ b/js/src/modals/AddContract/addContract.css
@@ -14,19 +14,3 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
-
-.spaced {
-  margin: 0.25em 0;
-}
-
-.typeContainer {
-  display: flex;
-  flex-direction: column;
-
-  .desc {
-    font-size: 0.8em;
-    margin-bottom: 0.5em;
-    color: #ccc;
-    z-index: 2;
-  }
-}
--- a/js/src/modals/AddContract/addContract.js
+++ b/js/src/modals/AddContract/addContract.js
@@ -20,13 +20,10 @@ import ContentClear from 'material-ui/svg-icons/content/clear';
 import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';

-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
-
-import { Button, Modal, Form, Input, InputAddress } from '../../ui';
+import { Button, Modal, Form, Input, InputAddress, RadioButtons } from '../../ui';
 import { ERRORS, validateAbi, validateAddress, validateName } from '../../util/validation';

 import { eip20, wallet } from '../../contracts/abi';
-import styles from './addContract.css';

 const ABI_TYPES = [
  {
@@ -105,13 +102,12 @@ export default class AddContract extends Component {
    const { abiTypeIndex } = this.state;

    return (
-      <RadioButtonGroup
-        valueSelected={ abiTypeIndex }
+      <RadioButtons
        name='contractType'
+        value={ abiTypeIndex }
+        values={ this.getAbiTypes() }
        onChange={ this.onChangeABIType }
-      >
-        { this.renderAbiTypes() }
-      </RadioButtonGroup>
+      />
    );
  }

@@ -194,20 +190,13 @@ export default class AddContract extends Component {
    );
  }

-  renderAbiTypes () {
-    return ABI_TYPES.map((type, index) => (
-      <RadioButton
-        className={ styles.spaced }
-        value={ index }
-        label={ (
-          <div className={ styles.typeContainer }>
-            <span>{ type.label }</span>
-            <span className={ styles.desc }>{ type.description }</span>
-          </div>
-        ) }
-        key={ index }
-      />
-    ));
+  getAbiTypes () {
+    return ABI_TYPES.map((type, index) => ({
+      label: type.label,
+      description: type.description,
+      key: index,
+      ...type
+    }));
  }

  onNext = () => {
@@ -218,8 +207,8 @@ export default class AddContract extends Component {
    this.setState({ step: this.state.step - 1 });
  }

-  onChangeABIType = (event, index) => {
-    const abiType = ABI_TYPES[index];
+  onChangeABIType = (value, index) => {
+    const abiType = value || ABI_TYPES[index];
    this.setState({ abiTypeIndex: index, abiType });
    this.onEditAbi(abiType.value);
  }
--- a/js/src/modals/DeployContract/DetailsStep/detailsStep.js
+++ b/js/src/modals/DeployContract/DetailsStep/detailsStep.js
@@ -15,13 +15,12 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Component, PropTypes } from 'react';
+import { MenuItem } from 'material-ui';

-import { AddressSelect, Form, Input, TypedInput } from '../../../ui';
+import { AddressSelect, Form, Input, Select } from '../../../ui';
 import { validateAbi } from '../../../util/validation';
 import { parseAbiType } from '../../../util/abi';

-import styles from '../deployContract.css';
-
 export default class DetailsStep extends Component {
  static contextTypes = {
    api: PropTypes.object.isRequired
@@ -29,24 +28,26 @@ export default class DetailsStep extends Component {

  static propTypes = {
    accounts: PropTypes.object.isRequired,
-    abi: PropTypes.string,
-    abiError: PropTypes.string,
-    code: PropTypes.string,
-    codeError: PropTypes.string,
-    description: PropTypes.string,
-    descriptionError: PropTypes.string,
+
+    onFromAddressChange: PropTypes.func.isRequired,
+    onNameChange: PropTypes.func.isRequired,
+    onDescriptionChange: PropTypes.func.isRequired,
+    onAbiChange: PropTypes.func.isRequired,
+    onCodeChange: PropTypes.func.isRequired,
+    onParamsChange: PropTypes.func.isRequired,
+    onInputsChange: PropTypes.func.isRequired,
+
    fromAddress: PropTypes.string,
    fromAddressError: PropTypes.string,
    name: PropTypes.string,
    nameError: PropTypes.string,
-    params: PropTypes.array,
-    paramsError: PropTypes.array,
-    onAbiChange: PropTypes.func.isRequired,
-    onCodeChange: PropTypes.func.isRequired,
-    onFromAddressChange: PropTypes.func.isRequired,
-    onDescriptionChange: PropTypes.func.isRequired,
-    onNameChange: PropTypes.func.isRequired,
-    onParamsChange: PropTypes.func.isRequired,
+    description: PropTypes.string,
+    descriptionError: PropTypes.string,
+    abi: PropTypes.string,
+    abiError: PropTypes.string,
+    code: PropTypes.string,
+    codeError: PropTypes.string,
+
    readOnly: PropTypes.bool
  };

@@ -55,7 +56,9 @@ export default class DetailsStep extends Component {
  };

  state = {
-    inputs: []
+    solcOutput: '',
+    contracts: {},
+    selectedContractIndex: 0
  }

  componentDidMount () {
@@ -63,6 +66,7 @@ export default class DetailsStep extends Component {

    if (abi) {
      this.onAbiChange(abi);
+      this.setState({ solcOutput: abi });
    }

    if (code) {
@@ -71,8 +75,19 @@ export default class DetailsStep extends Component {
  }

  render () {
-    const { accounts } = this.props;
-    const { abi, abiError, code, codeError, fromAddress, fromAddressError, name, nameError, readOnly } = this.props;
+    const {
+      accounts,
+      readOnly,
+
+      fromAddress, fromAddressError,
+      name, nameError,
+      description, descriptionError,
+      abiError,
+      code, codeError
+    } = this.props;
+
+    const { solcOutput, contracts } = this.state;
+    const solc = contracts && Object.keys(contracts).length > 0;

    return (
      <Form>
@@ -83,18 +98,30 @@ export default class DetailsStep extends Component {
          error={ fromAddressError }
          accounts={ accounts }
          onChange={ this.onFromAddressChange } />
+
        <Input
          label='contract name'
          hint='a name for the deployed contract'
          error={ nameError }
-          value={ name }
-          onSubmit={ this.onNameChange } />
+          value={ name || '' }
+          onChange={ this.onNameChange } />
+
        <Input
-          label='abi'
-          hint='the abi of the contract to deploy'
+          label='contract description (optional)'
+          hint='a description for the contract'
+          error={ descriptionError }
+          value={ description }
+          onChange={ this.onDescriptionChange } />
+
+        { this.renderContractSelect() }
+
+        <Input
+          label='abi / solc combined-output'
+          hint='the abi of the contract to deploy or solc combined-output'
          error={ abiError }
-          value={ abi }
-          onSubmit={ this.onAbiChange }
+          value={ solcOutput }
+          onChange={ this.onSolcChange }
+          onSubmit={ this.onSolcSubmit }
          readOnly={ readOnly } />
        <Input
          label='code'
@@ -102,66 +129,108 @@ export default class DetailsStep extends Component {
          error={ codeError }
          value={ code }
          onSubmit={ this.onCodeChange }
-          readOnly={ readOnly } />
+          readOnly={ readOnly || solc } />

-        { this.renderConstructorInputs() }
      </Form>
    );
  }

-  renderConstructorInputs () {
-    const { accounts, params, paramsError } = this.props;
-    const { inputs } = this.state;
+  renderContractSelect () {
+    const { contracts } = this.state;

-    if (!inputs || !inputs.length) {
+    if (!contracts || Object.keys(contracts).length === 0) {
      return null;
    }

-    return inputs.map((input, index) => {
-      const onChange = (value) => this.onParamChange(index, value);
+    const { selectedContractIndex } = this.state;
+    const contractsItems = Object.keys(contracts).map((name, index) => (
+      <MenuItem
+        key={ index }
+        label={ name }
+        value={ index }
+      >
+        { name }
+      </MenuItem>
+    ));

-      const label = `${input.name ? `${input.name}: ` : ''}${input.type}`;
-      const value = params[index];
-      const error = paramsError[index];
-      const param = parseAbiType(input.type);
+    return (
+      <Select
+        label='select a contract'
+        onChange={ this.onContractChange }
+        value={ selectedContractIndex }
+      >
+        { contractsItems }
+      </Select>
+    );
+  }

-      return (
-        <div key={ index } className={ styles.funcparams }>
-          <TypedInput
-            label={ label }
-            value={ value }
-            error={ error }
-            accounts={ accounts }
-            onChange={ onChange }
-            param={ param }
-          />
-        </div>
-      );
+  onContractChange = (event, index) => {
+    const { contracts } = this.state;
+    const contractName = Object.keys(contracts)[index];
+    const contract = contracts[contractName];
+
+    if (!this.props.name || this.props.name.trim() === '') {
+      this.onNameChange(null, contractName);
+    }
+
+    const { abi, bin } = contract;
+    const code = /^0x/.test(bin) ? bin : `0x${bin}`;
+
+    this.setState({ selectedContractIndex: index }, () => {
+      this.onAbiChange(abi);
+      this.onCodeChange(code);
    });
  }

+  onSolcChange = (event, value) => {
+    // Change triggered only if valid
+    if (this.props.abiError) {
+      return null;
+    }
+
+    this.onSolcSubmit(value);
+  }
+
+  onSolcSubmit = (value) => {
+    try {
+      const solcParsed = JSON.parse(value);
+
+      if (!solcParsed || !solcParsed.contracts) {
+        throw new Error('Wrong solc output');
+      }
+
+      this.setState({ contracts: solcParsed.contracts }, () => {
+        this.onContractChange(null, 0);
+      });
+    } catch (e) {
+      this.setState({ contracts: null });
+      this.onAbiChange(value);
+    }
+
+    this.setState({ solcOutput: value });
+  }
+
  onFromAddressChange = (event, fromAddress) => {
    const { onFromAddressChange } = this.props;

    onFromAddressChange(fromAddress);
  }

-  onNameChange = (name) => {
+  onNameChange = (event, name) => {
    const { onNameChange } = this.props;

    onNameChange(name);
  }

-  onParamChange = (index, value) => {
-    const { params, onParamsChange } = this.props;
+  onDescriptionChange = (event, description) => {
+    const { onDescriptionChange } = this.props;

-    params[index] = value;
-    onParamsChange(params);
+    onDescriptionChange(description);
  }

  onAbiChange = (abi) => {
    const { api } = this.context;
-    const { onAbiChange, onParamsChange } = this.props;
+    const { onAbiChange, onParamsChange, onInputsChange } = this.props;
    const { abiError, abiParsed } = validateAbi(abi, api);

    if (!abiError) {
@@ -176,10 +245,10 @@ export default class DetailsStep extends Component {
      });

      onParamsChange(params);
-      this.setState({ inputs });
+      onInputsChange(inputs);
    } else {
      onParamsChange([]);
-      this.setState({ inputs: [] });
+      onInputsChange([]);
    }

    onAbiChange(abi);
--- a/js/src/modals/DeployContract/ParametersStep/index.js
+++ b/js/src/modals/DeployContract/ParametersStep/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 './parametersStep';
--- a/js/src/modals/DeployContract/ParametersStep/parametersStep.js
+++ b/js/src/modals/DeployContract/ParametersStep/parametersStep.js
@@ -0,0 +1,105 @@
+// 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/>.
+// 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 { Form, TypedInput } from '../../../ui';
+import { parseAbiType } from '../../../util/abi';
+
+import styles from '../deployContract.css';
+
+export default class ParametersStep extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  };
+
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    onParamsChange: PropTypes.func.isRequired,
+
+    inputs: PropTypes.array,
+    params: PropTypes.array,
+    paramsError: PropTypes.array
+  };
+
+  render () {
+    return (
+      <Form>
+        { this.renderConstructorInputs() }
+      </Form>
+    );
+  }
+
+  renderConstructorInputs () {
+    const { accounts, params, paramsError } = this.props;
+    const { inputs } = this.props;
+
+    if (!inputs || !inputs.length) {
+      return null;
+    }
+
+    const inputsComponents = inputs.map((input, index) => {
+      const onChange = (value) => this.onParamChange(index, value);
+
+      const label = `${input.name ? `${input.name}: ` : ''}${input.type}`;
+      const value = params[index];
+      const error = paramsError[index];
+      const param = parseAbiType(input.type);
+
+      return (
+        <div key={ index } className={ styles.funcparams }>
+          <TypedInput
+            label={ label }
+            value={ value }
+            error={ error }
+            accounts={ accounts }
+            onChange={ onChange }
+            param={ param }
+          />
+        </div>
+      );
+    });
+
+    return (
+      <div>
+        <p>Choose the contract parameters</p>
+        { inputsComponents }
+      </div>
+    );
+  }
+
+  onParamChange = (index, value) => {
+    const { params, onParamsChange } = this.props;
+
+    params[index] = value;
+    onParamsChange(params);
+  }
+}
--- a/js/src/modals/DeployContract/deployContract.css
+++ b/js/src/modals/DeployContract/deployContract.css
@@ -31,3 +31,7 @@
 .funcparams {
  padding-left: 3em;
 }
+
+p {
+  color: rgba(255, 255, 255, 0.498039);
+}
--- a/js/src/modals/DeployContract/deployContract.js
+++ b/js/src/modals/DeployContract/deployContract.js
@@ -22,13 +22,19 @@ import { BusyStep, CompletedStep, CopyToClipboard, Button, IdentityIcon, Modal,
 import { ERRORS, validateAbi, validateCode, validateName } from '../../util/validation';

 import DetailsStep from './DetailsStep';
+import ParametersStep from './ParametersStep';
 import ErrorStep from './ErrorStep';

 import styles from './deployContract.css';

 import { ERROR_CODES } from '../../api/transport/error';

-const steps = ['contract details', 'deployment', 'completed'];
+const STEPS = {
+  CONTRACT_DETAILS: { title: 'contract details' },
+  CONTRACT_PARAMETERS: { title: 'contract parameters' },
+  DEPLOYMENT: { title: 'deployment', waiting: true },
+  COMPLETED: { title: 'completed' }
+};

 export default class DeployContract extends Component {
  static contextTypes = {
@@ -55,7 +61,6 @@ export default class DeployContract extends Component {
    abiError: ERRORS.invalidAbi,
    code: '',
    codeError: ERRORS.invalidCode,
-    deployState: '',
    description: '',
    descriptionError: null,
    fromAddress: Object.keys(this.props.accounts)[0],
@@ -64,9 +69,12 @@ export default class DeployContract extends Component {
    nameError: ERRORS.invalidName,
    params: [],
    paramsError: [],
-    step: 0,
+    inputs: [],
+
+    deployState: '',
    deployError: null,
-    rejected: false
+    rejected: false,
+    step: 'CONTRACT_DETAILS'
  }

  componentWillMount () {
@@ -95,20 +103,30 @@ export default class DeployContract extends Component {
  }

  render () {
-    const { step, deployError, rejected } = this.state;
+    const { step, deployError, rejected, inputs } = this.state;
+
+    const realStep = Object.keys(STEPS).findIndex((k) => k === step);
+    const realSteps = deployError || rejected
+      ? null
+      : Object.keys(STEPS)
+        .filter((k) => k !== 'CONTRACT_PARAMETERS' || inputs.length > 0)
+        .map((k) => STEPS[k]);

-    const realSteps = deployError || rejected ? null : steps;
    const title = realSteps
      ? null
      : (deployError ? 'deployment failed' : 'rejected');

+    const waiting = realSteps
+      ? realSteps.map((s, i) => s.waiting ? i : false).filter((v) => v !== false)
+      : null;
+
    return (
      <Modal
        actions={ this.renderDialogActions() }
-        current={ step }
-        steps={ realSteps }
+        current={ realStep }
+        steps={ realSteps ? realSteps.map((s) => s.title) : null }
        title={ title }
-        waiting={ realSteps ? [1] : null }
+        waiting={ waiting }
        visible
        scroll>
        { this.renderStep() }
@@ -146,20 +164,29 @@ export default class DeployContract extends Component {
    }

    switch (step) {
-      case 0:
+      case 'CONTRACT_DETAILS':
        return [
          cancelBtn,
          <Button
            disabled={ !isValid }
+            icon={ <IdentityIcon button address={ fromAddress } /> }
+            label='Next'
+            onClick={ this.onParametersStep } />
+        ];
+
+      case 'CONTRACT_PARAMETERS':
+        return [
+          cancelBtn,
+          <Button
            icon={ <IdentityIcon button address={ fromAddress } /> }
            label='Create'
            onClick={ this.onDeployStart } />
        ];

-      case 1:
+      case 'DEPLOYMENT':
        return [ closeBtn ];

-      case 2:
+      case 'COMPLETED':
        return [ closeBtnOk ];
    }
  }
@@ -184,21 +211,33 @@ export default class DeployContract extends Component {
    }

    switch (step) {
-      case 0:
+      case 'CONTRACT_DETAILS':
        return (
          <DetailsStep
            { ...this.state }
-            readOnly={ readOnly }
            accounts={ accounts }
-            onAbiChange={ this.onAbiChange }
-            onCodeChange={ this.onCodeChange }
+            readOnly={ readOnly }
            onFromAddressChange={ this.onFromAddressChange }
            onDescriptionChange={ this.onDescriptionChange }
            onNameChange={ this.onNameChange }
-            onParamsChange={ this.onParamsChange } />
+            onAbiChange={ this.onAbiChange }
+            onCodeChange={ this.onCodeChange }
+            onParamsChange={ this.onParamsChange }
+            onInputsChange={ this.onInputsChange }
+          />
        );

-      case 1:
+      case 'CONTRACT_PARAMETERS':
+        return (
+          <ParametersStep
+            { ...this.state }
+            readOnly={ readOnly }
+            accounts={ accounts }
+            onParamsChange={ this.onParamsChange }
+          />
+        );
+
+      case 'DEPLOYMENT':
        const body = txhash
          ? <TxHash hash={ txhash } />
          : null;
@@ -210,7 +249,7 @@ export default class DeployContract extends Component {
          </BusyStep>
        );

-      case 2:
+      case 'COMPLETED':
        return (
          <CompletedStep>
            <div>Your contract has been deployed at</div>
@@ -225,12 +264,23 @@ export default class DeployContract extends Component {
    }
  }

+  onParametersStep = () => {
+    const { inputs } = this.state;
+
+    if (inputs.length) {
+      return this.setState({ step: 'CONTRACT_PARAMETERS' });
+    }
+
+    return this.onDeployStart();
+  }
+
  onDescriptionChange = (description) => {
    this.setState({ description, descriptionError: null });
  }

  onFromAddressChange = (fromAddress) => {
    const { api } = this.context;
+
    const fromAddressError = api.util.isAddressValid(fromAddress)
      ? null
      : 'a valid account as the contract owner needs to be selected';
@@ -246,6 +296,10 @@ export default class DeployContract extends Component {
    this.setState({ params });
  }

+  onInputsChange = (inputs) => {
+    this.setState({ inputs });
+  }
+
  onAbiChange = (abi) => {
    const { api } = this.context;

@@ -267,7 +321,7 @@ export default class DeployContract extends Component {
      from: fromAddress
    };

-    this.setState({ step: 1 });
+    this.setState({ step: 'DEPLOYMENT' });

    api
      .newContract(abiParsed)
@@ -286,7 +340,7 @@ export default class DeployContract extends Component {
        ])
        .then(() => {
          console.log(`contract deployed at ${address}`);
-          this.setState({ step: 2, address });
+          this.setState({ step: 'DEPLOYMENT', address });
        });
      })
      .catch((error) => {
--- a/js/src/modals/SMSVerification/Done/done.css
+++ b/js/src/modals/SMSVerification/Done/done.css
@@ -0,0 +1,31 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.spacing {
+  margin-top: 1.5em;
+}
+
+.container {
+  margin-top: .5em;
+  display: flex;
+  align-items: center;
+}
+
+.message {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: .5em;
+}
--- a/js/src/modals/SMSVerification/Done/done.js
+++ b/js/src/modals/SMSVerification/Done/done.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import SuccessIcon from 'material-ui/svg-icons/navigation/check';
+
+import styles from './done.css';
+
+export default class Done extends Component {
+  render () {
+    return (
+      <div className={ styles.container }>
+        <SuccessIcon />
+        <p className={ styles.message }>Congratulations, your account is verified!</p>
+      </div>
+    );
+  }
+}
--- a/js/src/modals/SMSVerification/Done/index.js
+++ b/js/src/modals/SMSVerification/Done/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 './done';
--- a/js/src/modals/SMSVerification/GatherData/gatherData.css
+++ b/js/src/modals/SMSVerification/GatherData/gatherData.css
@@ -0,0 +1,49 @@
+/* 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/>.
+*/
+
+.list li {
+  padding: .1em 0;
+}
+
+.spacing {
+  margin-top: 1.5em;
+}
+
+.container {
+  margin-top: .5em;
+  display: flex;
+  align-items: center;
+}
+.message {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: .5em;
+}
+
+.terms {
+  line-height: 1.3;
+  opacity: .7;
+
+  ul {
+    padding-left: 1.5em;
+  }
+
+  li {
+    margin-top: .2em;
+    margin-bottom: .2em;
+  }
+}
--- a/js/src/modals/SMSVerification/GatherData/gatherData.js
+++ b/js/src/modals/SMSVerification/GatherData/gatherData.js
@@ -0,0 +1,151 @@
+// 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 nullable from '../../../util/nullable-proptype';
+import BigNumber from 'bignumber.js';
+import { Checkbox } from 'material-ui';
+import InfoIcon from 'material-ui/svg-icons/action/info-outline';
+import SuccessIcon from 'material-ui/svg-icons/navigation/check';
+import ErrorIcon from 'material-ui/svg-icons/navigation/close';
+
+import { fromWei } from '../../../api/util/wei';
+import { Form, Input } from '../../../ui';
+
+import terms from '../terms-of-service';
+import styles from './gatherData.css';
+
+export default class GatherData extends Component {
+  static propTypes = {
+    fee: React.PropTypes.instanceOf(BigNumber),
+    isNumberValid: PropTypes.bool.isRequired,
+    isVerified: nullable(PropTypes.bool.isRequired),
+    hasRequested: nullable(PropTypes.bool.isRequired),
+    setNumber: PropTypes.func.isRequired,
+    setConsentGiven: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { isNumberValid, isVerified } = this.props;
+
+    return (
+      <Form>
+        <p>The following steps will let you prove that you control both an account and a phone number.</p>
+        <ol className={ styles.list }>
+          <li>You send a verification request to a specific contract.</li>
+          <li>Our server puts a puzzle into this contract.</li>
+          <li>The code you receive via SMS is the solution to this puzzle.</li>
+        </ol>
+        { this.renderFee() }
+        { this.renderCertified() }
+        { this.renderRequested() }
+        <Input
+          label={ 'phone number' }
+          hint={ 'the SMS will be sent to this number' }
+          error={ isNumberValid ? null : 'invalid number' }
+          disabled={ isVerified }
+          onChange={ this.numberOnChange }
+          onSubmit={ this.numberOnSubmit }
+        />
+        <Checkbox
+          className={ styles.spacing }
+          label={ 'I agree to the terms and conditions below.' }
+          disabled={ isVerified }
+          onCheck={ this.consentOnChange }
+        />
+        <div className={ styles.terms }>{ terms }</div>
+      </Form>
+    );
+  }
+
+  renderFee () {
+    const { fee } = this.props;
+
+    if (!fee) {
+      return (<p>Fetching the fee…</p>);
+    }
+    return (
+      <div className={ styles.container }>
+        <InfoIcon />
+        <p className={ styles.message }>The fee is { fromWei(fee).toFixed(3) } ETH.</p>
+      </div>
+    );
+  }
+
+  renderCertified () {
+    const { isVerified } = this.props;
+
+    if (isVerified) {
+      return (
+        <div className={ styles.container }>
+          <ErrorIcon />
+          <p className={ styles.message }>Your account is already verified.</p>
+        </div>
+      );
+    } else if (isVerified === false) {
+      return (
+        <div className={ styles.container }>
+          <SuccessIcon />
+          <p className={ styles.message }>Your account is not verified yet.</p>
+        </div>
+      );
+    }
+    return (
+      <p className={ styles.message }>Checking if your account is verified…</p>
+    );
+  }
+
+  renderRequested () {
+    const { isVerified, hasRequested } = this.props;
+
+    // If the account is verified, don't show that it has requested verification.
+    if (isVerified) {
+      return null;
+    }
+
+    if (hasRequested) {
+      return (
+        <div className={ styles.container }>
+          <InfoIcon />
+          <p className={ styles.message }>You already requested verification.</p>
+        </div>
+      );
+    }
+    if (hasRequested === false) {
+      return (
+        <div className={ styles.container }>
+          <SuccessIcon />
+          <p className={ styles.message }>You did not request verification yet.</p>
+        </div>
+      );
+    }
+    return (
+      <p className={ styles.message }>Checking if you requested verification…</p>
+    );
+  }
+
+  numberOnSubmit = (value) => {
+    this.props.setNumber(value);
+  }
+
+  numberOnChange = (_, value) => {
+    this.props.setNumber(value);
+  }
+
+  consentOnChange = (_, consentGiven) => {
+    this.props.setConsentGiven(consentGiven);
+  }
+}
--- a/js/src/modals/SMSVerification/GatherData/index.js
+++ b/js/src/modals/SMSVerification/GatherData/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 './gatherData';
--- a/js/src/modals/SMSVerification/QueryCode/index.js
+++ b/js/src/modals/SMSVerification/QueryCode/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 './queryCode';
--- a/js/src/modals/SMSVerification/QueryCode/queryCode.js
+++ b/js/src/modals/SMSVerification/QueryCode/queryCode.js
@@ -0,0 +1,52 @@
+// 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 { Form, Input } from '../../../ui';
+
+export default class QueryCode extends Component {
+  static propTypes = {
+    number: PropTypes.string.isRequired,
+    isCodeValid: PropTypes.bool.isRequired,
+    setCode: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { number, isCodeValid } = this.props;
+
+    return (
+      <Form>
+        <p>The verification code has been sent to { number }.</p>
+        <Input
+          label={ 'verification code' }
+          hint={ 'Enter the code you received via SMS.' }
+          error={ isCodeValid ? null : 'invalid code' }
+          onChange={ this.onChange }
+          onSubmit={ this.onSubmit }
+        />
+      </Form>
+    );
+  }
+
+  onChange = (_, code) => {
+    this.props.setCode(code.trim());
+  }
+
+  onSubmit = (code) => {
+    this.props.setCode(code.trim());
+  }
+}
--- a/js/src/modals/SMSVerification/SMSVerification.js
+++ b/js/src/modals/SMSVerification/SMSVerification.js
@@ -0,0 +1,176 @@
+// 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 { observer } from 'mobx-react';
+import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import { Button, IdentityIcon, Modal } from '../../ui';
+
+import {
+  LOADING,
+  QUERY_DATA,
+  POSTING_REQUEST, POSTED_REQUEST,
+  REQUESTING_SMS, REQUESTED_SMS,
+  POSTING_CONFIRMATION, POSTED_CONFIRMATION,
+  DONE
+} from './store';
+
+import GatherData from './GatherData';
+import SendRequest from './SendRequest';
+import QueryCode from './QueryCode';
+import SendConfirmation from './SendConfirmation';
+import Done from './Done';
+
+@observer
+export default class SMSVerification extends Component {
+  static propTypes = {
+    store: PropTypes.any.isRequired,
+    account: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired
+  }
+
+  static phases = { // mapping (store steps -> steps)
+    [LOADING]: 0,
+    [QUERY_DATA]: 1,
+    [POSTING_REQUEST]: 2, [POSTED_REQUEST]: 2, [REQUESTING_SMS]: 2,
+    [REQUESTED_SMS]: 3,
+    [POSTING_CONFIRMATION]: 4, [POSTED_CONFIRMATION]: 4,
+    [DONE]: 5
+  }
+
+  render () {
+    const phase = SMSVerification.phases[this.props.store.step];
+    const { error, isStepValid } = this.props.store;
+
+    return (
+      <Modal
+        actions={ this.renderDialogActions(phase, error, isStepValid) }
+        title='verify your account via SMS'
+        visible scroll
+        current={ phase }
+        steps={ ['Prepare', 'Enter Data', 'Request', 'Enter Code', 'Confirm', 'Done!'] }
+        waiting={ error ? [] : [ 0, 2, 4 ] }
+      >
+        { this.renderStep(phase, error) }
+      </Modal>
+    );
+  }
+
+  renderDialogActions (phase, error, isStepValid) {
+    const { store, account, onClose } = this.props;
+
+    const cancel = (
+      <Button
+        key='cancel' label='Cancel'
+        icon={ <ContentClear /> }
+        onClick={ onClose }
+      />
+    );
+    if (error) {
+      return (<div>{ cancel }</div>);
+    }
+
+    if (phase === 5) {
+      return (
+        <div>
+          { cancel }
+          <Button
+            key='done' label='Done'
+            disabled={ !isStepValid }
+            icon={ <ActionDoneAll /> }
+            onClick={ onClose }
+          />
+        </div>
+      );
+    }
+
+    let action = () => {};
+    switch (phase) {
+      case 1:
+        action = store.sendRequest;
+        break;
+      case 2:
+        action = store.queryCode;
+        break;
+      case 3:
+        action = store.sendConfirmation;
+        break;
+      case 4:
+        action = store.done;
+        break;
+    }
+
+    return (
+      <div>
+        { cancel }
+        <Button
+          key='next' label='Next'
+          disabled={ !isStepValid }
+          icon={ <IdentityIcon address={ account } button /> }
+          onClick={ action }
+        />
+      </div>
+    );
+  }
+
+  renderStep (phase, error) {
+    if (error) {
+      return (<p>{ error }</p>);
+    }
+
+    const {
+      step,
+      fee, number, isNumberValid, isVerified, hasRequested,
+      requestTx, isCodeValid, confirmationTx,
+      setNumber, setConsentGiven, setCode
+    } = this.props.store;
+
+    if (phase === 5) {
+      return (<Done />);
+    }
+    if (phase === 4) {
+      return (<SendConfirmation step={ step } tx={ confirmationTx } />);
+    }
+    if (phase === 3) {
+      return (
+        <QueryCode
+          number={ number } fee={ fee } isCodeValid={ isCodeValid }
+          setCode={ setCode }
+        />
+      );
+    }
+    if (phase === 2) {
+      return (<SendRequest step={ step } tx={ requestTx } />);
+    }
+    if (phase === 1) {
+      const { setNumber, setConsentGiven } = this.props.store;
+      return (
+        <GatherData
+          fee={ fee } isNumberValid={ isNumberValid }
+          isVerified={ isVerified } hasRequested={ hasRequested }
+          setNumber={ setNumber } setConsentGiven={ setConsentGiven }
+        />
+      );
+    }
+    if (phase === 0) {
+      return (<p>Preparing awesomeness!</p>);
+    }
+
+    return null;
+  }
+}
--- a/js/src/modals/SMSVerification/SendConfirmation/index.js
+++ b/js/src/modals/SMSVerification/SendConfirmation/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 './sendConfirmation';
--- a/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.css
+++ b/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.css
@@ -0,0 +1,20 @@
+/* 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/>.
+*/
+
+.centered {
+  text-align: center;
+}
--- a/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.js
+++ b/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.js
@@ -0,0 +1,51 @@
+// 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 nullable from '../../../util/nullable-proptype';
+
+import TxHash from '../../../ui/TxHash';
+import {
+  POSTING_CONFIRMATION, POSTED_CONFIRMATION
+} from '../store';
+
+import styles from './sendConfirmation.css';
+
+export default class SendConfirmation extends Component {
+  static propTypes = {
+    step: PropTypes.any.isRequired,
+    tx: nullable(PropTypes.any.isRequired)
+  }
+
+  render () {
+    const { step, tx } = this.props;
+
+    if (step === POSTING_CONFIRMATION) {
+      return (<p>The verification code will be sent to the contract. Please authorize this using the Parity Signer.</p>);
+    }
+
+    if (step === POSTED_CONFIRMATION) {
+      return (
+        <div className={ styles.centered }>
+          <TxHash hash={ tx } maxConfirmations={ 2 } />
+          <p>Please keep this window open.</p>
+        </div>
+      );
+    }
+
+    return null;
+  }
+}
--- a/js/src/modals/SMSVerification/SendRequest/index.js
+++ b/js/src/modals/SMSVerification/SendRequest/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 './sendRequest';
--- a/js/src/modals/SMSVerification/SendRequest/sendRequest.css
+++ b/js/src/modals/SMSVerification/SendRequest/sendRequest.css
@@ -0,0 +1,20 @@
+/* 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/>.
+*/
+
+.centered {
+  text-align: center;
+}
--- a/js/src/modals/SMSVerification/SendRequest/sendRequest.js
+++ b/js/src/modals/SMSVerification/SendRequest/sendRequest.js
@@ -0,0 +1,57 @@
+// 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 nullable from '../../../util/nullable-proptype';
+
+import TxHash from '../../../ui/TxHash';
+import {
+  POSTING_REQUEST, POSTED_REQUEST, REQUESTING_SMS
+} from '../store';
+
+import styles from './sendRequest.css';
+
+export default class SendRequest extends Component {
+  static propTypes = {
+    step: PropTypes.any.isRequired,
+    tx: nullable(PropTypes.any.isRequired)
+  }
+
+  render () {
+    const { step, tx } = this.props;
+
+    switch (step) {
+      case POSTING_REQUEST:
+        return (<p>A verification request will be sent to the contract. Please authorize this using the Parity Signer.</p>);
+
+      case POSTED_REQUEST:
+        return (
+          <div className={ styles.centered }>
+            <TxHash hash={ tx } maxConfirmations={ 1 } />
+            <p>Please keep this window open.</p>
+          </div>
+        );
+
+      case REQUESTING_SMS:
+        return (
+          <p>Requesting an SMS from the Parity server.</p>
+        );
+
+      default:
+        return null;
+    }
+  }
+}
--- a/js/src/modals/SMSVerification/index.js
+++ b/js/src/modals/SMSVerification/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 './SMSVerification';
--- a/js/src/modals/SMSVerification/store.js
+++ b/js/src/modals/SMSVerification/store.js
@@ -0,0 +1,246 @@
+// 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 { observable, computed, autorun, action } from 'mobx';
+import phone from 'phoneformat.js';
+import { sha3 } from '../../api/util/sha3';
+
+import Contracts from '../../contracts';
+
+import { checkIfVerified, checkIfRequested, postToServer } from '../../contracts/sms-verification';
+import checkIfTxFailed from '../../util/check-if-tx-failed';
+import waitForConfirmations from '../../util/wait-for-block-confirmations';
+
+const validCode = /^[A-Z\s]+$/i;
+
+export const LOADING = 'fetching-contract';
+export const QUERY_DATA = 'query-data';
+export const POSTING_REQUEST = 'posting-request';
+export const POSTED_REQUEST = 'posted-request';
+export const REQUESTING_SMS = 'requesting-sms';
+export const REQUESTED_SMS = 'requested-sms';
+export const QUERY_CODE = 'query-code';
+export const POSTING_CONFIRMATION = 'posting-confirmation';
+export const POSTED_CONFIRMATION = 'posted-confirmation';
+export const DONE = 'done';
+
+export default class VerificationStore {
+  @observable step = null;
+  @observable error = null;
+
+  @observable contract = null;
+  @observable fee = null;
+  @observable isVerified = null;
+  @observable hasRequested = null;
+  @observable consentGiven = false;
+  @observable number = '';
+  @observable requestTx = null;
+  @observable code = '';
+  @observable confirmationTx = null;
+
+  @computed get isCodeValid () {
+    return validCode.test(this.code);
+  }
+  @computed get isNumberValid () {
+    return phone.isValidNumber(this.number);
+  }
+
+  @computed get isStepValid () {
+    if (this.step === DONE) {
+      return true;
+    }
+    if (this.error) {
+      return false;
+    }
+
+    switch (this.step) {
+      case LOADING:
+        return this.contract && this.fee && this.isVerified !== null && this.hasRequested !== null;
+      case QUERY_DATA:
+        return this.isNumberValid && this.consentGiven;
+      case REQUESTED_SMS:
+        return this.requestTx;
+      case QUERY_CODE:
+        return this.isCodeValid;
+      case POSTED_CONFIRMATION:
+        return this.confirmationTx;
+      default:
+        return false;
+    }
+  }
+
+  constructor (api, account) {
+    this.api = api;
+    this.account = account;
+
+    this.step = LOADING;
+    Contracts.create(api).registry.getContract('smsVerification')
+      .then((contract) => {
+        this.contract = contract;
+        this.load();
+      })
+      .catch((err) => {
+        this.error = 'Failed to fetch the contract: ' + err.message;
+      });
+
+    autorun(() => {
+      if (this.error) {
+        console.error('sms verification: ' + this.error);
+      }
+    });
+  }
+
+  @action load = () => {
+    const { contract, account } = this;
+    this.step = LOADING;
+
+    const fee = contract.instance.fee.call()
+      .then((fee) => {
+        this.fee = fee;
+      })
+      .catch((err) => {
+        this.error = 'Failed to fetch the fee: ' + err.message;
+      });
+
+    const isVerified = checkIfVerified(contract, account)
+      .then((isVerified) => {
+        this.isVerified = isVerified;
+      })
+      .catch((err) => {
+        this.error = 'Failed to check if verified: ' + err.message;
+      });
+
+    const hasRequested = checkIfRequested(contract, account)
+      .then((txHash) => {
+        this.hasRequested = !!txHash;
+        if (txHash) {
+          this.requestTx = txHash;
+        }
+      })
+      .catch((err) => {
+        this.error = 'Failed to check if requested: ' + err.message;
+      });
+
+    Promise
+      .all([ fee, isVerified, hasRequested ])
+      .then(() => {
+        this.step = QUERY_DATA;
+      });
+  }
+
+  @action setNumber = (number) => {
+    this.number = number;
+  }
+
+  @action setConsentGiven = (consentGiven) => {
+    this.consentGiven = consentGiven;
+  }
+
+  @action setCode = (code) => {
+    this.code = code;
+  }
+
+  @action sendRequest = () => {
+    const { api, account, contract, fee, number, hasRequested } = this;
+
+    const request = contract.functions.find((fn) => fn.name === 'request');
+    const options = { from: account, value: fee.toString() };
+
+    let chain = Promise.resolve();
+    if (!hasRequested) {
+      this.step = POSTING_REQUEST;
+      chain = request.estimateGas(options, [])
+        .then((gas) => {
+          options.gas = gas.mul(1.2).toFixed(0);
+          return request.postTransaction(options, []);
+        })
+        .then((handle) => {
+          // TODO: The "request rejected" error doesn't have any property to
+          // distinguish it from other errors, so we can't give a meaningful error here.
+          return api.pollMethod('parity_checkRequest', handle);
+        })
+        .then((txHash) => {
+          this.requestTx = txHash;
+          return checkIfTxFailed(api, txHash, options.gas)
+            .then((hasFailed) => {
+              if (hasFailed) {
+                throw new Error('Transaction failed, all gas used up.');
+              }
+              this.step = POSTED_REQUEST;
+              return waitForConfirmations(api, txHash, 1);
+            });
+        });
+    }
+
+    chain
+      .then(() => {
+        this.step = REQUESTING_SMS;
+        return postToServer({ number, address: account });
+      })
+      .then(() => {
+        this.step = REQUESTED_SMS;
+      })
+      .catch((err) => {
+        this.error = 'Failed to request a confirmation SMS: ' + err.message;
+      });
+  }
+
+  @action queryCode = () => {
+    this.step = QUERY_CODE;
+  }
+
+  @action sendConfirmation = () => {
+    const { api, account, contract, code } = this;
+    const token = sha3(code);
+
+    const confirm = contract.functions.find((fn) => fn.name === 'confirm');
+    const options = { from: account };
+    const values = [ token ];
+
+    this.step = POSTING_CONFIRMATION;
+    confirm.estimateGas(options, values)
+      .then((gas) => {
+        options.gas = gas.mul(1.2).toFixed(0);
+        return confirm.postTransaction(options, values);
+      })
+      .then((handle) => {
+        // TODO: The "request rejected" error doesn't have any property to
+        // distinguish it from other errors, so we can't give a meaningful error here.
+        return api.pollMethod('parity_checkRequest', handle);
+      })
+      .then((txHash) => {
+        this.confirmationTx = txHash;
+        return checkIfTxFailed(api, txHash, options.gas)
+          .then((hasFailed) => {
+            if (hasFailed) {
+              throw new Error('Transaction failed, all gas used up.');
+            }
+            this.step = POSTED_CONFIRMATION;
+            return waitForConfirmations(api, txHash, 1);
+          });
+      })
+      .then(() => {
+        this.step = DONE;
+      })
+      .catch((err) => {
+        this.error = 'Failed to send the verification code: ' + err.message;
+      });
+  }
+
+  @action done = () => {
+    this.step = DONE;
+  }
+}
--- a/js/src/modals/SMSVerification/terms-of-service.js
+++ b/js/src/modals/SMSVerification/terms-of-service.js
@@ -0,0 +1,27 @@
+// 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 from 'react';
+
+export default (
+  <ul>
+    <li>This privacy notice relates to your use of the Parity SMS verification service. We take your privacy seriously and deal in an honest, direct and transparent way when it comes to your data.</li>
+    <li>We collect your phone number when you use this service. This is temporarily kept in memory, and then encrypted and stored in our EU servers. We only retain the cryptographic hash of the number to prevent duplicated accounts. You consent to this use.</li>
+    <li>You pay a fee for the cost of this service using the account you want to verify.</li>
+    <li>Your phone number is transmitted to a third party US SMS verification service Twilio for the sole purpose of the SMS verification. You consent to this use. Twilio’s privacy policy is here: <a href={ 'https://www.twilio.com/legal/privacy/developer' }>https://www.twilio.com/legal/privacy/developer</a>.</li>
+    <li><i>Parity Technology Limited</i> is registered in England and Wales under company number <code>09760015</code> and complies with the Data Protection Act 1998 (UK). You may contact us via email at <a href={ 'mailto:admin@parity.io' }>admin@parity.io</a>. Our general privacy policy can be found here: <a href={ 'https://ethcore.io/legal.html' }>https://ethcore.io/legal.html</a>.</li>
+  </ul>
+);
--- a/js/src/modals/index.js
+++ b/js/src/modals/index.js
@@ -22,6 +22,7 @@ import EditMeta from './EditMeta';
 import ExecuteContract from './ExecuteContract';
 import FirstRun from './FirstRun';
 import Shapeshift from './Shapeshift';
+import SMSVerification from './SMSVerification';
 import Transfer from './Transfer';
 import PasswordManager from './PasswordManager';
 import SaveContract from './SaveContract';
@@ -36,6 +37,7 @@ export {
  ExecuteContract,
  FirstRun,
  Shapeshift,
+  SMSVerification,
  Transfer,
  PasswordManager,
  LoadContract,
--- a/js/src/redux/actions.js
+++ b/js/src/redux/actions.js
@@ -16,7 +16,7 @@

 import { newError } from '../ui/Errors/actions';
 import { setAddressImage } from './providers/imagesActions';
-import { clearStatusLogs, toggleStatusLogs } from './providers/statusActions';
+import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from './providers/statusActions';
 import { toggleView } from '../views/Settings';

 export {
@@ -24,5 +24,6 @@ export {
  clearStatusLogs,
  setAddressImage,
  toggleStatusLogs,
+  toggleStatusRefresh,
  toggleView
 };
--- a/js/src/redux/providers/status.js
+++ b/js/src/redux/providers/status.js
@@ -15,32 +15,29 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

 import { statusBlockNumber, statusCollection, statusLogs } from './statusActions';
+import { isEqual } from 'lodash';

 export default class Status {
  constructor (store, api) {
    this._api = api;
    this._store = store;
+
+    this._pingable = false;
+    this._apiStatus = {};
+    this._status = {};
+    this._longStatus = {};
+    this._minerSettings = {};
+
+    this._pollPingTimeoutId = null;
+    this._longStatusTimeoutId = null;
  }

  start () {
    this._subscribeBlockNumber();
    this._pollPing();
    this._pollStatus();
+    this._pollLongStatus();
    this._pollLogs();
-    this._fetchEnode();
-  }
-
-  _fetchEnode () {
-    this._api.parity
-      .enode()
-      .then((enode) => {
-        this._store.dispatch(statusCollection({ enode }));
-      })
-      .catch(() => {
-        window.setTimeout(() => {
-          this._fetchEnode();
-        }, 1000);
-      });
  }

  _subscribeBlockNumber () {
@@ -51,16 +48,58 @@ export default class Status {
        }

        this._store.dispatch(statusBlockNumber(blockNumber));
+
+        this._api.eth
+          .getBlockByNumber(blockNumber)
+          .then((block) => {
+            this._store.dispatch(statusCollection({ gasLimit: block.gasLimit }));
+          })
+          .catch((error) => {
+            console.warn('status._subscribeBlockNumber', 'getBlockByNumber', error);
+          });
      })
      .then((subscriptionId) => {
        console.log('status._subscribeBlockNumber', 'subscriptionId', subscriptionId);
      });
  }

+  /**
+   * Pinging should be smart. It should only
+   * be used when the UI is connecting or the
+   * Node is deconnected.
+   *
+   * @see src/views/Connection/connection.js
+   */
+  _shouldPing = () => {
+    const { isConnected, isConnecting } = this._apiStatus;
+    return isConnecting || !isConnected;
+  }
+
+  _stopPollPing = () => {
+    if (!this._pollPingTimeoutId) {
+      return;
+    }
+
+    clearTimeout(this._pollPingTimeoutId);
+    this._pollPingTimeoutId = null;
+  }
+
  _pollPing = () => {
-    const dispatch = (status, timeout = 500) => {
-      this._store.dispatch(statusCollection({ isPingable: status }));
-      setTimeout(this._pollPing, timeout);
+    // Already pinging, don't try again
+    if (this._pollPingTimeoutId) {
+      return;
+    }
+
+    const dispatch = (pingable, timeout = 1000) => {
+      if (pingable !== this._pingable) {
+        this._pingable = pingable;
+        this._store.dispatch(statusCollection({ isPingable: pingable }));
+      }
+
+      this._pollPingTimeoutId = setTimeout(() => {
+        this._stopPollPing();
+        this._pollPing();
+      }, timeout);
    };

    fetch('/', { method: 'HEAD' })
@@ -79,61 +118,162 @@ export default class Status {
  }

  _pollStatus = () => {
-    const { secureToken, isConnected, isConnecting, needsToken } = this._api;
-
    const nextTimeout = (timeout = 1000) => {
      setTimeout(this._pollStatus, timeout);
    };

-    this._store.dispatch(statusCollection({ isConnected, isConnecting, needsToken, secureToken }));
+    const { isConnected, isConnecting, needsToken, secureToken } = this._api;
+
+    const apiStatus = {
+      isConnected,
+      isConnecting,
+      needsToken,
+      secureToken
+    };
+
+    const gotReconnected = !this._apiStatus.isConnected && apiStatus.isConnected;
+
+    if (gotReconnected) {
+      this._pollLongStatus();
+    }
+
+    if (!isEqual(apiStatus, this._apiStatus)) {
+      this._store.dispatch(statusCollection(apiStatus));
+      this._apiStatus = apiStatus;
+    }
+
+    // Ping if necessary, otherwise stop pinging
+    if (this._shouldPing()) {
+      this._pollPing();
+    } else {
+      this._stopPollPing();
+    }

    if (!isConnected) {
-      nextTimeout(250);
-      return;
+      return nextTimeout(250);
    }

+    const { refreshStatus } = this._store.getState().nodeStatus;
+
+    const statusPromises = [ this._api.eth.syncing() ];
+
+    if (refreshStatus) {
+      statusPromises.push(this._api.eth.hashrate());
+      statusPromises.push(this._api.parity.netPeers());
+    }
+
+    Promise
+      .all(statusPromises)
+      .then((statusResults) => {
+        const status = statusResults.length === 1
+          ? {
+            syncing: statusResults[0]
+          }
+          : {
+            syncing: statusResults[0],
+            hashrate: statusResults[1],
+            netPeers: statusResults[2]
+          };
+
+        if (!isEqual(status, this._status)) {
+          this._store.dispatch(statusCollection(status));
+          this._status = status;
+        }
+
+        nextTimeout();
+      })
+      .catch((error) => {
+        console.error('_pollStatus', error);
+        nextTimeout(250);
+      });
+  }
+
+  /**
+   * Miner settings should never changes unless
+   * Parity is restarted, or if the values are changed
+   * from the UI
+   */
+  _pollMinerSettings = () => {
+    Promise
+      .all([
+        this._api.eth.coinbase(),
+        this._api.parity.extraData(),
+        this._api.parity.minGasPrice(),
+        this._api.parity.gasFloorTarget()
+      ])
+      .then(([
+        coinbase, extraData, minGasPrice, gasFloorTarget
+      ]) => {
+        const minerSettings = {
+          coinbase,
+          extraData,
+          minGasPrice,
+          gasFloorTarget
+        };
+
+        if (!isEqual(minerSettings, this._minerSettings)) {
+          this._store.dispatch(statusCollection(minerSettings));
+          this._minerSettings = minerSettings;
+        }
+      })
+      .catch((error) => {
+        console.error('_pollMinerSettings', error);
+      });
+  }
+
+  /**
+   * The data fetched here should not change
+   * unless Parity is restarted. They are thus
+   * fetched every 30s just in case, and whenever
+   * the client got reconnected.
+   */
+  _pollLongStatus = () => {
+    const nextTimeout = (timeout = 30000) => {
+      if (this._longStatusTimeoutId) {
+        clearTimeout(this._longStatusTimeoutId);
+      }
+
+      this._longStatusTimeoutId = setTimeout(this._pollLongStatus, timeout);
+    };
+
+    // Poll Miner settings just in case
+    this._pollMinerSettings();
+
    Promise
      .all([
        this._api.web3.clientVersion(),
-        this._api.eth.coinbase(),
        this._api.parity.defaultExtraData(),
-        this._api.parity.extraData(),
-        this._api.parity.gasFloorTarget(),
-        this._api.eth.hashrate(),
-        this._api.parity.minGasPrice(),
        this._api.parity.netChain(),
-        this._api.parity.netPeers(),
        this._api.parity.netPort(),
-        this._api.parity.nodeName(),
        this._api.parity.rpcSettings(),
-        this._api.eth.syncing()
+        this._api.parity.enode()
      ])
-      .then(([clientVersion, coinbase, defaultExtraData, extraData, gasFloorTarget, hashrate, minGasPrice, netChain, netPeers, netPort, nodeName, rpcSettings, syncing, traceMode]) => {
+      .then(([
+        clientVersion, defaultExtraData, netChain, netPort, rpcSettings, enode
+      ]) => {
        const isTest = netChain === 'morden' || netChain === 'testnet';

-        this._store.dispatch(statusCollection({
+        const longStatus = {
          clientVersion,
-          coinbase,
          defaultExtraData,
-          extraData,
-          gasFloorTarget,
-          hashrate,
-          minGasPrice,
          netChain,
-          netPeers,
          netPort,
-          nodeName,
          rpcSettings,
-          syncing,
-          isTest,
-          traceMode
-        }));
+          enode,
+          isTest
+        };
+
+        if (!isEqual(longStatus, this._longStatus)) {
+          this._store.dispatch(statusCollection(longStatus));
+          this._longStatus = longStatus;
+        }
+
+        nextTimeout();
      })
      .catch((error) => {
-        console.error('_pollStatus', error);
+        console.error('_pollLongStatus', error);
+        nextTimeout(250);
      });
-
-    nextTimeout();
  }

  _pollLogs = () => {
--- a/js/src/redux/providers/statusActions.js
+++ b/js/src/redux/providers/statusActions.js
@@ -47,3 +47,10 @@ export function clearStatusLogs () {
    type: 'clearStatusLogs'
  };
 }
+
+export function toggleStatusRefresh (refreshStatus) {
+  return {
+    type: 'toggleStatusRefresh',
+    refreshStatus
+  };
+}
--- a/js/src/redux/providers/statusReducer.js
+++ b/js/src/redux/providers/statusReducer.js
@@ -28,6 +28,7 @@ const initialState = {
  enode: '',
  extraData: '',
  gasFloorTarget: new BigNumber(0),
+  gasLimit: new BigNumber(0),
  hashrate: new BigNumber(0),
  minGasPrice: new BigNumber(0),
  netChain: 'morden',
@@ -37,12 +38,13 @@ const initialState = {
    max: new BigNumber(0)
  },
  netPort: new BigNumber(0),
-  nodeName: '',
  rpcSettings: {},
  syncing: false,
-  isApiConnected: true,
-  isPingConnected: true,
+  isConnected: false,
+  isConnecting: false,
+  isPingable: false,
  isTest: false,
+  refreshStatus: false,
  traceMode: undefined
 };

@@ -73,5 +75,10 @@ export default handleActions({

  clearStatusLogs (state, action) {
    return Object.assign({}, state, { devLogs: [] });
+  },
+
+  toggleStatusRefresh (state, action) {
+    const { refreshStatus } = action;
+    return Object.assign({}, state, { refreshStatus });
  }
 }, initialState);
--- a/js/src/ui/Form/RadioButtons/index.js
+++ b/js/src/ui/Form/RadioButtons/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 './radioButtons';
--- a/js/src/ui/Form/RadioButtons/radioButtons.css
+++ b/js/src/ui/Form/RadioButtons/radioButtons.css
@@ -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/>.
+*/
+
+.spaced {
+  margin: 0.25em 0;
+}
+
+.typeContainer {
+  display: flex;
+  flex-direction: column;
+
+  .desc {
+    font-size: 0.8em;
+    margin-bottom: 0.5em;
+    color: #ccc;
+    z-index: 2;
+  }
+}
--- a/js/src/ui/Form/RadioButtons/radioButtons.js
+++ b/js/src/ui/Form/RadioButtons/radioButtons.js
@@ -0,0 +1,100 @@
+// 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 { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
+
+import styles from './radioButtons.css';
+
+export default class RadioButtons extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    values: PropTypes.array.isRequired,
+
+    value: PropTypes.any,
+    name: PropTypes.string
+  };
+
+  static defaultProps = {
+    value: 0,
+    name: ''
+  };
+
+  render () {
+    const { value, values } = this.props;
+
+    const index = parseInt(value);
+    const selectedValue = typeof value !== 'object' ? values[index] : value;
+    const key = this.getKey(selectedValue, index);
+
+    return (
+      <RadioButtonGroup
+        valueSelected={ key }
+        name={ name }
+        onChange={ this.onChange }
+      >
+        { this.renderContent() }
+      </RadioButtonGroup>
+    );
+  }
+
+  renderContent () {
+    const { values } = this.props;
+
+    return values.map((value, index) => {
+      const label = typeof value === 'string' ? value : value.label || '';
+      const description = (typeof value !== 'string' && value.description) || null;
+      const key = this.getKey(value, index);
+
+      return (
+        <RadioButton
+          className={ styles.spaced }
+          key={ index }
+
+          value={ key }
+          label={ (
+            <div className={ styles.typeContainer }>
+              <span>{ label }</span>
+              {
+                description
+                ? (
+                  <span className={ styles.desc }>{ description }</span>
+                )
+                : null
+              }
+            </div>
+          ) }
+        />
+      );
+    });
+  }
+
+  getKey (value, index) {
+    if (typeof value !== 'string') {
+      return typeof value.key === 'undefined' ? index : value.key;
+    }
+
+    return index;
+  }
+
+  onChange = (event, index) => {
+    const { onChange, values } = this.props;
+
+    const value = values[index] || values.find((v) => v.key === index);
+    onChange(value, index);
+  }
+}
--- a/js/src/ui/Form/index.js
+++ b/js/src/ui/Form/index.js
@@ -23,6 +23,7 @@ import InputAddressSelect from './InputAddressSelect';
 import InputChip from './InputChip';
 import InputInline from './InputInline';
 import Select from './Select';
+import RadioButtons from './RadioButtons';

 export default from './form';
 export {
@@ -34,5 +35,6 @@ export {
  InputAddressSelect,
  InputChip,
  InputInline,
-  Select
+  Select,
+  RadioButtons
 };
--- a/js/src/ui/Modal/modal.js
+++ b/js/src/ui/Modal/modal.js
@@ -43,7 +43,7 @@ class Modal extends Component {
    waiting: PropTypes.array,
    scroll: PropTypes.bool,
    steps: PropTypes.array,
-    title: React.PropTypes.oneOfType([
+    title: PropTypes.oneOfType([
      PropTypes.node, PropTypes.string
    ]),
    visible: PropTypes.bool.isRequired,
--- a/js/src/ui/Page/page.css
+++ b/js/src/ui/Page/page.css
@@ -19,5 +19,5 @@
 }

 .layout>div {
-  padding-bottom: 0.25em;
+  padding-bottom: 0.75em;
 }
--- a/js/src/ui/TxHash/txHash.js
+++ b/js/src/ui/TxHash/txHash.js
@@ -31,9 +31,14 @@ class TxHash extends Component {
  static propTypes = {
    hash: PropTypes.string.isRequired,
    isTest: PropTypes.bool,
-    summary: PropTypes.bool
+    summary: PropTypes.bool,
+    maxConfirmations: PropTypes.number
  }

+  static defaultProps = {
+    maxConfirmations: 10
+  };
+
  state = {
    blockNumber: new BigNumber(0),
    transaction: null,
@@ -79,6 +84,7 @@ class TxHash extends Component {
  }

  renderConfirmations () {
+    const { maxConfirmations } = this.props;
    const { blockNumber, transaction } = this.state;

    let txBlock = 'Pending';
@@ -89,14 +95,16 @@ class TxHash extends Component {
      const num = blockNumber.minus(transaction.blockNumber).plus(1);
      txBlock = `#${transaction.blockNumber.toFormat(0)}`;
      confirmations = num.toFormat(0);
-      value = num.gt(10) ? 10 : num.toNumber();
+      value = num.gt(maxConfirmations) ? maxConfirmations : num.toNumber();
    }

    return (
      <div className={ styles.confirm }>
        <LinearProgress
          className={ styles.progressbar }
-          min={ 0 } max={ 10 } value={ value }
+          min={ 0 }
+          max={ maxConfirmations }
+          value={ value }
          color='white'
          mode='determinate' />
        <div className={ styles.progressinfo }>
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@@ -29,7 +29,7 @@ import ContextProvider from './ContextProvider';
 import CopyToClipboard from './CopyToClipboard';
 import Editor from './Editor';
 import Errors from './Errors';
-import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select } from './Form';
+import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select, RadioButtons } from './Form';
 import IdentityIcon from './IdentityIcon';
 import IdentityName from './IdentityName';
 import MethodDecoding from './MethodDecoding';
@@ -78,6 +78,7 @@ export {
  muiTheme,
  Page,
  ParityBackground,
+  RadioButtons,
  SignerIcon,
  Tags,
  Tooltip,
--- a/js/src/util/check-if-tx-failed.js
+++ b/js/src/util/check-if-tx-failed.js
@@ -0,0 +1,28 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const checkIfTxFailed = (api, tx, gasSent) => {
+  return api.pollMethod('eth_getTransactionReceipt', tx)
+  .then((receipt) => {
+    // TODO: Right now, there's no way to tell wether the EVM code crashed.
+    // Because you usually send a bit more gas than estimated (to make sure
+    // it gets mined quickly), we transaction probably failed if all the gas
+    // has been used up.
+    return receipt.gasUsed.eq(gasSent);
+  });
+};
+
+export default checkIfTxFailed;
--- a/js/src/util/nullable-proptype.js
+++ b/js/src/util/nullable-proptype.js
@@ -0,0 +1,21 @@
+// 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 { PropTypes } from 'react';
+
+export default function (type) {
+  return PropTypes.oneOfType([ PropTypes.oneOf([ null ]), type ]);
+}
--- a/js/src/util/validation.js
+++ b/js/src/util/validation.js
@@ -37,7 +37,7 @@ export function validateAbi (abi, api) {
  try {
    abiParsed = JSON.parse(abi);

-    if (!api.util.isArray(abiParsed) || !abiParsed.length) {
+    if (!api.util.isArray(abiParsed)) {
      abiError = ERRORS.invalidAbi;
      return { abi, abiError, abiParsed };
    }
--- a/js/src/util/wait-for-block-confirmations.js
+++ b/js/src/util/wait-for-block-confirmations.js
@@ -0,0 +1,44 @@
+// 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/>.
+
+const isValidReceipt = (receipt) => {
+  return receipt && receipt.blockNumber && receipt.blockNumber.gt(0);
+};
+
+const waitForConfirmations = (api, tx, confirmations) => {
+  return new Promise((resolve, reject) => {
+    api.pollMethod('eth_getTransactionReceipt', tx, isValidReceipt)
+    .then((receipt) => {
+      let subscription;
+      api.subscribe('eth_blockNumber', (err, block) => {
+        if (err) {
+          reject(err);
+        } else if (block.minus(confirmations - 1).gte(receipt.blockNumber)) {
+          if (subscription) {
+            api.unsubscribe(subscription);
+          }
+          resolve();
+        }
+      })
+      .then((_subscription) => {
+        subscription = _subscription;
+      })
+      .catch(reject);
+    });
+  });
+};
+
+export default waitForConfirmations;
--- a/js/src/views/Account/account.js
+++ b/js/src/views/Account/account.js
@@ -20,8 +20,9 @@ import { bindActionCreators } from 'redux';
 import ContentCreate from 'material-ui/svg-icons/content/create';
 import ContentSend from 'material-ui/svg-icons/content/send';
 import LockIcon from 'material-ui/svg-icons/action/lock';
+import VerifyIcon from 'material-ui/svg-icons/action/verified-user';

-import { EditMeta, Shapeshift, Transfer, PasswordManager } from '../../modals';
+import { EditMeta, Shapeshift, SMSVerification, Transfer, PasswordManager } from '../../modals';
 import { Actionbar, Button, Page } from '../../ui';

 import shapeshiftBtn from '../../../assets/images/shapeshift-btn.png';
@@ -29,9 +30,15 @@ import shapeshiftBtn from '../../../assets/images/shapeshift-btn.png';
 import Header from './Header';
 import Transactions from './Transactions';

+import VerificationStore from '../../modals/SMSVerification/store';
+
 import styles from './account.css';

 class Account extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
  static propTypes = {
    params: PropTypes.object,
    accounts: PropTypes.object,
@@ -45,10 +52,20 @@ class Account extends Component {
  state = {
    showEditDialog: false,
    showFundDialog: false,
+    showVerificationDialog: false,
+    verificationStore: null,
    showTransferDialog: false,
    showPasswordDialog: false
  }

+  componentDidMount () {
+    const { api } = this.context;
+    const { address } = this.props.params;
+
+    const store = new VerificationStore(api, address);
+    this.setState({ verificationStore: store });
+  }
+
  render () {
    const { accounts, balances, isTest } = this.props;
    const { address } = this.props.params;
@@ -64,6 +81,7 @@ class Account extends Component {
      <div className={ styles.account }>
        { this.renderEditDialog(account) }
        { this.renderFundDialog() }
+        { this.renderVerificationDialog() }
        { this.renderTransferDialog() }
        { this.renderPasswordDialog() }
        { this.renderActionbar() }
@@ -99,6 +117,11 @@ class Account extends Component {
        icon={ <img src={ shapeshiftBtn } className={ styles.btnicon } /> }
        label='shapeshift'
        onClick={ this.onShapeshiftAccountClick } />,
+      <Button
+        key='sms-verification'
+        icon={ <VerifyIcon /> }
+        label='Verify'
+        onClick={ this.openVerification } />,
      <Button
        key='editmeta'
        icon={ <ContentCreate /> }
@@ -149,6 +172,22 @@ class Account extends Component {
    );
  }

+  renderVerificationDialog () {
+    if (!this.state.showVerificationDialog) {
+      return null;
+    }
+
+    const store = this.state.verificationStore;
+    const { address } = this.props.params;
+
+    return (
+      <SMSVerification
+        store={ store } account={ address }
+        onClose={ this.onVerificationClose }
+      />
+    );
+  }
+
  renderTransferDialog () {
    const { showTransferDialog } = this.state;

@@ -205,6 +244,14 @@ class Account extends Component {
    this.onShapeshiftAccountClick();
  }

+  openVerification = () => {
+    this.setState({ showVerificationDialog: true });
+  }
+
+  onVerificationClose = () => {
+    this.setState({ showVerificationDialog: false });
+  }
+
  onTransferClick = () => {
    this.setState({
      showTransferDialog: !this.state.showTransferDialog
--- a/js/src/views/Dapps/AddDapps/AddDapps.css
+++ b/js/src/views/Dapps/AddDapps/AddDapps.css
@@ -18,3 +18,22 @@
 .description {
  margin-top: .5em !important;
 }
+
+.list {
+  .background {
+    background: rgba(255, 255, 255, 0.2);
+    margin: 0 -1.5em;
+    padding: 0.5em 1.5em;
+  }
+
+  .header {
+    text-transform: uppercase;
+  }
+
+  .byline {
+    font-size: 0.75em;
+    padding-top: 0.5em;
+    line-height: 1.5em;
+    opacity: 0.75;
+  }
+}
--- a/js/src/views/Dapps/AddDapps/AddDapps.js
+++ b/js/src/views/Dapps/AddDapps/AddDapps.js
@@ -51,16 +51,37 @@ export default class AddDapps extends Component {
        ] }
        visible
        scroll>
-        <List>
-          { store.apps.map(this.renderApp) }
-        </List>
+        <div className={ styles.warning }>
+        </div>
+        { this.renderList(store.sortedLocal, 'Applications locally available', 'All applications installed locally on the machine by the user for access by the Parity client.') }
+        { this.renderList(store.sortedBuiltin, 'Applications bundled with Parity', 'Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.') }
+        { this.renderList(store.sortedNetwork, 'Applications on the global network', 'These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.') }
      </Modal>
    );
  }

+  renderList (items, header, byline) {
+    if (!items || !items.length) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.list }>
+        <div className={ styles.background }>
+          <div className={ styles.header }>{ header }</div>
+          <div className={ styles.byline }>{ byline }</div>
+        </div>
+        <List>
+          { items.map(this.renderApp) }
+        </List>
+      </div>
+    );
+  }
+
  renderApp = (app) => {
    const { store } = this.props;
-    const isHidden = store.hidden.includes(app.id);
+    const isHidden = !store.displayApps[app.id].visible;
+
    const onCheck = () => {
      if (isHidden) {
        store.showApp(app.id);
--- a/js/src/views/Dapps/Summary/summary.js
+++ b/js/src/views/Dapps/Summary/summary.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { Link } from 'react-router';

-import { Container, ContainerTitle } from '../../../ui';
+import { Container, ContainerTitle, Tags } from '../../../ui';

 import styles from './summary.css';

@@ -49,6 +49,7 @@ export default class Summary extends Component {
    return (
      <Container className={ styles.container }>
        { image }
+        <Tags tags={ [app.type] } />
        <div className={ styles.description }>
          <ContainerTitle
            className={ styles.title }
--- a/js/src/views/Dapps/builtin.json
+++ b/js/src/views/Dapps/builtin.json
@@ -5,7 +5,8 @@
    "name": "Token Deployment",
    "description": "Deploy new basic tokens that you are able to send around",
    "author": "Parity Team <admin@ethcore.io>",
-    "version": "1.0.0"
+    "version": "1.0.0",
+    "visible": true
  },
  {
    "id": "0xd1adaede68d344519025e2ff574650cd99d3830fe6d274c7a7843cdc00e17938",
@@ -13,7 +14,8 @@
    "name": "Registry",
    "description": "A global registry of addresses on the network",
    "author": "Parity Team <admin@ethcore.io>",
-    "version": "1.0.0"
+    "version": "1.0.0",
+    "visible": true
  },
  {
    "id": "0x0a8048117e51e964628d0f2d26342b3cd915248b59bcce2721e1d05f5cfa2208",
@@ -21,7 +23,8 @@
    "name": "Token Registry",
    "description": "A registry of transactable tokens on the network",
    "author": "Parity Team <admin@ethcore.io>",
-    "version": "1.0.0"
+    "version": "1.0.0",
+    "visible": true
  },
  {
    "id": "0xf49089046f53f5d2e5f3513c1c32f5ff57d986e46309a42d2b249070e4e72c46",
@@ -29,7 +32,8 @@
    "name": "Method Registry",
    "description": "A registry of method signatures for lookups on transactions",
    "author": "Parity Team <admin@ethcore.io>",
-    "version": "1.0.0"
+    "version": "1.0.0",
+    "visible": true
  },
  {
    "id": "0x058740ee9a5a3fb9f1cfa10752baec87e09cc45cd7027fd54708271aca300c75",
@@ -38,6 +42,7 @@
    "description": "A mapping of GitHub URLs to hashes for use in contracts as references",
    "author": "Parity Team <admin@ethcore.io>",
    "version": "1.0.0",
+    "visible": false,
    "secure": true
  },
  {
--- a/js/src/views/Dapps/dapps.css
+++ b/js/src/views/Dapps/dapps.css
@@ -18,6 +18,7 @@
  display: flex;
  flex-wrap: wrap;
  margin: -0.125em;
+  position: relative;
 }

 .list+.list {
@@ -29,3 +30,25 @@
  flex: 0 1 50%;
  box-sizing: border-box;
 }
+
+.overlay {
+  background: rgba(0, 0, 0, 0.85);
+  bottom: 0.5em;
+  left: -0.125em;
+  position: absolute;
+  right: -0.125em;
+  top: -0.25em;
+  z-index: 100;
+  padding: 1em;
+
+  .body {
+    line-height: 1.5em;
+    margin: 0 auto;
+    text-align: left;
+    max-width: 980px;
+
+    &>div:first-child {
+      padding-bottom: 1em;
+    }
+  }
+}
--- a/js/src/views/Dapps/dapps.js
+++ b/js/src/views/Dapps/dapps.js
@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Component, PropTypes } from 'react';
+import { Checkbox } from 'material-ui';
 import { observer } from 'mobx-react';

 import { Actionbar, Page } from '../../ui';
@@ -37,6 +38,24 @@ export default class Dapps extends Component {
  store = new DappsStore(this.context.api);

  render () {
+    let externalOverlay = null;
+    if (this.store.externalOverlayVisible) {
+      externalOverlay = (
+        <div className={ styles.overlay }>
+          <div className={ styles.body }>
+            <div>Applications made available on the network by 3rd-party authors are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each before interacting.</div>
+            <div>
+              <Checkbox
+                className={ styles.accept }
+                label='I understand that these applications are not affiliated with Parity'
+                checked={ false }
+                onCheck={ this.onClickAcceptExternal } />
+            </div>
+          </div>
+        </div>
+      );
+    }
+
    return (
      <div>
        <AddDapps store={ this.store } />
@@ -53,14 +72,27 @@ export default class Dapps extends Component {
          ] }
        />
        <Page>
-          <div className={ styles.list }>
-            { this.store.visible.map(this.renderApp) }
-          </div>
+          { this.renderList(this.store.visibleLocal) }
+          { this.renderList(this.store.visibleBuiltin) }
+          { this.renderList(this.store.visibleNetwork, externalOverlay) }
        </Page>
      </div>
    );
  }

+  renderList (items, overlay) {
+    if (!items || !items.length) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.list }>
+        { overlay }
+        { items.map(this.renderApp) }
+      </div>
+    );
+  }
+
  renderApp = (app) => {
    return (
      <div
@@ -70,4 +102,8 @@ export default class Dapps extends Component {
      </div>
    );
  }
+
+  onClickAcceptExternal = () => {
+    this.store.closeExternalOverlay();
+  }
 }
--- a/js/src/views/Dapps/dappsStore.js
+++ b/js/src/views/Dapps/dappsStore.js
@@ -14,39 +14,65 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

+import BigNumber from 'bignumber.js';
 import { action, computed, observable, transaction } from 'mobx';
+import store from 'store';

 import Contracts from '../../contracts';
 import { hashToImageUrl } from '../../redux/util';

 import builtinApps from './builtin.json';

-const LS_KEY_HIDDEN = 'hiddenApps';
-const LS_KEY_EXTERNAL = 'externalApps';
+const LS_KEY_DISPLAY = 'displayApps';
+const LS_KEY_EXTERNAL_ACCEPT = 'acceptExternal';

 export default class DappsStore {
  @observable apps = [];
-  @observable externalApps = [];
-  @observable hiddenApps = [];
+  @observable displayApps = {};
  @observable modalOpen = false;
+  @observable externalOverlayVisible = true;

  constructor (api) {
    this._api = api;

-    this._readHiddenApps();
-    this._readExternalApps();
+    this.loadExternalOverlay();
+    this.readDisplayApps();

-    this._fetchBuiltinApps();
-    this._fetchLocalApps();
-    this._fetchRegistryApps();
+    Promise
+      .all([
+        this._fetchBuiltinApps(),
+        this._fetchLocalApps(),
+        this._fetchRegistryApps()
+      ])
+      .then(this.writeDisplayApps);
  }

-  @computed get visible () {
-    return this.apps
-      .filter((app) => {
-        return this.externalApps.includes(app.id) || !this.hiddenApps.includes(app.id);
-      })
-      .sort((a, b) => a.name.localeCompare(b.name));
+  @computed get sortedBuiltin () {
+    return this.apps.filter((app) => app.type === 'builtin');
+  }
+
+  @computed get sortedLocal () {
+    return this.apps.filter((app) => app.type === 'local');
+  }
+
+  @computed get sortedNetwork () {
+    return this.apps.filter((app) => app.type === 'network');
+  }
+
+  @computed get visibleApps () {
+    return this.apps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible);
+  }
+
+  @computed get visibleBuiltin () {
+    return this.visibleApps.filter((app) => app.type === 'builtin');
+  }
+
+  @computed get visibleLocal () {
+    return this.visibleApps.filter((app) => app.type === 'local');
+  }
+
+  @computed get visibleNetwork () {
+    return this.visibleApps.filter((app) => app.type === 'network');
  }

  @action openModal = () => {
@@ -57,14 +83,48 @@ export default class DappsStore {
    this.modalOpen = false;
  }

+  @action closeExternalOverlay = () => {
+    this.externalOverlayVisible = false;
+    store.set(LS_KEY_EXTERNAL_ACCEPT, true);
+  }
+
+  @action loadExternalOverlay () {
+    this.externalOverlayVisible = !(store.get(LS_KEY_EXTERNAL_ACCEPT) || false);
+  }
+
  @action hideApp = (id) => {
-    this.hiddenApps = this.hiddenApps.concat(id);
-    this._writeHiddenApps();
+    this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: false } });
+    this.writeDisplayApps();
  }

  @action showApp = (id) => {
-    this.hiddenApps = this.hiddenApps.filter((_id) => _id !== id);
-    this._writeHiddenApps();
+    this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: true } });
+    this.writeDisplayApps();
+  }
+
+  @action readDisplayApps = () => {
+    this.displayApps = store.get(LS_KEY_DISPLAY) || {};
+  }
+
+  @action writeDisplayApps = () => {
+    store.set(LS_KEY_DISPLAY, this.displayApps);
+  }
+
+  @action addApps = (apps) => {
+    transaction(() => {
+      this.apps = this.apps
+        .concat(apps || [])
+        .sort((a, b) => a.name.localeCompare(b.name));
+
+      const visibility = {};
+      apps.forEach((app) => {
+        if (!this.displayApps[app.id]) {
+          visibility[app.id] = { visible: app.visible };
+        }
+      });
+
+      this.displayApps = Object.assign({}, this.displayApps, visibility);
+    });
  }

  _getHost (api) {
@@ -79,13 +139,16 @@ export default class DappsStore {
    return Promise
      .all(builtinApps.map((app) => dappReg.getImage(app.id)))
      .then((imageIds) => {
-        transaction(() => {
-          builtinApps.forEach((app, index) => {
+        this.addApps(
+          builtinApps.map((app, index) => {
            app.type = 'builtin';
            app.image = hashToImageUrl(imageIds[index]);
-            this.apps.push(app);
-          });
-        });
+            return app;
+          })
+        );
+      })
+      .catch((error) => {
+        console.warn('DappsStore:fetchBuiltinApps', error);
      });
  }

@@ -100,15 +163,12 @@ export default class DappsStore {
        return apps
          .map((app) => {
            app.type = 'local';
+            app.visible = true;
            return app;
          })
          .filter((app) => app.id && !['ui'].includes(app.id));
      })
-      .then((apps) => {
-        transaction(() => {
-          (apps || []).forEach((app) => this.apps.push(app));
-        });
-      })
+      .then(this.addApps)
      .catch((error) => {
        console.warn('DappsStore:fetchLocal', error);
      });
@@ -132,7 +192,9 @@ export default class DappsStore {
      .then((appsInfo) => {
        const appIds = appsInfo
          .map(([appId, owner]) => this._api.util.bytesToHex(appId))
-          .filter((appId) => !builtinApps.find((app) => app.id === appId));
+          .filter((appId) => {
+            return (new BigNumber(appId)).gt(0) && !builtinApps.find((app) => app.id === appId);
+          });

        return Promise
          .all([
@@ -147,7 +209,8 @@ export default class DappsStore {
                image: hashToImageUrl(imageIds[index]),
                contentHash: this._api.util.bytesToHex(contentIds[index]).substr(2),
                manifestHash: this._api.util.bytesToHex(manifestIds[index]).substr(2),
-                type: 'network'
+                type: 'network',
+                visible: true
              };

              return app;
@@ -179,11 +242,7 @@ export default class DappsStore {
            });
          });
      })
-      .then((apps) => {
-        transaction(() => {
-          (apps || []).forEach((app) => this.apps.push(app));
-        });
-      })
+      .then(this.addApps)
      .catch((error) => {
        console.warn('DappsStore:fetchRegistry', error);
      });
@@ -201,44 +260,4 @@ export default class DappsStore {
        return null;
      });
  }
-
-  _readHiddenApps () {
-    const stored = localStorage.getItem(LS_KEY_HIDDEN);
-
-    if (stored) {
-      try {
-        this.hiddenApps = JSON.parse(stored);
-      } catch (error) {
-        console.warn('DappsStore:readHiddenApps', error);
-      }
-    }
-  }
-
-  _readExternalApps () {
-    const stored = localStorage.getItem(LS_KEY_EXTERNAL);
-
-    if (stored) {
-      try {
-        this.externalApps = JSON.parse(stored);
-      } catch (error) {
-        console.warn('DappsStore:readExternalApps', error);
-      }
-    }
-  }
-
-  _writeExternalApps () {
-    try {
-      localStorage.setItem(LS_KEY_EXTERNAL, JSON.stringify(this.externalApps));
-    } catch (error) {
-      console.error('DappsStore:writeExternalApps', error);
-    }
-  }
-
-  _writeHiddenApps () {
-    try {
-      localStorage.setItem(LS_KEY_HIDDEN, JSON.stringify(this.hiddenApps));
-    } catch (error) {
-      console.error('DappsStore:writeHiddenApps', error);
-    }
-  }
 }
--- a/js/src/views/Signer/components/SignRequest/SignRequest.js
+++ b/js/src/views/Signer/components/SignRequest/SignRequest.js
@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Component, PropTypes } from 'react';
+import nullable from '../../../../util/nullable-proptype';

 import Account from '../Account';
 import TransactionPendingForm from '../TransactionPendingForm';
@@ -22,8 +23,6 @@ import TxHashLink from '../TxHashLink';

 import styles from './SignRequest.css';

-const nullable = (type) => React.PropTypes.oneOfType([ React.PropTypes.oneOf([ null ]), type ]);
-
 export default class SignRequest extends Component {
  static contextTypes = {
    api: PropTypes.object
--- a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js
+++ b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js
@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Component, PropTypes } from 'react';
+import nullable from '../../../../util/nullable-proptype';

 import CircularProgress from 'material-ui/CircularProgress';

@@ -29,8 +30,6 @@ import styles from './TransactionFinished.css';
 import * as tUtil from '../util/transaction';
 import { capitalize } from '../util/util';

-const nullable = (type) => React.PropTypes.oneOfType([ React.PropTypes.oneOf([ null ]), type ]);
-
 export default class TransactionFinished extends Component {
  static contextTypes = {
    api: PropTypes.object.isRequired
--- a/js/src/views/Status/containers/StatusPage/StatusPage.js
+++ b/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 } from '../../../../redux/actions';
+import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from '../../../../redux/actions';

 import Debug from '../../components/Debug';
 import Status from '../../components/Status';
@@ -31,6 +31,14 @@ class StatusPage extends Component {
    actions: PropTypes.object.isRequired
  }

+  componentWillMount () {
+    this.props.actions.toggleStatusRefresh(true);
+  }
+
+  componentWillUnmount () {
+    this.props.actions.toggleStatusRefresh(false);
+  }
+
  render () {
    return (
      <div className={ styles.body }>
@@ -49,7 +57,8 @@ function mapDispatchToProps (dispatch) {
  return {
    actions: bindActionCreators({
      clearStatusLogs,
-      toggleStatusLogs
+      toggleStatusLogs,
+      toggleStatusRefresh
    }, dispatch)
  };
 }
--- a/js/test/npmLibrary.js
+++ b/js/test/npmLibrary.js
@@ -0,0 +1,45 @@
+// 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/>.
+
+try {
+  var Api = require('../.npmjs/library.js').Api;
+  var Abi = require('../.npmjs/library.js').Abi;
+
+  if (typeof Api !== 'function') {
+    throw new Error('No Api');
+  }
+
+  if (typeof Abi !== 'function') {
+    throw new Error('No Abi');
+  }
+
+  var transport = new Api.Transport.Http('http://localhost:8545');
+  var api = new Api(transport);
+
+  api.eth
+    .blockNumber()
+    .then((block) => {
+      console.log('library working fine', '(block #' + block.toFormat() + ')');
+      process.exit(0);
+    })
+    .catch(() => {
+      console.log('library working fine (disconnected)');
+      process.exit(0);
+    });
+} catch (e) {
+  console.error('An error occured:', e.toString().split('\n')[0]);
+  process.exit(1);
+}
--- a/js/webpack.libraries.js
+++ b/js/webpack.libraries.js
@@ -34,7 +34,9 @@ module.exports = {
  },
  output: {
    path: path.join(__dirname, DEST),
-    filename: '[name].js'
+    filename: '[name].js',
+    library: '[name].js',
+    libraryTarget: 'umd'
  },
  module: {
    loaders: [
--- a/js/webpack.npm.js
+++ b/js/webpack.npm.js
@@ -24,13 +24,23 @@ const isProd = ENV === 'production';

 module.exports = {
  context: path.join(__dirname, './src'),
+  target: 'node',
  entry: 'library.js',
  output: {
    path: path.join(__dirname, '.npmjs'),
    filename: 'library.js',
-    libraryTarget: 'commonjs'
+    library: 'Parity',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  externals: {
+    'node-fetch': 'node-fetch',
+    'vertx': 'vertx'
  },
  module: {
+    noParse: [
+      /babel-polyfill/
+    ],
    loaders: [
      {
        test: /(\.jsx|\.js)$/,
				`@@ -0,0 +1 @@`
				[{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"}],"name":"certify","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"request","outputs":[],"payable":true,"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"},{"name":"_puzzle","type":"bytes32"}],"name":"puzzle","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"},{"name":"_field","type":"string"}],"name":"getAddress","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"uint256"}],"name":"setFee","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"}],"name":"revoke","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_code","type":"bytes32"}],"name":"confirm","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"drain","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"delegate","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"},{"name":"_field","type":"string"}],"name":"getUint","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setDelegate","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"}],"name":"certified","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"fee","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"},{"name":"_field","type":"string"}],"name":"get","outputs":[{"name":"","type":"bytes32"}],"payable":false,"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"}],"name":"Requested","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"},{"indexed":false,"name":"puzzle","type":"bytes32"}],"name":"Puzzled","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"}],"name":"Confirmed","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"}],"name":"Revoked","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]