Ui 2 shell updates (#5541)

* Stateless components

* Adjust borders

* Stateless for status

* Externalise link colors

* css lint

* stateless

* Create ui/IconCache, replacing redux

* Update Signer buttons

* Requests background

* Adjust request styling

* Stateless components

* ParityBar background alignment

* Shell updates

* Remove Tooltip

js/src/redux/providers/requestsActions.js

@@ -19,7 +19,7 @@ import BigNumber from 'bignumber.js';
 import { outTransaction } from '@parity/api/format/output';
 
 import { trackRequest as trackRequestUtil, parseTransactionReceipt } from '~/util/tx';
-import SavedRequests from '~/shell/Application/Requests/savedRequests';
+import SavedRequests from '~/shell/Requests/savedRequests';
 
 const savedRequests = new SavedRequests();
 

js/src/redux/reducers.js

@@ -27,13 +27,11 @@ import certificationsReducer from './providers/certifications/reducer';
 import registryReducer from './providers/registry/reducer';
 
 import errorReducer from '~/ui/Errors/reducers';
-import tooltipReducer from '~/ui/Tooltips/reducers';
 
 export default function () {
   return combineReducers({
     api: apiReducer,
     errors: errorReducer,
-    tooltip: tooltipReducer,
     routing: routerReducer,
     settings: settingsReducer,
 

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

@@ -1,46 +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/>.
-
-import React, { PropTypes } from 'react';
-
-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 }) {
-  return (
-    <div className={ styles.container }>
-      <FirstRun
-        onClose={ onCloseFirstRun }
-        visible={ showFirstRun }
-      />
-      <Tooltips />
-      <UpgradeParity upgradeStore={ upgradeStore } />
-      <Errors />
-      { children }
-    </div>
-  );
-}
-
-Container.propTypes = {
-  children: PropTypes.node.isRequired,
-  onCloseFirstRun: PropTypes.func,
-  showFirstRun: PropTypes.bool,
-  upgradeStore: PropTypes.object.isRequired
-};

js/src/shell/Application/Container/index.js

@@ -1,17 +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 default from './container';

js/src/shell/Application/DappContainer/dappContainer.js

@@ -1,34 +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/>.
-
-import React, { PropTypes } from 'react';
-
-import { Errors } from '~/ui';
-
-import styles from '../application.css';
-
-export default function DappContainer ({ children }) {
-  return (
-    <div className={ styles.container }>
-      <Errors />
-      { children }
-    </div>
-  );
-}
-
-DappContainer.propTypes = {
-  children: PropTypes.node.isRequired
-};

js/src/shell/Application/DappContainer/index.js

@@ -1,17 +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 default from './dappContainer';

js/src/shell/Application/FrameError/frameError.css

@@ -1,21 +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/>.
-*/
-.error {
-  padding: 2em;
-  background: red;
-  color: white;
-}

js/src/shell/Application/FrameError/frameError.js

@@ -1,31 +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/>.
-
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import styles from './frameError.css';
-
-export default function FrameError () {
-  return (
-    <div className={ styles.error }>
-      <FormattedMessage
-        id='application.frame.error'
-        defaultMessage='ERROR: This application cannot and should not be loaded in an embedded iFrame'
-      />
-    </div>
-  );
-}

js/src/shell/Application/FrameError/index.js

@@ -1,17 +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 default from './frameError';

js/src/shell/Application/application.css

@@ -24,3 +24,9 @@
 .content {
   padding-bottom: 1.25em;
 }
+
+.error {
+  padding: 2em;
+  background: red;
+  color: white;
+}

js/src/shell/Application/application.js

@@ -16,21 +16,22 @@
 
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { Errors } from '~/ui';
+
 import Connection from '../Connection';
+import Extension from '../Extension';
+import FirstRun from '../FirstRun';
 import ParityBar from '../ParityBar';
+import Requests from '../Requests';
+import Snackbar from '../Snackbar';
+import Status from '../Status';
+import UpgradeParity from '../UpgradeParity';
 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 styles from './application.css';
 
 const inFrame = window.parent !== window && window.parent.frames.length !== 0;
@@ -55,17 +56,14 @@ class Application extends Component {
     const [root] = (window.location.hash || '').replace('#/', '').split('/');
     const isMinimized = root !== '';
 
-    if (process.env.NODE_ENV !== 'production' && root === 'playground') {
-      return (
-        <div>
-          { this.props.children }
-        </div>
-      );
-    }
-
     if (inFrame) {
       return (
-        <FrameError />
+        <div className={ styles.error }>
+          <FormattedMessage
+            id='application.frame.error'
+            defaultMessage='ERROR: This application cannot and should not be loaded in an embedded iFrame'
+          />
+        </div>
       );
     }
 
@@ -87,22 +85,24 @@ class Application extends Component {
     const { blockNumber, children } = this.props;
 
     return (
-      <Container
+      <div className={ styles.container }>
-        upgradeStore={ this.upgradeStore }
+        <Extension />
-        onCloseFirstRun={ this.store.closeFirstrun }
+        <FirstRun
-        showFirstRun={ this.store.firstrunVisible }
+          onClose={ this.store.closeFirstrun }
-      >
+          visible={ this.store.firstrunVisible }
-        <div className={ styles.content }>
+        />
-          { children }
+        <Snackbar />
-        </div>
+        <UpgradeParity upgradeStore={ this.upgradeStore } />
+        <Errors />
         {
           blockNumber
             ? <Status upgradeStore={ this.upgradeStore } />
             : null
         }
-        <Extension />
+        <div className={ styles.content }>
-        <Snackbar />
+          { children }
-      </Container>
+        </div>
+      </div>
     );
   }
 
@@ -110,9 +110,10 @@ class Application extends Component {
     const { children } = this.props;
 
     return (
-      <DappContainer>
+      <div className={ styles.container }>
+        <Errors />
         { children }
-      </DappContainer>
+      </div>
     );
   }
 }

js/src/shell/Extension/extension.css

@@ -15,32 +15,27 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+$backgroundColor: #f80;
+$buttonColor: rgba(0, 0, 0, 0.5);
+$textColor: white;
+
 .body {
-  background: #f80;
+  background: $backgroundColor;
   color: white;
-  opacity: 1;
   max-width: 500px;
+  opacity: 1;
   padding: 1em 4em 1em 2em;
   position: fixed;
   right: 1.5em;
   top: 1.5em;
   z-index: 1000;
 
-  .button {
-    background: rgba(0, 0, 0, 0.5);
-    color: white !important;
-
-    svg {
-      fill: white !important;
-    }
-  }
-
   .buttonrow {
     text-align: right;
   }
 
   p {
-    color: white;
+    color: $textColor;
   }
 
   .close {

js/src/shell/Snackbar/snackbar.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 { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
@@ -23,41 +23,32 @@ import { darkBlack, grey800 } from 'material-ui/styles/colors';
 
 import { closeSnackbar } from '~/redux/providers/snackbarActions';
 
-const bodyStyle = {
+const BODY_STYLE = {
   backgroundColor: darkBlack,
   borderStyle: 'solid',
   borderColor: grey800,
   borderWidth: '1px 1px 0 1px'
 };
 
-class Snackbar extends Component {
+function Snackbar ({ closeSnackbar, cooldown, message, open }) {
-  static propTypes = {
-    closeSnackbar: PropTypes.func.isRequired,
-
-    open: PropTypes.bool,
-    cooldown: PropTypes.number,
-    message: PropTypes.any
-  };
-
-  render () {
-    const { open, message, cooldown } = this.props;
-
   return (
     <SnackbarMUI
-        open={ open }
-        message={ message }
       autoHideDuration={ cooldown }
-        bodyStyle={ bodyStyle }
+      bodyStyle={ BODY_STYLE }
-        onRequestClose={ this.handleClose }
+      message={ message }
+      open={ open }
+      onRequestClose={ closeSnackbar }
     />
   );
-  }
-
-  handleClose = () => {
-    this.props.closeSnackbar();
-  }
 }
 
+Snackbar.propTypes = {
+  closeSnackbar: PropTypes.func.isRequired,
+  cooldown: PropTypes.number,
+  message: PropTypes.any,
+  open: PropTypes.bool
+};
+
 function mapStateToProps (state) {
   const { open, message, cooldown } = state.snackbar;
 

js/src/shell/Status/status.css

@@ -15,26 +15,28 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+$backgroundColor: rgba(0, 0, 0, 0.8);
+$textColor: #ccc;
+$networkLiveColor: rgb(0, 136, 0);
+$networkTestColor: rgb(136, 0, 0);
+
 .status {
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: $backgroundColor;
   bottom: 0;
-  color: #ccc;
+  color: $textColor;
   display: flex;
-  font-size: 0.75em;
   left: 0;
-  padding: .4em .5em;
+  padding: 0.4em 0.5em;
   position: fixed;
   right: 0;
   z-index: 1000;
 }
 
 .netinfo {
-  color: #ddd;
   flex-grow: 1;
   text-align: right;
   vertical-align: middle;
-  text-align: right;
 
   div {
     display: inline-block;
@@ -49,11 +51,11 @@
   text-transform: uppercase;
 
   &.live {
-    background: rgb(0, 136, 0);
+    background: $networkLiveColor;
   }
 
   &.test {
-    background: rgb(136, 0, 0);
+    background: $networkTestColor;
   }
 }
 

js/src/shell/Status/status.js

@@ -25,10 +25,13 @@ import Upgrade from './Upgrade';
 import styles from './status.css';
 
 function Status ({ clientVersion, isTest, netChain, netPeers, upgradeStore }) {
+  const [ clientName, , versionString, , ] = (clientVersion || '').split('/');
+  const [ versionNumber, versionType, , versionDate ] = (versionString || '').split('-');
+
   return (
     <div className={ styles.status }>
       <div className={ styles.version }>
-        { clientVersion }
+        { clientName } { versionNumber }-{ versionDate } { versionType }
       </div>
       <div className={ styles.upgrade }>
         <Consensus upgradeStore={ upgradeStore } />

js/src/ui/Tooltips/Tooltip/index.js

@@ -1,17 +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 default from './tooltip';

js/src/ui/Tooltips/Tooltip/tooltip.js

@@ -1,147 +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/>.
-
-import React, { Component, PropTypes } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { FlatButton } from 'material-ui';
-
-import { CancelIcon, DoneIcon, NextIcon } from '~/ui/Icons';
-import { nodeOrStringProptype } from '~/util/proptypes';
-
-import { newTooltip, nextTooltip, closeTooltips } from '../actions';
-
-import styles from '../tooltips.css';
-
-let tooltipId = 0;
-
-class Tooltip extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    currentId: PropTypes.number,
-    maxId: PropTypes.number,
-    onNewTooltip: PropTypes.func,
-    onNextTooltip: PropTypes.func,
-    onCloseTooltips: PropTypes.func,
-    right: PropTypes.bool,
-    text: nodeOrStringProptype(),
-    title: nodeOrStringProptype()
-  }
-
-  state = {
-    id: tooltipId
-  }
-
-  componentWillMount () {
-    const { onNewTooltip } = this.props;
-
-    onNewTooltip(tooltipId);
-    tooltipId++;
-  }
-
-  render () {
-    const { id } = this.state;
-    const { className, currentId, maxId, right, onCloseTooltips, onNextTooltip, text, title } = this.props;
-
-    if (id !== currentId) {
-      return null;
-    }
-
-    const buttons = id !== maxId
-      ? [
-        <FlatButton
-          icon={ <CancelIcon /> }
-          key='skipButton'
-          label={
-            <FormattedMessage
-              id='ui.tooltips.button.skip'
-              defaultMessage='Skip'
-            />
-          }
-          onTouchTap={ onCloseTooltips }
-        />,
-        <FlatButton
-          icon={ <NextIcon /> }
-          key='nextButton'
-          label={
-            <FormattedMessage
-              id='ui.tooltips.button.next'
-              defaultMessage='Next'
-            />
-          }
-          onTouchTap={ onNextTooltip }
-        />
-      ] : (
-        <FlatButton
-          icon={ <DoneIcon /> }
-          label={
-            <FormattedMessage
-              id='ui.tooltips.button.done'
-              defaultMessage='Done'
-            />
-          }
-          onTouchTap={ onCloseTooltips }
-        />
-      );
-
-    return (
-      <div
-        className={
-          [
-            styles.box,
-            right
-              ? styles.arrowRight
-              : styles.arrowLeft,
-            className
-          ].join(' ')
-        }
-      >
-        <div className={ styles.title }>
-          { title }
-        </div>
-        <div className={ styles.text }>
-          { text }
-        </div>
-        <div className={ styles.buttons }>
-          { buttons }
-        </div>
-      </div>
-    );
-  }
-}
-
-function mapStateToProps (state) {
-  const { currentId, maxId } = state.tooltip;
-
-  return {
-    currentId,
-    maxId
-  };
-}
-
-function mapDispatchToProps (dispatch) {
-  return bindActionCreators({
-    onNewTooltip: newTooltip,
-    onNextTooltip: nextTooltip,
-    onCloseTooltips: closeTooltips
-  }, dispatch);
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Tooltip);

js/src/ui/Tooltips/Tooltip/tooltip.spec.js

@@ -1,68 +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/>.
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-
-import Tooltip from './';
-
-let component;
-let store;
-
-function createRedux (currentId = 0) {
-  store = {
-    dispatch: sinon.stub(),
-    subscribe: sinon.stub(),
-    getState: () => {
-      return {
-        tooltip: {
-          currentId,
-          maxId: 2
-        }
-      };
-    }
-  };
-
-  return store;
-}
-
-function render () {
-  component = shallow(
-    <Tooltip />,
-    {
-      context: {
-        store: createRedux()
-      }
-    }
-  ).find('Tooltip').shallow();
-
-  return component;
-}
-
-describe('ui/Tooltips/Tooltip', () => {
-  beforeEach(() => {
-    render();
-  });
-
-  it('renders defaults', () => {
-    expect(component.get(0)).to.be.ok;
-  });
-
-  it('renders null when id !== currentId', () => {
-    expect(render(1).get(0)).to.be.null;
-  });
-});

js/src/ui/Tooltips/actions.js

@@ -1,34 +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 function newTooltip (newId) {
-  return {
-    type: 'newTooltip',
-    newId
-  };
-}
-
-export function nextTooltip () {
-  return {
-    type: 'nextTooltip'
-  };
-}
-
-export function closeTooltips () {
-  return {
-    type: 'closeTooltips'
-  };
-}

js/src/ui/Tooltips/index.js

@@ -1,20 +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 default from './tooltips';
-
-export Tooltip from './Tooltip';
-export tooltipReducer from './reducers';

js/src/ui/Tooltips/reducers.js

@@ -1,71 +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/>.
-
-import store from 'store';
-
-const LS_KEY = 'tooltips';
-
-let currentId = -1;
-let maxId = 0;
-
-function closeTooltips (state, action) {
-  store.set(LS_KEY, '{"state":"off"}');
-
-  currentId = -1;
-
-  return Object.assign({}, state, {
-    currentId
-  });
-}
-
-function newTooltip (state, action) {
-  const { newId } = action;
-
-  maxId = Math.max(newId, maxId);
-
-  return Object.assign({}, state, {
-    currentId,
-    maxId
-  });
-}
-
-function nextTooltip (state, action) {
-  const hideTips = store.get(LS_KEY);
-
-  currentId = hideTips
-    ? -1
-    : currentId + 1;
-
-  return Object.assign({}, state, {
-    currentId
-  });
-}
-
-export default function tooltipReducer (state = {}, action) {
-  switch (action.type) {
-    case 'newTooltip':
-      return newTooltip(state, action);
-
-    case 'nextTooltip':
-      return nextTooltip(state, action);
-
-    case 'closeTooltips':
-      return closeTooltips(state, action);
-
-    default:
-      return state;
-  }
-}

js/src/ui/Tooltips/tooltips.css

@@ -1,103 +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/>.
-*/
-.container {
-  height: 100%;
-  width: 100%;
-}
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.25);
-  z-index: 499;
-}
-
-.box {
-  position: absolute;
-  background: #663600; /* rgba(48, 48, 48, 0.95); #88b7d5; */
-  border: 4px solid #f80; /* #c2e1f5; */
-  max-width: 450px;
-  border-radius: 0.5em;
-  z-index: 500;
-  opacity: 1;
-  line-height: 1.618em;
-  white-space: normal;
-  opacity: 0.95;
-}
-
-.box:after, .box:before {
-  bottom: 100%;
-  border: solid transparent;
-  content: " ";
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.box:after {
-  border-color: rgba(136, 183, 213, 0);
-  border-bottom-color: #663600; /* rgba(48, 48, 48, 0.95); #88b7d5; */
-  border-width: 20px;
-}
-
-.box:before {
-  border-color: rgba(194, 225, 245, 0);
-  border-bottom-color: #f80; /* #c2e1f5; */
-  border-width: 26px;
-}
-
-.arrowLeft:after, .arrowLeft:before {
-  left: 15%;
-}
-
-.arrowLeft:after {
-  margin-left: -20px;
-}
-
-.arrowLeft:before {
-  margin-left: -26px;
-}
-
-.arrowRight:after, .arrowRight:before {
-  right: 15%;
-}
-
-.arrowRight:after {
-  margin-right: -20px;
-}
-
-.arrowRight:before {
-  margin-right: -26px;
-}
-
-.title {
-  text-transform: uppercase;
-}
-
-.text {
-  padding: 1em;
-}
-
-.buttons {
-  margin: 0;
-  padding: 0 0.5em 0.5em 0;
-  text-align: right;
-}

js/src/ui/Tooltips/tooltips.js

@@ -1,88 +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/>.
-
-import React, { Component, PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import { nextTooltip } from './actions';
-
-import styles from './tooltips.css';
-
-class Tooltips extends Component {
-  static contextTypes = {
-    router: PropTypes.object.isRequired
-  };
-
-  static propTypes = {
-    currentId: PropTypes.number,
-    onNextTooltip: PropTypes.func
-  }
-
-  componentDidMount () {
-    const { onNextTooltip } = this.props;
-
-    onNextTooltip();
-    this.redirect();
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.currentId !== this.props.currentId) {
-      this.redirect(nextProps);
-    }
-  }
-
-  redirect (props = this.props) {
-    const { currentId } = props;
-
-    if (currentId !== undefined && currentId !== -1) {
-      const viewLink = '/accounts/';
-
-      this.context.router.push(viewLink);
-    }
-  }
-
-  render () {
-    const { currentId } = this.props;
-
-    if (currentId === -1) {
-      return null;
-    }
-
-    return (
-      <div className={ styles.overlay } />
-    );
-  }
-}
-
-function mapStateToProps (state) {
-  const { currentId } = state.tooltip;
-
-  return {
-    currentId
-  };
-}
-
-function mapDispatchToProps (dispatch) {
-  return bindActionCreators({
-    onNextTooltip: nextTooltip
-  }, dispatch);
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Tooltips);

js/src/ui/Tooltips/tooltips.spec.js

@@ -1,76 +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/>.
-
-import { shallow } from 'enzyme';
-import React from 'react';
-import sinon from 'sinon';
-
-import Tooltips from './';
-
-let component;
-let router;
-let store;
-
-function createRedux () {
-  store = {
-    dispatch: sinon.stub(),
-    subscribe: sinon.stub(),
-    getState: () => {
-      return {
-        tooltip: {
-          currentId: 1
-        }
-      };
-    }
-  };
-
-  return store;
-}
-
-function createRouter () {
-  router = {
-    push: sinon.stub()
-  };
-
-  return router;
-}
-
-function render () {
-  component = shallow(
-    <Tooltips />,
-    {
-      context: {
-        store: createRedux()
-      }
-    }
-  ).find('Tooltips').shallow({
-    context: {
-      router: createRouter()
-    }
-  });
-
-  return component;
-}
-
-describe('ui/Tooltips', () => {
-  beforeEach(() => {
-    render();
-  });
-
-  it('renders defaults', () => {
-    expect(component.get(0)).to.be.ok;
-  });
-});

js/src/ui/index.js

@@ -58,7 +58,6 @@ export ShortenedHash from './ShortenedHash';
 export SignerIcon from './SignerIcon';
 export Tags from './Tags';
 export Title from './Title';
-export Tooltips, { Tooltip } from './Tooltips';
 export TxHash from './TxHash';
 export TxList from './TxList';
 export VaultCard from './VaultCard';

js/src/views/Accounts/accounts.js

@@ -23,7 +23,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import HardwareStore from '~/mobx/hardwareStore';
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page, Tooltip } from '~/ui';
+import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
 import { AddIcon, FileDownloadIcon } from '~/ui/Icons';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';
 
@@ -102,16 +102,6 @@ class Accounts extends Component {
         { this.renderActionbar() }
 
         <Page>
-          <Tooltip
-            className={ styles.accountTooltip }
-            text={
-              <FormattedMessage
-                id='accounts.tooltip.overview'
-                defaultMessage='your accounts are visible for easy access, allowing you to edit the meta information, make transfers, view transactions and fund the account'
-              />
-            }
-          />
-
           { this.renderExternalAccounts() }
           { this.renderWallets() }
           { this.renderAccounts() }
@@ -295,18 +285,7 @@ class Accounts extends Component {
           />
         }
         buttons={ buttons }
-      >
-        <Tooltip
-          className={ styles.toolbarTooltip }
-          right
-          text={
-            <FormattedMessage
-              id='accounts.tooltip.actions'
-              defaultMessage='actions relating to the current view are available on the toolbar for quick access, be it for performing actions or creating a new item'
       />
-          }
-        />
-      </Actionbar>
     );
   }
 

js/src/views/Home/home.js

@@ -22,8 +22,9 @@ import HistoryStore from '~/mobx/historyStore';
 import { Page } from '~/ui';
 import WebStore from '~/views/Web/store';
 
+// FIXME: Don't really want to import from ~/shell
 import DappsStore from '~/shell/Dapps/dappsStore';
-import ExtensionStore from '~/shell/Application/Extension/store';
+import ExtensionStore from '~/shell/Extension/store';
 
 import Accounts from './Accounts';
 import Dapps from './Dapps';