UI 2 dapp configuration dapps (#6032)
* Add shell_ APIs * Allow handling of shell_ calls * Retrieve API info via call * Split Dapp Method config into dapp * Allow shell API for configuring dapps * Move dapp toggles to dapp itself * Align provider naming * Selection of default accounts via dapp * Remove duplicated spec
This commit is contained in:
parent
4dd68f1ef3
commit
801b6e0ded
@ -20,7 +20,7 @@ import Contract from './contract';
|
||||
import { PromiseProvider, Http as HttpProvider, PostMessage as PostMessageProvider, WsSecure as WsSecureProvider } from './provider';
|
||||
import { Http as HttpTransport, WsSecure as WsSecureTransport } from './transport';
|
||||
|
||||
import { Db, Eth, Parity, Net, Personal, Shh, Signer, Trace, Web3 } from './rpc';
|
||||
import { Db, Eth, Parity, Net, Personal, Shell, Shh, Signer, Trace, Web3 } from './rpc';
|
||||
import Subscriptions from './subscriptions';
|
||||
import Pubsub from './pubsub';
|
||||
import util from './util';
|
||||
@ -49,6 +49,7 @@ export default class Api extends EventEmitter {
|
||||
this._net = new Net(this._provider);
|
||||
this._parity = new Parity(this._provider);
|
||||
this._personal = new Personal(this._provider);
|
||||
this._shell = new Shell(this._provider);
|
||||
this._shh = new Shh(this._provider);
|
||||
this._signer = new Signer(this._provider);
|
||||
this._trace = new Trace(this._provider);
|
||||
@ -105,6 +106,10 @@ export default class Api extends EventEmitter {
|
||||
return this._provider.provider;
|
||||
}
|
||||
|
||||
get shell () {
|
||||
return this._shell;
|
||||
}
|
||||
|
||||
get shh () {
|
||||
return this._shh;
|
||||
}
|
||||
|
@ -19,6 +19,7 @@ export Eth from './eth';
|
||||
export Parity from './parity';
|
||||
export Net from './net';
|
||||
export Personal from './personal';
|
||||
export Shell from './shell';
|
||||
export Shh from './shh';
|
||||
export Signer from './signer';
|
||||
export Trace from './trace';
|
||||
|
@ -14,4 +14,4 @@
|
||||
// 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 './selectMethods';
|
||||
export default from './shell';
|
46
js/src/api/rpc/shell/shell.js
Normal file
46
js/src/api/rpc/shell/shell.js
Normal file
@ -0,0 +1,46 @@
|
||||
// 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 class Shell {
|
||||
constructor (provider) {
|
||||
this._provider = provider;
|
||||
}
|
||||
|
||||
getApps (retrieveAll = false) {
|
||||
return this._provider
|
||||
.send('shell_getApps', retrieveAll);
|
||||
}
|
||||
|
||||
getFilteredMethods () {
|
||||
return this._provider
|
||||
.send('shell_getFilteredMethods');
|
||||
}
|
||||
|
||||
getMethodPermissions () {
|
||||
return this._provider
|
||||
.send('shell_getMethodPermissions');
|
||||
}
|
||||
|
||||
setMethodPermissions (permissions) {
|
||||
return this._provider
|
||||
.send('shell_setMethodPermissions', permissions);
|
||||
}
|
||||
|
||||
setAppVisibility (appId, state) {
|
||||
return this._provider
|
||||
.send('shell_setAppVisibility', appId, state);
|
||||
}
|
||||
}
|
@ -62,6 +62,36 @@
|
||||
"visible": true,
|
||||
"noselect": true
|
||||
},
|
||||
{
|
||||
"id": "dappAccounts",
|
||||
"url": "dappAccounts",
|
||||
"src": "DappAccounts",
|
||||
"name": "Default dapp accounts",
|
||||
"description": "Allow setting of accounts to use by default for dapps",
|
||||
"author": "Parity Team <admin@ethcore.io>",
|
||||
"version": "2.0.0",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "dappMethods",
|
||||
"url": "dappMethods",
|
||||
"src": "DappMethods",
|
||||
"name": "Dapp Method Permissions",
|
||||
"description": "Allow setting of dapp permissions on a per method level",
|
||||
"author": "Parity Team <admin@ethcore.io>",
|
||||
"version": "2.0.0",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "dappVisible",
|
||||
"url": "dappVisible",
|
||||
"src": "DappVisible",
|
||||
"name": "Dapp Visibility",
|
||||
"description": "Allow setting of visible dapps",
|
||||
"author": "Parity Team <admin@ethcore.io>",
|
||||
"version": "2.0.0",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "develop",
|
||||
"url": "develop",
|
||||
|
@ -15,6 +15,15 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default {
|
||||
shell: {
|
||||
methods: [
|
||||
'shell_getApps',
|
||||
'shell_getFilteredMethods',
|
||||
'shell_getMethodPermissions',
|
||||
'shell_setAppVisibility',
|
||||
'shell_setMethodPermissions'
|
||||
]
|
||||
},
|
||||
accountsView: {
|
||||
methods: [
|
||||
'parity_accountsInfo',
|
||||
|
@ -16,8 +16,13 @@
|
||||
|
||||
import Store from './store';
|
||||
|
||||
export function setupProviderFilters (provider) {
|
||||
function setupProviderFilters (provider) {
|
||||
return Store.create(provider);
|
||||
}
|
||||
|
||||
export default from './dappRequests';
|
||||
|
||||
export {
|
||||
Store,
|
||||
setupProviderFilters
|
||||
};
|
||||
|
@ -14,19 +14,27 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { flatten } from 'lodash';
|
||||
import { action, computed, observable } from 'mobx';
|
||||
import store from 'store';
|
||||
|
||||
import { sha3 } from '@parity/api/util/sha3';
|
||||
|
||||
import VisibleStore from '../Dapps/dappsStore';
|
||||
import filteredRequests from './filteredRequests';
|
||||
import MethodsStore from '../Dapps/SelectMethods/store';
|
||||
|
||||
const LS_PERMISSIONS = '_parity::dapps::methods';
|
||||
|
||||
let nextQueueId = 0;
|
||||
|
||||
export default class Store {
|
||||
@observable methodsStore = MethodsStore.get();
|
||||
@observable permissions = {};
|
||||
@observable requests = [];
|
||||
@observable tokens = {};
|
||||
|
||||
constructor (provider) {
|
||||
this.provider = provider;
|
||||
this.permissions = store.get(LS_PERMISSIONS) || {};
|
||||
|
||||
window.addEventListener('message', this.receiveMessage, false);
|
||||
}
|
||||
@ -51,20 +59,39 @@ export default class Store {
|
||||
});
|
||||
}
|
||||
|
||||
@action createToken = (appId) => {
|
||||
const token = sha3(`${appId}:${Date.now()}`);
|
||||
|
||||
this.tokens = Object.assign({}, this.tokens, {
|
||||
[token]: appId
|
||||
});
|
||||
|
||||
return token;
|
||||
}
|
||||
|
||||
@action removeRequest = (_queueId) => {
|
||||
this.requests = this.requests.filter(({ queueId }) => queueId !== _queueId);
|
||||
}
|
||||
|
||||
@action queueRequest = (request) => {
|
||||
const appId = this.methodsStore.tokens[request.data.from];
|
||||
const appId = this.tokens[request.data.from];
|
||||
let queueId = ++nextQueueId;
|
||||
|
||||
this.requests = this.requests.concat([{ appId, queueId, request }]);
|
||||
}
|
||||
|
||||
@action addTokenPermission = (method, token) => {
|
||||
const id = `${method}:${this.tokens[token]}`;
|
||||
|
||||
this.permissions = Object.assign({}, this.permissions, {
|
||||
[id]: true
|
||||
});
|
||||
this.savePermissions();
|
||||
}
|
||||
|
||||
@action approveSingleRequest = ({ queueId, request: { data, source } }) => {
|
||||
this.removeRequest(queueId);
|
||||
this.executeOnProvider(data, source);
|
||||
this.executeMethodCall(data, source);
|
||||
}
|
||||
|
||||
@action approveRequest = (queueId, approveAll) => {
|
||||
@ -74,7 +101,7 @@ export default class Store {
|
||||
const { request: { data: { method, token } } } = queued;
|
||||
|
||||
this.getFilteredSection(method).methods.forEach((m) => {
|
||||
this.methodsStore.addTokenPermission(m, token);
|
||||
this.addTokenPermission(m, token);
|
||||
this.findMatchingRequests(m, token).forEach(this.approveSingleRequest);
|
||||
});
|
||||
} else {
|
||||
@ -95,6 +122,31 @@ export default class Store {
|
||||
}, '*');
|
||||
}
|
||||
|
||||
@action setPermissions = (_permissions) => {
|
||||
const permissions = {};
|
||||
|
||||
Object.keys(_permissions).forEach((id) => {
|
||||
permissions[id] = !!_permissions[id];
|
||||
});
|
||||
|
||||
this.permissions = Object.assign({}, this.permissions, permissions);
|
||||
this.savePermissions();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
hasTokenPermission = (method, token) => {
|
||||
return this.hasAppPermission(method, this.tokens[token]);
|
||||
}
|
||||
|
||||
hasAppPermission = (method, appId) => {
|
||||
return this.permissions[`${method}:${appId}`] || false;
|
||||
}
|
||||
|
||||
savePermissions = () => {
|
||||
store.set(LS_PERMISSIONS, this.permissions);
|
||||
}
|
||||
|
||||
findRequest (_queueId) {
|
||||
return this.requests.find(({ queueId }) => queueId === _queueId);
|
||||
}
|
||||
@ -103,8 +155,8 @@ export default class Store {
|
||||
return this.requests.filter(({ request: { data: { method, token } } }) => method === _method && token === _token);
|
||||
}
|
||||
|
||||
executeOnProvider = ({ id, from, method, params, token }, source) => {
|
||||
this.provider.send(method, params, (error, result) => {
|
||||
_methodCallbackPost = (id, source, token) => {
|
||||
return (error, result) => {
|
||||
source.postMessage({
|
||||
error: error
|
||||
? error.message
|
||||
@ -114,7 +166,48 @@ export default class Store {
|
||||
result,
|
||||
token
|
||||
}, '*');
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
executeMethodCall = ({ id, from, method, params, token }, source) => {
|
||||
const visibleStore = VisibleStore.get();
|
||||
const callback = this._methodCallbackPost(id, source, token);
|
||||
|
||||
switch (method) {
|
||||
case 'shell_getApps':
|
||||
const [displayAll] = params;
|
||||
|
||||
return callback(null, displayAll
|
||||
? visibleStore.allApps.slice()
|
||||
: visibleStore.visibleApps.slice()
|
||||
);
|
||||
|
||||
case 'shell_getFilteredMethods':
|
||||
return callback(null, flatten(
|
||||
Object
|
||||
.keys(filteredRequests)
|
||||
.map((key) => filteredRequests[key].methods)
|
||||
));
|
||||
|
||||
case 'shell_getMethodPermissions':
|
||||
return callback(null, this.permissions);
|
||||
|
||||
case 'shell_setAppVisibility':
|
||||
const [appId, visibility] = params;
|
||||
|
||||
return callback(null, visibility
|
||||
? visibleStore.showApp(appId)
|
||||
: visibleStore.hideApp(appId)
|
||||
);
|
||||
|
||||
case 'shell_setMethodPermissions':
|
||||
const [permissions] = params;
|
||||
|
||||
return callback(null, this.setPermissions(permissions));
|
||||
|
||||
default:
|
||||
return this.provider.send(method, params, callback);
|
||||
}
|
||||
}
|
||||
|
||||
getFilteredSectionName = (method) => {
|
||||
@ -138,12 +231,12 @@ export default class Store {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.getFilteredSection(method) && !this.methodsStore.hasTokenPermission(method, token)) {
|
||||
if (this.getFilteredSection(method) && !this.hasTokenPermission(method, token)) {
|
||||
this.queueRequest({ data, origin, source });
|
||||
return;
|
||||
}
|
||||
|
||||
this.executeOnProvider(data, source);
|
||||
this.executeMethodCall(data, source);
|
||||
}
|
||||
|
||||
static instance = null;
|
||||
|
@ -1,50 +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 DappAccounts from './';
|
||||
|
||||
let component;
|
||||
|
||||
function renderShallow (permissionStore = {}) {
|
||||
component = shallow(
|
||||
<DappAccounts permissionStore={ permissionStore } />
|
||||
);
|
||||
|
||||
return component;
|
||||
}
|
||||
|
||||
describe('shell/Dapps/SelectAccounts', () => {
|
||||
describe('rendering', () => {
|
||||
it('renders defaults', () => {
|
||||
expect(renderShallow()).to.be.ok;
|
||||
});
|
||||
|
||||
it('does not render the modal with modalOpen = false', () => {
|
||||
expect(
|
||||
renderShallow({ modalOpen: false }).find('Portal')
|
||||
).to.have.length(0);
|
||||
});
|
||||
|
||||
it('does render the modal with modalOpen = true', () => {
|
||||
expect(
|
||||
renderShallow({ modalOpen: true, accounts: [] }).find('Portal')
|
||||
).to.have.length(1);
|
||||
});
|
||||
});
|
||||
});
|
@ -1,136 +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 sinon from 'sinon';
|
||||
|
||||
import Store from './store';
|
||||
|
||||
const ACCOUNTS = {
|
||||
'123': { address: '123', name: '123', meta: { description: '123' } },
|
||||
'456': { address: '456', name: '456', meta: { description: '456' } },
|
||||
'789': { address: '789', name: '789', meta: { description: '789' } }
|
||||
};
|
||||
const WHITELIST = ['456', '789'];
|
||||
|
||||
let api;
|
||||
let store;
|
||||
|
||||
function create () {
|
||||
api = {
|
||||
parity: {
|
||||
getNewDappsAddresses: sinon.stub().resolves(WHITELIST),
|
||||
getNewDappsDefaultAddress: sinon.stub().resolves(WHITELIST[0]),
|
||||
setNewDappsAddresses: sinon.stub().resolves(true),
|
||||
setNewDappsDefaultAddress: sinon.stub().resolves(true)
|
||||
}
|
||||
};
|
||||
|
||||
store = new Store(api);
|
||||
}
|
||||
|
||||
describe('shell/DappPermissions/store', () => {
|
||||
beforeEach(() => {
|
||||
create();
|
||||
});
|
||||
|
||||
describe('constructor', () => {
|
||||
it('retrieves the whitelist via api', () => {
|
||||
expect(api.parity.getNewDappsAddresses).to.be.calledOnce;
|
||||
});
|
||||
|
||||
it('sets the retrieved whitelist', () => {
|
||||
expect(store.whitelist.peek()).to.deep.equal(WHITELIST);
|
||||
});
|
||||
});
|
||||
|
||||
describe('@actions', () => {
|
||||
beforeEach(() => {
|
||||
store.openModal(ACCOUNTS);
|
||||
});
|
||||
|
||||
describe('openModal', () => {
|
||||
it('sets the modalOpen status', () => {
|
||||
expect(store.modalOpen).to.be.true;
|
||||
});
|
||||
|
||||
it('sets accounts with checked interfaces', () => {
|
||||
expect(store.accounts.peek()).to.deep.equal([
|
||||
{ address: '123', name: '123', description: '123', default: false, checked: false },
|
||||
{ address: '456', name: '456', description: '456', default: true, checked: true },
|
||||
{ address: '789', name: '789', description: '789', default: false, checked: true }
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('closeModal', () => {
|
||||
beforeEach(() => {
|
||||
store.setDefaultAccount('789');
|
||||
store.closeModal();
|
||||
});
|
||||
|
||||
it('calls setNewDappsAddresses', () => {
|
||||
expect(api.parity.setNewDappsAddresses).to.have.been.calledWith(['456', '789']);
|
||||
});
|
||||
|
||||
it('calls into setNewDappsDefaultAddress', () => {
|
||||
expect(api.parity.setNewDappsDefaultAddress).to.have.been.calledWith('789');
|
||||
});
|
||||
});
|
||||
|
||||
describe('selectAccount', () => {
|
||||
beforeEach(() => {
|
||||
store.selectAccount('123');
|
||||
store.selectAccount('789');
|
||||
});
|
||||
|
||||
it('unselects previous selected accounts', () => {
|
||||
expect(store.accounts.find((account) => account.address === '123').checked).to.be.true;
|
||||
});
|
||||
|
||||
it('selects previous unselected accounts', () => {
|
||||
expect(store.accounts.find((account) => account.address === '789').checked).to.be.false;
|
||||
});
|
||||
|
||||
it('sets a new default when default was unselected', () => {
|
||||
store.selectAccount('456');
|
||||
expect(store.accounts.find((account) => account.address === '456').default).to.be.false;
|
||||
expect(store.accounts.find((account) => account.address === '123').default).to.be.true;
|
||||
});
|
||||
|
||||
it('does not deselect the last account', () => {
|
||||
store.selectAccount('123');
|
||||
store.selectAccount('456');
|
||||
console.log(store.accounts.map((account) => ({ address: account.address, checked: account.checked })));
|
||||
expect(store.accounts.find((account) => account.address === '456').default).to.be.true;
|
||||
expect(store.accounts.find((account) => account.address === '456').checked).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
describe('setDefaultAccount', () => {
|
||||
beforeEach(() => {
|
||||
store.setDefaultAccount('789');
|
||||
});
|
||||
|
||||
it('unselects previous default', () => {
|
||||
expect(store.accounts.find((account) => account.address === '456').default).to.be.false;
|
||||
});
|
||||
|
||||
it('selects new default', () => {
|
||||
expect(store.accounts.find((account) => account.address === '789').default).to.be.true;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
@ -1,96 +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 { flatten } from 'lodash';
|
||||
import { action, observable } from 'mobx';
|
||||
import store from 'store';
|
||||
|
||||
import { sha3 } from '@parity/api/util/sha3';
|
||||
|
||||
import filteredRequests from '../../DappRequests/filteredRequests';
|
||||
|
||||
const LS_PERMISSIONS = '_parity::dapps::methods';
|
||||
|
||||
export default class Store {
|
||||
@observable filteredRequests = flatten(
|
||||
Object.keys(filteredRequests).map((key) => filteredRequests[key].methods)
|
||||
);
|
||||
@observable modalOpen = false;
|
||||
@observable permissions = {};
|
||||
@observable tokens = {};
|
||||
|
||||
constructor () {
|
||||
this.permissions = store.get(LS_PERMISSIONS) || {};
|
||||
}
|
||||
|
||||
@action closeModal = () => {
|
||||
this.modalOpen = false;
|
||||
}
|
||||
|
||||
@action openModal = () => {
|
||||
this.modalOpen = true;
|
||||
}
|
||||
|
||||
@action createToken = (appId) => {
|
||||
const token = sha3(`${appId}:${Date.now()}`);
|
||||
|
||||
this.tokens = Object.assign({}, this.tokens, {
|
||||
[token]: appId
|
||||
});
|
||||
|
||||
return token;
|
||||
}
|
||||
|
||||
@action addTokenPermission = (method, token) => {
|
||||
const id = `${method}:${this.tokens[token]}`;
|
||||
|
||||
this.permissions = Object.assign({}, this.permissions, {
|
||||
[id]: true
|
||||
});
|
||||
this.savePermissions();
|
||||
}
|
||||
|
||||
@action toggleAppPermission = (method, appId) => {
|
||||
const id = `${method}:${appId}`;
|
||||
|
||||
this.permissions = Object.assign({}, this.permissions, {
|
||||
[id]: !this.permissions[id]
|
||||
});
|
||||
this.savePermissions();
|
||||
}
|
||||
|
||||
hasTokenPermission = (method, token) => {
|
||||
return this.hasAppPermission(method, this.tokens[token]);
|
||||
}
|
||||
|
||||
hasAppPermission = (method, appId) => {
|
||||
return this.permissions[`${method}:${appId}`] || false;
|
||||
}
|
||||
|
||||
savePermissions = () => {
|
||||
store.set(LS_PERMISSIONS, this.permissions);
|
||||
}
|
||||
|
||||
static instance = null;
|
||||
|
||||
static get () {
|
||||
if (!Store.instance) {
|
||||
Store.instance = new Store();
|
||||
}
|
||||
|
||||
return Store.instance;
|
||||
}
|
||||
}
|
@ -20,14 +20,7 @@ import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Actionbar, Button, Checkbox, DappCard, Page, SectionList } from '@parity/ui';
|
||||
import { LockedIcon, MethodsIcon, VisibleIcon } from '@parity/ui/Icons';
|
||||
|
||||
import SelectAccounts from './SelectAccounts';
|
||||
import PermissionStore from './SelectAccounts/store';
|
||||
import DappSelectMethods from './SelectMethods';
|
||||
import MethodsStore from './SelectMethods/store';
|
||||
import SelectVisible from './SelectVisible';
|
||||
import { Checkbox, DappCard, Page, SectionList } from '@parity/ui';
|
||||
|
||||
import DappsStore from './dappsStore';
|
||||
|
||||
@ -45,8 +38,6 @@ class Dapps extends Component {
|
||||
};
|
||||
|
||||
store = DappsStore.get(this.context.api);
|
||||
methodsStore = MethodsStore.get();
|
||||
permissionStore = new PermissionStore(this.context.api);
|
||||
|
||||
componentWillMount () {
|
||||
this.store.loadAllApps();
|
||||
@ -82,64 +73,19 @@ class Dapps extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SelectAccounts permissionStore={ this.permissionStore } />
|
||||
<DappSelectMethods
|
||||
methodsStore={ this.methodsStore }
|
||||
visibleStore={ this.store }
|
||||
/>
|
||||
<SelectVisible store={ this.store } />
|
||||
<Actionbar
|
||||
className={ styles.toolbar }
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.label'
|
||||
defaultMessage='Decentralized Applications'
|
||||
/>
|
||||
}
|
||||
buttons={ [
|
||||
<Button
|
||||
icon={ <VisibleIcon /> }
|
||||
key='edit'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='dapps.button.edit'
|
||||
defaultMessage='edit applications'
|
||||
/>
|
||||
}
|
||||
onClick={ this.store.openModal }
|
||||
/>,
|
||||
<Button
|
||||
icon={ <LockedIcon /> }
|
||||
key='accounts'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='dapps.button.accounts'
|
||||
defaultMessage='allowed accounts'
|
||||
/>
|
||||
}
|
||||
onClick={ this.openPermissionsModal }
|
||||
/>,
|
||||
<Button
|
||||
icon={ <MethodsIcon /> }
|
||||
key='methods'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='dapps.button.methods'
|
||||
defaultMessage='allowed methods'
|
||||
/>
|
||||
}
|
||||
onClick={ this.methodsStore.openModal }
|
||||
/>
|
||||
] }
|
||||
/>
|
||||
<Page>
|
||||
<div>{ this.renderList(this.store.visibleViews) }</div>
|
||||
<div>{ this.renderList(this.store.visibleLocal) }</div>
|
||||
<div>{ this.renderList(this.store.visibleBuiltin) }</div>
|
||||
<div>{ this.renderList(this.store.visibleNetwork, externalOverlay) }</div>
|
||||
</Page>
|
||||
</div>
|
||||
<Page
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.label'
|
||||
defaultMessage='Decentralized Applications'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div>{ this.renderList(this.store.visibleViews) }</div>
|
||||
<div>{ this.renderList(this.store.visibleLocal) }</div>
|
||||
<div>{ this.renderList(this.store.visibleBuiltin) }</div>
|
||||
<div>{ this.renderList(this.store.visibleNetwork, externalOverlay) }</div>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -57,6 +57,10 @@ export default class DappsStore extends EventEmitter {
|
||||
return instance;
|
||||
}
|
||||
|
||||
@computed get allApps () {
|
||||
return this.apps;
|
||||
}
|
||||
|
||||
@computed get sortedBuiltin () {
|
||||
return this.apps.filter((app) => app.type === 'builtin');
|
||||
}
|
||||
|
@ -41,8 +41,7 @@ import SecureApi from '~/secureApi';
|
||||
|
||||
import Application from './Application';
|
||||
import Dapp from './Dapp';
|
||||
import { setupProviderFilters } from './DappRequests';
|
||||
import DappMethodsStore from './Dapps/SelectMethods/store';
|
||||
import { setupProviderFilters, Store as DappRequestsStore } from './DappRequests';
|
||||
import Dapps from './Dapps';
|
||||
|
||||
injectTapEventPlugin();
|
||||
@ -77,7 +76,7 @@ const dapps = [].concat(viewsDapps, builtinDapps);
|
||||
const dappsHistory = HistoryStore.get('dapps');
|
||||
|
||||
function onEnterDapp ({ params: { id } }) {
|
||||
const token = DappMethodsStore.get().createToken(id);
|
||||
const token = DappRequestsStore.get().createToken(id);
|
||||
|
||||
window.ethereum = new Api.Provider.PostMessage(token, window);
|
||||
|
||||
|
@ -14,4 +14,8 @@
|
||||
// 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 './selectAccounts';
|
||||
import Api from '@parity/api';
|
||||
|
||||
const ethereumProvider = window.ethereum || window.parent.ethereum;
|
||||
|
||||
export default new Api(ethereumProvider);
|
@ -18,25 +18,21 @@ import { observer } from 'mobx-react';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { AccountCard, Portal, SelectionList } from '@parity/ui';
|
||||
import { AccountCard, Page, SelectionList } from '@parity/ui';
|
||||
|
||||
import Store from './store';
|
||||
|
||||
@observer
|
||||
export default class SelectAccounts extends Component {
|
||||
static propTypes = {
|
||||
permissionStore: PropTypes.object.isRequired
|
||||
export default class DappAccounts extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
store = new Store(this.context.api);
|
||||
|
||||
render () {
|
||||
const { permissionStore } = this.props;
|
||||
|
||||
if (!permissionStore.modalOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Portal
|
||||
onClose={ permissionStore.closeModal }
|
||||
open
|
||||
<Page
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.accounts.label'
|
||||
@ -45,22 +41,22 @@ export default class SelectAccounts extends Component {
|
||||
}
|
||||
>
|
||||
<SelectionList
|
||||
items={ permissionStore.accounts }
|
||||
items={ this.store.accounts }
|
||||
noStretch
|
||||
onDefaultClick={ this.onMakeDefault }
|
||||
onSelectClick={ this.onSelect }
|
||||
renderItem={ this.renderAccount }
|
||||
/>
|
||||
</Portal>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
onMakeDefault = (account) => {
|
||||
this.props.permissionStore.setDefaultAccount(account.address);
|
||||
this.store.setDefaultAccount(account.address);
|
||||
}
|
||||
|
||||
onSelect = (account) => {
|
||||
this.props.permissionStore.selectAccount(account.address);
|
||||
this.store.selectAccount(account.address);
|
||||
}
|
||||
|
||||
renderAccount = (account) => {
|
@ -14,33 +14,26 @@
|
||||
// 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 ReactDOM from 'react-dom';
|
||||
import React from 'react';
|
||||
import { Route, Router, hashHistory } from 'react-router';
|
||||
|
||||
import DappsVisible from './';
|
||||
import injectTapEventPlugin from 'react-tap-event-plugin';
|
||||
injectTapEventPlugin();
|
||||
|
||||
function renderShallow (store = {}) {
|
||||
return shallow(
|
||||
<DappsVisible store={ store } />
|
||||
);
|
||||
}
|
||||
import { initStore } from '@parity/shared/redux';
|
||||
import ContextProvider from '@parity/ui/ContextProvider';
|
||||
|
||||
describe('shell/Dapps/SelectVisible', () => {
|
||||
describe('rendering', () => {
|
||||
it('renders defaults', () => {
|
||||
expect(renderShallow()).to.be.ok;
|
||||
});
|
||||
import api from './api';
|
||||
import DappAccounts from './dappAccounts';
|
||||
|
||||
it('does not render the modal with modalOpen = false', () => {
|
||||
expect(
|
||||
renderShallow({ modalOpen: false }).find('Portal')
|
||||
).to.have.length(0);
|
||||
});
|
||||
const store = initStore(api, hashHistory);
|
||||
|
||||
it('does render the modal with modalOpen = true', () => {
|
||||
expect(
|
||||
renderShallow({ modalOpen: true }).find('Portal')
|
||||
).to.have.length(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
ReactDOM.render(
|
||||
<ContextProvider api={ api } store={ store }>
|
||||
<Router history={ hashHistory }>
|
||||
<Route path='/' component={ DappAccounts } />
|
||||
</Router>
|
||||
</ContextProvider>,
|
||||
document.querySelector('#container')
|
||||
);
|
19
js/src/views/DappAccounts/package.json
Normal file
19
js/src/views/DappAccounts/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@parity/view-dapp-accounts",
|
||||
"description": "Parity default accounts selection",
|
||||
"version": "0.0.0",
|
||||
"main": "index.js",
|
||||
"author": "Parity Team <admin@parity.io>",
|
||||
"maintainers": [],
|
||||
"contributors": [],
|
||||
"license": "GPL-3.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/paritytech/parity.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"scripts": {},
|
||||
"devDependencies": {},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {}
|
||||
}
|
@ -25,40 +25,54 @@ export default class Store {
|
||||
constructor (api) {
|
||||
this._api = api;
|
||||
|
||||
this.loadWhitelist();
|
||||
this.load();
|
||||
}
|
||||
|
||||
@action closeModal = () => {
|
||||
transaction(() => {
|
||||
const checkedAccounts = this.accounts.filter((account) => account.checked);
|
||||
const defaultAddress = (this.accounts.find((account) => account.default) || {}).address;
|
||||
const addresses = checkedAccounts.length === this.accounts.length
|
||||
? null
|
||||
: checkedAccounts.map((account) => account.address);
|
||||
save = () => {
|
||||
const checkedAccounts = this.accounts.filter((account) => account.checked);
|
||||
const defaultAddress = (this.accounts.find((account) => account.default) || {}).address;
|
||||
const addresses = checkedAccounts.length === this.accounts.length
|
||||
? null
|
||||
: checkedAccounts.map((account) => account.address);
|
||||
|
||||
this.modalOpen = false;
|
||||
this.updateWhitelist(addresses, defaultAddress);
|
||||
});
|
||||
this.updateWhitelist(addresses, defaultAddress);
|
||||
}
|
||||
|
||||
@action openModal = (accounts) => {
|
||||
// FIXME: Hardware accounts are not showing up here
|
||||
@action setAccounts = (accounts) => {
|
||||
transaction(() => {
|
||||
this.accounts = Object
|
||||
.values(accounts)
|
||||
.map((account, index) => {
|
||||
.keys(accounts)
|
||||
.filter((address) => {
|
||||
const account = accounts[address];
|
||||
|
||||
if (account.uuid) {
|
||||
return true;
|
||||
} else if (account.meta.hardware) {
|
||||
account.hardware = true;
|
||||
return true;
|
||||
} else if (account.meta.external) {
|
||||
account.external = true;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
})
|
||||
.map((address, index) => {
|
||||
const account = accounts[address];
|
||||
|
||||
return {
|
||||
address: account.address,
|
||||
address,
|
||||
checked: this.whitelist
|
||||
? this.whitelist.includes(account.address)
|
||||
? this.whitelist.includes(address)
|
||||
: true,
|
||||
default: this.whitelistDefault
|
||||
? this.whitelistDefault === account.address
|
||||
? this.whitelistDefault === address
|
||||
: index === 0,
|
||||
description: account.meta.description,
|
||||
name: account.name
|
||||
};
|
||||
});
|
||||
this.modalOpen = true;
|
||||
});
|
||||
}
|
||||
|
||||
@ -103,17 +117,19 @@ export default class Store {
|
||||
});
|
||||
}
|
||||
|
||||
loadWhitelist () {
|
||||
load () {
|
||||
return Promise
|
||||
.all([
|
||||
this._api.parity.allAccountsInfo(),
|
||||
this._api.parity.getNewDappsAddresses(),
|
||||
this._api.parity.getNewDappsDefaultAddress()
|
||||
])
|
||||
.then(([whitelist, whitelistDefault]) => {
|
||||
.then(([accounts, whitelist, whitelistDefault]) => {
|
||||
this.setWhitelist(whitelist, whitelistDefault);
|
||||
this.setAccounts(accounts);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('loadWhitelist', error);
|
||||
console.warn('load', error);
|
||||
});
|
||||
}
|
||||
|
@ -14,4 +14,8 @@
|
||||
// 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 './selectVisible';
|
||||
import Api from '@parity/api';
|
||||
|
||||
const ethereumProvider = window.ethereum || window.parent.ethereum;
|
||||
|
||||
export default new Api(ethereumProvider);
|
@ -17,7 +17,7 @@
|
||||
|
||||
$border: 1px solid #ccc;
|
||||
|
||||
.modal {
|
||||
.body {
|
||||
td {
|
||||
border-bottom: $border;
|
||||
border-right: $border;
|
@ -18,30 +18,25 @@ import { observer } from 'mobx-react';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Portal } from '@parity/ui';
|
||||
import { Page } from '@parity/ui';
|
||||
|
||||
import Store from './store';
|
||||
|
||||
import MethodCheck from './MethodCheck';
|
||||
import styles from './selectMethods.css';
|
||||
import styles from './dappMethods.css';
|
||||
|
||||
@observer
|
||||
export default class SelectMethods extends Component {
|
||||
static propTypes = {
|
||||
methodsStore: PropTypes.object.isRequired,
|
||||
visibleStore: PropTypes.object.isRequired
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
store = new Store(this.context.api);
|
||||
|
||||
render () {
|
||||
const { methodsStore, visibleStore } = this.props;
|
||||
|
||||
if (!methodsStore.modalOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Portal
|
||||
className={ styles.modal }
|
||||
onClose={ methodsStore.closeModal }
|
||||
open
|
||||
<Page
|
||||
className={ styles.body }
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.methods.label'
|
||||
@ -54,8 +49,8 @@ export default class SelectMethods extends Component {
|
||||
<tr>
|
||||
<th> </th>
|
||||
{
|
||||
methodsStore.filteredRequests.map((method, requestIndex) => (
|
||||
<th key={ requestIndex }>
|
||||
this.store.methods.map((method, methodIndex) => (
|
||||
<th key={ methodIndex }>
|
||||
<div>
|
||||
<span>{ method }</span>
|
||||
</div>
|
||||
@ -66,20 +61,20 @@ export default class SelectMethods extends Component {
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
visibleStore.visibleApps.map(({ id, name }, dappIndex) => (
|
||||
this.store.apps.map(({ id, name }, dappIndex) => (
|
||||
<tr key={ dappIndex }>
|
||||
<td>{ name }</td>
|
||||
{
|
||||
methodsStore.filteredRequests.map((method, requestIndex) => (
|
||||
this.store.methods.map((method, methodIndex) => (
|
||||
<td
|
||||
className={ styles.check }
|
||||
key={ `${dappIndex}_${requestIndex}` }
|
||||
key={ `${dappIndex}_${methodIndex}` }
|
||||
>
|
||||
<MethodCheck
|
||||
checked={ methodsStore.hasAppPermission(method, id) }
|
||||
checked={ this.store.hasAppPermission(method, id) }
|
||||
dappId={ id }
|
||||
method={ method }
|
||||
onToggle={ methodsStore.toggleAppPermission }
|
||||
onToggle={ this.store.toggleAppPermission }
|
||||
/>
|
||||
</td>
|
||||
))
|
||||
@ -89,7 +84,7 @@ export default class SelectMethods extends Component {
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</Portal>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
}
|
42
js/src/views/DappMethods/index.js
Normal file
42
js/src/views/DappMethods/index.js
Normal file
@ -0,0 +1,42 @@
|
||||
// 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 ReactDOM from 'react-dom';
|
||||
import React from 'react';
|
||||
import { Route, Router, hashHistory } from 'react-router';
|
||||
|
||||
import injectTapEventPlugin from 'react-tap-event-plugin';
|
||||
injectTapEventPlugin();
|
||||
|
||||
import ContractInstances from '@parity/shared/contracts';
|
||||
import { initStore } from '@parity/shared/redux';
|
||||
import ContextProvider from '@parity/ui/ContextProvider';
|
||||
|
||||
import api from './api';
|
||||
import DappMethods from './dappMethods';
|
||||
|
||||
ContractInstances.get(api);
|
||||
|
||||
const store = initStore(api, hashHistory);
|
||||
|
||||
ReactDOM.render(
|
||||
<ContextProvider api={ api } store={ store }>
|
||||
<Router history={ hashHistory }>
|
||||
<Route path='/' component={ DappMethods } />
|
||||
</Router>
|
||||
</ContextProvider>,
|
||||
document.querySelector('#container')
|
||||
);
|
19
js/src/views/DappMethods/package.json
Normal file
19
js/src/views/DappMethods/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@parity/view-dapp-methods",
|
||||
"description": "Parity default dapp method selection",
|
||||
"version": "0.0.0",
|
||||
"main": "index.js",
|
||||
"author": "Parity Team <admin@parity.io>",
|
||||
"maintainers": [],
|
||||
"contributors": [],
|
||||
"license": "GPL-3.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/paritytech/parity.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"scripts": {},
|
||||
"devDependencies": {},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {}
|
||||
}
|
73
js/src/views/DappMethods/store.js
Normal file
73
js/src/views/DappMethods/store.js
Normal file
@ -0,0 +1,73 @@
|
||||
// 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';
|
||||
|
||||
export default class Store {
|
||||
@observable apps= [];
|
||||
@observable methods = [];
|
||||
@observable permissions = {};
|
||||
|
||||
constructor (api) {
|
||||
this._api = api;
|
||||
|
||||
this.loadInitialise();
|
||||
}
|
||||
|
||||
@action setApps = (apps) => {
|
||||
this.apps = apps;
|
||||
}
|
||||
|
||||
@action setMethods = (methods) => {
|
||||
this.methods = methods;
|
||||
}
|
||||
|
||||
@action setPermissions = (permissions) => {
|
||||
this.permissions = permissions;
|
||||
}
|
||||
|
||||
@action toggleAppPermission = (method, appId) => {
|
||||
const id = `${method}:${appId}`;
|
||||
|
||||
this.permissions = Object.assign({}, this.permissions, {
|
||||
[id]: !this.permissions[id]
|
||||
});
|
||||
|
||||
this.savePermissions();
|
||||
}
|
||||
|
||||
hasAppPermission = (method, appId) => {
|
||||
return this.permissions[`${method}:${appId}`] || false;
|
||||
}
|
||||
|
||||
loadInitialise = () => {
|
||||
return Promise
|
||||
.all([
|
||||
this._api.shell.getApps(false),
|
||||
this._api.shell.getFilteredMethods(),
|
||||
this._api.shell.getMethodPermissions()
|
||||
])
|
||||
.then(([apps, methods, permissions]) => {
|
||||
this.setApps(apps);
|
||||
this.setMethods(methods);
|
||||
this.setPermissions(permissions);
|
||||
});
|
||||
}
|
||||
|
||||
savePermissions = () => {
|
||||
this._api.shell.setMethodPermissions(this.permissions);
|
||||
}
|
||||
}
|
21
js/src/views/DappVisible/api.js
Normal file
21
js/src/views/DappVisible/api.js
Normal file
@ -0,0 +1,21 @@
|
||||
// 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 Api from '@parity/api';
|
||||
|
||||
const ethereumProvider = window.ethereum || window.parent.ethereum;
|
||||
|
||||
export default new Api(ethereumProvider);
|
@ -18,28 +18,22 @@ import { observer } from 'mobx-react';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { DappCard, Portal, SelectionList } from '@parity/ui';
|
||||
import { DappCard, Page, SelectionList } from '@parity/ui';
|
||||
|
||||
import styles from './selectVisible.css';
|
||||
import Store from './store';
|
||||
import styles from './dappVisible.css';
|
||||
|
||||
@observer
|
||||
export default class SelectVisible extends Component {
|
||||
static propTypes = {
|
||||
store: PropTypes.object.isRequired
|
||||
export default class DappVisible extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
store = new Store(this.context.api);
|
||||
|
||||
render () {
|
||||
const { store } = this.props;
|
||||
|
||||
if (!store.modalOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Portal
|
||||
className={ styles.modal }
|
||||
onClose={ store.closeModal }
|
||||
open
|
||||
<Page
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.add.label'
|
||||
@ -49,7 +43,7 @@ export default class SelectVisible extends Component {
|
||||
>
|
||||
<div className={ styles.warning } />
|
||||
{
|
||||
this.renderList(store.sortedLocal, store.displayApps,
|
||||
this.renderList(this.store.sortedLocal, this.store.displayApps,
|
||||
<FormattedMessage
|
||||
id='dapps.add.local.label'
|
||||
defaultMessage='Applications locally available'
|
||||
@ -61,7 +55,7 @@ export default class SelectVisible extends Component {
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderList(store.sortedBuiltin, store.displayApps,
|
||||
this.renderList(this.store.sortedBuiltin, this.store.displayApps,
|
||||
<FormattedMessage
|
||||
id='dapps.add.builtin.label'
|
||||
defaultMessage='Applications bundled with Parity'
|
||||
@ -73,7 +67,7 @@ export default class SelectVisible extends Component {
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderList(store.sortedNetwork, store.displayApps,
|
||||
this.renderList(this.store.sortedNetwork, this.store.displayApps,
|
||||
<FormattedMessage
|
||||
id='dapps.add.network.label'
|
||||
defaultMessage='Applications on the global network'
|
||||
@ -84,7 +78,7 @@ export default class SelectVisible extends Component {
|
||||
/>
|
||||
)
|
||||
}
|
||||
</Portal>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@ -120,18 +114,14 @@ export default class SelectVisible extends Component {
|
||||
}
|
||||
|
||||
isVisible = (app) => {
|
||||
const { store } = this.props;
|
||||
|
||||
return store.displayApps[app.id].visible;
|
||||
return (this.store.displayApps[app.id] && this.store.displayApps[app.id].visible) || false;
|
||||
}
|
||||
|
||||
onSelect = (app) => {
|
||||
const { store } = this.props;
|
||||
|
||||
if (this.isVisible(app)) {
|
||||
store.hideApp(app.id);
|
||||
this.store.hideApp(app.id);
|
||||
} else {
|
||||
store.showApp(app.id);
|
||||
this.store.showApp(app.id);
|
||||
}
|
||||
}
|
||||
}
|
39
js/src/views/DappVisible/index.js
Normal file
39
js/src/views/DappVisible/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
// 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 ReactDOM from 'react-dom';
|
||||
import React from 'react';
|
||||
import { Route, Router, hashHistory } from 'react-router';
|
||||
|
||||
import injectTapEventPlugin from 'react-tap-event-plugin';
|
||||
injectTapEventPlugin();
|
||||
|
||||
import { initStore } from '@parity/shared/redux';
|
||||
import ContextProvider from '@parity/ui/ContextProvider';
|
||||
|
||||
import api from './api';
|
||||
import DappVisible from './dappVisible';
|
||||
|
||||
const store = initStore(api, hashHistory);
|
||||
|
||||
ReactDOM.render(
|
||||
<ContextProvider api={ api } store={ store }>
|
||||
<Router history={ hashHistory }>
|
||||
<Route path='/' component={ DappVisible } />
|
||||
</Router>
|
||||
</ContextProvider>,
|
||||
document.querySelector('#container')
|
||||
);
|
19
js/src/views/DappVisible/package.json
Normal file
19
js/src/views/DappVisible/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@parity/view-dapp-visible",
|
||||
"description": "Parity default dapp visibility selection",
|
||||
"version": "0.0.0",
|
||||
"main": "index.js",
|
||||
"author": "Parity Team <admin@parity.io>",
|
||||
"maintainers": [],
|
||||
"contributors": [],
|
||||
"license": "GPL-3.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/paritytech/parity.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"scripts": {},
|
||||
"devDependencies": {},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {}
|
||||
}
|
101
js/src/views/DappVisible/store.js
Normal file
101
js/src/views/DappVisible/store.js
Normal file
@ -0,0 +1,101 @@
|
||||
// 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, computed, observable } from 'mobx';
|
||||
|
||||
export default class DappsStore {
|
||||
@observable apps = [];
|
||||
@observable displayApps = {};
|
||||
|
||||
_api = null;
|
||||
|
||||
constructor (api) {
|
||||
this._api = api;
|
||||
|
||||
this.loadApps();
|
||||
}
|
||||
|
||||
@computed get sortedBuiltin () {
|
||||
return this.apps.filter((app) => app.type === 'builtin');
|
||||
}
|
||||
|
||||
@computed get sortedLocal () {
|
||||
return this.apps.filter((app) => app.type === 'local');
|
||||
}
|
||||
|
||||
@computed get sortedNetwork () {
|
||||
return this.apps.filter((app) => app.type === 'network');
|
||||
}
|
||||
|
||||
@computed get visibleApps () {
|
||||
return this.apps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible);
|
||||
}
|
||||
|
||||
@computed get visibleBuiltin () {
|
||||
return this.visibleApps.filter((app) => !app.noselect && app.type === 'builtin');
|
||||
}
|
||||
|
||||
@computed get visibleLocal () {
|
||||
return this.visibleApps.filter((app) => app.type === 'local');
|
||||
}
|
||||
|
||||
@computed get visibleNetwork () {
|
||||
return this.visibleApps.filter((app) => app.type === 'network');
|
||||
}
|
||||
|
||||
@computed get visibleViews () {
|
||||
return this.visibleApps.filter((app) => !app.noselect && app.type === 'view');
|
||||
}
|
||||
|
||||
@action setApps = (apps) => {
|
||||
this.apps = apps;
|
||||
}
|
||||
|
||||
@action setDisplayApps = (displayApps) => {
|
||||
this.displayApps = Object.assign({}, this.displayApps, displayApps);
|
||||
};
|
||||
|
||||
@action hideApp = (id) => {
|
||||
this.setDisplayApps({ [id]: { visible: false } });
|
||||
this._api.shell.setAppVisibility(id, false);
|
||||
}
|
||||
|
||||
@action showApp = (id) => {
|
||||
this.setDisplayApps({ [id]: { visible: true } });
|
||||
this._api.shell.setAppVisibility(id, true);
|
||||
}
|
||||
|
||||
getAppById = (id) => {
|
||||
return this.apps.find((app) => app.id === id);
|
||||
}
|
||||
|
||||
loadApps () {
|
||||
return Promise
|
||||
.all([
|
||||
this._api.shell.getApps(true),
|
||||
this._api.shell.getApps(false)
|
||||
])
|
||||
.then(([all, displayed]) => {
|
||||
this.setDisplayApps(
|
||||
displayed.reduce((result, { id }) => {
|
||||
result[id] = { visible: true };
|
||||
return result;
|
||||
}, {})
|
||||
);
|
||||
this.setApps(all);
|
||||
});
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user