UI 2 component & modal splits (#5525)

* Remove mui from Actionbar

* Add semantic-ui to vendor.js

* Stateless components

* Multi-item spacing

* Stateless components

* Stateless components

* Default font

* Context passing

* Move Vault modals into Vault dapp

* Move modals to their respective views

js/src/modals/index.js

@@ -1,43 +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/>.
-
-export AddAddress from './AddAddress';
-export AddContract from './AddContract';
-export CreateAccount from './CreateAccount';
-export CreateWallet from './CreateWallet';
-export DappPermissions from './DappPermissions';
-export DappsVisible from './AddDapps';
-export DeleteAccount from './DeleteAccount';
-export DeployContract from './DeployContract';
-export EditMeta from './EditMeta';
-export ExecuteContract from './ExecuteContract';
-export ExportAccount from './ExportAccount';
-export Faucet from './Faucet';
-export FirstRun from './FirstRun';
-export LoadContract from './LoadContract';
-export PasswordManager from './PasswordManager';
-export SaveContract from './SaveContract';
-export Shapeshift from './Shapeshift';
-export Transfer from './Transfer';
-export UpgradeParity from './UpgradeParity';
-export VaultAccounts from './VaultAccounts';
-export VaultCreate from './VaultCreate';
-export VaultLock from './VaultLock';
-export VaultMeta from './VaultMeta';
-export VaultSelector from './VaultSelector';
-export VaultUnlock from './VaultUnlock';
-export Verification from './Verification';
-export WalletSettings from './WalletSettings';

js/src/redux/providers/status.js

@@ -17,7 +17,7 @@
 import { isEqual } from 'lodash';
 
 import { LOG_KEYS, getLogger } from '~/config';
-import UpgradeStore from '~/modals/UpgradeParity/store';
+import UpgradeStore from '~/shell/UpgradeParity/store';
 
 import BalancesProvider from './balances';
 import { statusBlockNumber, statusCollection } from './statusActions';

js/src/shell/Application/Container/container.js

@@ -16,9 +16,11 @@
 
 import React, { PropTypes } from 'react';
 
-import { FirstRun, UpgradeParity } from '~/modals';
 import { Errors, Tooltips } from '~/ui';
 
+import FirstRun from '../../FirstRun';
+import UpgradeParity from '../../UpgradeParity';
+
 import styles from '../application.css';
 
 export default function Container ({ children, onCloseFirstRun, showFirstRun, upgradeStore }) {

js/src/shell/Application/Extension/extension.js

@@ -37,10 +37,12 @@ export default class Extension extends Component {
 
     return (
       <div className={ styles.body }>
-        <CloseIcon
+        <div
           className={ styles.close }
           onClick={ this.onClose }
-        />
+        >
+          <CloseIcon />
+        </div>
         <p>
           <FormattedMessage
             id='extension.intro'

js/src/shell/Application/application.js

@@ -18,19 +18,18 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 
-import UpgradeStore from '~/modals/UpgradeParity/store';
-
 import Connection from '../Connection';
 import ParityBar from '../ParityBar';
+import UpgradeStore from '../UpgradeParity/store';
 
 import Snackbar from './Snackbar';
 import Container from './Container';
 import DappContainer from './DappContainer';
 import Extension from './Extension';
 import FrameError from './FrameError';
+import Requests from './Requests';
 import Status from './Status';
 import Store from './store';
-import Requests from './Requests';
 
 import styles from './application.css';
 

js/src/shell/Connection/connection.css

@@ -65,6 +65,7 @@
 }
 
 .icons {
+  padding-top: 1.5em;
 }
 
 .icon,

js/src/shell/DappPermissions/dappPermissions.spec.js

@@ -29,7 +29,7 @@ function renderShallow (permissionStore = {}) {
   return component;
 }
 
-describe('modals/DappPermissions', () => {
+describe('shell/DappPermissions', () => {
   describe('rendering', () => {
     it('renders defaults', () => {
       expect(renderShallow()).to.be.ok;

js/src/shell/DappPermissions/store.spec.js

@@ -41,7 +41,7 @@ function create () {
   store = new Store(api);
 }
 
-describe('modals/DappPermissions/store', () => {
+describe('shell/DappPermissions/store', () => {
   beforeEach(() => {
     create();
   });

js/src/shell/Dapps/dapps.js

@@ -21,11 +21,13 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { DappPermissions, DappsVisible } from '~/modals';
-import PermissionStore from '~/modals/DappPermissions/store';
 import { Actionbar, Button, DappCard, Page, SectionList } from '~/ui';
 import { LockedIcon, VisibleIcon } from '~/ui/Icons';
 
+import DappsVisible from '../DappsVisible';
+import DappPermissions from '../DappPermissions';
+import PermissionStore from '../DappPermissions/store';
+
 import DappsStore from './dappsStore';
 
 import styles from './dapps.css';

js/src/shell/DappsVisible/dappsVisible.js

@@ -20,10 +20,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { DappCard, Portal, SelectionList } from '~/ui';
 
-import styles from './addDapps.css';
+import styles from './dappsVisible.css';
 
 @observer
-export default class AddDapps extends Component {
+export default class DappsVisible extends Component {
   static propTypes = {
     store: PropTypes.object.isRequired
   };

js/src/shell/DappsVisible/dappsVisible.spec.js

@@ -17,15 +17,15 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import AddDapps from './';
+import DappsVisible from './';
 
 function renderShallow (store = {}) {
   return shallow(
-    <AddDapps store={ store } />
+    <DappsVisible store={ store } />
   );
 }
 
-describe('modals/AddDapps', () => {
+describe('shell/DappsVisible', () => {
   describe('rendering', () => {
     it('renders defaults', () => {
       expect(renderShallow()).to.be.ok;

js/src/shell/DappsVisible/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 './dappsVisible';

js/src/shell/FirstRun/firstRun.js

@@ -27,10 +27,11 @@ import { newError } from '~/redux/actions';
 import { Button, Portal } from '~/ui';
 import { CheckIcon, DoneIcon, NextIcon, PrintIcon } from '~/ui/Icons';
 
-import { NewAccount, AccountDetails } from '../CreateAccount';
-import print from '../CreateAccount/print';
-import recoveryPage from '../CreateAccount/recoveryPage.ejs';
-import CreateStore from '../CreateAccount/store';
+// FIXME: These imports, while nice for re-using, breaks since the shell import
+import { NewAccount, AccountDetails } from '~/views/Accounts/CreateAccount';
+import print from '~/views/Accounts/CreateAccount/print';
+import recoveryPage from '~/views/Accounts/CreateAccount/recoveryPage.ejs';
+import CreateStore from '~/views/Accounts/CreateAccount/store';
 
 import Completed from './Completed';
 import TnC from './TnC';

js/src/shell/index.ejs

@@ -16,9 +16,7 @@
         height: 100%;
         margin: 0;
         padding: 0;
-        font-family: 'Roboto', sans-serif;
-        font-size: 16px;
-        font-weight: 300;
+        font-family: Sans-Serif;
       }
 
       .loading {

js/src/shell/index.js

@@ -41,9 +41,6 @@ import Dapps from './Dapps';
 
 import '~/environment';
 
-import '~/../assets/fonts/Roboto/font.css';
-import '~/../assets/fonts/RobotoMono/font.css';
-
 injectTapEventPlugin();
 
 if (process.env.NODE_ENV === 'development') {

js/src/ui/Actionbar/Search/search.css

@@ -14,9 +14,8 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .searchcontainer {
-  display: flex;
-  overflow: hidden;
 }
 
 .searchButton {

js/src/ui/Actionbar/actionbar.css

@@ -16,17 +16,23 @@
 */
 
 .actionbar {
-  padding: 0 24px !important;
-  margin-bottom: 0;
-  height: auto !important;
-  background: transparent !important;
-}
+  background: transparent;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0.5em 1.5em;
+  margin: 0;
 
-.tooltitle {
+  .title {
     text-transform: uppercase;
   }
 
-.toolbuttons {
-  padding: 0.5em 0;
-  overflow: hidden;
+  .children {
+  }
+
+  .buttons {
+    div {
+      display: inline-block;
+    }
+  }
 }

js/src/ui/Actionbar/actionbar.js

@@ -14,55 +14,31 @@
 // 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 { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
+import React, { PropTypes } from 'react';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
 import styles from './actionbar.css';
 
-export default class Actionbar extends Component {
-  static propTypes = {
+export default function Actionbar ({ buttons, children, className, title }) {
+  return (
+    <div className={ `${styles.actionbar} ${className}` }>
+      <h3 className={ styles.title }>
+        { title }
+      </h3>
+      <div className={ styles.children }>
+        { children }
+      </div>
+      <div className={ styles.buttons }>
+        { buttons }
+      </div>
+    </div>
+  );
+}
+
+Actionbar.propTypes = {
   title: nodeOrStringProptype(),
   buttons: PropTypes.array,
   children: PropTypes.node,
   className: PropTypes.string
 };
-
-  render () {
-    const { children, className } = this.props;
-    const classes = `${styles.actionbar} ${className}`;
-
-    return (
-      <Toolbar className={ classes }>
-        { this.renderTitle() }
-        { this.renderButtons() }
-        { children }
-      </Toolbar>
-    );
-  }
-
-  renderButtons () {
-    const { buttons } = this.props;
-
-    if (!buttons || !buttons.length) {
-      return null;
-    }
-
-    return (
-      <ToolbarGroup className={ styles.toolbuttons }>
-        { buttons }
-      </ToolbarGroup>
-    );
-  }
-
-  renderTitle () {
-    const { title } = this.props;
-
-    return (
-      <h3 className={ styles.tooltitle }>
-        { title }
-      </h3>
-    );
-  }
-}

js/src/ui/Badge/badge.js

@@ -14,25 +14,20 @@
 // 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 React, { PropTypes } from 'react';
 
 import styles from './badge.css';
 
-export default class Badge extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    color: PropTypes.string,
-    value: PropTypes.any
-  };
-
-  render () {
-    const { className, color, value } = this.props;
-    const classes = `${styles.bubble} ${styles[color || 'default']} ${className}`;
-
+export default function Badge ({ className, color, value }) {
   return (
-      <div className={ classes }>
+    <div className={ `${styles.bubble} ${styles[color || 'default']} ${className}` }>
       { value }
     </div>
   );
 }
-}
+
+Badge.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.string,
+  value: PropTypes.any
+};

js/src/ui/Balance/balance.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import BigNumber from 'bignumber.js';
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
@@ -23,28 +23,7 @@ import TokenImage from '~/ui/TokenImage';
 
 import styles from './balance.css';
 
-export class Balance extends Component {
-  static contextTypes = {
-    api: PropTypes.object
-  };
-
-  static propTypes = {
-    balance: PropTypes.object.isRequired,
-    tokens: PropTypes.object.isRequired,
-    address: PropTypes.string,
-    className: PropTypes.string,
-    showOnlyEth: PropTypes.bool,
-    showZeroValues: PropTypes.bool
-  };
-
-  static defaultProps = {
-    showOnlyEth: false,
-    showZeroValues: false
-  };
-
-  render () {
-    const { balance, className, showOnlyEth, tokens } = this.props;
-
+function Balance ({ balance, className, showOnlyEth, tokens }) {
   if (Object.keys(balance).length === 0) {
     return null;
   }
@@ -137,7 +116,24 @@ export class Balance extends Component {
     </div>
   );
 }
-}
+
+Balance.contextTypes = {
+  api: PropTypes.object.isRequired
+};
+
+Balance.propTypes = {
+  balance: PropTypes.object.isRequired,
+  tokens: PropTypes.object.isRequired,
+  address: PropTypes.string,
+  className: PropTypes.string,
+  showOnlyEth: PropTypes.bool,
+  showZeroValues: PropTypes.bool
+};
+
+Balance.defaultProps = {
+  showOnlyEth: false,
+  showZeroValues: false
+};
 
 function mapStateToProps (state, props) {
   const { balances, tokens } = state;
@@ -149,4 +145,7 @@ function mapStateToProps (state, props) {
   };
 }
 
-export default connect(mapStateToProps)(Balance);
+export default connect(
+  mapStateToProps,
+  null
+)(Balance);

js/src/ui/BlockStatus/blockStatus.js

@@ -14,24 +14,13 @@
 // 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 React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import styles from './blockStatus.css';
 
-class BlockStatus extends Component {
-  static propTypes = {
-    blockNumber: PropTypes.object,
-    syncing: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.object
-    ])
-  }
-
-  render () {
-    const { blockNumber, syncing } = this.props;
-
+function BlockStatus ({ blockNumber, syncing }) {
   if (!blockNumber) {
     return null;
   }
@@ -105,7 +94,14 @@ class BlockStatus extends Component {
     </div>
   );
 }
-}
+
+BlockStatus.propTypes = {
+  blockNumber: PropTypes.object,
+  syncing: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.object
+  ])
+};
 
 function mapStateToProps (state) {
   const { blockNumber, syncing } = state.nodeStatus;

js/src/ui/Button/button.js

@@ -14,48 +14,12 @@
 // 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 React, { PropTypes } from 'react';
 import { Button as SemButton } from 'semantic-ui-react';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
-export default class Button extends Component {
-  static propTypes = {
-    active: PropTypes.bool,
-    animated: PropTypes.bool,
-    basic: PropTypes.bool,
-    backgroundColor: PropTypes.string,
-    className: PropTypes.string,
-    color: PropTypes.string,
-    disabled: PropTypes.bool,
-    icon: PropTypes.node,
-    label: nodeOrStringProptype(),
-    onClick: PropTypes.func,
-    primary: PropTypes.bool,
-    size: PropTypes.string,
-    toggle: PropTypes.bool
-  }
-
-  static defaultProps = {
-    primary: true
-  }
-
-  render () {
-    const {
-      active,
-      animated,
-      basic,
-      className,
-      color,
-      disabled,
-      icon,
-      label,
-      onClick,
-      primary,
-      size,
-      toggle
-    } = this.props;
-
+export default function Button ({ active, animated, basic, className, color, disabled, icon, label, onClick, primary, size, toggle }) {
   return (
     <SemButton
       active={ active }
@@ -73,4 +37,23 @@ export default class Button extends Component {
     />
   );
 }
-}
+
+Button.propTypes = {
+  active: PropTypes.bool,
+  animated: PropTypes.bool,
+  basic: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  className: PropTypes.string,
+  color: PropTypes.string,
+  disabled: PropTypes.bool,
+  icon: PropTypes.node,
+  label: nodeOrStringProptype(),
+  onClick: PropTypes.func,
+  primary: PropTypes.bool,
+  size: PropTypes.string,
+  toggle: PropTypes.bool
+};
+
+Button.defaultProps = {
+  primary: true
+};

js/src/ui/ConfirmDialog/confirmDialog.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
@@ -38,29 +38,7 @@ const DEFAULT_YES = (
   />
 );
 
-export default class ConfirmDialog extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    disabledConfirm: PropTypes.bool,
-    disabledDeny: PropTypes.bool,
-    busy: PropTypes.bool,
-    iconConfirm: PropTypes.node,
-    iconDeny: PropTypes.node,
-    labelConfirm: PropTypes.string,
-    labelDeny: PropTypes.string,
-    onConfirm: PropTypes.func.isRequired,
-    onDeny: PropTypes.func.isRequired,
-    open: PropTypes.bool,
-    title: nodeOrStringProptype().isRequired,
-    visible: PropTypes.bool
-  }
-
-  render () {
-    const { busy, children, className, disabledConfirm, disabledDeny, iconConfirm, iconDeny, labelConfirm, labelDeny, onConfirm, onDeny, open, title, visible } = this.props;
-
-    // TODO: visible is for compatibility with existing, open aligns with Portal.
-    // (Cleanup once all uses of ConfirmDialog has been migrated)
+export default function ConfirmDialog ({ busy, children, className, disabledConfirm, disabledDeny, iconConfirm, iconDeny, labelConfirm, labelDeny, onConfirm, onDeny, open, title, visible }) {
   if (!visible && !open) {
     return null;
   }
@@ -96,4 +74,20 @@ export default class ConfirmDialog extends Component {
     </Portal>
   );
 }
-}
+
+ConfirmDialog.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  disabledConfirm: PropTypes.bool,
+  disabledDeny: PropTypes.bool,
+  busy: PropTypes.bool,
+  iconConfirm: PropTypes.node,
+  iconDeny: PropTypes.node,
+  labelConfirm: PropTypes.string,
+  labelDeny: PropTypes.string,
+  onConfirm: PropTypes.func.isRequired,
+  onDeny: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+  title: nodeOrStringProptype().isRequired,
+  visible: PropTypes.bool
+};

js/src/ui/Form/VaultSelect/vaultSelect.js

@@ -17,9 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import VaultSelector from '~/modals/VaultSelector';
 import VaultStore from '~/views/Vaults/store';
 
+import VaultSelector from './VaultSelector';
 import InputAddress from '../InputAddress';
 
 export default class VaultSelect extends Component {

js/src/ui/Modal/Busy/busy.js

@@ -14,22 +14,13 @@
 // 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 React, { PropTypes } from 'react';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
 import styles from './busy.css';
 
-export default class Busy extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    state: nodeOrStringProptype(),
-    title: nodeOrStringProptype()
-  }
-
-  render () {
-    const { children, state, title } = this.props;
-
+export default function Busy ({ children, state, title }) {
   return (
     <div className={ styles.center }>
       <div className={ styles.title }>{ title }</div>
@@ -38,4 +29,9 @@ export default class Busy extends Component {
     </div>
   );
 }
-}
+
+Busy.propTypes = {
+  children: PropTypes.node,
+  state: nodeOrStringProptype(),
+  title: nodeOrStringProptype()
+};

js/src/ui/Modal/Completed/completed.js

@@ -14,22 +14,18 @@
 // 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 React, { PropTypes } from 'react';
 
 import styles from './completed.css';
 
-export default class Completed extends Component {
-  static propTypes = {
-    children: PropTypes.node
-  }
-
-  render () {
-    const { children } = this.props;
-
+export default function Completed ({ children }) {
   return (
     <div className={ styles.body }>
       { children }
     </div>
   );
 }
-}
+
+Completed.propTypes = {
+  children: PropTypes.node
+};

js/src/ui/Page/page.js

@@ -14,25 +14,14 @@
 // 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 React, { PropTypes } from 'react';
 
 import Actionbar from '../Actionbar';
 import { nodeOrStringProptype } from '~/util/proptypes';
 
 import styles from './page.css';
 
-export default class Page extends Component {
-  static propTypes = {
-    buttons: PropTypes.array,
-    className: PropTypes.string,
-    children: PropTypes.node,
-    padded: PropTypes.bool,
-    title: nodeOrStringProptype()
-  };
-
-  render () {
-    const { buttons, className, children, padded, title } = this.props;
-
+export default function Page ({ buttons, className, children, padded, title }) {
   return (
     <div>
       {
@@ -60,4 +49,11 @@ export default class Page extends Component {
     </div>
   );
 }
-}
+
+Page.propTypes = {
+  buttons: PropTypes.array,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  padded: PropTypes.bool,
+  title: nodeOrStringProptype()
+};

js/src/ui/ShortenedHash/shortenedHash.js

@@ -14,18 +14,11 @@
 // 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 React, { PropTypes } from 'react';
 
 import styles from './shortenedHash.css';
 
-export default class ShortenedHash extends Component {
-  static propTypes = {
-    data: PropTypes.string.isRequired
-  }
-
-  render () {
-    const { data } = this.props;
-
+export default function ShortenedHash ({ data }) {
   let shortened = data.toLowerCase();
 
   if (shortened.slice(0, 2) === '0x') {
@@ -39,4 +32,7 @@ export default class ShortenedHash extends Component {
     <abbr className={ styles.hash } title={ data }>{ shortened }</abbr>
   );
 }
-}
+
+ShortenedHash.propTypes = {
+  data: PropTypes.string.isRequired
+};

js/src/ui/SignerIcon/signerIcon.js

@@ -14,22 +14,14 @@
 // 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 React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { keccak_256 } from 'js-sha3'; // eslint-disable-line camelcase
 
 import IdentityIcon from '../IdentityIcon';
 import { FingerprintIcon } from '../Icons';
 
-class SignerIcon extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    secureToken: PropTypes.string
-  }
-
-  render () {
-    const { className, secureToken } = this.props;
-
+function SignerIcon ({ className, secureToken }) {
   if (!secureToken) {
     return (
       <FingerprintIcon />
@@ -46,7 +38,11 @@ class SignerIcon extends Component {
     />
   );
 }
-}
+
+SignerIcon.propTypes = {
+  className: PropTypes.string,
+  secureToken: PropTypes.string
+};
 
 function mapStateToProps (state) {
   const { secureToken } = state.nodeStatus;

js/src/ui/TokenImage/tokenImage.js

@@ -14,28 +14,13 @@
 // 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 React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 
 import unknownImage from '~/../assets/images/contracts/unknown-64x64.png';
 
-class TokenImage extends Component {
-  static contextTypes = {
-    api: PropTypes.object
-  };
-
-  static propTypes = {
-    image: PropTypes.string,
-    token: PropTypes.shape({
-      image: PropTypes.string,
-      address: PropTypes.string
-    }).isRequired
-  };
-
-  render () {
-    const { api } = this.context;
-    const { image, token } = this.props;
-
+function TokenImage ({ image, token }, context) {
+  const { api } = context;
   const imageurl = token.image || image;
   let imagesrc = unknownImage;
 
@@ -54,7 +39,18 @@ class TokenImage extends Component {
     />
   );
 }
-}
+
+TokenImage.contextTypes = {
+  api: PropTypes.object
+};
+
+TokenImage.propTypes = {
+  image: PropTypes.string,
+  token: PropTypes.shape({
+    image: PropTypes.string,
+    address: PropTypes.string
+  }).isRequired
+};
 
 function mapStateToProps (iniState) {
   const { images } = iniState;

js/src/ui/VaultCard/Accounts/accounts.js

@@ -0,0 +1,66 @@
+// 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, { PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import DappLink from '~/ui/DappLink';
+import IdentityIcon from '~/ui/IdentityIcon';
+
+import styles from '../vaultCard.css';
+
+export default function Accounts ({ accounts, hideAccounts }) {
+  if (hideAccounts) {
+    return null;
+  }
+
+  if (!accounts || !accounts.length) {
+    return (
+      <div className={ styles.empty }>
+        <FormattedMessage
+          id='vaults.accounts.empty'
+          defaultMessage='There are no accounts in this vault'
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={ styles.accounts }>
+      {
+        accounts.map((address) => {
+          return (
+            <DappLink
+              key={ address }
+              to={ `/accounts/${address}` }
+            >
+              <IdentityIcon
+                address={ address }
+                center
+                className={ styles.account }
+              />
+            </DappLink>
+          );
+        })
+      }
+    </div>
+  );
+}
+
+Accounts.propTypes = {
+  accounts: PropTypes.array,
+  hideAccounts: PropTypes.bool
+};

js/src/ui/VaultCard/Accounts/index.js

@@ -14,4 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export default from './addDapps';
+export default from './accounts';

js/src/ui/VaultCard/Buttons/buttons.js

@@ -0,0 +1,52 @@
+// 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, { PropTypes } from 'react';
+
+import Button from '~/ui/Button';
+import { LockedIcon, UnlockedIcon } from '~/ui/Icons';
+
+import styles from '../vaultCard.css';
+
+export default function Buttons ({ buttons, hideButtons, vault }) {
+  const { isOpen } = vault;
+
+  if (hideButtons) {
+    return null;
+  }
+
+  return (
+    <div className={ styles.buttons }>
+      <Button
+        className={ styles.status }
+        disabled
+        icon={
+          isOpen
+            ? <UnlockedIcon />
+            : <LockedIcon />
+        }
+        key='status'
+      />
+      { buttons }
+    </div>
+  );
+}
+
+Buttons.propTypes = {
+  buttons: PropTypes.array,
+  hideButtons: PropTypes.bool,
+  vault: PropTypes.object.isRequired
+};

js/src/ui/VaultCard/Buttons/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 './buttons';

js/src/ui/VaultCard/vaultCard.js

@@ -14,20 +14,46 @@
 // 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 { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router';
+import React, { PropTypes } from 'react';
 
-import Button from '~/ui/Button';
 import Container from '~/ui/Container';
-import IdentityIcon from '~/ui/IdentityIcon';
-import { LockedIcon, UnlockedIcon } from '~/ui/Icons';
 
+import Accounts from './Accounts';
+import Buttons from './Buttons';
 import Layout from './Layout';
+
 import styles from './vaultCard.css';
 
-export default class VaultCard extends Component {
-  static propTypes = {
+export default function VaultCard ({ accounts, buttons, children, hideAccounts, hideButtons, vault }) {
+  const { isOpen } = vault;
+
+  return (
+    <Container
+      className={ styles.container }
+      hover={
+        isOpen
+          ? (
+            <Accounts
+              accounts={ accounts }
+              hideAccounts={ hideAccounts }
+            />
+          )
+          : null
+      }
+    >
+      <Buttons
+        buttons={ buttons }
+        hideButtons={ hideButtons }
+        vault={ vault }
+      />
+      <Layout vault={ vault }>
+        { children }
+      </Layout>
+    </Container>
+  );
+}
+
+VaultCard.propTypes = {
   accounts: PropTypes.array,
   buttons: PropTypes.array,
   children: PropTypes.node,
@@ -36,91 +62,4 @@ export default class VaultCard extends Component {
   vault: PropTypes.object.isRequired
 };
 
-  static Layout = Layout;
-
-  render () {
-    const { children, vault } = this.props;
-    const { isOpen } = vault;
-
-    return (
-      <Container
-        className={ styles.container }
-        hover={
-          isOpen
-            ? this.renderAccounts()
-            : null
-        }
-      >
-        { this.renderButtons() }
-        <Layout vault={ vault }>
-          { children }
-        </Layout>
-      </Container>
-    );
-  }
-
-  renderAccounts () {
-    const { accounts, hideAccounts } = this.props;
-
-    if (hideAccounts) {
-      return null;
-    }
-
-    if (!accounts || !accounts.length) {
-      return (
-        <div className={ styles.empty }>
-          <FormattedMessage
-            id='vaults.accounts.empty'
-            defaultMessage='There are no accounts in this vault'
-          />
-        </div>
-      );
-    }
-
-    return (
-      <div className={ styles.accounts }>
-        {
-          accounts.map((address) => {
-            return (
-              <Link
-                key={ address }
-                to={ `/accounts/${address}` }
-              >
-                <IdentityIcon
-                  address={ address }
-                  center
-                  className={ styles.account }
-                />
-              </Link>
-            );
-          })
-        }
-      </div>
-    );
-  }
-
-  renderButtons () {
-    const { buttons, hideButtons, vault } = this.props;
-    const { isOpen } = vault;
-
-    if (hideButtons) {
-      return null;
-    }
-
-    return (
-      <div className={ styles.buttons }>
-        <Button
-          className={ styles.status }
-          disabled
-          icon={
-            isOpen
-              ? <UnlockedIcon />
-              : <LockedIcon />
-          }
-          key='status'
-        />
-        { buttons }
-      </div>
-    );
-  }
-}
+VaultCard.Layout = Layout;

js/src/ui/VaultTag/vaultTag.js

@@ -14,20 +14,13 @@
 // 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 React, { PropTypes } from 'react';
 
 import IdentityIcon from '~/ui/IdentityIcon';
 
 import styles from './vaultTag.css';
 
-export default class VaultTag extends Component {
-  static propTypes = {
-    vault: PropTypes.string.isRequired
-  };
-
-  render () {
-    const { vault } = this.props;
-
+export default function VaultTag ({ vault }) {
   return (
     <div className={ styles.vault }>
       <div className={ styles.vaultBody }>
@@ -42,4 +35,7 @@ export default class VaultTag extends Component {
     </div>
   );
 }
-}
+
+VaultTag.propTypes = {
+  vault: PropTypes.string.isRequired
+};

js/src/ui/Warning/warning.js

@@ -14,20 +14,13 @@
 // 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 React from 'react';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
 import styles from './warning.css';
 
-export default class Warning extends Component {
-  static propTypes = {
-    warning: nodeOrStringProptype()
-  };
-
-  render () {
-    const { warning } = this.props;
-
+export default function Warning ({ warning }) {
   if (!warning) {
     return null;
   }
@@ -38,4 +31,7 @@ export default class Warning extends Component {
     </div>
   );
 }
-}
+
+Warning.propTypes = {
+  warning: nodeOrStringProptype()
+};