diff --git a/js/package.json b/js/package.json
index 5c203a091..bcfe4f5d7 100644
--- a/js/package.json
+++ b/js/package.json
@@ -196,11 +196,13 @@
     "react": "15.4.2",
     "react-ace": "4.1.0",
     "react-addons-css-transition-group": "15.4.2",
+    "react-codemirror": "^0.3.0",
     "react-copy-to-clipboard": "4.2.3",
     "react-dom": "15.4.2",
     "react-dropzone": "3.7.3",
     "react-element-to-jsx-string": "6.0.0",
     "react-event-listener": "0.4.1",
+    "react-inspector": "paritytech/react-inspector",
     "react-intl": "2.1.5",
     "react-markdown": "2.4.4",
     "react-portal": "3.0.0",
diff --git a/js/src/dapps/console.js b/js/src/dapps/console.js
new file mode 100644
index 000000000..44b6dcb9c
--- /dev/null
+++ b/js/src/dapps/console.js
@@ -0,0 +1,59 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+
+import 'codemirror/addon/dialog/dialog';
+import 'codemirror/addon/dialog/dialog.css';
+import 'codemirror/addon/hint/javascript-hint';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/show-hint.css';
+import 'codemirror/addon/search/match-highlighter';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/searchcursor';
+import 'codemirror/keymap/sublime';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/javascript/javascript';
+// Custom codemirror style
+import './console/codemirror.css';
+
+import Application from './console/Application';
+
+import '../../assets/fonts/Roboto/font.css';
+import '../../assets/fonts/RobotoMono/font.css';
+import './style.css';
+
+ReactDOM.render(
+  <AppContainer>
+    <Application />
+  </AppContainer>,
+  document.querySelector('#container')
+);
+
+if (module.hot) {
+  module.hot.accept('./console/Application/index.js', () => {
+    require('./console/Application/index.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <Application />
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}
diff --git a/js/src/dapps/console/Application/application.css b/js/src/dapps/console/Application/application.css
new file mode 100644
index 000000000..eea2c030d
--- /dev/null
+++ b/js/src/dapps/console/Application/application.css
@@ -0,0 +1,65 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.app {
+  display: flex;
+  flex-direction: column;
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  height: 100vh;
+  overflow: hidden;
+}
+
+textarea,
+input {
+  font-family: dejavu sans mono, monospace;
+  outline: none;
+}
+
+code,
+pre {
+  font-family: dejavu sans mono, monospace;
+  font-size: 11px;
+}
+
+.header {
+  flex: 0 0 auto;
+}
+
+.view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.eval {
+  flex: 0 1 auto;
+  font-family: dejavu sans mono, monospace;
+  overflow: auto;
+}
+
+.input {
+  border-top: 1px solid #eee;
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 50px;
+}
+
+.status {
+  flex: 0 0 auto;
+  font-family: dejavu sans mono, monospace;
+}
diff --git a/js/src/dapps/console/Application/application.js b/js/src/dapps/console/Application/application.js
new file mode 100644
index 000000000..5a591e710
--- /dev/null
+++ b/js/src/dapps/console/Application/application.js
@@ -0,0 +1,94 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+
+import { api } from '../parity';
+
+import Console from '../Console';
+import Header from '../Header';
+import Input from '../Input';
+import Settings from '../Settings';
+import Snippets from '../Snippets';
+import Watches from '../Watches';
+
+import ApplicationStore from './application.store';
+import WatchesStore from '../Watches/watches.store';
+
+import styles from './application.css';
+
+@observer
+export default class Application extends Component {
+  application = ApplicationStore.get();
+  watches = WatchesStore.get();
+
+  componentWillMount () {
+    this.watches.add('time', () => new Date());
+    this.watches.add('blockNumber', api.eth.blockNumber, api);
+  }
+
+  render () {
+    return (
+      <div className={ styles.app }>
+        <div className={ styles.header }>
+          <Header />
+        </div>
+
+        { this.renderView() }
+
+        <div className={ styles.status }>
+          <Watches />
+        </div>
+      </div>
+    );
+  }
+
+  renderView () {
+    const { view } = this.application;
+
+    if (view === 'console') {
+      return (
+        <div className={ styles.view }>
+          <div className={ styles.eval }>
+            <Console />
+          </div>
+          <div className={ styles.input }>
+            <Input />
+          </div>
+        </div>
+      );
+    }
+
+    if (view === 'settings') {
+      return (
+        <div className={ styles.view }>
+          <Settings />
+        </div>
+      );
+    }
+
+    if (view === 'snippets') {
+      return (
+        <div className={ styles.view }>
+          <Snippets />
+        </div>
+      );
+    }
+
+    return null;
+  }
+}
diff --git a/js/src/dapps/console/Application/application.store.js b/js/src/dapps/console/Application/application.store.js
new file mode 100644
index 000000000..c10be46c6
--- /dev/null
+++ b/js/src/dapps/console/Application/application.store.js
@@ -0,0 +1,42 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, observable } from 'mobx';
+
+let instance;
+
+export default class ApplicationStore {
+  @observable view = this.views[0].id;
+
+  views = [
+    { label: 'Console', id: 'console' },
+    { label: 'Snippets', id: 'snippets' },
+    { label: 'Settings', id: 'settings' }
+  ];
+
+  static get () {
+    if (!instance) {
+      instance = new ApplicationStore();
+    }
+
+    return instance;
+  }
+
+  @action
+  setView (view) {
+    this.view = view;
+  }
+}
diff --git a/js/src/dapps/console/Application/index.js b/js/src/dapps/console/Application/index.js
new file mode 100644
index 000000000..3d8d1ca3b
--- /dev/null
+++ b/js/src/dapps/console/Application/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/js/src/dapps/console/Autocomplete/autocomplete.css b/js/src/dapps/console/Autocomplete/autocomplete.css
new file mode 100644
index 000000000..8d4585e7a
--- /dev/null
+++ b/js/src/dapps/console/Autocomplete/autocomplete.css
@@ -0,0 +1,55 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  background: #f8f8f8;
+  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5);
+  font-family: dejavu sans mono, monospace;
+  left: 20px;
+  position: absolute;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.item {
+  background-color: white;
+  padding: 0.25em 0.25em 0.25em 0.35em;
+  display: flex;
+  justify-content: space-between;
+
+  &.selected {
+    background-color: rgb(64, 115, 244);
+
+    &,
+    .proto {
+      color: white;
+    }
+  }
+
+  &:hover {
+    cursor: default;
+  }
+
+  &:hover:not(.selected) {
+    background-color: rgb(230, 236, 255);
+  }
+
+  .proto {
+    color: gray;
+    margin-left: 1em;
+  }
+}
diff --git a/js/src/dapps/console/Autocomplete/autocomplete.js b/js/src/dapps/console/Autocomplete/autocomplete.js
new file mode 100644
index 000000000..e2938f23d
--- /dev/null
+++ b/js/src/dapps/console/Autocomplete/autocomplete.js
@@ -0,0 +1,96 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import AutocompleteStore from './autocomplete.store';
+
+import styles from './autocomplete.css';
+
+@observer
+export default class Autocomplete extends Component {
+  autocompleteStore = AutocompleteStore.get();
+
+  render () {
+    if (!this.autocompleteStore.show) {
+      return null;
+    }
+
+    return (
+      <div
+        className={ styles.container }
+        style={ this.autocompleteStore.position }
+      >
+        { this.renderAutocompletes() }
+      </div>
+    );
+  }
+
+  renderAutocompletes () {
+    const { selected, values } = this.autocompleteStore;
+    const displayedProto = {};
+
+    return values.map((autocomplete, index) => {
+      const { name, prototypeName } = autocomplete;
+      const onClick = () => this.handleClick(index);
+      const setRef = (node) => this.setRef(index, node);
+
+      const proto = !displayedProto[prototypeName]
+        ? (
+          <span className={ styles.proto }>
+            { prototypeName }
+          </span>
+        )
+        : null;
+
+      if (!displayedProto[prototypeName]) {
+        displayedProto[prototypeName] = true;
+      }
+
+      const classes = [ styles.item ];
+
+      if (index === selected) {
+        classes.push(styles.selected);
+      }
+
+      return (
+        <div
+          className={ classes.join(' ') }
+          key={ index }
+          onClick={ onClick }
+          ref={ setRef }
+        >
+          <span>
+            { name }
+          </span>
+          { proto }
+        </div>
+      );
+    });
+  }
+
+  handleClick = (index) => {
+    this.autocompleteStore.select(index);
+  };
+
+  setRef = (index, node) => {
+    const element = ReactDOM.findDOMNode(node);
+
+    this.autocompleteStore.setElement(index, element);
+  };
+}
diff --git a/js/src/dapps/console/Autocomplete/autocomplete.store.js b/js/src/dapps/console/Autocomplete/autocomplete.store.js
new file mode 100644
index 000000000..82ff2f24d
--- /dev/null
+++ b/js/src/dapps/console/Autocomplete/autocomplete.store.js
@@ -0,0 +1,234 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, observable } from 'mobx';
+
+import { evaluate } from '../utils';
+
+let instance;
+
+export default class AutocompleteStore {
+  @observable values = [];
+  @observable position = {};
+  @observable show = false;
+  @observable selected = null;
+
+  elements = {};
+  inputNode = null;
+  lastObject = null;
+  lastObjectPropertyNames = [];
+
+  static get () {
+    if (!instance) {
+      instance = new AutocompleteStore();
+    }
+
+    return instance;
+  }
+
+  get hasSelected () {
+    return this.selected !== null;
+  }
+
+  clearCache () {
+    this.lastObject = null;
+    this.lastObjectPropertyNames = null;
+  }
+
+  @action
+  focus (offset = 1) {
+    if (this.values.length === 0) {
+      this.selected = null;
+      return;
+    }
+
+    this.selected = this.selected === null
+      ? (
+        offset === 1
+          ? 0
+          : this.values.length - 1
+      )
+      : (this.values.length + this.selected + offset) % (this.values.length);
+
+    if (this.isVisible(this.selected)) {
+      return;
+    }
+
+    const element = this.elements[this.selected];
+
+    if (!element) {
+      return;
+    }
+
+    element.scrollIntoView(offset === -1);
+  }
+
+  focusOnInput () {
+    if (!this.inputNode) {
+      return;
+    }
+
+    this.inputNode.focus();
+  }
+
+  @action
+  hide () {
+    this.show = false;
+    this.selected = null;
+  }
+
+  isVisible (index) {
+    const element = this.elements[index];
+
+    if (!element) {
+      return false;
+    }
+
+    const eBoundings = element.getBoundingClientRect();
+    const pBoundings = element.parentElement.getBoundingClientRect();
+
+    if (eBoundings.top < pBoundings.top || eBoundings.bottom > pBoundings.bottom) {
+      return false;
+    }
+
+    return true;
+  }
+
+  select (inputStore, _index = this.selected) {
+    const index = _index === null
+      ? 0
+      : _index;
+
+    if (!this.values[index]) {
+      console.warn(`autocomplete::select has been called on AutocompleteStore with wrong value ${index}`);
+      return;
+    }
+
+    const { name } = this.values[index];
+    const { input } = inputStore;
+    const objects = input.split('.');
+
+    objects[objects.length - 1] = name;
+    const nextInput = objects.join('.');
+
+    this.hide();
+    this.focusOnInput();
+    return inputStore.updateInput(nextInput, false);
+  }
+
+  setElement (index, element) {
+    this.elements[index] = element;
+  }
+
+  setInputNode (node) {
+    this.inputNode = node;
+  }
+
+  @action
+  setPosition () {
+    if (!this.inputNode) {
+      return;
+    }
+
+    const inputBoundings = this.inputNode.getBoundingClientRect();
+    const bodyBoundings = document.body.getBoundingClientRect();
+
+    // display on bottom of input
+    if (inputBoundings.top < bodyBoundings.height / 2) {
+      const nextPosition = {
+        top: 20
+      };
+
+      this.position = nextPosition;
+      return;
+    }
+
+    // display on top of input
+    const nextPosition = {
+      bottom: inputBoundings.height
+    };
+
+    this.position = nextPosition;
+    return;
+  }
+
+  @action
+  setValues (values) {
+    this.values = values;
+    this.selected = null;
+    const show = values.length > 0;
+
+    // Reveal autocomplete
+    if (!this.show && show) {
+      this.setPosition();
+    }
+
+    this.show = show;
+  }
+
+  update (input) {
+    if (input.length === 0) {
+      return this.setValues([]);
+    }
+
+    const objects = input.split('.');
+    const suffix = objects.pop().toLowerCase();
+    const prefix = objects.join('.');
+    const object = prefix.length > 0
+      ? prefix
+      : 'window';
+
+    if (object !== this.lastObject) {
+      const evalResult = evaluate(object);
+
+      if (evalResult.error) {
+        this.lastObjectProperties = [];
+      } else {
+        this.lastObjectProperties = getAllProperties(evalResult.result);
+      }
+
+      this.lastObject = object;
+    }
+
+    const autocompletes = this.lastObjectProperties.filter((property) => {
+      return property.name.toLowerCase().includes(suffix);
+    });
+
+    return this.setValues(autocompletes);
+  }
+}
+
+function getAllProperties (object) {
+  const propertyNames = {};
+
+  while (object) {
+    const prototypeName = object && object.constructor && object.constructor.name || '';
+
+    Object.getOwnPropertyNames(object)
+      .sort()
+      .forEach((name) => {
+        if (Object.prototype.hasOwnProperty.call(propertyNames, name)) {
+          return;
+        }
+
+        propertyNames[name] = { name, prototypeName };
+      });
+
+    object = Object.getPrototypeOf(object);
+  }
+
+  return Object.values(propertyNames);
+}
diff --git a/js/src/dapps/console/Autocomplete/index.js b/js/src/dapps/console/Autocomplete/index.js
new file mode 100644
index 000000000..5761be0e3
--- /dev/null
+++ b/js/src/dapps/console/Autocomplete/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './autocomplete';
diff --git a/js/src/dapps/console/Console/console.css b/js/src/dapps/console/Console/console.css
new file mode 100644
index 000000000..a0b3db4ff
--- /dev/null
+++ b/js/src/dapps/console/Console/console.css
@@ -0,0 +1,58 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.result {
+  border-top: 1px solid #eee;
+  display: flex;
+  font-family: dejavu sans mono, monospace;
+  padding: 0.35em 0.25em;
+
+  &.error {
+    background-color: hsl(0, 100%, 97%);
+
+    .text {
+      color: red;
+    }
+  }
+
+  &.warn {
+    background-color: hsl(50, 100%, 95%);
+  }
+}
+
+.type {
+  font-weight: bold !important;
+  font-size: 8pt;
+  padding: 0 0.5em 0 0.25em;
+}
+
+.time {
+  color: gray;
+  padding: 0 1em 0 0.5em;
+}
+
+.token {
+  white-space: pre-wrap;
+}
+
+.text {
+  display: flex;
+}
+
+.text .token:not(:first-child) {
+  margin-left: 0.5em;
+}
diff --git a/js/src/dapps/console/Console/console.js b/js/src/dapps/console/Console/console.js
new file mode 100644
index 000000000..75f9713a6
--- /dev/null
+++ b/js/src/dapps/console/Console/console.js
@@ -0,0 +1,118 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { ObjectInspector } from 'react-inspector';
+
+import ConsoleStore from './console.store';
+import SettingsStore from '../Settings/settings.store';
+
+import styles from './console.css';
+
+const ICONS = {
+  debug: '&nbsp;',
+  error: '✖',
+  info: 'ℹ',
+  input: '&gt;',
+  log: '&nbsp;',
+  result: '&lt;',
+  warn: '⚠'
+};
+
+@observer
+export default class Console extends Component {
+  consoleStore = ConsoleStore.get();
+  settingsStore = SettingsStore.get();
+
+  render () {
+    return (
+      <div ref={ this.setRef }>
+        { this.renderResults() }
+      </div>
+    );
+  }
+
+  renderResults () {
+    const { logs } = this.consoleStore;
+
+    return logs.map((data, index) => {
+      const { type, timestamp } = data;
+      const values = this.consoleStore.logValues[index];
+      const classes = [ styles.result, styles[type] ];
+
+      return (
+        <div
+          className={ classes.join(' ') }
+          key={ index }
+        >
+          <span
+            className={ styles.type }
+            dangerouslySetInnerHTML={ { __html: ICONS[type] || '' } }
+          />
+          { this.renderTimestamp(timestamp) }
+          <span className={ styles.text }>
+            {
+              values.map((value, valueIndex) => (
+                <span
+                  className={ styles.token }
+                  key={ valueIndex }
+                >
+                  { this.toString(value) }
+                </span>
+              ))
+            }
+          </span>
+        </div>
+      );
+    });
+  }
+
+  renderTimestamp (timestamp) {
+    const { displayTimestamps } = this.settingsStore;
+
+    if (!displayTimestamps) {
+      return null;
+    }
+
+    return (
+      <span className={ styles.time }>
+        { new Date(timestamp).toISOString().slice(11, 23) }
+      </span>
+    );
+  }
+
+  setRef = (node) => {
+    const element = ReactDOM.findDOMNode(node);
+
+    this.consoleStore.setNode(element);
+  };
+
+  toString (value) {
+    if (typeof value === 'string') {
+      return value;
+    }
+
+    if (value instanceof Error) {
+      return value.toString();
+    }
+
+    return (
+      <ObjectInspector data={ value } />
+    );
+  }
+}
diff --git a/js/src/dapps/console/Console/console.store.js b/js/src/dapps/console/Console/console.store.js
new file mode 100644
index 000000000..dc2fc6db4
--- /dev/null
+++ b/js/src/dapps/console/Console/console.store.js
@@ -0,0 +1,126 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, observable } from 'mobx';
+
+import AutocompleteStore from '../Autocomplete/autocomplete.store';
+import { evaluate } from '../utils';
+
+let instance;
+
+export default class ConsoleStore {
+  @observable logs = [];
+
+  autocompleteStore = AutocompleteStore.get();
+  logValues = [];
+  node = null;
+
+  constructor () {
+    this.attachConsole();
+  }
+
+  static get () {
+    if (!instance) {
+      instance = new ConsoleStore();
+    }
+
+    return instance;
+  }
+
+  attachConsole () {
+    ['debug', 'error', 'info', 'log', 'warn'].forEach((level) => {
+      const old = window.console[level].bind(window.console);
+
+      window.console[level] = (...args) => {
+        old(...args);
+        this.log({ type: level, values: args });
+      };
+    });
+  }
+
+  @action
+  clear () {
+    this.logs = [];
+    this.logValues = [];
+  }
+
+  evaluate (input) {
+    this.log({ type: 'input', value: input });
+
+    setTimeout(() => {
+      const { result, error } = evaluate(input);
+      let value = error || result;
+      const type = error
+        ? 'error'
+        : 'result';
+
+      if (typeof value === 'string') {
+        value = `"${value}"`;
+      }
+
+      if (value && typeof value === 'object' && typeof value.then === 'function') {
+        return value
+          .then((result) => {
+            this.log({ type: 'result', value: result });
+          })
+          .catch((error) => {
+            this.log({ type: 'error', value: error });
+          });
+      }
+
+      this.log({ type, value });
+    });
+  }
+
+  @action
+  log ({ type, value, values }) {
+    this.logs.push({
+      type,
+      timestamp: Date.now()
+    });
+
+    if (values) {
+      this.logValues.push(values);
+    } else {
+      this.logValues.push([ value ]);
+    }
+
+    this.autocompleteStore.setPosition();
+    this.scroll();
+  }
+
+  setNode (node) {
+    this.node = node;
+    this.scroll();
+  }
+
+  scroll () {
+    if (!this.node) {
+      return;
+    }
+
+    setTimeout(() => {
+      if (this.node.children.length === 0) {
+        return;
+      }
+
+      // Scroll to the last child
+      this.node
+        .children[this.node.children.length - 1]
+        .scrollIntoView(false);
+    }, 50);
+  }
+}
diff --git a/js/src/dapps/console/Console/index.js b/js/src/dapps/console/Console/index.js
new file mode 100644
index 000000000..2956b330f
--- /dev/null
+++ b/js/src/dapps/console/Console/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './console';
diff --git a/js/src/dapps/console/Header/header.css b/js/src/dapps/console/Header/header.css
new file mode 100644
index 000000000..116de6b8c
--- /dev/null
+++ b/js/src/dapps/console/Header/header.css
@@ -0,0 +1,51 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  background-color: #f3f3f3;
+  border-bottom: 1px solid #ccc;
+  font-size: 12px;
+  padding: 0 0.5em;
+}
+
+.tabs {
+  display: flex;
+}
+
+.tab {
+  align-items: center;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  color: #333;
+  cursor: default;
+  display: flex;
+  height: 24px;
+  line-height: 15px;
+  margin-top: 2px;
+  padding: 2px 6px 2px 4px;
+
+  &:hover,
+  &.active:hover {
+    background-color: #e5e5e5;
+  }
+
+  &.active {
+    background-color: white;
+    border: 1px solid #ccc;
+    border-bottom: none;
+  }
+}
diff --git a/js/src/dapps/console/Header/header.js b/js/src/dapps/console/Header/header.js
new file mode 100644
index 000000000..c422b8256
--- /dev/null
+++ b/js/src/dapps/console/Header/header.js
@@ -0,0 +1,65 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+
+import ApplicationStore from '../Application/application.store';
+
+import styles from './header.css';
+
+@observer
+export default class Header extends Component {
+  application = ApplicationStore.get();
+
+  render () {
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.tabs }>
+          { this.renderTabs() }
+        </div>
+      </div>
+    );
+  }
+
+  renderTabs () {
+    const { view } = this.application;
+
+    return this.application.views.map((tab) => {
+      const { label, id } = tab;
+      const classes = [ styles.tab ];
+      const onClick = () => this.handleClickTab(id);
+
+      if (id === view) {
+        classes.push(styles.active);
+      }
+
+      return (
+        <div
+          className={ classes.join(' ') }
+          key={ id }
+          onClick={ onClick }
+        >
+          { label }
+        </div>
+      );
+    });
+  }
+
+  handleClickTab = (id) => {
+    this.application.setView(id);
+  };
+}
diff --git a/js/src/dapps/console/Header/index.js b/js/src/dapps/console/Header/index.js
new file mode 100644
index 000000000..aef90266f
--- /dev/null
+++ b/js/src/dapps/console/Header/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './header';
diff --git a/js/src/dapps/console/Input/index.js b/js/src/dapps/console/Input/index.js
new file mode 100644
index 000000000..29e00f72b
--- /dev/null
+++ b/js/src/dapps/console/Input/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './input';
diff --git a/js/src/dapps/console/Input/input.css b/js/src/dapps/console/Input/input.css
new file mode 100644
index 000000000..7b0c2306e
--- /dev/null
+++ b/js/src/dapps/console/Input/input.css
@@ -0,0 +1,46 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.type {
+  color: #59f;
+  font-weight: bold !important;
+  font-size: 11px;
+  padding: 0 0.5em 0 0.25em;
+}
+
+.inputContainer {
+  flex: 1;
+}
+
+.input {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  color: black;
+  height: 100%;
+  font-size: 11px;
+  resize: none;
+  width: 100%;
+}
+
+.container {
+  border-top: 1px solid lightgray;
+  display: flex;
+  flex: 1;
+  padding: 0.25em;
+  position: relative;
+}
diff --git a/js/src/dapps/console/Input/input.js b/js/src/dapps/console/Input/input.js
new file mode 100644
index 000000000..3263aff38
--- /dev/null
+++ b/js/src/dapps/console/Input/input.js
@@ -0,0 +1,145 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import keycode from 'keycode';
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import Autocomplete from '../Autocomplete';
+
+import AutocompleteStore from '../Autocomplete/autocomplete.store';
+import ConsoleStore from '../Console/console.store';
+import InputStore from './input.store';
+import SettingsStore from '../Settings/settings.store';
+
+import styles from './input.css';
+
+@observer
+export default class Input extends Component {
+  autocompleteStore = AutocompleteStore.get();
+  consoleStore = ConsoleStore.get();
+  inputStore = InputStore.get();
+  settingsStore = SettingsStore.get();
+
+  render () {
+    const { input } = this.inputStore;
+
+    return (
+      <div className={ styles.container }>
+        <Autocomplete />
+        <span className={ styles.type }>&gt;</span>
+        <div className={ styles.inputContainer }>
+          <textarea
+            autoFocus
+            className={ styles.input }
+            onChange={ this.handleChange }
+            onKeyDown={ this.handleKeyDown }
+            ref={ this.setRef }
+            rows={ input.split('\n').length }
+            type='text'
+            value={ input }
+          />
+        </div>
+      </div>
+    );
+  }
+
+  handleChange = (event) => {
+    const { value } = event.target;
+
+    this.inputStore.updateInput(value);
+  };
+
+  handleKeyDown = (event) => {
+    const { executeOnEnter } = this.settingsStore;
+    const { input } = this.inputStore;
+    const codeName = keycode(event);
+    const multilines = input.split('\n').length > 1;
+
+    // Clear console with CTRL+L
+    if (codeName === 'l' && event.ctrlKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      return this.consoleStore.clear();
+    }
+
+    if (codeName === 'esc') {
+      event.preventDefault();
+      event.stopPropagation();
+      return this.autocompleteStore.hide();
+    }
+
+    if (codeName === 'enter') {
+      if (event.shiftKey) {
+        return;
+      }
+
+      // If not execute on enter: execute on
+      // enter + CTRL
+      if (!executeOnEnter && !event.ctrlKey) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (this.autocompleteStore.hasSelected) {
+        return this.autocompleteStore.select(this.inputStore);
+      }
+
+      if (input.length > 0) {
+        return this.inputStore.execute();
+      }
+    }
+
+    if (codeName === 'up' && !multilines) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (this.autocompleteStore.show) {
+        return this.autocompleteStore.focus(-1);
+      }
+
+      return this.inputStore.selectHistory(-1);
+    }
+
+    if (codeName === 'down' && !multilines) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (this.autocompleteStore.show) {
+        return this.autocompleteStore.focus(1);
+      }
+
+      return this.inputStore.selectHistory(1);
+    }
+
+    if (codeName === 'left' && this.autocompleteStore.show) {
+      return this.autocompleteStore.hide();
+    }
+
+    if (codeName === 'right' && this.autocompleteStore.show) {
+      event.preventDefault();
+      event.stopPropagation();
+      return this.autocompleteStore.select(this.inputStore);
+    }
+  };
+
+  setRef = (node) => {
+    this.inputStore.setInputNode(ReactDOM.findDOMNode(node));
+  };
+}
diff --git a/js/src/dapps/console/Input/input.store.js b/js/src/dapps/console/Input/input.store.js
new file mode 100644
index 000000000..9d8c2b51a
--- /dev/null
+++ b/js/src/dapps/console/Input/input.store.js
@@ -0,0 +1,124 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, observable } from 'mobx';
+import store from 'store';
+
+import AutocompleteStore from '../Autocomplete/autocomplete.store';
+import ConsoleStore from '../Console/console.store';
+
+const LS_HISTORY_KEY = '_console::history';
+const MAX_HISTORY_LINES = 5;
+
+let instance;
+
+export default class InputStore {
+  @observable input = '';
+
+  autocompleteStore = AutocompleteStore.get();
+  consoleStore = ConsoleStore.get();
+  history = [];
+  historyOffset = null;
+  inputNode = null;
+  lastInput = '';
+
+  constructor () {
+    this.loadHistory();
+  }
+
+  static get () {
+    if (!instance) {
+      instance = new InputStore();
+    }
+
+    return instance;
+  }
+
+  setInputNode (node) {
+    this.inputNode = node;
+    this.autocompleteStore.setInputNode(node);
+  }
+
+  @action
+  updateInput (nextValue = '', updateAutocomplete = true) {
+    this.input = nextValue;
+    const multilines = nextValue.split('\n').length > 1;
+
+    if (updateAutocomplete && !multilines) {
+      this.autocompleteStore.update(nextValue);
+    }
+  }
+
+  selectHistory (_offset) {
+    // No history
+    if (this.history.length === 0) {
+      return;
+    }
+
+    if (this.historyOffset === null) {
+      // Can't go down if no history selected
+      if (_offset === 1) {
+        return;
+      }
+
+      this.historyOffset = this.history.length - 1;
+      this.lastInput = this.input;
+      return this.updateInput(this.history[this.historyOffset], false);
+    }
+
+    if (_offset === 1 && this.historyOffset === this.history.length - 1) {
+      this.historyOffset = null;
+      return this.updateInput(this.lastInput);
+    }
+
+    this.historyOffset = Math.max(0, this.historyOffset + _offset);
+    const nextInput = this.history[this.historyOffset];
+
+    this.updateInput(nextInput, false);
+  }
+
+  execute () {
+    const { input } = this;
+
+    this.pushToHistory(input);
+    this.consoleStore.evaluate(input);
+    this.updateInput('');
+    this.historyOffset = null;
+    this.autocompleteStore.clearCache();
+  }
+
+  pushToHistory (input) {
+    // Don't stack twice the same input in
+    // history
+    if (this.history[this.history.length - 1] !== input) {
+      this.history.push(input);
+    }
+
+    this.saveHistory();
+  }
+
+  loadHistory () {
+    this.history = store.get(LS_HISTORY_KEY) || [];
+  }
+
+  saveHistory () {
+    if (this.history.length > MAX_HISTORY_LINES) {
+      this.history = this.history.slice(-1 * MAX_HISTORY_LINES);
+    }
+
+    store.set(LS_HISTORY_KEY, this.history.slice());
+  }
+}
diff --git a/js/src/dapps/console/Settings/index.js b/js/src/dapps/console/Settings/index.js
new file mode 100644
index 000000000..a148ded7a
--- /dev/null
+++ b/js/src/dapps/console/Settings/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './settings';
diff --git a/js/src/dapps/console/Settings/settings.css b/js/src/dapps/console/Settings/settings.css
new file mode 100644
index 000000000..8dbe7e743
--- /dev/null
+++ b/js/src/dapps/console/Settings/settings.css
@@ -0,0 +1,32 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  display: flex;
+  flex-direction: row;
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  padding: 0.5em 1em;
+}
+
+.option {
+  align-items: center;
+  display: flex;
+  flex: 0 0 50%;
+  flex-direction: row;
+  margin: 0.5em 0;
+}
diff --git a/js/src/dapps/console/Settings/settings.js b/js/src/dapps/console/Settings/settings.js
new file mode 100644
index 000000000..63ae9023f
--- /dev/null
+++ b/js/src/dapps/console/Settings/settings.js
@@ -0,0 +1,70 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+
+import SettingsStore from './settings.store';
+
+import styles from './settings.css';
+
+@observer
+export default class Settings extends Component {
+  settingsStore = SettingsStore.get();
+
+  render () {
+    const { displayTimestamps, executeOnEnter } = this.settingsStore;
+
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.option }>
+          <input
+            checked={ executeOnEnter }
+            id='executeOnEnter'
+            onChange={ this.handleExecuteOnEnterChange }
+            type='checkbox'
+          />
+          <label htmlFor='executeOnEnter'>
+            Execute on <code>Enter</code>
+          </label>
+        </div>
+        <div className={ styles.option }>
+          <input
+            checked={ displayTimestamps }
+            id='displayTimestamps'
+            onChange={ this.handleDisplayTimestampsChange }
+            type='checkbox'
+          />
+          <label htmlFor='displayTimestamps'>
+            Show timestamps
+          </label>
+        </div>
+      </div>
+    );
+  }
+
+  handleDisplayTimestampsChange = (event) => {
+    const { checked } = event.target;
+
+    this.settingsStore.setDisplayTimestamps(checked);
+  };
+
+  handleExecuteOnEnterChange = (event) => {
+    const { checked } = event.target;
+
+    this.settingsStore.setExecuteOnEnter(checked);
+  };
+}
diff --git a/js/src/dapps/console/Settings/settings.store.js b/js/src/dapps/console/Settings/settings.store.js
new file mode 100644
index 000000000..4c23f8341
--- /dev/null
+++ b/js/src/dapps/console/Settings/settings.store.js
@@ -0,0 +1,71 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, observable } from 'mobx';
+import store from 'store';
+
+const LS_SETTINGS_KEY = '_console::settings';
+
+let instance;
+
+export default class SettingsStore {
+  @observable displayTimestamps = true;
+  @observable executeOnEnter = true;
+
+  constructor () {
+    this.load();
+  }
+
+  static get () {
+    if (!instance) {
+      instance = new SettingsStore();
+    }
+
+    return instance;
+  }
+
+  load () {
+    const settings = store.get(LS_SETTINGS_KEY) || {};
+    const { executeOnEnter, displayTimestamps } = settings;
+
+    if (executeOnEnter !== undefined) {
+      this.setExecuteOnEnter(executeOnEnter);
+    }
+
+    if (displayTimestamps !== undefined) {
+      this.setDisplayTimestamps(displayTimestamps);
+    }
+  }
+
+  save () {
+    const { executeOnEnter, displayTimestamps } = this;
+    const settings = { executeOnEnter, displayTimestamps };
+
+    store.set(LS_SETTINGS_KEY, settings);
+  }
+
+  @action
+  setDisplayTimestamps (value) {
+    this.displayTimestamps = value;
+    this.save();
+  }
+
+  @action
+  setExecuteOnEnter (value) {
+    this.executeOnEnter = value;
+    this.save();
+  }
+}
diff --git a/js/src/dapps/console/Snippets/index.js b/js/src/dapps/console/Snippets/index.js
new file mode 100644
index 000000000..48dd44601
--- /dev/null
+++ b/js/src/dapps/console/Snippets/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './snippets';
diff --git a/js/src/dapps/console/Snippets/snippets.css b/js/src/dapps/console/Snippets/snippets.css
new file mode 100644
index 000000000..a5004de1c
--- /dev/null
+++ b/js/src/dapps/console/Snippets/snippets.css
@@ -0,0 +1,122 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+}
+
+.panel {
+  border-right: 1px solid lightgray;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+}
+
+.add {
+  align-items: center;
+  background-color: #fcfcfc;
+  border-bottom: 1px solid lightgray;
+  cursor: default;
+  display: flex;
+  padding: 0.5em 1em;
+
+  .plus {
+    font-size: 15px;
+    font-weight: bold !important;
+    margin-right: 5px;
+  }
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  margin-top: 3px;
+}
+
+.code {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  .console {
+    border-top: 1px solid lightgray;
+    max-height: 200px;
+    flex: 0 0 0;
+
+    > * {
+      overflow: auto;
+      height: 100%;
+    }
+  }
+
+  > * {
+    flex: 1;
+  }
+
+  :global(.CodeMirror) {
+    height: 100%;
+  }
+}
+
+.file {
+  align-items: center;
+  cursor: default;
+  display: flex;
+  padding: 0.5em 0.5em 0.5em 1em;
+
+  &.selected {
+    background-color: #f0f0f0;
+  }
+
+  &:hover {
+    background-color: rgb(230, 236, 255);
+  }
+
+  .pristine {
+    font-size: 20px;
+    margin-right: 3px;
+    height: 13px;
+  }
+
+  .remove {
+    cursor: default;
+    display: inline-flex;
+    font-size: 14px;
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+}
+
+.inputContainer {
+  background-color: white;
+  border: solid 1px #d8d8d8;
+  margin-right: 0.5em;
+  padding: 3px;
+  width: 100%;
+}
+
+.input {
+  border: none;
+  font: 11px Arial;
+  width: 100%;
+}
diff --git a/js/src/dapps/console/Snippets/snippets.js b/js/src/dapps/console/Snippets/snippets.js
new file mode 100644
index 000000000..eeb9459cf
--- /dev/null
+++ b/js/src/dapps/console/Snippets/snippets.js
@@ -0,0 +1,221 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import keycode from 'keycode';
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+import CodeMirror from 'react-codemirror';
+import EventListener from 'react-event-listener';
+
+import Console from '../Console';
+import SnippetsStore from './snippets.store';
+
+import styles from './snippets.css';
+
+@observer
+export default class Snippets extends Component {
+  snippetsStore = SnippetsStore.get();
+
+  render () {
+    const { code } = this.snippetsStore;
+
+    return (
+      <div className={ styles.container }>
+        <EventListener
+          onKeyDown={ this.handleKeyDown }
+          target='window'
+        />
+        <div className={ styles.panel }>
+          <div
+            className={ styles.add }
+            onClick={ this.handleAddFile }
+          >
+            <span className={ styles.plus }>+</span>
+            <span>New Snippet</span>
+          </div>
+          <div className={ styles.list }>
+            { this.renderFiles() }
+          </div>
+        </div>
+        <div className={ styles.code }>
+          <CodeMirror
+            ref={ this.setRef }
+            onChange={ this.handleChange }
+            options={ {
+              autofocus: true,
+              extraKeys: {
+                'Ctrl-Space': 'autocomplete'
+              },
+              keyMap: 'sublime',
+              highlightSelectionMatches: {
+                delay: 0,
+                showToken: false
+              },
+              lineNumbers: true,
+              mode: 'javascript'
+            } }
+            value={ code }
+          />
+          <div className={ styles.console }>
+            <Console />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderFiles () {
+    const { files } = this.snippetsStore;
+
+    return files
+      .values()
+      .sort((fa, fb) => fa.name.localeCompare(fb.name))
+      .map((file) => this.renderFile(file));
+  }
+
+  renderFile (file) {
+    const { nextName, renaming, selected } = this.snippetsStore;
+    const { id, name } = file;
+    const classes = [ styles.file ];
+
+    if (renaming === id) {
+      return (
+        <div
+          className={ classes.join(' ') }
+          key={ id }
+        >
+          <EventListener
+            onClick={ this.handleSaveName }
+            target='window'
+          />
+          <div className={ styles.inputContainer }>
+            <input
+              autoFocus
+              className={ styles.input }
+              onClick={ this.stopPropagation }
+              onChange={ this.handleNameChange }
+              onKeyDown={ this.handleRenameKeyDown }
+              type='text'
+              value={ nextName }
+            />
+          </div>
+        </div>
+      );
+    }
+
+    const onClick = () => this.handleSelectFile(id);
+    const onDoubleClick = () => this.handleRenameFile(id);
+    const onRemove = (event) => this.handleRemove(id, event);
+
+    if (selected === id) {
+      classes.push(styles.selected);
+    }
+
+    return (
+      <div
+        className={ classes.join(' ') }
+        key={ id }
+        onClick={ onClick }
+        onDoubleClick={ onDoubleClick }
+      >
+        <span
+          className={ styles.remove }
+          onClick={ onRemove }
+          title={ `Remove ${name}` }
+        >
+          ✖
+        </span>
+        <span className={ styles.pristine }>
+          {
+            file.isPristine
+            ? null
+            : '*'
+          }
+        </span>
+        <span>
+          { name }
+        </span>
+      </div>
+    );
+  }
+
+  handleAddFile = () => {
+    this.snippetsStore.create();
+  };
+
+  handleSaveName = (event) => {
+    this.snippetsStore.saveName();
+    return event;
+  };
+
+  handleChange = (value) => {
+    this.snippetsStore.edit(value);
+  };
+
+  handleKeyDown = (event) => {
+    const codeName = keycode(event);
+
+    if (codeName === 's' && event.ctrlKey) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      return this.snippetsStore.save();
+    }
+  };
+
+  handleNameChange = (event) => {
+    const { value } = event.target;
+
+    this.snippetsStore.updateName(value);
+  };
+
+  handleRemove = (id, event) => {
+    this.snippetsStore.remove(id);
+    event.stopPropagation();
+  };
+
+  handleRenameFile = (id) => {
+    this.snippetsStore.startRename(id);
+  };
+
+  handleRenameKeyDown = (event) => {
+    const codeName = keycode(event);
+
+    if (codeName === 'enter') {
+      return this.snippetsStore.saveName();
+    }
+
+    if (codeName === 'esc') {
+      return this.snippetsStore.cancelRename();
+    }
+  };
+
+  handleSelectFile = (id) => {
+    this.snippetsStore.select(id);
+  };
+
+  setRef = (node) => {
+    const codeMirror = node
+      ? node.getCodeMirror()
+      : null;
+
+    this.snippetsStore.setCodeMirror(codeMirror);
+  };
+
+  stopPropagation = (event) => {
+    event.stopPropagation();
+  };
+}
diff --git a/js/src/dapps/console/Snippets/snippets.store.js b/js/src/dapps/console/Snippets/snippets.store.js
new file mode 100644
index 000000000..117d021e8
--- /dev/null
+++ b/js/src/dapps/console/Snippets/snippets.store.js
@@ -0,0 +1,249 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import keycode from 'keycode';
+import { action, computed, map, observable, transaction } from 'mobx';
+import store from 'store';
+
+import { evaluate } from '../utils';
+
+const LS_SNIPPETS_KEY = '_console::snippets';
+
+let instance;
+
+export default class SnippetsStore {
+  @observable files = map();
+  @observable nextName = null;
+  @observable renaming = null;
+  @observable selected = null;
+
+  codeMirror = null;
+
+  constructor () {
+    this.load();
+  }
+
+  static get () {
+    if (!instance) {
+      instance = new SnippetsStore();
+    }
+
+    return instance;
+  }
+
+  @computed
+  get code () {
+    if (!this.selected) {
+      return '';
+    }
+
+    return this.files.get(this.selected).content;
+  }
+
+  @action
+  cancelRename () {
+    if (!this.renaming || !this.nextName) {
+      return;
+    }
+
+    this.renaming = null;
+    this.nextName = null;
+  }
+
+  clearCodeHistory () {
+    if (this.codeMirror) {
+      this.codeMirror.doc.clearHistory();
+    }
+  }
+
+  @action
+  create () {
+    const id = this.getNewId();
+    const file = {
+      content: '',
+      isPristine: false,
+      name: `Snippet #${id}`,
+      id
+    };
+
+    transaction(() => {
+      this.files.set(id, file);
+      this.select(id);
+    });
+  }
+
+  edit (value) {
+    if (!this.selected) {
+      this.create();
+    }
+
+    const file = this.files.get(this.selected);
+
+    file.content = value;
+    this.updateFile(file);
+  }
+
+  evaluate () {
+    const code = this.code;
+
+    if (!code) {
+      return;
+    }
+
+    const { result, error } = evaluate(code);
+
+    if (error) {
+      console.error(error);
+    } else {
+      console.log(result);
+    }
+  }
+
+  getFromStorage () {
+    return store.get(LS_SNIPPETS_KEY) || [];
+  }
+
+  getNewId () {
+    if (this.files.size === 0) {
+      return 1;
+    }
+
+    const ids = this.files.values().map((file) => file.id);
+
+    return Math.max(...ids) + 1;
+  }
+
+  load () {
+    const files = this.getFromStorage();
+
+    transaction(() => {
+      files.forEach((file) => {
+        this.files.set(file.id, file);
+      });
+    });
+  }
+
+  @action
+  remove (id) {
+    transaction(() => {
+      if (id === this.selected) {
+        this.selected = null;
+      }
+
+      this.files.delete(id);
+
+      const files = this.getFromStorage()
+        .filter((f) => f.id !== id);
+
+      return store.set(LS_SNIPPETS_KEY, files);
+    });
+  }
+
+  save (_file) {
+    let file;
+
+    if (!_file) {
+      if (!this.selected) {
+        return false;
+      }
+
+      file = this.files.get(this.selected);
+    } else {
+      file = _file;
+    }
+
+    file.savedContent = file.content;
+    this.updateFile(file);
+    this.saveToStorage(file);
+  }
+
+  saveName () {
+    if (!this.renaming || !this.nextName) {
+      return;
+    }
+
+    const file = this.files.get(this.renaming);
+
+    file.name = this.nextName;
+
+    this.save(file);
+    this.cancelRename();
+  }
+
+  saveToStorage (file) {
+    const files = this.getFromStorage();
+    const index = files.findIndex((f) => file.id === f.id);
+
+    if (index === -1) {
+      files.push(file);
+    } else {
+      files[index] = file;
+    }
+
+    return store.set(LS_SNIPPETS_KEY, files);
+  }
+
+  @action
+  select (id) {
+    this.selected = id;
+
+    // Wait for the file content to be loaded
+    setTimeout(() => {
+      this.clearCodeHistory();
+    }, 50);
+  }
+
+  setCodeMirror (codeMirror) {
+    this.codeMirror = codeMirror;
+
+    if (!codeMirror) {
+      return;
+    }
+
+    this.codeMirror
+      .on('keydown', (_, event) => {
+        const codeName = keycode(event);
+
+        if (codeName === 'enter' && event.ctrlKey) {
+          event.preventDefault();
+          event.stopPropagation();
+          return this.evaluate();
+        }
+      });
+  }
+
+  @action
+  startRename (id) {
+    const file = this.files.get(id);
+
+    transaction(() => {
+      this.renaming = id;
+      this.nextName = file.name;
+    });
+  }
+
+  @action
+  updateFile (file) {
+    file.isPristine = (file.content === file.savedContent);
+
+    this.files.set(file.id, file);
+  }
+
+  @action
+  updateName (value) {
+    this.nextName = value;
+  }
+}
diff --git a/js/src/dapps/console/Watches/index.js b/js/src/dapps/console/Watches/index.js
new file mode 100644
index 000000000..97795733e
--- /dev/null
+++ b/js/src/dapps/console/Watches/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './watches';
diff --git a/js/src/dapps/console/Watches/watches.css b/js/src/dapps/console/Watches/watches.css
new file mode 100644
index 000000000..bcc8aa73d
--- /dev/null
+++ b/js/src/dapps/console/Watches/watches.css
@@ -0,0 +1,107 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  background: #eee;
+  border-top: 1px solid lightgray;
+  display: flex;
+  flex-direction: row;
+  padding: 0.25em;
+  font-size: 8pt;
+  color: #888;
+}
+
+.watch {
+  align-items: flex-end;
+  border-left: 1px solid #ccc;
+  display: flex;
+  padding: 0 1em;
+
+  &.error .result {
+    color: red;
+  }
+
+  .result {
+    color: #00f;
+    font-weight: bold;
+    margin-left: 0.5em;
+  }
+}
+
+.add {
+  color: green;
+  cursor: default;
+  font-size: 14px;
+  font-weight: bold !important;
+  padding: 0 1em;
+
+  &:hover {
+    background-color: #fcfcfc;
+  }
+
+  &.selected {
+    background-color: rgb(230, 236, 255);
+  }
+}
+
+.addContainer {
+  position: relative;
+}
+
+.addForm {
+  bottom: 100%;
+  display: flex;
+  padding: 0.5em 0;
+  position: absolute;
+  width: 100vw;
+
+  .inputContainer {
+    border: solid 1px #d8d8d8;
+    margin-right: 0.5em;
+    padding: 3px;
+  }
+
+  .input {
+    border: none;
+    font: 12px Arial;
+
+    &.big {
+      width: 300px;
+    }
+  }
+
+  .button {
+    color: black;
+    font: 12px Arial;
+    padding: 0 1em;
+  }
+}
+
+.remove {
+  cursor: default;
+  display: inline-flex;
+  font-size: 14px;
+  margin-right: 0.75em;
+
+  * {
+    line-height: 13px;
+  }
+
+  &:hover {
+    background-color: #fcfcfc;
+  }
+}
diff --git a/js/src/dapps/console/Watches/watches.js b/js/src/dapps/console/Watches/watches.js
new file mode 100644
index 000000000..9eb0c9494
--- /dev/null
+++ b/js/src/dapps/console/Watches/watches.js
@@ -0,0 +1,186 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+
+import WatchesStore from './watches.store';
+
+import styles from './watches.css';
+
+@observer
+export default class Watches extends Component {
+  watchesStore = WatchesStore.get();
+
+  render () {
+    return (
+      <div className={ styles.container }>
+        { this.renderAddWatch() }
+        { this.renderWatches() }
+      </div>
+    );
+  }
+
+  renderAddForm () {
+    const { showAdd } = this.watchesStore;
+
+    if (!showAdd) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.addForm }>
+        <div className={ styles.inputContainer }>
+          <input
+            className={ styles.input }
+            onChange={ this.handleAddNameChange }
+            placeholder='Name'
+            type='text'
+          />
+        </div>
+        <div className={ styles.inputContainer }>
+          <input
+            className={ [ styles.input, styles.big ].join(' ') }
+            onChange={ this.handleAddFunctionChange }
+            placeholder='Function'
+            type='text'
+          />
+        </div>
+        <div className={ styles.inputContainer }>
+          <input
+            className={ styles.input }
+            onChange={ this.handleAddContextChange }
+            placeholder='Context'
+            type='text'
+          />
+        </div>
+        <button
+          className={ styles.button }
+          onClick={ this.handleAddWatch }
+        >
+          Add
+        </button>
+      </div>
+    );
+  }
+
+  renderAddWatch () {
+    const { showAdd } = this.watchesStore;
+    const classes = [ styles.add ];
+
+    if (showAdd) {
+      classes.push(styles.selected);
+    }
+
+    return (
+      <div className={ styles.addContainer }>
+        { this.renderAddForm() }
+        <span
+          className={ classes.join(' ') }
+          onClick={ this.handleToggleAdd }
+        >
+          +
+        </span>
+      </div>
+    );
+  }
+
+  renderWatches () {
+    const { names } = this.watchesStore;
+
+    return names.map((name) => {
+      const { result, error } = this.watchesStore.get(name);
+      const classes = [ styles.watch ];
+      const resultStr = error
+        ? error.toString()
+        : this.toString(result);
+
+      const onClick = () => this.handleRemoveWatch(name);
+
+      if (error) {
+        classes.push(styles.error);
+      }
+
+      return (
+        <div
+          className={ classes.join(' ') }
+          key={ name }
+        >
+          <span
+            className={ styles.remove }
+            onClick={ onClick }
+            title={ `Remove "${name}" watch` }
+          >
+            <span>✖</span>
+          </span>
+
+          <span>{ name }</span>
+          <span className={ styles.result }>{ resultStr.toString() }</span>
+        </div>
+      );
+    });
+  }
+
+  handleAddFunctionChange = (event) => {
+    const { value } = event.target;
+
+    this.watchesStore.updateAddFunction(value);
+  };
+
+  handleAddContextChange = (event) => {
+    const { value } = event.target;
+
+    this.watchesStore.updateAddContext(value);
+  };
+
+  handleAddNameChange = (event) => {
+    const { value } = event.target;
+
+    this.watchesStore.updateAddName(value);
+  };
+
+  handleAddWatch = () => {
+    this.watchesStore.addWatch();
+  };
+
+  handleRemoveWatch = (name) => {
+    this.watchesStore.remove(name);
+  };
+
+  handleToggleAdd = () => {
+    this.watchesStore.toggleAdd();
+  };
+
+  toString (result) {
+    if (result === undefined) {
+      return 'undefined';
+    }
+
+    if (result === null) {
+      return 'null';
+    }
+
+    if (typeof result.toFormat === 'function') {
+      return result.toFormat();
+    }
+
+    if (typeof result.toString === 'function') {
+      return result.toString();
+    }
+
+    return result;
+  }
+}
diff --git a/js/src/dapps/console/Watches/watches.store.js b/js/src/dapps/console/Watches/watches.store.js
new file mode 100644
index 000000000..2875588ec
--- /dev/null
+++ b/js/src/dapps/console/Watches/watches.store.js
@@ -0,0 +1,148 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, map, observable } from 'mobx';
+
+import { api } from '../parity';
+import { evaluate } from '../utils';
+
+let instance;
+
+export default class WatchesStore {
+  @observable showAdd = false;
+  @observable watches = map();
+
+  watchesFunctions = {};
+
+  constructor () {
+    api.subscribe('eth_blockNumber', () => {
+      this.refreshWatches();
+    });
+  }
+
+  static get () {
+    if (!instance) {
+      instance = new WatchesStore();
+
+      window.watch = instance.add.bind(instance);
+      window.unwatch = instance.remove.bind(instance);
+    }
+
+    return instance;
+  }
+
+  @action
+  add (name, func, context) {
+    if (!func || (typeof func !== 'function' && typeof func.then !== 'function')) {
+      return console.error(Error(`cannot watch ${name} ; not a Function/Promise given`));
+    }
+
+    this.watchesFunctions[name] = { func, context };
+    this.watches.set(name, {});
+    this.refreshWatches();
+  }
+
+  addWatch () {
+    this.toggleAdd();
+
+    const { addContext, addFunction, addName } = this;
+
+    const evaluatedFunction = evaluate(addFunction);
+    const evaluatedContext = addContext
+      ? evaluate(addContext)
+      : {};
+
+    this.add(addName, evaluatedFunction.result, evaluatedContext.result);
+  }
+
+  get (name) {
+    return this.watches.get(name);
+  }
+
+  get names () {
+    return this.watches.keys();
+  }
+
+  refreshWatches () {
+    const names = this.watches.keys();
+    const promises = names
+      .map((name) => {
+        const { context, func } = this.watchesFunctions[name];
+        let result;
+
+        try {
+          if (typeof func === 'function') {
+            result = func.apply(context || this);
+          } else {
+            result = func;
+          }
+
+          return Promise.resolve(result);
+        } catch (error) {
+          return Promise.reject(error);
+        }
+      })
+      .map((promise, index) => {
+        const name = names[index];
+
+        return promise
+          .then((result) => {
+            this.updateWatch(name, result);
+          })
+          .catch((error) => {
+            this.updateWatch(name, error, true);
+          });
+      });
+
+    return Promise.all(promises);
+  }
+
+  @action
+  remove (name) {
+    this.watches.delete(name);
+    delete this.watchesFunctions[name];
+  }
+
+  @action
+  toggleAdd () {
+    this.showAdd = !this.showAdd;
+  }
+
+  updateAddContext (value) {
+    this.addContext = value;
+  }
+
+  updateAddFunction (value) {
+    this.addFunction = value;
+  }
+
+  updateAddName (value) {
+    this.addName = value;
+  }
+
+  @action
+  updateWatch (name, result, isError = false) {
+    const next = {};
+
+    if (isError) {
+      next.error = result;
+    } else {
+      next.result = result;
+    }
+
+    this.watches.set(name, { ...next });
+  }
+}
diff --git a/js/src/dapps/console/codemirror.css b/js/src/dapps/console/codemirror.css
new file mode 100644
index 000000000..3199cd80d
--- /dev/null
+++ b/js/src/dapps/console/codemirror.css
@@ -0,0 +1,36 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+:global {
+  .cm-matchhighlight {
+    background-color: rgba(255, 255, 0, 0.4);
+  }
+
+  .CodeMirror-hints {
+    font-family: dejavu sans mono, monospace;
+    font-size: 11px;
+    border-radius: 0;
+    border: none;
+    padding: 0;
+  }
+
+  .CodeMirror-hint {
+    border-radius: 0;
+    cursor: default;
+    padding: 0.25em 0.25em 0.25em 0.35em;
+  }
+}
diff --git a/js/src/dapps/console/parity.js b/js/src/dapps/console/parity.js
new file mode 100644
index 000000000..9fce483e1
--- /dev/null
+++ b/js/src/dapps/console/parity.js
@@ -0,0 +1,335 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Web3 from 'web3';
+
+const api = window.parent.secureApi;
+let web3;
+
+Promise
+  .all([
+    api.parity.dappsInterface(),
+    api.parity.dappsPort()
+  ]).then((res) => {
+    web3 = new Web3(new Web3.providers.HttpProvider(`http://${res.join(':')}/rpc/`));
+    window.web3 = web3;
+
+    // Usage example:
+    // web3.eth.traceCall({
+    //     to: theChicken.address,
+    //     data: theChicken.withdraw.getData(100000000000000000),
+    //     gas: 100000
+    //   },
+    //   `["trace", "vmTrace", "stateDiff"]
+    //  )
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'traceCall',
+          call: 'trace_call',
+          params: 2,
+          inputFormatter: [web3._extend.formatters.inputCallFormatter, null]
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'traceSendRawTransaction',
+          call: 'trace_rawTransaction',
+          params: 2,
+          inputFormatter: [null, null]
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'traceReplayTransaction',
+          call: 'trace_replayTransaction',
+          params: 2,
+          inputFormatter: [null, null]
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'setMode',
+          call: 'parity_setMode',
+          params: 1
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'mode',
+          call: 'parity_mode',
+          params: 0
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'traceTransaction',
+          call: 'trace_Transaction',
+          params: 1,
+          inputFormatter: [null]
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'gasPriceStatistics',
+          call: 'parity_gasPriceStatistics',
+          params: 0,
+          outputFormatter: function (a) { return a.map(web3.toBigNumber); }
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'registryAddress',
+          call: 'parity_registryAddress',
+          params: 0
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'accountsInfo',
+          call: 'personal_accountsInfo',
+          outputFormatter: function (m) {
+            Object.keys(m).forEach(k => {
+              m[k].meta = JSON.parse(m[k].meta);
+              m[k].meta.name = m[k].name;
+              m[k].meta.uuid = m[k].uuid;
+              m[k] = m[k].meta;
+            }); return m;
+          },
+          params: 0
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'setAccountName',
+          call: 'personal_setAccountName',
+          params: 2
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'setAccountMeta',
+          call: 'personal_setAccountMeta',
+          params: 2,
+          inputFormatter: [a => a, JSON.stringify]
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'postTransaction',
+          call: 'eth_postTransaction',
+          params: 1,
+          inputFormatter: [web3._extend.formatters.inputCallFormatter]
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'postSign',
+          call: 'eth_postSign',
+          params: 1
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'encryptMessage',
+          call: 'parity_encryptMessage',
+          params: 2
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'checkRequest',
+          call: 'eth_checkRequest',
+          params: 1
+        })
+      ]
+    });
+
+    web3._extend({
+      property: 'eth',
+      methods: [
+        new web3._extend.Method({
+          name: 'listAccounts',
+          call: 'parity_listAccounts',
+          params: 0
+        })
+      ]
+    });
+
+    {
+      let postTransaction = web3.eth.postTransaction.bind(web3.eth);
+      let sendTransaction = web3.eth.sendTransaction.bind(web3.eth);
+
+      web3.eth.sendTransaction = function (options, f) {
+        // No callback - do sync API.
+        if (typeof f !== 'function') {
+          return sendTransaction(options);
+        }
+        // Callback - use async API.
+        let id = postTransaction(options);
+
+        console.log('Posted trasaction id=' + id);
+        let timerId = window.setInterval(check, 500);
+
+        function check () {
+          try {
+            let r = web3.eth.checkRequest(id);
+
+            if (typeof r === 'string') {
+              clearInterval(timerId);
+              if (r === '0x0000000000000000000000000000000000000000000000000000000000000000') {
+                f('Rejected', r);
+              } else {
+                f(null, r);
+              }
+            } else if (r !== null) {
+              console.log('checkRequest returned: ' + r);
+            }
+          } catch (e) {
+            clearInterval(timerId);
+            f('Rejected', null);
+          }
+        }
+      };
+    }
+
+    web3.eth.installInterceptor = function (interceptor) {
+      let oldSendTransaction = web3.eth.sendTransaction.bind(web3.eth);
+
+      web3.eth.sendTransaction = function (options, f) {
+        if (!interceptor(options)) {
+          return '0x0000000000000000000000000000000000000000000000000000000000000000';
+        }
+
+        return oldSendTransaction(options, f);
+      };
+    };
+
+    web3.eth.reporter = function (e, r) {
+      if (e) {
+        console.log('Error confirming transaction: ' + e);
+      } else {
+        let addr = r;
+        let confirmed = false;
+        let timerId = window.setInterval(function check () {
+          let receipt = web3.eth.getTransactionReceipt(addr);
+
+          if (receipt != null) {
+            if (!confirmed) {
+              console.log('Transaction confirmed (' + r + '); used ' + receipt.gasUsed + ' gas; left ' + receipt.logs.length + ' logs; mining...');
+              confirmed = true;
+            }
+            if (typeof receipt.blockHash === 'string') {
+              clearInterval(timerId);
+              console.log('Mined into block ' + receipt.blockNumber);
+            }
+          }
+        }, 500);
+      }
+    };
+
+    {
+      let oldSha3 = web3.sha3;
+
+      web3.sha3 = function (data, format) {
+        if (typeof format !== 'string' || (format !== 'hex' && format !== 'bin')) {
+          format = data.startsWith('0x') ? 'hex' : 'bin';
+        }
+        return oldSha3(data, { encoding: format });
+      };
+    }
+
+    {
+      let Registry = web3.eth.contract([{ 'constant': false, 'inputs': [{ 'name': '_new', 'type': 'address' }], 'name': 'setOwner', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'string' }], 'name': 'confirmReverse', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }], 'name': 'reserve', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }, { 'name': '_value', 'type': 'bytes32' }], 'name': 'set', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }], 'name': 'drop', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }], 'name': 'getAddress', 'outputs': [{ 'name': '', 'type': 'address' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_amount', 'type': 'uint256' }], 'name': 'setFee', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_to', 'type': 'address' }], 'name': 'transfer', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'owner', 'outputs': [{ 'name': '', 'type': 'address' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }], 'name': 'reserved', 'outputs': [{ 'name': 'reserved', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [], 'name': 'drain', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'string' }, { 'name': '_who', 'type': 'address' }], 'name': 'proposeReverse', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }], 'name': 'getUint', 'outputs': [{ 'name': '', 'type': 'uint256' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }], 'name': 'get', 'outputs': [{ 'name': '', 'type': 'bytes32' }], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'fee', 'outputs': [{ 'name': '', 'type': 'uint256' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '', 'type': 'address' }], 'name': 'reverse', 'outputs': [{ 'name': '', 'type': 'string' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }, { 'name': '_value', 'type': 'uint256' }], 'name': 'setUint', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [], 'name': 'removeReverse', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }, { 'name': '_value', 'type': 'address' }], 'name': 'setAddress', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'anonymous': false, 'inputs': [{ 'indexed': false, 'name': 'amount', 'type': 'uint256' }], 'name': 'Drained', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': false, 'name': 'amount', 'type': 'uint256' }], 'name': 'FeeChanged', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'bytes32' }, { 'indexed': true, 'name': 'owner', 'type': 'address' }], 'name': 'Reserved', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'bytes32' }, { 'indexed': true, 'name': 'oldOwner', 'type': 'address' }, { 'indexed': true, 'name': 'newOwner', 'type': 'address' }], 'name': 'Transferred', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'bytes32' }, { 'indexed': true, 'name': 'owner', 'type': 'address' }], 'name': 'Dropped', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'bytes32' }, { 'indexed': true, 'name': 'owner', 'type': 'address' }, { 'indexed': true, 'name': 'key', 'type': 'string' }, { 'indexed': false, 'name': 'plainKey', 'type': 'string' }], 'name': 'DataChanged', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'string' }, { 'indexed': true, 'name': 'reverse', 'type': 'address' }], 'name': 'ReverseProposed', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'string' }, { 'indexed': true, 'name': 'reverse', 'type': 'address' }], 'name': 'ReverseConfirmed', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'string' }, { 'indexed': true, 'name': 'reverse', 'type': 'address' }], 'name': 'ReverseRemoved', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'old', 'type': 'address' }, { 'indexed': true, 'name': 'current', 'type': 'address' }], 'name': 'NewOwner', 'type': 'event' }]);
+
+      web3.eth.registry = Registry.at(web3.eth.registryAddress());
+      web3.eth.registry.lookup = (name, field) => web3.eth.registry.get(web3.sha3(name), field);
+      web3.eth.registry.lookupAddress = (name, field) => web3.eth.registry.getAddress(web3.sha3(name), field);
+      web3.eth.registry.lookupUint = (name, field) => web3.eth.registry.getUint(web3.sha3(name), field);
+
+      let TokenReg = web3.eth.contract([{ 'constant': true, 'inputs': [{ 'name': '_id', 'type': 'uint256' }], 'name': 'token', 'outputs': [{ 'name': 'addr', 'type': 'address' }, { 'name': 'tla', 'type': 'string' }, { 'name': 'base', 'type': 'uint256' }, { 'name': 'name', 'type': 'string' }, { 'name': 'owner', 'type': 'address' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_new', 'type': 'address' }], 'name': 'setOwner', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_addr', 'type': 'address' }, { 'name': '_tla', 'type': 'string' }, { 'name': '_base', 'type': 'uint256' }, { 'name': '_name', 'type': 'string' }], 'name': 'register', 'outputs': [{ 'name': '', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_fee', 'type': 'uint256' }], 'name': 'setFee', 'outputs': [], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_id', 'type': 'uint256' }, { 'name': '_key', 'type': 'bytes32' }], 'name': 'meta', 'outputs': [{ 'name': '', 'type': 'bytes32' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_addr', 'type': 'address' }, { 'name': '_tla', 'type': 'string' }, { 'name': '_base', 'type': 'uint256' }, { 'name': '_name', 'type': 'string' }, { 'name': '_owner', 'type': 'address' }], 'name': 'registerAs', 'outputs': [{ 'name': '', 'type': 'bool' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_tla', 'type': 'string' }], 'name': 'fromTLA', 'outputs': [{ 'name': 'id', 'type': 'uint256' }, { 'name': 'addr', 'type': 'address' }, { 'name': 'base', 'type': 'uint256' }, { 'name': 'name', 'type': 'string' }, { 'name': 'owner', 'type': 'address' }], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'owner', 'outputs': [{ 'name': '', 'type': 'address' }], 'type': 'function' }, { 'constant': false, 'inputs': [], 'name': 'drain', 'outputs': [], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'tokenCount', 'outputs': [{ 'name': '', 'type': 'uint256' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_id', 'type': 'uint256' }], 'name': 'unregister', 'outputs': [], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_addr', 'type': 'address' }], 'name': 'fromAddress', 'outputs': [{ 'name': 'id', 'type': 'uint256' }, { 'name': 'tla', 'type': 'string' }, { 'name': 'base', 'type': 'uint256' }, { 'name': 'name', 'type': 'string' }, { 'name': 'owner', 'type': 'address' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_id', 'type': 'uint256' }, { 'name': '_key', 'type': 'bytes32' }, { 'name': '_value', 'type': 'bytes32' }], 'name': 'setMeta', 'outputs': [], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'fee', 'outputs': [{ 'name': '', 'type': 'uint256' }], 'type': 'function' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'tla', 'type': 'string' }, { 'indexed': true, 'name': 'id', 'type': 'uint256' }, { 'indexed': false, 'name': 'addr', 'type': 'address' }, { 'indexed': false, 'name': 'name', 'type': 'string' }], 'name': 'Registered', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'tla', 'type': 'string' }, { 'indexed': true, 'name': 'id', 'type': 'uint256' }], 'name': 'Unregistered', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'id', 'type': 'uint256' }, { 'indexed': true, 'name': 'key', 'type': 'bytes32' }, { 'indexed': false, 'name': 'value', 'type': 'bytes32' }], 'name': 'MetaChanged', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'old', 'type': 'address' }, { 'indexed': true, 'name': 'current', 'type': 'address' }], 'name': 'NewOwner', 'type': 'event' }]);
+
+      web3.eth.tokenReg = TokenReg.at(web3.eth.registry.lookupAddress('tokenreg', 'A'));
+    }
+  })
+  .catch((error) => {
+    console.error(error);
+  });
+
+window.api = api;
+window.web3 = web3;
+
+export {
+  api,
+  web3
+};
diff --git a/js/src/dapps/console/utils.js b/js/src/dapps/console/utils.js
new file mode 100644
index 000000000..c61bb2713
--- /dev/null
+++ b/js/src/dapps/console/utils.js
@@ -0,0 +1,36 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+/* eslint-disable no-eval */
+
+export function evaluate (input) {
+  try {
+    const result = eval.apply(window, [ `${input}` ]);
+
+    return { result };
+  } catch (err) {
+    try {
+      const result = eval.apply(window, [ `(function () {
+        var x = ${input};
+        return x;
+      })()` ]);
+
+      return { result };
+    } catch (error) {
+      return { error };
+    }
+  }
+}
diff --git a/js/src/dapps/static/.gitkeep b/js/src/dapps/static/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/js/src/dapps/static/console.css b/js/src/dapps/static/console.css
deleted file mode 100755
index 6b138a938..000000000
--- a/js/src/dapps/static/console.css
+++ /dev/null
@@ -1,221 +0,0 @@
-#full-screen {
-}
-
-textarea:focus, input:focus{
-    outline: none;
-}
-
-* { padding: 0; margin: 0; }
-
-html, body, #full-screen {
-	height: 100%;
-}
-
-body {
-	margin: 0;
-}
-
-#full-screen {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  
-  overflow: hidden;
-}
-
-#history-wrap {
-  overflow: auto;
-}
-
-#history {
-  flex: 1 1 auto;
-  
-  display: flex;
-  min-height: min-content;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.entry, #input {
-  margin: 0;
-  padding: 0.25em;
-
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.type {
-  color: #ccc;
-  font-weight: bold;
-  font-family: "Lucida Console", Monaco, monospace;
-  font-size: 11pt;
-  padding: 0 0.5em 0 0.25em;
-}
-
-.command .type {
-  color: #aaa;
-}
-
-.result .type {
-  color: #ccc;
-}
-
-#input .type {
-  color: #59f;
-}
-
-.addwatch {
-  background-color: #cfc;
-  border-top: 1px solid  #6e6;
-}
-.addwatch .type {
-  color: #040;
-}
-.addwatch .text {
-  color: #080;
-}
-
-.log.logLevel .type {
-  color: blue;
-}
-.log.debugLevel .text {
-  color: blue;
-}
-.log.infoLevel .type {
-  color: #00c;
-}
-.log.warnLevel {
-  background-color: #fff8dd;
-  border-top: 1px solid  #fe8;
-  border-bottom: 1px solid #fe8;
-}
-.log.warnLevel .text {
-  color: #440;
-}
-.log.warnLevel .type {
-  color: #880;
-}
-.log.errorLevel, .error {
-  background-color: #fee;
-  border-top: 1px solid #fbb;
-  border-bottom: 1px solid #fbb;
-}
-.log.errorLevel .text, .error .text {
-  color: #c00;
-}
-.log.errorLevel .type, .error .type {
-  color: #800;
-}
-
-
-span.text {
-  color: black;
-}
-.text {
-  border: 0;
-  margin: 0;
-  padding: 0;
-
-  color: black;
-  font-weight: 1000;
-  font-family: "Lucida Console", Monaco, monospace;
-  font-size: 11pt;
-
-  flex-grow: 1;
-}
-div.error {
-  background-color: #fee;
-  border-top: 1px solid #fbb;
-  color: red;
-}
-div.command {
-  border-top: 1px solid #eee;
-}
-div#input {
-  border-top: 1px solid #eee;
-}
-
-#status {
-  background: #eee;
-  padding: 0.25em;
-  font-family: "Lucida Console", Monaco, monospace;
-  font-size: 8pt;
-  color: #888;
-  flex: 0 0 auto;
-}
-
-#input {
-  flex: 0 0 auto;
-}
-
-#status {
-  display: flex;
-}
-.watch {
-  padding-left: 1em;
-  padding-right: 1em;
-}
-.watch:not(:first-child) {
-  border-left: 1px solid #ccc;
-}
-.expr {
-  color: #888;
-  margin-right: 0.5em;
-}
-.res {
-  font-weight: bold;
-  color: black;
-}
-
-.stringType {
-  color: #c00;
-}
-.numberType {
-  color: #00f;
-}
-.eObject {
-  color: #00f;
-}
-.objectType {
-  font-style: italic;
-}
-.fieldType {
-  color: #808;
-}
-.undefinedType {
-  color: #888;
-}
-.functionType {
-  color: #666;
-  font-style: italic;
-}
-
-#autocomplete-anchor {
-  position: relative;
-}
-#autocomplete {
-  position: absolute;
-  left: 1.5em;
-  bottom: 0;
-  background: #f8f8f8;
-  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5);
-  max-height: 20em;
-  overflow: scroll;
-}
-#autocomplete div {
-  font-size: small;
-  font-family: "Lucida Console", Monaco, monospace;
-  padding: 0.1em 1em 0.1em 0;
-  border-top: 1px solid #eee;
-}
-.ac-already {
-  font-weight: bold;
-}
-.ac-new {
-  color: #666;
-}
-.ac-selected {
-  background-color: #ccddff;
-}
\ No newline at end of file
diff --git a/js/src/dapps/static/console.html b/js/src/dapps/static/console.html
deleted file mode 100755
index 908b5964d..000000000
--- a/js/src/dapps/static/console.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="us">
-  <head>
-    <meta charset="utf-8">
-    <title>JS Console dapp</title>
-    <link href="console.css" rel='stylesheet' type='text/css'>
-    <script src="/web3.js"></script>
-  </head>
-  <body>
-   <div id="full-screen">
-    <div id="eval"></div>
-    <div id="history-wrap"><div id="history"></div></div>
-    <div id="autocomplete-anchor"><div id="autocomplete"></div></div>
-    <div id="input"><span class="type">&gt;</span><input type="text" class="text" id="command" list="input-datalist"></div>
-    <div id="status"></div>
-   </div>
-   <script src="console.js"></script>
-  </body>
-</html>
diff --git a/js/src/dapps/static/console.js b/js/src/dapps/static/console.js
deleted file mode 100755
index b6faee7f0..000000000
--- a/js/src/dapps/static/console.js
+++ /dev/null
@@ -1,730 +0,0 @@
-// Copyright 2015-2017 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-
-// Parity is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// Parity is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
-
-/* global web3 */
-
-if (typeof (window.parent.secureApi) === 'object') {
-  window.api = window.parent.secureApi;
-
-  if (typeof (window.Web3) === 'function') {
-    Promise.all([
-      window.api.parity.dappsInterface(),
-      window.api.parity.dappsPort()
-    ]).then(res => {
-      window.web3 = new window.Web3(new window.Web3.providers.HttpProvider(`http://${res.join(':')}/rpc/`));
-    });
-  }
-} else if (typeof (window.parity) === 'object') {
-  window.api = window.parity.api;
-}
-
-if (typeof (window.api) === 'object') {
-  window.api.subscribe('eth_blockNumber', function (error, blockNumber) {
-    if (error) {
-      console.log('error', error);
-      return;
-    }
-    refreshWatches();
-  });
-}
-
-function escapeHtml (str) {
-  let div = document.createElement('div');
-
-  div.appendChild(document.createTextNode(str));
-  return div.innerHTML;
-}
-
-function getAllPropertyNames (obj) {
-  let props = {};
-
-  do {
-    Object.getOwnPropertyNames(obj).forEach(n => {
-      props[n] = true;
-    });
-    obj = Object.getPrototypeOf(obj);
-  } while (obj);
-
-  return Object.keys(props);
-}
-
-function evaluate (x) {
-  try {
-    return eval(x); // eslint-disable-line no-eval
-  } catch (err) {
-    return eval('(()=>{let x = ' + x + '; return x;})()'); // eslint-disable-line no-eval
-  }
-}
-
-function safeAccess (obj, prop) {
-  try {
-    return obj[prop];
-  } catch (e) {
-    return '[Error] ' + e;
-  }
-}
-
-function displayReady (x, visited = []) {
-  visited.push(x);
-  let toString = Object.prototype.toString;
-
-  if (x === undefined) { return '<span class="undefinedType">undefined</span>'; }
-  if (x === null) {
-    return '<span class="undefinedType">null</span>';
-  }
-  if (typeof (x) === 'string') {
-    return `"<span class="${typeof (x)}Type">${escapeHtml(x)}</span>"`;
-  }
-  if (toString.call(x) === '[object Array]') {
-    return `[${x.map(el => displayReady(el, visited)).join(', ')}]`;
-  }
-  if (typeof (x) === 'function') { return `<span class="${typeof (x)}Type">function () { /* ... */ }</span>`; }
-  if (typeof (x) === 'object') {
-    let constructor = x.constructor || Object;
-    let objToString = typeof (x.toString) === 'function' ? x.toString : toString;
-
-    if (objToString.call(x).indexOf('[object ') !== 0) {
-      return `<span class="${constructor.name}Object">${escapeHtml(objToString.call(x))}</span>`;
-    }
-
-    return `
-      <span class="objectType ${constructor.name}Object">
-        ${constructor.name} {
-          ${Object.keys(x).filter(f => visited.indexOf(safeAccess(x, f)) === -1).map(f => `
-            <span class="fieldType">${escapeHtml(f)}</span>: ${displayReady(safeAccess(x, f), visited)}
-          `).join(', ')}
-        }
-      </span>
-    `;
-  }
-  return `<span class="${typeof (x)}Type">${escapeHtml(JSON.stringify(x))}</span>`;
-}
-
-if (!localStorage.history) {
-  localStorage.history = '[]';
-}
-window.historyData = JSON.parse(localStorage.history);
-window.historyIndex = window.historyData.length;
-if (!localStorage.watches) {
-  localStorage.watches = '[]';
-}
-window.watches = {};
-
-function watch (name, f) {
-  let status = document.getElementById('status');
-  let cleanName = name.replace(/[^a-zA-Z0-9]/, '');
-
-  status.innerHTML += `
-    <div class="watch" id="watch_${cleanName}">
-      <span class="expr" id="expr_${cleanName}">${escapeHtml(name)}</span>
-      <span class="res" id="res_${cleanName}"></span>
-    </div>
-  `;
-  window.watches[name] = f;
-}
-
-let savedWatches = JSON.parse(localStorage.watches);
-
-savedWatches.forEach(w => watch(w[1], () => evaluate(w[0])));
-
-if (typeof (window.web3) === 'object' && window.watches.latest === undefined) {
-  watch('latest', () => window.web3.eth.blockNumber);
-}
-
-function refreshWatches () {
-  for (let n in window.watches) {
-    let r = window.watches[n]();
-    let cn = n.replace(/[^a-zA-Z0-9]/, '');
-    let e = document.getElementById(`res_${cn}`);
-
-    if (typeof (r) === 'object' && r.then && r.then.call) {
-      r.then(r => {
-        e.innerHTML = displayReady(r);
-      });
-    } else {
-      e.innerHTML = displayReady(r);
-    }
-  }
-}
-
-function removeWatch (name) {
-  let e = document.getElementById(`watch_${name}`);
-
-  e.parentNode.removeChild(e);
-  delete window.watches[name];
-}
-
-function newLog (level, text) {
-  let icon = {
-    debug: '&nbsp;',
-    log: '&nbsp;',
-    warn: '⚠',
-    error: '✖',
-    info: 'ℹ'
-  };
-
-  pushLine([
-    '<div class="entry log ',
-    level,
-    'Level"><span class="type">',
-    icon[level],
-    '</span><span class="text">',
-    escapeHtml(text),
-    '</span></div>'
-  ].join(''));
-}
-
-function exec () {
-  let command = document.getElementById('command');
-  let c = command.value;
-
-  if (c !== '') {
-    command.value = '';
-    window.historyData.push(c);
-    while (window.historyData.length > 1000) {
-      window.historyData.shift();
-    }
-
-    localStorage.history = JSON.stringify(window.historyData);
-    window.historyIndex = window.historyData.length;
-
-    if (c.indexOf('//') === 0) {
-      let n = c.substr(2);
-
-      savedWatches = savedWatches.filter(x => x[1] !== n);
-      localStorage.watches = JSON.stringify(savedWatches);
-      removeWatch(n);
-    } else if (c.indexOf('//') !== -1) {
-      let x = c.split('//');
-      let e = x[0];
-
-      savedWatches.push(x);
-      localStorage.watches = JSON.stringify(savedWatches);
-      watch(x[1], () => evaluate(e));
-
-      pushLine([
-        '<div class="entry command"><span class="type">&gt;</span><span class="text">',
-        escapeHtml(c),
-        '</span></div>'
-      ].join(''));
-
-      pushLine([
-        '<div class="entry addwatch"><span class="type">✓</span><span class="text">',
-        'Watch added',
-        '</span></div>'
-      ].join(''));
-    } else {
-      pushLine([
-        '<div class="entry command"><span class="type">&gt;</span><span class="text">',
-        escapeHtml(c),
-        '</span></div>'
-      ].join(''));
-
-      let res;
-
-      try {
-        res = evaluate(c);
-        if (typeof (res) === 'object' && res !== null && typeof res.then === 'function') {
-          let id = window.historyData.length;
-
-          pushLine([
-            '<div class="entry result"><span class="type">&lt;</span><span class="text" id="pending',
-            id,
-            '">...</span></div>'
-          ].join(''));
-
-          res.then(r => {
-            document.getElementById('pending' + id).innerHTML = displayReady(r);
-          });
-        } else {
-          pushLine([
-            '<div class="entry result"><span class="type">&lt;</span><span class="text">',
-            displayReady(res),
-            '</span></div>'
-          ].join(''));
-        }
-      } catch (err) {
-        pushLine([
-          '<div class="entry error"><span class="type">✖</span><span class="text">Unhandled exception: ',
-          escapeHtml(err.message),
-          '</span></div>'
-        ]);
-      }
-    }
-  }
-
-  refreshWatches();
-}
-
-function pushLine (l) {
-  document.getElementById('history').innerHTML += l;
-  let h = document.getElementById('history-wrap');
-
-  h.scrollTop = h.scrollHeight;
-}
-
-let autocompletes = [];
-let currentAuto = null;
-let currentPots = [];
-let currentStem = null;
-
-function updateAutocomplete () {
-  let v = document.getElementById('command').value;
-
-  if (!v.length) {
-    cancelAutocomplete();
-    return;
-  }
-
-  let t = v.split('.');
-  let last = t.pop();
-  let tj = t.join('.');
-  let ex = t.length > 0 ? tj : 'window';
-
-  if (currentStem !== tj) {
-    autocompletes = getAllPropertyNames(evaluate(ex));
-    currentStem = tj;
-  }
-
-  let dl = document.getElementById('autocomplete');
-
-  currentPots = autocompletes.filter(n => n.startsWith(last));
-  if (currentPots.length > 0) {
-    if (currentPots.indexOf(currentAuto) === -1) {
-      currentAuto = currentPots[0];
-    }
-
-    dl.innerHTML = currentPots
-      .map((n, i) => `
-        <div id="pot${i}" class="${currentAuto === n ? 'ac-selected' : 'ac-unselected'}">
-          <span class="ac-already">${escapeHtml(last)}</span><span class="ac-new">${escapeHtml(n.substr(last.length))}</span>
-        </div>`
-      )
-      .join('');
-    dl.hidden = false;
-  } else {
-    cancelAutocomplete();
-  }
-}
-
-function enactAutocomplete () {
-  if (currentAuto != null) {
-    document.getElementById('command').value = (currentStem !== '' ? currentStem + '.' : '') + currentAuto;
-    cancelAutocomplete();
-  }
-}
-
-function cancelAutocomplete () {
-  document.getElementById('autocomplete').hidden = true;
-  currentAuto = null;
-}
-
-function scrollAutocomplete (positive) {
-  if (currentAuto != null) {
-    let i = currentPots.indexOf(currentAuto);
-
-    document.getElementById('pot' + i).classList = ['ac-unselected'];
-    if (positive && i < currentPots.length - 1) {
-      ++i;
-    } else if (!positive && i > 0) {
-      --i;
-    }
-    currentAuto = currentPots[i];
-    let sel = document.getElementById('pot' + i);
-
-    sel.classList = ['ac-selected'];
-    sel.scrollIntoViewIfNeeded();
-  }
-}
-
-document.getElementById('command').addEventListener('paste', updateAutocomplete);
-document.getElementById('command').addEventListener('input', updateAutocomplete);
-document.getElementById('command').addEventListener('focusout', cancelAutocomplete);
-document.getElementById('command').addEventListener('blur', cancelAutocomplete);
-
-document.getElementById('command').addEventListener('keydown', function (event) {
-  let el = document.getElementById('command');
-
-  if (currentAuto != null) {
-    if (event.keyCode === 38 || event.keyCode === 40) {
-      event.preventDefault();
-      scrollAutocomplete(event.keyCode === 40);
-    } else if ((event.keyCode === 39 || event.keyCode === 9 || event.keyCode === 13) && el.selectionStart === el.value.length) {
-      event.preventDefault();
-      enactAutocomplete();
-    } else if (event.keyCode === 27) {
-      event.preventDefault();
-      cancelAutocomplete();
-    }
-  } else {
-    let command = document.getElementById('command');
-
-    if (event.keyCode === 38 && window.historyIndex > 0) {
-      event.preventDefault();
-      window.historyIndex--;
-      command.value = window.historyData[window.historyIndex];
-    }
-    if (event.keyCode === 40 && window.historyIndex < window.historyData.length) {
-      event.preventDefault();
-      window.historyIndex++;
-      command.value = window.historyIndex < window.historyData.length ? window.historyData[window.historyIndex] : '';
-    }
-  }
-
-  if (event.keyCode >= 48 || event.keyCode === 8) {
-    let t = document.getElementById('command').value;
-
-    setTimeout(() => {
-      if (t !== document.getElementById('command').value) {
-        updateAutocomplete();
-      }
-    }, 0);
-  } else {
-    setTimeout(() => {
-      if (el.selectionStart !== el.value.length) {
-        cancelAutocomplete();
-      }
-    }, 0);
-  }
-});
-
-document.getElementById('command').addEventListener('keyup', function (event) {
-  if (event.keyCode === 13) {
-    event.preventDefault();
-    exec();
-  }
-});
-
-document.getElementById('command').focus();
-if (typeof (web3) === 'object') {
-  window.web3 = web3;
-}
-refreshWatches();
-
-['debug', 'error', 'info', 'log', 'warn'].forEach(n => {
-  let old = window.console[n].bind(window.console);
-
-  window.console[n] = x => {
-    old(x);
-    newLog(n, x);
-  };
-});
-
-// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// /// Home comforts.
-
-if (typeof (web3) === 'object') {
-  // Usage example:
-  // web3.eth.traceCall({
-  //     to: theChicken.address,
-  //     data: theChicken.withdraw.getData(100000000000000000),
-  //     gas: 100000
-  //   },
-  //   `["trace", "vmTrace", "stateDiff"]
-  //  )
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'traceCall',
-        call: 'trace_call',
-        params: 2,
-        inputFormatter: [web3._extend.formatters.inputCallFormatter, null]
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'traceSendRawTransaction',
-        call: 'trace_rawTransaction',
-        params: 2,
-        inputFormatter: [null, null]
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'traceReplayTransaction',
-        call: 'trace_replayTransaction',
-        params: 2,
-        inputFormatter: [null, null]
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'setMode',
-        call: 'parity_setMode',
-        params: 1
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'mode',
-        call: 'parity_mode',
-        params: 0
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'traceTransaction',
-        call: 'trace_Transaction',
-        params: 1,
-        inputFormatter: [null]
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'gasPriceStatistics',
-        call: 'parity_gasPriceStatistics',
-        params: 0,
-        outputFormatter: function (a) { return a.map(web3.toBigNumber); }
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'registryAddress',
-        call: 'parity_registryAddress',
-        params: 0
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'accountsInfo',
-        call: 'personal_accountsInfo',
-        outputFormatter: function (m) {
-          Object.keys(m).forEach(k => {
-            m[k].meta = JSON.parse(m[k].meta);
-            m[k].meta.name = m[k].name;
-            m[k].meta.uuid = m[k].uuid;
-            m[k] = m[k].meta;
-          }); return m;
-        },
-        params: 0
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'setAccountName',
-        call: 'personal_setAccountName',
-        params: 2
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'setAccountMeta',
-        call: 'personal_setAccountMeta',
-        params: 2,
-        inputFormatter: [a => a, JSON.stringify]
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'postTransaction',
-        call: 'eth_postTransaction',
-        params: 1,
-        inputFormatter: [web3._extend.formatters.inputCallFormatter]
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'postSign',
-        call: 'eth_postSign',
-        params: 1
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'encryptMessage',
-        call: 'parity_encryptMessage',
-        params: 2
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'checkRequest',
-        call: 'eth_checkRequest',
-        params: 1
-      })
-    ]
-  });
-
-  web3._extend({
-    property: 'eth',
-    methods: [
-      new web3._extend.Method({
-        name: 'listAccounts',
-        call: 'parity_listAccounts',
-        params: 0
-      })
-    ]
-  });
-
-  {
-    let postTransaction = web3.eth.postTransaction.bind(web3.eth);
-    let sendTransaction = web3.eth.sendTransaction.bind(web3.eth);
-
-    web3.eth.sendTransaction = function (options, f) {
-      // No callback - do sync API.
-      if (typeof f !== 'function') {
-        return sendTransaction(options);
-      }
-      // Callback - use async API.
-      let id = postTransaction(options);
-
-      console.log('Posted trasaction id=' + id);
-      let timerId = window.setInterval(check, 500);
-
-      function check () {
-        try {
-          let r = web3.eth.checkRequest(id);
-
-          if (typeof r === 'string') {
-            clearInterval(timerId);
-            if (r === '0x0000000000000000000000000000000000000000000000000000000000000000') {
-              f('Rejected', r);
-            } else {
-              f(null, r);
-            }
-          } else if (r !== null) {
-            console.log('checkRequest returned: ' + r);
-          }
-        } catch (e) {
-          clearInterval(timerId);
-          f('Rejected', null);
-        }
-      }
-    };
-  }
-
-  web3.eth.installInterceptor = function (interceptor) {
-    let oldSendTransaction = web3.eth.sendTransaction.bind(web3.eth);
-
-    web3.eth.sendTransaction = function (options, f) {
-      if (!interceptor(options)) {
-        return '0x0000000000000000000000000000000000000000000000000000000000000000';
-      }
-
-      return oldSendTransaction(options, f);
-    };
-  };
-
-  web3.eth.reporter = function (e, r) {
-    if (e) {
-      console.log('Error confirming transaction: ' + e);
-    } else {
-      let addr = r;
-      let confirmed = false;
-      let timerId = window.setInterval(function check () {
-        let receipt = web3.eth.getTransactionReceipt(addr);
-
-        if (receipt != null) {
-          if (!confirmed) {
-            console.log('Transaction confirmed (' + r + '); used ' + receipt.gasUsed + ' gas; left ' + receipt.logs.length + ' logs; mining...');
-            confirmed = true;
-          }
-          if (typeof receipt.blockHash === 'string') {
-            clearInterval(timerId);
-            console.log('Mined into block ' + receipt.blockNumber);
-          }
-        }
-      }, 500);
-    }
-  };
-
-  {
-    let oldSha3 = web3.sha3;
-
-    web3.sha3 = function (data, format) {
-      if (typeof format !== 'string' || (format !== 'hex' && format !== 'bin')) {
-        format = data.startsWith('0x') ? 'hex' : 'bin';
-      }
-      return oldSha3(data, { encoding: format });
-    };
-  }
-
-  {
-    let Registry = web3.eth.contract([{ 'constant': false, 'inputs': [{ 'name': '_new', 'type': 'address' }], 'name': 'setOwner', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'string' }], 'name': 'confirmReverse', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }], 'name': 'reserve', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }, { 'name': '_value', 'type': 'bytes32' }], 'name': 'set', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }], 'name': 'drop', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }], 'name': 'getAddress', 'outputs': [{ 'name': '', 'type': 'address' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_amount', 'type': 'uint256' }], 'name': 'setFee', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_to', 'type': 'address' }], 'name': 'transfer', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'owner', 'outputs': [{ 'name': '', 'type': 'address' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }], 'name': 'reserved', 'outputs': [{ 'name': 'reserved', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [], 'name': 'drain', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'string' }, { 'name': '_who', 'type': 'address' }], 'name': 'proposeReverse', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }], 'name': 'getUint', 'outputs': [{ 'name': '', 'type': 'uint256' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }], 'name': 'get', 'outputs': [{ 'name': '', 'type': 'bytes32' }], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'fee', 'outputs': [{ 'name': '', 'type': 'uint256' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '', 'type': 'address' }], 'name': 'reverse', 'outputs': [{ 'name': '', 'type': 'string' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }, { 'name': '_value', 'type': 'uint256' }], 'name': 'setUint', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [], 'name': 'removeReverse', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_name', 'type': 'bytes32' }, { 'name': '_key', 'type': 'string' }, { 'name': '_value', 'type': 'address' }], 'name': 'setAddress', 'outputs': [{ 'name': 'success', 'type': 'bool' }], 'type': 'function' }, { 'anonymous': false, 'inputs': [{ 'indexed': false, 'name': 'amount', 'type': 'uint256' }], 'name': 'Drained', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': false, 'name': 'amount', 'type': 'uint256' }], 'name': 'FeeChanged', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'bytes32' }, { 'indexed': true, 'name': 'owner', 'type': 'address' }], 'name': 'Reserved', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'bytes32' }, { 'indexed': true, 'name': 'oldOwner', 'type': 'address' }, { 'indexed': true, 'name': 'newOwner', 'type': 'address' }], 'name': 'Transferred', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'bytes32' }, { 'indexed': true, 'name': 'owner', 'type': 'address' }], 'name': 'Dropped', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'bytes32' }, { 'indexed': true, 'name': 'owner', 'type': 'address' }, { 'indexed': true, 'name': 'key', 'type': 'string' }, { 'indexed': false, 'name': 'plainKey', 'type': 'string' }], 'name': 'DataChanged', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'string' }, { 'indexed': true, 'name': 'reverse', 'type': 'address' }], 'name': 'ReverseProposed', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'string' }, { 'indexed': true, 'name': 'reverse', 'type': 'address' }], 'name': 'ReverseConfirmed', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'name', 'type': 'string' }, { 'indexed': true, 'name': 'reverse', 'type': 'address' }], 'name': 'ReverseRemoved', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'old', 'type': 'address' }, { 'indexed': true, 'name': 'current', 'type': 'address' }], 'name': 'NewOwner', 'type': 'event' }]);
-
-    web3.eth.registry = Registry.at(web3.eth.registryAddress());
-    web3.eth.registry.lookup = (name, field) => web3.eth.registry.get(web3.sha3(name), field);
-    web3.eth.registry.lookupAddress = (name, field) => web3.eth.registry.getAddress(web3.sha3(name), field);
-    web3.eth.registry.lookupUint = (name, field) => web3.eth.registry.getUint(web3.sha3(name), field);
-
-    let TokenReg = web3.eth.contract([{ 'constant': true, 'inputs': [{ 'name': '_id', 'type': 'uint256' }], 'name': 'token', 'outputs': [{ 'name': 'addr', 'type': 'address' }, { 'name': 'tla', 'type': 'string' }, { 'name': 'base', 'type': 'uint256' }, { 'name': 'name', 'type': 'string' }, { 'name': 'owner', 'type': 'address' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_new', 'type': 'address' }], 'name': 'setOwner', 'outputs': [], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_addr', 'type': 'address' }, { 'name': '_tla', 'type': 'string' }, { 'name': '_base', 'type': 'uint256' }, { 'name': '_name', 'type': 'string' }], 'name': 'register', 'outputs': [{ 'name': '', 'type': 'bool' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_fee', 'type': 'uint256' }], 'name': 'setFee', 'outputs': [], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_id', 'type': 'uint256' }, { 'name': '_key', 'type': 'bytes32' }], 'name': 'meta', 'outputs': [{ 'name': '', 'type': 'bytes32' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_addr', 'type': 'address' }, { 'name': '_tla', 'type': 'string' }, { 'name': '_base', 'type': 'uint256' }, { 'name': '_name', 'type': 'string' }, { 'name': '_owner', 'type': 'address' }], 'name': 'registerAs', 'outputs': [{ 'name': '', 'type': 'bool' }], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_tla', 'type': 'string' }], 'name': 'fromTLA', 'outputs': [{ 'name': 'id', 'type': 'uint256' }, { 'name': 'addr', 'type': 'address' }, { 'name': 'base', 'type': 'uint256' }, { 'name': 'name', 'type': 'string' }, { 'name': 'owner', 'type': 'address' }], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'owner', 'outputs': [{ 'name': '', 'type': 'address' }], 'type': 'function' }, { 'constant': false, 'inputs': [], 'name': 'drain', 'outputs': [], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'tokenCount', 'outputs': [{ 'name': '', 'type': 'uint256' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_id', 'type': 'uint256' }], 'name': 'unregister', 'outputs': [], 'type': 'function' }, { 'constant': true, 'inputs': [{ 'name': '_addr', 'type': 'address' }], 'name': 'fromAddress', 'outputs': [{ 'name': 'id', 'type': 'uint256' }, { 'name': 'tla', 'type': 'string' }, { 'name': 'base', 'type': 'uint256' }, { 'name': 'name', 'type': 'string' }, { 'name': 'owner', 'type': 'address' }], 'type': 'function' }, { 'constant': false, 'inputs': [{ 'name': '_id', 'type': 'uint256' }, { 'name': '_key', 'type': 'bytes32' }, { 'name': '_value', 'type': 'bytes32' }], 'name': 'setMeta', 'outputs': [], 'type': 'function' }, { 'constant': true, 'inputs': [], 'name': 'fee', 'outputs': [{ 'name': '', 'type': 'uint256' }], 'type': 'function' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'tla', 'type': 'string' }, { 'indexed': true, 'name': 'id', 'type': 'uint256' }, { 'indexed': false, 'name': 'addr', 'type': 'address' }, { 'indexed': false, 'name': 'name', 'type': 'string' }], 'name': 'Registered', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'tla', 'type': 'string' }, { 'indexed': true, 'name': 'id', 'type': 'uint256' }], 'name': 'Unregistered', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'id', 'type': 'uint256' }, { 'indexed': true, 'name': 'key', 'type': 'bytes32' }, { 'indexed': false, 'name': 'value', 'type': 'bytes32' }], 'name': 'MetaChanged', 'type': 'event' }, { 'anonymous': false, 'inputs': [{ 'indexed': true, 'name': 'old', 'type': 'address' }, { 'indexed': true, 'name': 'current', 'type': 'address' }], 'name': 'NewOwner', 'type': 'event' }]);
-
-    web3.eth.tokenReg = TokenReg.at(web3.eth.registry.lookupAddress('tokenreg', 'A'));
-  }
-}
-
diff --git a/js/src/dapps/style.css b/js/src/dapps/style.css
index 0f452fd2a..d5337d566 100644
--- a/js/src/dapps/style.css
+++ b/js/src/dapps/style.css
@@ -22,7 +22,7 @@
   color: #333;
   font-size: 16px;
   font-family: 'Roboto', sans-serif;
-  font-weight: 300 !important;
+  font-weight: 300;
   margin: 0;
   padding: 0;
   vertical-align: top;
@@ -39,7 +39,7 @@
 }
 
 :root * {
-  font-weight: 300 !important;
+  font-weight: 300;
 }
 
 :root :global(#container) > div {
diff --git a/js/src/views/Dapps/builtin.json b/js/src/views/Dapps/builtin.json
index e223730eb..3874ee960 100644
--- a/js/src/views/Dapps/builtin.json
+++ b/js/src/views/Dapps/builtin.json
@@ -7,6 +7,17 @@
     "version": "1.0.0",
     "visible": false
   },
+  {
+    "id": "0xa635a9326814bded464190eddf0bdb90ce92d40ea2359cf553ea80e3c5a4076c",
+    "url": "console",
+    "name": "Parity/Web3 console",
+    "description": "A Javascript development console complete with web3 and parity objects",
+    "version": "0.3",
+    "author": "Gav Wood <gavin@parity.io>",
+    "position": "top-right",
+    "visible": true,
+    "secure": true
+  },
   {
     "id": "0xf9f2d620c2e08f83e45555247146c62185e4ab7cf82a4b9002a265a0d020348f",
     "url": "tokendeploy",
@@ -84,17 +95,5 @@
     "visible": true,
     "skipBuild": true,
     "skipHistory": true
-  },
-  {
-    "id": "0xa635a9326814bded464190eddf0bdb90ce92d40ea2359cf553ea80e3c5a4076c",
-    "url": "console",
-    "name": "Parity/Web3 console",
-    "description": "A Javascript development console complete with web3 and parity objects",
-    "version": "0.3",
-    "author": "Gav Wood <gavin@parity.io>",
-    "position": "top-right",
-    "visible": true,
-    "secure": true,
-    "skipBuild": true
   }
 ]
diff --git a/js/yarn.lock b/js/yarn.lock
index 6266e6483..c1367d8fe 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -1053,7 +1053,7 @@ babel-register@6.23.0, babel-register@^6.23.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@6.23.0, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0:
+babel-runtime@6.23.0, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.9.2:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -1551,7 +1551,7 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-classnames@2.2.5, classnames@^2.2.0:
+classnames@2.2.5, classnames@^2.2.0, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -1637,6 +1637,10 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codemirror@^5.18.2:
+  version "5.25.2"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.25.2.tgz#8c77677ca9c9248d757d3a07ed1e89a8404850b7"
+
 collapse-white-space@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.2.tgz#9c463fb9c6d190d2dcae21a356a01bcae9eeef6d"
@@ -2118,6 +2122,13 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-difference@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/date-difference/-/date-difference-1.0.0.tgz#d3e6e883c0cad2dc9dbfcbf12e06297b97298974"
+  dependencies:
+    get-stdin "^3.0.2"
+    meow "^3.1.0"
+
 date-now@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-1.0.1.tgz#bb7d086438debe4182a485fb3df3fbfb99d6153c"
@@ -3332,6 +3343,10 @@ get-proxy@^1.0.1:
   dependencies:
     rc "^1.1.2"
 
+get-stdin@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-3.0.2.tgz#c1ced24b9039b38ded85bdf161e57713b6dd4abe"
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -4086,6 +4101,10 @@ is-date-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
 
+is-dom@^1.0.5:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.0.9.tgz#483832d52972073de12b9fe3f60320870da8370d"
+
 is-dotfile@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
@@ -4563,9 +4582,9 @@ keycode@^2.1.1:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.1.8.tgz#94d2b7098215eff0e8f9a8931d5a59076c4532fb"
 
-keythereum@0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/keythereum/-/keythereum-0.4.3.tgz#514acfec3cc4d04b33a21f5d081600719457d2c0"
+keythereum@0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/keythereum/-/keythereum-0.4.6.tgz#0fdec7cf938ae39e5e3061b2f6e16677b766c5da"
   dependencies:
     elliptic "6.4.0"
     ethereumjs-util "5.1.1"
@@ -4775,6 +4794,10 @@ lodash.create@3.1.1:
     lodash._basecreate "^3.0.0"
     lodash._isiterateecall "^3.0.0"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
 lodash.defaults@^4.0.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -5237,11 +5260,11 @@ multipipe@^0.1.2:
   dependencies:
     duplexer2 "0.0.2"
 
-mute-stream@0.0.5, mute-stream@~0.0.4:
+mute-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
 
-mute-stream@0.0.7:
+mute-stream@0.0.7, mute-stream@~0.0.4:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
@@ -6524,6 +6547,14 @@ react-addons-test-utils@15.4.2:
     fbjs "^0.8.4"
     object-assign "^4.1.0"
 
+react-codemirror@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/react-codemirror/-/react-codemirror-0.3.0.tgz#cd6bd6ef458ec1e035cfd8b3fe7b30c8c7883c6c"
+  dependencies:
+    classnames "^2.2.5"
+    codemirror "^5.18.2"
+    lodash.debounce "^4.0.8"
+
 react-container-dimensions@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-container-dimensions/-/react-container-dimensions-1.2.0.tgz#bfb5e70e10aa82d2ecba49147d14bb4c22cafdaa"
@@ -6596,6 +6627,13 @@ react-hot-loader@3.0.0-beta.6:
     redbox-react "^1.2.5"
     source-map "^0.4.4"
 
+react-inspector@paritytech/react-inspector:
+  version "1.1.2"
+  resolved "https://codeload.github.com/paritytech/react-inspector/tar.gz/73b5214261a5131821eb9088f58d7e5f31210c23"
+  dependencies:
+    babel-runtime "^6.9.2"
+    is-dom "^1.0.5"
+
 react-intl-aggregate-webpack-plugin@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/react-intl-aggregate-webpack-plugin/-/react-intl-aggregate-webpack-plugin-0.0.1.tgz#c29958860d7bcdfa6f460dec79f55ae0220488c6"
@@ -6958,7 +6996,7 @@ request-capture-har@^1.1.4:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/request-capture-har/-/request-capture-har-1.2.2.tgz#cd692cfb2cc744fd84a3358aac6ee51528cf720d"
 
-request@2, request@^2.75.0, request@^2.81.0:
+request@2, request@^2.75.0, request@^2.79.0, request@^2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
@@ -6985,7 +7023,7 @@ request@2, request@^2.75.0, request@^2.81.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
-request@2.79.0, request@^2.79.0:
+request@2.79.0:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
   dependencies: