Update ParityBar (container in Status)

js/src/Application/application.js

@@ -101,7 +101,10 @@ class Application extends Component {
             : null
         }
         <Requests />
-        <ParityBar dapp={ isMinimized } />
+        <ParityBar
+          alwaysHidden
+          dapp={ isMinimized }
+        />
         {
           blockNumber
             ? <Status upgradeStore={ this.upgradeStore } />

js/src/ParityBar/accountStore.js

@@ -16,6 +16,8 @@
 
 import { action, observable, transaction } from 'mobx';
 
+let instance;
+
 export default class AccountStore {
   @observable accounts = [];
   @observable defaultAccount = null;
@@ -24,7 +26,8 @@ export default class AccountStore {
   constructor (api) {
     this._api = api;
 
-    this.subscribeDefaultAccount()
+    this
+      .subscribeDefaultAccount()
       .then(() => this.loadAccounts());
   }
 
@@ -118,4 +121,12 @@ export default class AccountStore {
 
     return Promise.all([ promiseDefaultAccount, promiseEthAccounts, promiseAccountsInfo ]);
   }
+
+  static get (api) {
+    if (!instance) {
+      instance = new AccountStore(api);
+    }
+
+    return instance;
+  }
 }

js/src/ParityBar/parityBar.js

@@ -31,20 +31,17 @@ import IdentityIcon from '@parity/ui/IdentityIcon';
 import GradientBg from '@parity/ui/GradientBg';
 import SelectionList from '@parity/ui/SectionList';
 import SignerPending from '@parity/ui/SignerPending';
-import { CancelIcon, FingerprintIcon } from '@parity/ui/Icons';
+import { CancelIcon } from '@parity/ui/Icons';
-
-import imagesEthcoreBlock from '@parity/shared/assets/images/parity-logo-white-no-text.svg';
 
 import DappsStore from '@parity/shared/mobx/dappsStore';
 import Signer from '../Signer/Embedded';
 
 import AccountStore from './accountStore';
+import Store, { DISPLAY_ACCOUNTS, DISPLAY_SIGNER } from './store';
 import styles from './parityBar.css';
 
 const LS_STORE_KEY = '_parity::parityBar';
 const DEFAULT_POSITION = { right: '1em', bottom: '2.5em' };
-const DISPLAY_ACCOUNTS = 'accounts';
-const DISPLAY_SIGNER = 'signer';
 
 @observer
 class ParityBar extends Component {
@@ -57,15 +54,14 @@ class ParityBar extends Component {
   };
 
   static propTypes = {
+    alwaysHidden: PropTypes.bool,
     dapp: PropTypes.bool,
     externalLink: PropTypes.string,
     pending: PropTypes.array
   };
 
   state = {
-    displayType: DISPLAY_SIGNER,
     moving: false,
-    opened: false,
     position: DEFAULT_POSITION
   };
 
@@ -82,14 +78,14 @@ class ParityBar extends Component {
   componentWillMount () {
     const { api } = this.context;
 
-    this.accountStore = new AccountStore(api);
+    this.accountStore = AccountStore.get(this.context.api);
+    this.store = Store.get();
 
     // Hook to the dapp loaded event to position the
     // Parity Bar accordingly
     const dappsStore = DappsStore.get(api);
 
-    dappsStore
+    dappsStore.on('loaded', (app) => {
-      .on('loaded', (app) => {
       this.app = app;
 
       if (this.props.dapp) {
@@ -128,7 +124,8 @@ class ParityBar extends Component {
   }
 
   setOpened (opened, displayType = DISPLAY_SIGNER) {
-    this.setState({ displayType, opened });
+    this.store.setOpen(opened, displayType);
+
     this.dispatchOpenEvent(opened);
   }
 
@@ -151,18 +148,18 @@ class ParityBar extends Component {
   }
 
   render () {
-    const { moving, opened, position } = this.state;
+    const { moving, position } = this.state;
 
-    const containerClassNames = opened
+    const containerClassNames = this.store.isOpen
       ? [ styles.overlay ]
       : [ styles.bar ];
 
-    if (!opened && moving) {
+    if (!this.store.isOpen && moving) {
       containerClassNames.push(styles.moving);
     }
 
     const parityBgClassNames = [
-      opened
+      this.store.isOpen
         ? styles.expanded
         : styles.corner,
       styles.parityBg
@@ -178,7 +175,7 @@ class ParityBar extends Component {
 
     // Open the Signer at one of the four corners
     // of the screen
-    if (opened) {
+    if (this.store.isOpen) {
       // Set at top or bottom of the screen
       if (position.top !== undefined) {
         parityBgStyle.top = 0;
@@ -209,7 +206,7 @@ class ParityBar extends Component {
           style={ parityBgStyle }
         >
           {
-            opened
+            this.store.isOpen
               ? this.renderExpanded()
               : this.renderBar()
           }
@@ -219,9 +216,9 @@ class ParityBar extends Component {
   }
 
   renderBar () {
-    const { dapp } = this.props;
+    const { alwaysHidden, dapp } = this.props;
 
-    if (!dapp) {
+    if (alwaysHidden || !dapp) {
       return null;
     }
 
@@ -242,12 +239,6 @@ class ParityBar extends Component {
           this.renderLink(
             <Button
               className={ styles.parityButton }
-              icon={
-                <img
-                  className={ styles.parityIcon }
-                  src={ imagesEthcoreBlock }
-                />
-              }
               label={
                 this.renderLabel(
                   <FormattedMessage
@@ -261,7 +252,6 @@ class ParityBar extends Component {
         }
         <Button
           className={ styles.button }
-          icon={ <FingerprintIcon /> }
           label={ this.renderSignerLabel() }
           onClick={ this.toggleSignerDisplay }
         />
@@ -313,7 +303,6 @@ class ParityBar extends Component {
 
   renderExpanded () {
     const { externalLink } = this.props;
-    const { displayType } = this.state;
 
     return (
       <div className={ styles.container }>
@@ -321,7 +310,7 @@ class ParityBar extends Component {
           <div className={ styles.title }>
             <ContainerTitle
               title={
-                displayType === DISPLAY_ACCOUNTS
+                this.store.displayType === DISPLAY_ACCOUNTS
                   ? (
                     <FormattedMessage
                       id='parityBar.title.accounts'
@@ -352,7 +341,7 @@ class ParityBar extends Component {
         </GradientBg>
         <div className={ styles.content }>
           {
-            displayType === DISPLAY_ACCOUNTS
+            this.store.displayType === DISPLAY_ACCOUNTS
               ? (
                 <SelectionList
                   className={ styles.accountsSection }
@@ -589,15 +578,11 @@ class ParityBar extends Component {
   }
 
   toggleAccountsDisplay = () => {
-    const { opened } = this.state;
+    this.setOpened(!this.store.isOpen, DISPLAY_ACCOUNTS);
-
-    this.setOpened(!opened, DISPLAY_ACCOUNTS);
   }
 
   toggleSignerDisplay = () => {
-    const { opened } = this.state;
+    this.setOpened(!this.store.isOpen, DISPLAY_SIGNER);
-
-    this.setOpened(!opened, DISPLAY_SIGNER);
   }
 
   get config () {

js/src/ParityBar/store.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 { action, observable } from 'mobx';
+
+let instance;
+
+export const DISPLAY_ACCOUNTS = 'accounts';
+export const DISPLAY_SIGNER = 'signer';
+
+export default class Store {
+  @observable isOpen = false;
+  @observable displayType = DISPLAY_SIGNER;
+
+  @action setOpen = (isOpen, displayType) => {
+    this.isOpen = isOpen;
+    this.displayType = displayType;
+  }
+
+  @action toggleOpen = (displayType) => {
+    this.setOpen(!this.isOpen, displayType);
+  }
+
+  @action toggleOpenAccounts = () => {
+    this.toggleOpen(DISPLAY_ACCOUNTS);
+  }
+
+  @action toggleOpenSigner = () => {
+    this.toggleOpen(DISPLAY_SIGNER);
+  }
+
+  static get () {
+    if (!instance) {
+      instance = new Store();
+    }
+
+    return instance;
+  }
+}

js/src/Status/status.css

@@ -46,3 +46,8 @@ $textColor: #ccc;
     margin-left: 1em;
   }
 }
+
+.defaultAccount,
+.signerPending {
+  cursor: pointer;
+}

js/src/Status/status.js

@@ -22,20 +22,26 @@ import { FormattedMessage } from 'react-intl';
 import BlockNumber from '@parity/ui/BlockNumber';
 import ClientVersion from '@parity/ui/ClientVersion';
 import GradientBg from '@parity/ui/GradientBg';
+import IdentityIcon from '@parity/ui/IdentityIcon';
 import NetChain from '@parity/ui/NetChain';
 import NetPeers from '@parity/ui/NetPeers';
 import SignerPending from '@parity/ui/SignerPending';
 import StatusIndicator from '@parity/ui/StatusIndicator';
 
 import Consensus from './Consensus';
+import AccountStore from '../ParityBar/accountStore';
+import ParityBarStore from '../ParityBar/store';
 import PluginStore from './pluginStore';
 import Upgrade from './Upgrade';
 
 import styles from './status.css';
 
 const pluginStore = PluginStore.get();
+const parityBarStore = ParityBarStore.get();
 
 function Status ({ className = '', upgradeStore }, { api }) {
+  const accountStore = AccountStore.get(api);
+
   return (
     <GradientBg className={ [styles.status, className].join(' ') }>
       <ClientVersion className={ styles.version } />
@@ -49,7 +55,17 @@ function Status ({ className = '', upgradeStore }, { api }) {
             <Component key={ index } />
           ))
         }
-        <SignerPending />
+        <SignerPending
+          className={ styles.signerPending }
+          onClick={ parityBarStore.toggleOpenSigner }
+        />
+        <IdentityIcon
+          address={ accountStore.defaultAccount }
+          button
+          center
+          className={ styles.defaultAccount }
+          onClick={ parityBarStore.toggleOpenAccounts }
+        />
         <StatusIndicator id='application.status.health' />
         <BlockNumber
           className={ styles.blockNumber }