Test-drive extensions, status first

This commit is contained in:
Jaco Greeff 2017-09-01 14:29:57 +02:00
parent a1bde406de
commit fb7b11553a
9 changed files with 168 additions and 7 deletions

View File

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

View File

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

51
js/src/ShellExtend/api.js Normal file
View File

@ -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}'`);
}
}

View File

@ -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
};

View File

@ -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);
}

View File

@ -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;
}
}

View File

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

View File

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

View File

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