Test-drive extensions, status first

js/src/DappRequests/index.js

@@ -17,8 +17,15 @@
 import Store from './store';
 import shellMiddleware from '../shellMiddleware';
 
+import { extendShell } from '../ShellExtend';
+
 function setupProviderFilters (provider) {
-  const store = Store.create(provider, [shellMiddleware]);
+  const store = Store.create(provider);
+
+  extendShell({
+    type: 'interceptor',
+    middleware: shellMiddleware
+  });
 
   return store;
 }

js/src/DappRequests/store.js

@@ -33,10 +33,9 @@ export default class Store {
   middleware = [];
   sources = {};
 
-  constructor (provider, middleware = []) {
+  constructor (provider) {
     this.provider = provider;
     this.permissions = store.get(LS_PERMISSIONS) || {};
-    this.middleware = middleware;
 
     window.addEventListener('message', this.receiveMessage, false);
   }
@@ -272,9 +271,9 @@ export default class Store {
 
   static instance = null;
 
-  static create (provider, middleware) {
+  static create (provider) {
     if (!Store.instance) {
-      Store.instance = new Store(provider, middleware);
+      Store.instance = new Store(provider);
     }
 
     return Store.instance;

js/src/ShellExtend/api.js

@@ -0,0 +1,51 @@
+// 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 InterceptorStore from '../DappRequests/store';
+import StatusPluginStore from '../Status/pluginStore';
+
+function injectInterceptorPlugin (middleware) {
+  InterceptorStore.get().addMiddleware(middleware);
+
+  return true;
+}
+
+function injectSignerPlugin (func) {
+}
+
+function injectStatusPlugin (component) {
+  console.log('component', component);
+
+  StatusPluginStore.get().addComponent(component);
+
+  return true;
+}
+
+export function extendShell (options) {
+  switch (options.type) {
+    case 'interceptor':
+      return injectInterceptorPlugin(options.middleware);
+
+    case 'signer':
+      return injectSignerPlugin(options.component);
+
+    case 'status':
+      return injectStatusPlugin(options.component);
+
+    default:
+      throw new Error(`Unable to extend the shell with type '${options.type}'`);
+  }
+}

js/src/ShellExtend/index.js

@@ -0,0 +1,27 @@
+// 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 { extendShell } from './api';
+import { injectExternalScript } from './script';
+
+window.parity = Object.assign({}, window.parity || {}, {
+  extendShell
+});
+
+export {
+  extendShell,
+  injectExternalScript
+};

js/src/ShellExtend/script.js

@@ -0,0 +1,28 @@
+// 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 injectExternalScript (src) {
+  const script = document.createElement('script');
+
+  script.type = 'text/javascript';
+  script.async = true;
+  script.onload = function () {
+    // remote script has loaded
+  };
+  script.src = src;
+
+  document.getElementsByTagName('head')[0].appendChild(script);
+}

js/src/Status/pluginStore.js

@@ -0,0 +1,35 @@
+// 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 = null;
+
+export default class PluginStore {
+  @observable components = [];
+
+  @action addComponent (Component) {
+    this.components.push(Component);
+  }
+
+  static get () {
+    if (!instance) {
+      instance = new PluginStore();
+    }
+
+    return instance;
+  }
+}

js/src/Status/status.css

@@ -31,7 +31,7 @@ $textColor: #ccc;
   z-index: 1000;
 }
 
-.netinfo {
+.plugins {
   flex-grow: 1;
   text-align: right;
   vertical-align: middle;

js/src/Status/status.js

@@ -26,10 +26,13 @@ import NetPeers from '@parity/ui/NetPeers';
 import StatusIndicator from '@parity/ui/StatusIndicator';
 
 import Consensus from './Consensus';
+import PluginStore from './pluginStore';
 import Upgrade from './Upgrade';
 
 import styles from './status.css';
 
+const pluginStore = PluginStore.get();
+
 function Status ({ className = '', upgradeStore }, { api }) {
   return (
     <div className={ [styles.status, className].join(' ') }>
@@ -38,7 +41,12 @@ function Status ({ className = '', upgradeStore }, { api }) {
         <Consensus upgradeStore={ upgradeStore } />
         <Upgrade upgradeStore={ upgradeStore } />
       </div>
-      <div className={ styles.netinfo }>
+      <div className={ styles.plugins }>
+        {
+          pluginStore.components.map((Component, index) => (
+            <Component key={ index } />
+          ))
+        }
         <StatusIndicator id='application.status.health' />
         <BlockNumber
           className={ styles.blockNumber }

js/src/index.parity.js

@@ -33,10 +33,13 @@ import Application from './Application';
 import Dapp from './Dapp';
 import Dapps from './Dapps';
 import { setupProviderFilters } from './DappRequests';
+import { injectExternalScript } from './ShellExtend';
 import SecureApi from './secureApi';
 
 injectTapEventPlugin();
 
+window.React = window.React || React;
+
 if (process.env.NODE_ENV === 'development') {
   // Expose the React Performance Tools on the`window` object
   const Perf = require('react-addons-perf');
@@ -75,3 +78,6 @@ ReactDOM.render(
   </ContextProvider>,
   document.querySelector('#container')
 );
+
+// testing, priceTicker gist
+injectExternalScript('https://cdn.rawgit.com/jacogr/396fc583e81b9404e21195a48dc862ca/raw/33e5058a4c0028cf9acf4b0662d75298e41ca6fa/priceTicker.js');