Initial new UI source code import (#2607)

* address -> name mappings * expanding, loading all coin details * send use only actual BasicCoin tokens registered (any reg) * sending token & accounts * form styling updates * send form layout in place * coin send working as expected * api subscriptions on multiple addresses * bring in events * simplify * basic events display in-place, functionally complete * basic functionality in-place * fix horrible event address issue * rwork display of events slightly * test TLA availability * table for owner -> tokens * fix signature lookup address * fix signature lookup address * basic overview styling * txhash links * page layout adjustments * background import * adjust colors * no global registration, simplify color selection * updated styling * connection dialog for "busy connecting" * initial token connection - WIP * init token updates take place * basic test for manual token * rework connection display * allow updates of the secure token * first stab at making the build build * update runner tags * fix linting issues * skip tests requiring network (should be e2e, TODO) * re-enable javascript tag/runner * release push does the trick * push to any branch, CI name * javscript-test runner as well * swap dependencies build requires test * revert stages swap * retrieve images associated with tokens * remove js build deps order * null image when hash = 0x0 * 6x64 images (hashes for registries) * don't pass tokens as prop to IdentityIcon * check images against content hash pictures * cleanup signer after connection changes * fix naming typo * display unknownImages for balances (not available as content hash) * unknownImage for transfer dialog * basic githubhint layout * single input for commit/filename * ethcore_hashContent call * lookup hash * registration in place * fixes * events is using a proper table * pass value through as-is * stop wrongly using main app IdentityIcon * NEVER export class instance functions * alignment back to normal * typo in definition * set & get images working (mostly) * show content retrieval info * set exitcode via || * use javascript:latest images * disable npm progress bar * rename phase I * rename phase II * only send build output to GitHub on major branches * also run the build step as part of the test (until comprehensive) * ci-specific build (no webpack progress) * allow for account creation via recovery phrase * display account uuid (where available), closes #2546 * connection dialog now shows up in dapps as well, closes #2538 * token images show up as expected * IdentityName component added and deployed * fix padding tests * adjust tests to map to stricter 0x-prefixed hex * render names via common component for the address -> name * split lint into seperate script (early exit) * test phases changed to lint, test & pack * pack part of test phase * remove files marked for deletion (cleanup) * Signer cleanups, start moving in the direction of the rest * add personal signer methods * basic signer request subscription * don't poll blockNumber when not connected * missing return, creating massive ws queue backlogs * ΞTH -> ETH * fix failing tests * registry uses setAddress to actually set addresses now * bytes mapping operates on lowerCase hex strings * sha3 ids for each application * add dappreg to list of contracts * adjust alignment of queries * show gas estimation log * abi with payable for register function * add key as required * image retrieval from dappreg * use proper Image urls * embed and link apps from Parity, retrieved via /api/apps * filter apps that has been replaced * proxy entry for parity-utils * add basiccoin abi * add support for fallback abi type * capture constructor paramaters * merge master into js * move images to assets/images/ * add font assets * import fonts as part of build * don't inline woff files * Revert "merge master into js" This reverts commit cfcfa81bd26f1b3cbc748d3afa1eb5c670b363fe. * remove unused npm packages * information on gas estimates (like almost everywhere else) * don't pass gas & gasPrice to estimation * display account passwordhint when available * signer subscriptions based on polling & function trapping * pending requests retrieved via jsapi * update signer middleware * remove all web3 instances * remove web3 package * last web3 dependencies removed * no need to toChecksumAddress - api takes care of it * expand description for personal_confirmRequest * Signer conversion from web3 -> parity.js completed * explicit in no return * green circle background * remove generated background * convert /api/* paths to localhost:8080/api/* paths (hard-coded, temporary) * change dapps to load from localhost:8080/ui/* * remove dangling web3 files * update manager test for signer * /api/ping -> / * additional token images * additional token images * add missing styles.css for 8180 error pages * cater for txhash returning null/empty object * adjust output directories * Release merge with origin with ours strategy * additional token images * cater for development server * s/localhost/127.0.0.1/ (cater for origin) * Fix address selection for contract deployment * Adjust z-index for error overlay * better text on unique background pattern * fix signer rejections * Don't allow gavcoin transfer with no balance * fix txhash rendering in signer * remove unnecessary ParityBackground * script to update js-precompiled * Redirect from :8080 to :8180 * Remove extra return * Dapp logo images
2016-10-18 11:52:56 +02:00
parent 6c7af57529
commit 1e6a2cb378
969 changed files with 57315 additions and 0 deletions
--- a/js/src/views/Settings/Background/background.css
+++ b/js/src/views/Settings/Background/background.css
@@ -0,0 +1,46 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.bgcontainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.bgflex {
+  flex-basis: 25%;
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 0 0.5em 1em 0.5em;
+}
+
+.bgseed {
+  background: black;
+  border-radius: 4px;
+}
+
+.seed,
+.seedactive {
+  height: 10em;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid rgba(255, 255, 255, 1);
+}
+
+.seed {
+  opacity: 0.5;
+}
--- a/js/src/views/Settings/Background/background.js
+++ b/js/src/views/Settings/Background/background.js
@@ -0,0 +1,142 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
+
+import { Button, Container, ContainerTitle, ParityBackground } from '../../../ui';
+
+import { updateBackground } from '../actions';
+
+import layout from '../layout.css';
+import styles from './background.css';
+
+let counter = 0;
+
+class Background extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    muiTheme: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    settings: PropTypes.object.isRequired,
+    updateBackground: PropTypes.func.isRequired
+  }
+
+  state = {
+    seeds: []
+  }
+
+  componentDidMount () {
+    const { settings } = this.props;
+
+    this.setState({
+      seeds: [settings.backgroundSeed]
+    }, () => this.addSeeds(19));
+  }
+
+  render () {
+    return (
+      <Container>
+        <ContainerTitle title='Background Pattern' />
+        <div className={ layout.layout }>
+          <div className={ layout.overview }>
+            <p><strong>The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token.</strong> This is so that decentralized applications cannot pretend to be trustworthy.</p>
+            <p>Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser's cache or use a new Signer token.</p>
+          </div>
+          <div className={ layout.details }>
+            <div className={ styles.bgcontainer }>
+              { this.renderBackgrounds() }
+            </div>
+            <Button
+              icon={ <NavigationRefresh /> }
+              label='generate more'
+              onClick={ this.generateMore } />
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  renderBackgrounds () {
+    const { settings } = this.props;
+    const { seeds } = this.state;
+
+    return seeds.map((seed) => {
+      return (
+        <div className={ styles.bgflex } key={ seed }>
+          <div className={ styles.bgseed }>
+            <ParityBackground
+              className={ settings.backgroundSeed === seed ? styles.seedactive : styles.seed }
+              seed={ seed }
+              onClick={ this.onSelect(seed) } />
+          </div>
+        </div>
+      );
+    });
+  }
+
+  onSelect = (seed) => {
+    const { muiTheme } = this.context;
+    const { updateBackground } = this.props;
+
+    return (event) => {
+      muiTheme.parity.setBackgroundSeed(seed);
+      updateBackground(seed);
+    };
+  }
+
+  generateMore = () => {
+    this.addSeeds(20);
+  }
+
+  addSeeds (count) {
+    const { seeds } = this.state;
+    const newSeeds = [];
+
+    for (let index = 0; index < count; index++) {
+      newSeeds.push(this.generateSeed());
+    }
+
+    this.setState({
+      seeds: seeds.concat(newSeeds)
+    });
+  }
+
+  generateSeed () {
+    const { api, muiTheme } = this.context;
+
+    return api.util.sha3(`${muiTheme.backgroundSeed}${Math.random()}${counter++}`);
+  }
+}
+
+function mapStateToProps (state) {
+  const { settings } = state;
+
+  return { settings };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ updateBackground }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Background);
--- a/js/src/views/Settings/Background/index.js
+++ b/js/src/views/Settings/Background/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './background';
--- a/js/src/views/Settings/Views/defaults.js
+++ b/js/src/views/Settings/Views/defaults.js
@@ -0,0 +1,97 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
+import ActionTrackChanges from 'material-ui/svg-icons/action/track-changes';
+import ActionSettings from 'material-ui/svg-icons/action/settings';
+import CommunicationContacts from 'material-ui/svg-icons/communication/contacts';
+import ImageGridOn from 'material-ui/svg-icons/image/grid-on';
+import NavigationApps from 'material-ui/svg-icons/navigation/apps';
+
+import { SignerIcon } from '../../../ui';
+
+import styles from './views.css';
+
+const defaultViews = {
+  accounts: {
+    active: true,
+    fixed: true,
+    icon: <ActionAccountBalanceWallet />,
+    label: 'Accounts',
+    route: '/accounts',
+    value: 'account',
+    description: 'A list of all the accounts associated to and imported into this Parity instance. Send transactions, receive incoming values, manage your balances and fund your accounts.'
+  },
+
+  addresses: {
+    active: true,
+    icon: <CommunicationContacts />,
+    label: 'Addressbook',
+    route: '/addresses',
+    value: 'address',
+    description: 'A list of all contacts and address book entries that is managed by this Parity instance. Watch accounts and have the details available at the click of a button when transacting.'
+  },
+
+  apps: {
+    active: true,
+    icon: <NavigationApps />,
+    label: 'Applications',
+    route: '/apps',
+    value: 'app',
+    description: 'Distributed applications that interact with the underlying network. Add applications, manage you application portfolio and interact with application from around the newtork.'
+  },
+
+  contracts: {
+    active: false,
+    icon: <ImageGridOn />,
+    label: 'Contracts',
+    route: '/contracts',
+    value: 'contract',
+    description: 'Watch and interact with specific contracts that have been deployed on the network. This is a more technically-focussed environment, specifically for advanced users that understand the inner working of certain contracts.'
+  },
+
+  status: {
+    active: false,
+    icon: <ActionTrackChanges />,
+    label: 'Status',
+    route: '/status',
+    value: 'status',
+    description: 'See how the Parity node is performing in terms of connections to the network, logs from the actual running instance and details of mining (if enabled and configured).'
+  },
+
+  signer: {
+    active: true,
+    fixed: true,
+    icon: <SignerIcon className={ styles.signerIcon } />,
+    label: 'Signer',
+    route: '/signer',
+    value: 'signer',
+    description: 'The security focussed area of the application where you can approve any outgoing transactions made from the application as well as those placed into the queue by distributed applications.'
+  },
+
+  settings: {
+    active: true,
+    fixed: true,
+    icon: <ActionSettings />,
+    label: 'Settings',
+    route: '/settings',
+    value: 'settings',
+    description: 'This view. Allows you to customize the application in term of options, operation and look and feel.'
+  }
+};
+
+export default defaultViews;
--- a/js/src/views/Settings/Views/index.js
+++ b/js/src/views/Settings/Views/index.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import defaultViews from './defaults';
+
+export default from './views';
+
+export {
+  defaultViews
+};
--- a/js/src/views/Settings/Views/views.css
+++ b/js/src/views/Settings/Views/views.css
@@ -0,0 +1,49 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.signerIcon {
+  width: 24px;
+  height: 24px;
+  margin-bottom: 5px;
+}
+
+.view {
+}
+
+.view+.view {
+  padding-top: 1.5em;
+}
+
+.header {
+}
+
+.labelicon {
+  display: inline-block;
+  margin-right: 0.75em;
+}
+
+.label {
+  display: inline-block;
+  vertical-align: top;
+  line-height: 24px;
+  color: white !important;
+}
+
+.info {
+  color: #aaa;
+  padding-left: 4.75em;
+}
--- a/js/src/views/Settings/Views/views.js
+++ b/js/src/views/Settings/Views/views.js
@@ -0,0 +1,101 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Checkbox } from 'material-ui';
+
+import { Container, ContainerTitle } from '../../../ui';
+
+import { toggleView } from '../actions';
+
+import layout from '../layout.css';
+import styles from './views.css';
+
+class Views extends Component {
+  static propTypes = {
+    settings: PropTypes.object.isRequired,
+    toggleView: PropTypes.func.isRequired
+  }
+
+  render () {
+    return (
+      <Container>
+        <ContainerTitle title='Views' />
+        <div className={ layout.layout }>
+          <div className={ layout.overview }>
+            <div>Manage the available application views, using only the parts of the application that is applicable to you.</div>
+            <div>Are you an end-user? The defaults are setups for both beginner and advanced users alike.</div>
+            <div>Are you a developer? Add some features to manage contracts are interact with application develoyments.</div>
+            <div>Are you a miner or run a large-scale node? Add the features to give you all the information needed to watch the node operation.</div>
+          </div>
+          <div className={ layout.details }>
+            { this.renderViews() }
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  renderViews () {
+    const { settings, toggleView } = this.props;
+
+    return Object.keys(settings.views).map((id) => {
+      const toggle = () => toggleView(id);
+      const view = settings.views[id];
+      const label = (
+        <div className={ styles.header }>
+          <div className={ styles.labelicon }>
+            { view.icon }
+          </div>
+          <div className={ styles.label }>
+            { view.label }
+          </div>
+        </div>
+      );
+
+      return (
+        <div className={ styles.view } key={ id }>
+          <Checkbox
+            disabled={ view.fixed }
+            label={ label }
+            onCheck={ toggle }
+            checked={ view.active }
+            value={ view.active } />
+          <div className={ styles.info }>
+            { view.description }
+          </div>
+        </div>
+      );
+    });
+  }
+}
+
+function mapStateToProps (state) {
+  const { settings } = state;
+
+  return { settings };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ toggleView }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Views);
--- a/js/src/views/Settings/actions.js
+++ b/js/src/views/Settings/actions.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function toggleView (viewId) {
+  return {
+    type: 'toggleView',
+    viewId
+  };
+}
+
+export function updateBackground (backgroundSeed) {
+  return {
+    type: 'updateBackground',
+    backgroundSeed
+  };
+}
--- a/js/src/views/Settings/index.js
+++ b/js/src/views/Settings/index.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import settingsReducer from './reducers';
+import { toggleView, updateBackground } from './actions';
+import SettingsBackground from './Background';
+import SettingsViews, { defaultViews } from './Views';
+
+export default from './settings';
+
+export {
+  SettingsBackground,
+  SettingsViews,
+  defaultViews,
+  settingsReducer,
+  toggleView,
+  updateBackground
+};
--- a/js/src/views/Settings/layout.css
+++ b/js/src/views/Settings/layout.css
@@ -0,0 +1,54 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.layout {
+  padding-top: 1.5em;
+}
+
+.layout::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.overview, .details {
+  float: left;
+  box-sizing: border-box;
+}
+
+.overview {
+  width: 33.33333%;
+  width: -webkit-calc(100% / 12 * 4);
+  width: -moz-calc(100% / 12 * 4);
+  width: calc(100% / 12 * 4);
+}
+
+.overview {
+  opacity: 0.5;
+}
+
+.overview>div+div {
+  padding-top: 1.25em;
+}
+
+.details {
+  width: 66.66665%;
+  width: -webkit-calc(100% / 12 * 8);
+  width: -moz-calc(100% / 12 * 8);
+  width: calc(100% / 12 * 8);
+  padding-left: 3em;
+}
--- a/js/src/views/Settings/middleware.js
+++ b/js/src/views/Settings/middleware.js
@@ -0,0 +1,125 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import defaultViews from './Views/defaults';
+
+function initBackground (store, api) {
+  const backgroundSeed = loadBackground() || api.util.sha3(`${Date.now()}`);
+
+  store.dispatch({
+    type: 'updateBackground',
+    backgroundSeed
+  });
+}
+
+function loadBackground () {
+  return window.localStorage.getItem('backgroundSeed');
+}
+
+function saveBackground (backgroundSeed) {
+  window.localStorage.setItem('backgroundSeed', backgroundSeed);
+}
+
+function initViews (store) {
+  const { settings } = store.getState();
+  const data = loadViews();
+  const viewIds = Object.keys(data).filter((viewId) => {
+    return settings.views[viewId] && data[viewId].active !== settings.views[viewId].active;
+  });
+
+  if (viewIds.length) {
+    store.dispatch({ type: 'toggleViews', viewIds });
+  }
+}
+
+function getFixedViews () {
+  const views = {};
+
+  Object.keys(defaultViews).forEach((id) => {
+    if (defaultViews[id].fixed) {
+      views[id] = { active: true };
+    }
+  });
+
+  return views;
+}
+
+function getDefaultViews () {
+  const views = {};
+
+  Object.keys(defaultViews).forEach((id) => {
+    views[id] = {
+      active: defaultViews[id].active || false
+    };
+  });
+
+  return views;
+}
+
+function loadViews () {
+  const fixed = getFixedViews();
+  const defaults = getDefaultViews();
+  let data;
+
+  try {
+    const json = window.localStorage.getItem('views') || '{}';
+
+    data = Object.assign(defaults, JSON.parse(json), fixed);
+  } catch (e) {
+    data = defaults;
+  }
+
+  return data;
+}
+
+function saveViews (store) {
+  window.localStorage.setItem('views', JSON.stringify(getDefaultViews()));
+}
+
+function toggleViews (store, viewIds) {
+  viewIds.forEach((id) => {
+    defaultViews[id].active = !defaultViews[id].active;
+  });
+
+  saveViews(store);
+}
+
+export default class SettingsMiddleware {
+  toMiddleware () {
+    return (store) => (next) => (action) => {
+      switch (action.type) {
+        case 'initAll':
+          initBackground(store, action.api);
+          initViews(store);
+          break;
+
+        case 'toggleView':
+          toggleViews(store, [action.viewId]);
+          break;
+
+        case 'toggleViews':
+          toggleViews(store, action.viewIds);
+          break;
+
+        case 'updateBackground':
+          saveBackground(action.backgroundSeed);
+          break;
+      }
+
+      next(action);
+    };
+  }
+}
--- a/js/src/views/Settings/reducers.js
+++ b/js/src/views/Settings/reducers.js
@@ -0,0 +1,40 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+import views from './Views/defaults';
+
+const initialState = {
+  views,
+  backgroundSeed: `${Date.now()}`
+};
+
+export default handleActions({
+  toggleView (state, action) {
+    return Object.assign({}, state, { views });
+  },
+
+  toggleViews (state, action) {
+    return Object.assign({}, state, { views });
+  },
+
+  updateBackground (state, action) {
+    const { backgroundSeed } = action;
+
+    return Object.assign({}, state, { backgroundSeed });
+  }
+}, initialState);
--- a/js/src/views/Settings/settings.css
+++ b/js/src/views/Settings/settings.css
@@ -0,0 +1,62 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.layout {
+}
+
+.menu {
+  display: inline-block;
+}
+
+.bar {
+  justify-content: flex-start !important;
+}
+
+.tabs {
+  margin-left: 3em;
+}
+
+.tab,
+.tabactive {
+  padding: 16px 2em !important;
+  line-height: 24px !important;
+}
+
+.tabactive {
+}
+
+.tab>div,
+.tabactive>div {
+  height: 24px !important;
+}
+
+.tab>div>div,
+.tabactive>div>div {
+  display: inline-block !important;
+}
+
+.tab svg,
+.tabactive svg {
+  margin-right: 0.5em;
+  margin-bottom: 0 !important;
+}
+
+.tab .menu,
+.tabactive .menu {
+  vertical-align: top;
+  display: inline-block;
+}
--- a/js/src/views/Settings/settings.js
+++ b/js/src/views/Settings/settings.js
@@ -0,0 +1,82 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+// 0xecf69634885f27a8f78161e530f15a8d3b57d39e755c222c92cf297b6e25aaaa
+
+import React, { Component, PropTypes } from 'react';
+import { Tab, Tabs } from 'material-ui';
+import ImageBlurOn from 'material-ui/svg-icons/image/blur-on';
+import ImageRemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
+
+import { Actionbar, Page } from '../../ui';
+
+import styles from './settings.css';
+
+export default class Settings extends Component {
+  static contextTypes = {
+    router: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    children: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { children } = this.props;
+
+    return (
+      <div className={ styles.layout }>
+        <Actionbar title='settings' className={ styles.bar }>
+          { this.renderTabs() }
+        </Actionbar>
+        <Page>
+          { children }
+        </Page>
+      </div>
+    );
+  }
+
+  renderTabs () {
+    const hash = (window.location.hash || '').split('?')[0].split('/')[2];
+
+    return (
+      <Tabs className={ styles.tabs } value={ hash }>
+        <Tab
+          className={ hash === 'views' ? styles.tabactive : styles.tab }
+          value='views'
+          key='views'
+          icon={ <ImageRemoveRedEye /> }
+          label={ <div className={ styles.menu }>views</div> }
+          onActive={ this.onActivate('views') } />
+        <Tab
+          className={ hash === 'background' ? styles.tabactive : styles.tab }
+          value='background'
+          key='background'
+          icon={ <ImageBlurOn /> }
+          label={ <div className={ styles.menu }>background</div> }
+          onActive={ this.onActivate('background') } />
+      </Tabs>
+    );
+  }
+
+  onActivate = (section) => {
+    const { router } = this.context;
+
+    return (event) => {
+      router.push(`/settings/${section}`);
+    };
+  }
+}