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/Application/Container/container.js
+++ b/js/src/views/Application/Container/container.js
@@ -0,0 +1,45 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { FirstRun } from '../../../modals';
+import { Errors, ParityBackground, Tooltips } from '../../../ui';
+
+import styles from '../application.css';
+
+export default class Container extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    showFirstRun: PropTypes.bool,
+    onCloseFirstRun: PropTypes.func
+  };
+
+  render () {
+    const { children, showFirstRun, onCloseFirstRun } = this.props;
+
+    return (
+      <ParityBackground className={ styles.container }>
+        <FirstRun
+          visible={ showFirstRun }
+          onClose={ onCloseFirstRun } />
+        <Tooltips />
+        <Errors />
+        { children }
+      </ParityBackground>
+    );
+  }
+}
--- a/js/src/views/Application/Container/index.js
+++ b/js/src/views/Application/Container/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 './container';
--- a/js/src/views/Application/DappContainer/dappContainer.js
+++ b/js/src/views/Application/DappContainer/dappContainer.js
@@ -0,0 +1,35 @@
+// 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 styles from '../application.css';
+
+export default class DappContainer extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired
+  };
+
+  render () {
+    const { children } = this.props;
+
+    return (
+      <div className={ styles.container }>
+        { children }
+      </div>
+    );
+  }
+}
--- a/js/src/views/Application/DappContainer/index.js
+++ b/js/src/views/Application/DappContainer/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 './dappContainer';
--- a/js/src/views/Application/FrameError/frameError.css
+++ b/js/src/views/Application/FrameError/frameError.css
@@ -0,0 +1,21 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.error {
+  padding: 2em;
+  background: red;
+  color: white;
+}
--- a/js/src/views/Application/FrameError/frameError.js
+++ b/js/src/views/Application/FrameError/frameError.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/>.
+
+import React, { Component } from 'react';
+
+import styles from './frameError.css';
+
+export default class FrameError extends Component {
+  render () {
+    return (
+      <div className={ styles.error }>
+        ERROR: This application cannot and should not be loaded in an embedded iFrame
+      </div>
+    );
+  }
+}
--- a/js/src/views/Application/FrameError/index.js
+++ b/js/src/views/Application/FrameError/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 './frameError';
--- a/js/src/views/Application/Status/index.js
+++ b/js/src/views/Application/Status/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 './status';
--- a/js/src/views/Application/Status/status.css
+++ b/js/src/views/Application/Status/status.css
@@ -0,0 +1,65 @@
+/* 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/>.
+*/
+.status {
+  clear: both;
+  padding: 1.5em;
+  text-align: right;
+  color: #ddd;
+}
+
+.title {
+  margin: 0 0.5em 0 2em;
+}
+
+.block {
+}
+
+.netinfo {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 0.25em;
+}
+
+.netinfo>div {
+  display: inline-block;
+  margin-left: 1em;
+}
+
+.network {
+  padding: 0.25em 0.5em;
+  display: inline-block;
+  border-radius: 4px;
+  text-transform: uppercase;
+  height: 1.25em;
+  margin-top: 0.25em;
+  box-sizing: content-box;
+}
+
+.networklive {
+  background: rgb(75, 255, 75);
+}
+
+.networktest {
+  background: rgb(255, 75, 75);
+}
+
+.peers {
+}
+
+.version {
+}
--- a/js/src/views/Application/Status/status.js
+++ b/js/src/views/Application/Status/status.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/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import styles from './status.css';
+
+class Status extends Component {
+  static propTypes = {
+    blockNumber: PropTypes.object,
+    clientVersion: PropTypes.string,
+    netPeers: PropTypes.object,
+    netChain: PropTypes.string,
+    isTest: PropTypes.bool
+  }
+
+  render () {
+    const { clientVersion, blockNumber, netChain, netPeers, isTest } = this.props;
+    const netStyle = `${styles.network} ${styles[isTest ? 'networktest' : 'networklive']}`;
+
+    if (!blockNumber) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.status }>
+        <div className={ styles.version }>
+          { clientVersion }
+        </div>
+        <div className={ styles.netinfo }>
+          <div>
+            <div className={ styles.block }>
+              { blockNumber.toFormat() } blocks
+            </div>
+            <div className={ styles.peers }>
+              { netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
+            </div>
+          </div>
+          <div className={ netStyle }>
+            { isTest ? 'test' : netChain }
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { blockNumber, clientVersion, netPeers, netChain, isTest } = state.nodeStatus;
+
+  return {
+    blockNumber,
+    clientVersion,
+    netPeers,
+    netChain,
+    isTest
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Status);
--- a/js/src/views/Application/TabBar/index.js
+++ b/js/src/views/Application/TabBar/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 './tabBar';
--- a/js/src/views/Application/TabBar/tabBar.css
+++ b/js/src/views/Application/TabBar/tabBar.css
@@ -0,0 +1,84 @@
+/* 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/>.
+*/
+.toolbar {
+  background: none !important;
+  height: 72px !important;
+  position: relative;
+}
+
+.tabs {
+  width: 100%;
+  position: relative;
+}
+
+.tabs button,
+.settings,
+.logo,
+.last {
+  background: rgba(0, 0, 0, 0.5) !important; /* rgba(0, 0, 0, 0.25) !important; */
+}
+
+.tabs button:hover {
+  background: rgba(0, 0, 0, 0.4) !important;
+}
+
+button.tabactive,
+button.tabactive:hover {
+  background: rgba(0, 0, 0, 0.25) !important;
+  border-radius: 4px 4px 0 0;
+}
+
+.tabbarTooltip {
+  left: 3.3em;
+  top: 0.5em;
+}
+
+.label {
+  position: relative;
+}
+
+.labelBubble {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+}
+
+.logo {
+  margin: 0 0 0 -24px;
+  padding: 22px 24px 0 24px;
+  white-space: nowrap;
+}
+
+.logo img {
+  height: 28px;
+  width: 28px;
+  margin-right: 0.5em;
+}
+
+.logo div {
+  display: inline-block;
+  text-transform: uppercase;
+  line-height: 32px;
+  vertical-align: top;
+  letter-spacing: 0.2em;
+}
+
+.last {
+  margin: 0 -24px 0 0;
+  padding: 22px 12px 0 12px;
+  white-space: nowrap;
+}
--- a/js/src/views/Application/TabBar/tabBar.js
+++ b/js/src/views/Application/TabBar/tabBar.js
@@ -0,0 +1,187 @@
+// 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 { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
+import { Tabs, Tab } from 'material-ui/Tabs';
+
+import { Badge, Tooltip } from '../../../ui';
+
+import styles from './tabBar.css';
+import imagesEthcoreBlock from '../../../../assets/images/ethcore-block.png';
+
+const TABMAP = {
+  accounts: 'account',
+  addresses: 'address',
+  apps: 'app',
+  contracts: 'contract'
+};
+
+class TabBar extends Component {
+  static contextTypes = {
+    router: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    pending: PropTypes.array,
+    isTest: PropTypes.bool,
+    netChain: PropTypes.string,
+    settings: PropTypes.object.isRequired
+  }
+
+  state = {
+    activeRoute: '/accounts'
+  }
+
+  render () {
+    return (
+      <Toolbar
+        className={ styles.toolbar }>
+        { this.renderLogo() }
+        { this.renderTabs() }
+        { this.renderLast() }
+      </Toolbar>
+    );
+  }
+
+  renderLogo () {
+    return (
+      <ToolbarGroup>
+        <div className={ styles.logo }>
+          <img src={ imagesEthcoreBlock } />
+          <div>Parity</div>
+        </div>
+      </ToolbarGroup>
+    );
+  }
+
+  renderLast () {
+    return (
+      <ToolbarGroup>
+        <div className={ styles.last }>
+          <div></div>
+        </div>
+      </ToolbarGroup>
+    );
+  }
+
+  renderTabs () {
+    const { settings } = this.props;
+    const windowHash = (window.location.hash || '').split('?')[0].split('/')[1];
+    const hash = TABMAP[windowHash] || windowHash;
+
+    const items = Object.keys(settings.views)
+      .filter((id) => settings.views[id].fixed || settings.views[id].active)
+      .map((id) => {
+        const view = settings.views[id];
+        let label = this.renderLabel(view.label);
+        let body = null;
+
+        if (id === 'accounts') {
+          body = (
+            <Tooltip className={ styles.tabbarTooltip } text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view' />
+          );
+        } else if (id === 'signer') {
+          label = this.renderSignerLabel(label);
+        } else if (id === 'status') {
+          label = this.renderStatusLabel(label);
+        }
+
+        return (
+          <Tab
+            className={ hash === view.value ? styles.tabactive : '' }
+            value={ view.value }
+            icon={ view.icon }
+            key={ id }
+            label={ label }
+            onActive={ this.onActivate(view.route) }>
+            { body }
+          </Tab>
+        );
+      });
+
+    return (
+      <Tabs
+        className={ styles.tabs }
+        value={ hash }>
+        { items }
+      </Tabs>
+    );
+  }
+
+  renderLabel = (name, bubble) => {
+    return (
+      <div className={ styles.label }>
+        { name }
+        { bubble }
+      </div>
+    );
+  }
+
+  renderSignerLabel = (label) => {
+    const { pending } = this.props;
+    let bubble = null;
+
+    if (pending && pending.length) {
+      bubble = (
+        <Badge
+          color='red'
+          className={ styles.labelBubble }
+          value={ pending.length } />
+      );
+    }
+
+    return this.renderLabel(label, bubble);
+  }
+
+  renderStatusLabel = (label) => {
+    const { isTest, netChain } = this.props;
+    const bubble = (
+      <Badge
+        color={ isTest ? 'red' : 'default' }
+        className={ styles.labelBubble }
+        value={ isTest ? 'TEST' : netChain } />
+      );
+
+    return this.renderLabel(label, bubble);
+  }
+
+  onActivate = (activeRoute) => {
+    const { router } = this.context;
+
+    return (event) => {
+      router.push(activeRoute);
+      this.setState({ activeRoute });
+    };
+  }
+}
+
+function mapStateToProps (state) {
+  const { settings } = state;
+
+  return { settings };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TabBar);
--- a/js/src/views/Application/application.css
+++ b/js/src/views/Application/application.css
@@ -0,0 +1,21 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.outer,
+.container {
+  min-height: 100vh;
+}
--- a/js/src/views/Application/application.js
+++ b/js/src/views/Application/application.js
@@ -0,0 +1,146 @@
+// 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 Connection from '../Connection';
+import ParityBar from '../ParityBar';
+
+import Container from './Container';
+import DappContainer from './DappContainer';
+import FrameError from './FrameError';
+import Status from './Status';
+import TabBar from './TabBar';
+
+import styles from './application.css';
+
+const inFrame = window.parent !== window && window.parent.frames.length !== 0;
+const showFirstRun = window.localStorage.getItem('showFirstRun') === '1';
+
+class Application extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    background: PropTypes.string
+  }
+
+  static propTypes = {
+    children: PropTypes.node,
+    netChain: PropTypes.string,
+    isTest: PropTypes.bool,
+    pending: PropTypes.array
+  }
+
+  state = {
+    showFirstRun: false
+  }
+
+  componentWillMount () {
+    this.checkAccounts();
+  }
+
+  render () {
+    const [root] = (window.location.hash || '').replace('#/', '').split('/');
+    const isDapp = root === 'app';
+
+    if (inFrame) {
+      return (
+        <FrameError />
+      );
+    }
+
+    return (
+      <div className={ styles.outer }>
+        { isDapp ? this.renderDapp() : this.renderApp() }
+        <Connection />
+        <ParityBar dapp={ isDapp } />
+      </div>
+    );
+  }
+
+  renderApp () {
+    const { children, pending, netChain, isTest } = this.props;
+    const { showFirstRun } = this.state;
+
+    return (
+      <Container
+        showFirstRun={ showFirstRun }
+        onCloseFirstRun={ this.onCloseFirstRun }>
+        <TabBar
+          netChain={ netChain }
+          isTest={ isTest }
+          pending={ pending } />
+        { children }
+        <Status />
+      </Container>
+    );
+  }
+
+  renderDapp () {
+    const { children } = this.props;
+
+    return (
+      <DappContainer>
+        { children }
+      </DappContainer>
+    );
+  }
+
+  checkAccounts () {
+    const { api } = this.context;
+
+    api.personal
+      .listAccounts()
+      .then((accounts) => {
+        this.setState({
+          showFirstRun: showFirstRun || accounts.length === 0
+        });
+      })
+      .catch((error) => {
+        console.error('checkAccounts', error);
+      });
+  }
+
+  onCloseFirstRun = () => {
+    window.localStorage.setItem('showFirstRun', '0');
+    this.setState({
+      showFirstRun: false
+    });
+  }
+}
+
+function mapStateToProps (state) {
+  const { netChain, isTest } = state.nodeStatus;
+  const { hasAccounts } = state.personal;
+  const { pending } = state.signer;
+
+  return {
+    hasAccounts,
+    netChain,
+    isTest,
+    pending
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Application);
--- a/js/src/views/Application/index.js
+++ b/js/src/views/Application/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 './application';