Add position to Dapp Manifest

js/src/views/Application/application.js

@@ -54,7 +54,7 @@ class Application extends Component {
   upgradeStore = new UpgradeStore(this.context.api);
 
   render () {
-    const [root, hash = ''] = (window.location.hash || '').replace('#/', '').split('/');
+    const [root] = (window.location.hash || '').replace('#/', '').split('/');
     const isMinimized = root === 'app' || root === 'web';
 
     if (inFrame) {
@@ -67,7 +67,7 @@ class Application extends Component {
       <div>
         { isMinimized ? this.renderMinimized() : this.renderApp() }
         <Connection />
-        <ParityBar dapp={ isMinimized } hash={ hash || root } />
+        <ParityBar dapp={ isMinimized } />
       </div>
     );
   }

js/src/views/Dapps/builtin.json

@@ -81,6 +81,7 @@
     "description": "A Javascript development console complete with web3 and parity objects.",
     "version": "0.3",
     "author": "Gav Wood <gavin@ethcore.io>",
+    "position": "top-right",
     "visible": true
   }
 ]

js/src/views/Dapps/dappsStore.js

@@ -14,6 +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 EventEmitter from 'eventemitter3';
 import { action, computed, observable, transaction } from 'mobx';
 import store from 'store';
 
@@ -30,7 +31,7 @@ const BUILTIN_APPS_KEY = 'BUILTIN_APPS_KEY';
 
 let instance = null;
 
-export default class DappsStore {
+export default class DappsStore extends EventEmitter {
   @observable apps = [];
   @observable displayApps = {};
   @observable modalOpen = false;
@@ -44,13 +45,27 @@ export default class DappsStore {
   _registryAppsIds = null;
 
   constructor (api) {
+    super();
+
     this._api = api;
 
     this.readDisplayApps();
     this.loadExternalOverlay();
     this.subscribeToChanges();
   }
 
+  static get (api) {
+    if (!instance) {
+      instance = new DappsStore(api);
+    }
+
+    if (api && !instance._api) {
+      instance._api = api;
+    }
+
+    return instance;
+  }
+
   /**
    * Try to find the app from the local (local or builtin)
    * apps, else fetch from the node
@@ -68,6 +83,10 @@ export default class DappsStore {
         }
 
         return this.fetchRegistryApp(dappReg, id, true);
+      })
+      .then((app) => {
+        this.emit('loaded', app);
+        return app;
       });
   }
 
@@ -90,14 +109,6 @@ export default class DappsStore {
       .then(this.writeDisplayApps);
   }
 
-  static get (api) {
-    if (!instance) {
-      instance = new DappsStore(api);
-    }
-
-    return instance;
-  }
-
   subscribeToChanges () {
     const { dappReg } = Contracts.get();
 

js/src/views/ParityBar/parityBar.js

@@ -24,6 +24,7 @@ import store from 'store';
 import { CancelIcon, FingerprintIcon } from '~/ui/Icons';
 import { Badge, Button, ContainerTitle, ParityBackground } from '~/ui';
 import { Embedded as Signer } from '../Signer';
+import DappsStore from '~/views/Dapps/dappsStore';
 
 import imagesEthcoreBlock from '../../../assets/images/parity-logo-white-no-text.svg';
 import styles from './parityBar.css';
@@ -32,14 +33,13 @@ const LS_STORE_KEY = '_parity::parityBar';
 const DEFAULT_POSITION = { right: '1em', bottom: 0 };
 
 class ParityBar extends Component {
+  app = null;
   measures = null;
   moving = false;
 
   static propTypes = {
     dapp: PropTypes.bool,
-    hash: PropTypes.string,
-    pending: PropTypes.array,
-    root: PropTypes.string
+    pending: PropTypes.array
   };
 
   state = {
@@ -48,12 +48,6 @@ class ParityBar extends Component {
     position: DEFAULT_POSITION
   };
 
-  getAppId (props = this.props) {
-    const { hash = '-1' } = props;
-
-    return hash;
-  }
-
   constructor (props) {
     super(props);
 
@@ -62,22 +56,19 @@ class ParityBar extends Component {
       40,
       { leading: true, trailing: true }
     );
-  }
 
-  componentWillMount () {
-    // Load the saved position of the Parity Bar
-    this.loadPosition();
+    // Hook to the dapp loaded event to position the
+    // Parity Bar accordingly
+    DappsStore.get().on('loaded', (app) => {
+      this.app = app;
+      this.loadPosition();
+    });
   }
 
   componentWillReceiveProps (nextProps) {
     const count = this.props.pending.length;
     const newCount = nextProps.pending.length;
 
-    // Reload the Bar position when changing dapps
-    if (nextProps.dapp && nextProps.hash !== this.props.hash) {
-      this.loadPosition(nextProps);
-    }
-
     if (count === newCount) {
       return;
     }
@@ -435,21 +426,43 @@ class ParityBar extends Component {
   }
 
   loadPosition (props = this.props) {
-    const { config } = this;
-    const appId = this.getAppId(props);
+    const { app, config } = this;
+
+    if (!app) {
+      return this.setState({ position: DEFAULT_POSITION });
+    }
 
-    const position = config[appId] || { ...DEFAULT_POSITION };
+    if (config[app.id]) {
+      return this.setState({ position: config[app.id] });
+    }
+
+    const position = this.stringToPosition(app.position);
     this.setState({ position });
   }
 
   savePosition (position) {
-    const { config } = this;
-    const appId = this.getAppId();
-
-    config[appId] = position;
+    const { app, config } = this;
+    config[app.id] = position;
 
     store.set(LS_STORE_KEY, JSON.stringify(config));
   }
+
+  stringToPosition (value) {
+    switch (value) {
+      case 'top-left':
+        return { top: 0, left: '1em' };
+
+      case 'top-right':
+        return { top: 0, right: '1em' };
+
+      case 'bottom-left':
+        return { bottom: 0, left: '1em' };
+
+      case 'bottom-right':
+      default:
+        return DEFAULT_POSITION;
+    }
+  }
 }
 
 function mapStateToProps (state) {