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

js/src/api/api.js

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

js/src/api/rpc/index.js

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

js/src/api/rpc/shell/index.js

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

js/src/api/rpc/shell/shell.js

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

js/src/shared/config/dappsViews.json

@@ -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",

js/src/shell/DappRequests/filteredRequests.js

@@ -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',

js/src/shell/DappRequests/index.js

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

js/src/shell/DappRequests/store.js

@@ -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) => {
+  _methodCallbackPost = (id, source, token) => {
-    this.provider.send(method, params, (error, result) => {
+    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;

js/src/shell/Dapps/SelectAccounts/selectAccounts.spec.js

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

js/src/shell/Dapps/SelectAccounts/store.spec.js

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

js/src/shell/Dapps/SelectMethods/store.js

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

js/src/shell/Dapps/dapps.js

@@ -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 { 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 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>
+      <Page
-        <SelectAccounts permissionStore={ this.permissionStore } />
+        title={
-        <DappSelectMethods
+          <FormattedMessage
-          methodsStore={ this.methodsStore }
+            id='dapps.label'
-          visibleStore={ this.store }
+            defaultMessage='Decentralized Applications'
-        />
+          />
-        <SelectVisible store={ this.store } />
+        }
-        <Actionbar
+      >
-          className={ styles.toolbar }
+        <div>{ this.renderList(this.store.visibleViews) }</div>
-          title={
+        <div>{ this.renderList(this.store.visibleLocal) }</div>
-            <FormattedMessage
+        <div>{ this.renderList(this.store.visibleBuiltin) }</div>
-              id='dapps.label'
+        <div>{ this.renderList(this.store.visibleNetwork, externalOverlay) }</div>
-              defaultMessage='Decentralized Applications'
+      </Page>
-            />
-          }
-          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>
     );
   }
 

js/src/shell/Dapps/dappsStore.js

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

js/src/shell/index.js

@@ -41,8 +41,7 @@ import SecureApi from '~/secureApi';
 
 import Application from './Application';
 import Dapp from './Dapp';
-import { setupProviderFilters } from './DappRequests';
+import { setupProviderFilters, Store as DappRequestsStore } from './DappRequests';
-import DappMethodsStore from './Dapps/SelectMethods/store';
 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);
 

js/src/views/DappAccounts/api.js

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

js/src/views/DappAccounts/dappAccounts.js

@@ -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 {
+export default class DappAccounts extends Component {
-  static propTypes = {
+  static contextTypes = {
-    permissionStore: PropTypes.object.isRequired
+    api: PropTypes.object.isRequired
   };
 
+  store = new Store(this.context.api);
+
   render () {
-    const { permissionStore } = this.props;
-
-    if (!permissionStore.modalOpen) {
-      return null;
-    }
-
     return (
-      <Portal
+      <Page
-        onClose={ permissionStore.closeModal }
-        open
         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) => {

js/src/views/DappAccounts/index.js

@@ -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 = {}) {
+import { initStore } from '@parity/shared/redux';
-  return shallow(
+import ContextProvider from '@parity/ui/ContextProvider';
-    <DappsVisible store={ store } />
-  );
-}
 
-describe('shell/Dapps/SelectVisible', () => {
+import api from './api';
-  describe('rendering', () => {
+import DappAccounts from './dappAccounts';
-    it('renders defaults', () => {
-      expect(renderShallow()).to.be.ok;
-    });
 
-    it('does not render the modal with modalOpen = false', () => {
+const store = initStore(api, hashHistory);
-      expect(
-        renderShallow({ modalOpen: false }).find('Portal')
-      ).to.have.length(0);
-    });
 
-    it('does render the modal with modalOpen = true', () => {
+ReactDOM.render(
-      expect(
+  <ContextProvider api={ api } store={ store }>
-        renderShallow({ modalOpen: true }).find('Portal')
+    <Router history={ hashHistory }>
-      ).to.have.length(1);
+      <Route path='/' component={ DappAccounts } />
-    });
+    </Router>
-  });
+  </ContextProvider>,
-});
+  document.querySelector('#container')
+);

js/src/views/DappAccounts/package.json

@@ -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": {}
+}

js/src/views/DappAccounts/store.js

@@ -25,40 +25,54 @@ export default class Store {
   constructor (api) {
     this._api = api;
 
-    this.loadWhitelist();
+    this.load();
   }
 
-  @action closeModal = () => {
+  save = () => {
-    transaction(() => {
+    const checkedAccounts = this.accounts.filter((account) => account.checked);
-      const checkedAccounts = this.accounts.filter((account) => account.checked);
+    const defaultAddress = (this.accounts.find((account) => account.default) || {}).address;
-      const defaultAddress = (this.accounts.find((account) => account.default) || {}).address;
+    const addresses = checkedAccounts.length === this.accounts.length
-      const addresses = checkedAccounts.length === this.accounts.length
+      ? null
-        ? null
+      : checkedAccounts.map((account) => account.address);
-        : 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)
+        .keys(accounts)
-        .map((account, index) => {
+        .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);
       });
   }
 

js/src/views/DappMethods/api.js

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

js/src/views/DappMethods/dappMethods.css

@@ -17,7 +17,7 @@
 
 $border: 1px solid #ccc;
 
-.modal {
+.body {
   td {
     border-bottom: $border;
     border-right: $border;

js/src/views/DappMethods/dappMethods.js

@@ -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 = {
+  static contextTypes = {
-    methodsStore: PropTypes.object.isRequired,
+    api: PropTypes.object.isRequired
-    visibleStore: PropTypes.object.isRequired
   };
 
+  store = new Store(this.context.api);
+
   render () {
-    const { methodsStore, visibleStore } = this.props;
-
-    if (!methodsStore.modalOpen) {
-      return null;
-    }
-
     return (
-      <Portal
+      <Page
-        className={ styles.modal }
+        className={ styles.body }
-        onClose={ methodsStore.closeModal }
-        open
         title={
           <FormattedMessage
             id='dapps.methods.label'
@@ -54,8 +49,8 @@ export default class SelectMethods extends Component {
             <tr>
               <th>&nbsp;</th>
               {
-                methodsStore.filteredRequests.map((method, requestIndex) => (
+                this.store.methods.map((method, methodIndex) => (
-                  <th key={ requestIndex }>
+                  <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>
     );
   }
 }

js/src/views/DappMethods/index.js

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

js/src/views/DappMethods/package.json

@@ -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": {}
+}

js/src/views/DappMethods/store.js

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

js/src/views/DappVisible/api.js

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

js/src/views/DappVisible/dappVisible.js

@@ -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 {
+export default class DappVisible extends Component {
-  static propTypes = {
+  static contextTypes = {
-    store: PropTypes.object.isRequired
+    api: PropTypes.object.isRequired
   };
 
+  store = new Store(this.context.api);
+
   render () {
-    const { store } = this.props;
-
-    if (!store.modalOpen) {
-      return null;
-    }
-
     return (
-      <Portal
+      <Page
-        className={ styles.modal }
-        onClose={ store.closeModal }
-        open
         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 (this.store.displayApps[app.id] && this.store.displayApps[app.id].visible) || false;
-
-    return store.displayApps[app.id].visible;
   }
 
   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);
     }
   }
 }

js/src/views/DappVisible/index.js

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

js/src/views/DappVisible/package.json

@@ -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": {}
+}

js/src/views/DappVisible/store.js

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