Optimize & group dapp requests

js/src/DappRequests/README.md

@@ -0,0 +1,9 @@
+# Terminology used
+
+To be clear with the terminology used in the code here:
+
+- a *method* is an allowed JSON-RPC api method or a shell method
+- a *methodGroup* is the grouping of similar methods (see `methodGroups.js`)
+- a *permission* is a boolean which tells if an app is allowed to call a method or not
+- a *request* is when an app prompts the shell to call a method
+- a *requestGroup* is an array of *requests* whose methods are in the same *methodGroup*

js/src/DappRequests/RequestGroups/RequestGroups.css

@@ -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/>.
+*/
+
+$backgroundOne: #f80;
+$backgroundTwo: #e57a00;
+
+.requestGroups {
+  background: $backgroundOne;
+  background: linear-gradient($backgroundOne, $backgroundTwo);
+  padding: 0.5em;
+  text-align: right;
+  color: white;
+
+  > span {
+    margin-right: 30px;
+  }
+
+  .requestGroup {
+    margin-top: 2px;
+
+    .requestGroupTitle {
+      margin-right: 10px;
+    }
+  }
+}

js/src/DappRequests/RequestGroups/RequestGroups.js

@@ -0,0 +1,98 @@
+// 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 React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import Popup from 'semantic-ui-react/dist/commonjs/modules/Popup';
+import Button from '@parity/ui/lib/Button';
+
+import DappsStore from '@parity/shared/lib/mobx/dappsStore';
+
+import styles from './RequestGroups.css';
+
+export default class RequestGroups extends PureComponent {
+  state = {
+    opened: false
+  };
+
+  render () {
+    const app = DappsStore.get().getAppById(appId);
+    const {
+      appId,
+      requestGroups,
+      onApproveRequestGroup,
+      onRejectRequestGroup
+    } = this.props;
+
+    return (
+      <div className={ styles.requestGroups }>
+        <FormattedMessage
+          className={ styles.requestGroups }
+          id='dappRequests.request.info'
+          defaultMessage='{appName} wants to request permissions:'
+          values={ {
+            appName: app ? app.name : `Dapp ${appId}`
+          } }
+        />
+        {Object.keys(requestGroups).map(groupId => (
+          <div key={ `${appId}-${groupId}` } className={ styles.requestGroup }>
+            <span className={ styles.requestGroupTitle }>
+              Permission for{' '}
+              <Popup
+                trigger={ <span>{groupId}</span> }
+                content={ `Allowed methods: ${Object.values(
+                  requestGroups[groupId]
+                )
+                  .map(request => request.data.method || request.data.params[0])
+                  .join(', ')}` }
+              />
+            </span>
+            <Button
+              size='mini'
+              label={
+                <FormattedMessage
+                  id='dappRequests.request.buttons.approve'
+                  defaultMessage='Approve'
+                />
+              }
+              onClick={ () => onApproveRequestGroup(groupId, appId) }
+            />
+            <Button
+              size='mini'
+              label={
+                <FormattedMessage
+                  id='dappRequests.request.buttons.reject'
+                  defaultMessage='Reject'
+                />
+              }
+              onClick={ () => onRejectRequestGroup(groupId, appId) }
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+
+RequestGroups.propTypes = {
+  appId: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  onApproveRequestGroup: PropTypes.func.isRequired,
+  onRejectRequestGroup: PropTypes.func.isRequired,
+  requestGroups: PropTypes.object.isRequired
+};

js/src/DappRequests/Request/index.js → js/src/DappRequests/RequestGroups/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 './request';
+export default from './RequestGroups';

js/src/DappRequests/dappRequests.css

@@ -15,27 +15,10 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-$backgroundOne: #f80;
-$backgroundTwo: #e57a00;
-
 .requests {
-  color: white;
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1001; /* sits above sync warning */
-
-  .request {
-    align-items: center;
-    background: $backgroundOne;
-    background: linear-gradient($backgroundOne, $backgroundTwo);
-    display: flex;
-    justify-content: flex-end;
-    padding: 0.5em;
-
-    > span {
-      margin-right: 1em;
-    }
-  }
 }

js/src/DappRequests/dappRequests.js

@@ -17,7 +17,7 @@
 import { observer } from 'mobx-react';
 import React from 'react';
 
-import Request from './Request';
+import RequestGroups from './RequestGroups';
 import Store from './store';
 import styles from './dappRequests.css';
 
@@ -30,19 +30,16 @@ function DappRequests () {
 
   return (
     <div className={ styles.requests }>
-      {
-        store.squashedRequests.map(({ appId, queueId, request: { data } }) => (
-          <Request
+      {Object.keys(store.groupedRequests)
+        .map(appId => (
+          <RequestGroups
+            key={ appId }
             appId={ appId }
-            className={ styles.request }
-            approveRequest={ store.approveRequest }
-            denyRequest={ store.rejectRequest }
-            key={ queueId }
-            queueId={ queueId }
-            request={ data }
+            onApproveRequestGroup={ store.approveRequestGroup }
+            onRejectRequestGroup={ store.rejectRequestGroup }
+            requestGroups={ store.groupedRequests[appId] }
           />
-        ))
-      }
+        ))}
     </div>
   );
 }

js/src/DappRequests/filteredRequests.js → js/src/DappRequests/methodGroups.js

@@ -14,21 +14,19 @@
 // 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 {
+const methodGroups = {
   shell: {
     methods: [
       'shell_getApps',
       'shell_getFilteredMethods',
+      'shell_getMethodGroups',
       'shell_getMethodPermissions',
       'shell_setAppVisibility',
       'shell_setMethodPermissions'
     ]
   },
   accountsView: {
-    methods: [
-      'parity_accountsInfo',
-      'parity_allAccountsInfo'
-    ]
+    methods: ['parity_accountsInfo', 'parity_allAccountsInfo']
   },
   accountsCreate: {
     methods: [
@@ -42,10 +40,7 @@ export default {
     ]
   },
   accountsEdit: {
-    methods: [
-      'parity_setAccountName',
-      'parity_setAccountMeta'
-    ]
+    methods: ['parity_setAccountName', 'parity_setAccountMeta']
   },
   upgrade: {
     methods: [
@@ -76,3 +71,15 @@ export default {
     ]
   }
 };
+
+const methodGroupFromMethod = {}; // Maps method to methodGroup
+
+// Populate methodGroupFromMethod
+Object.keys(methodGroups).forEach(groupId => {
+  methodGroups[groupId].methods.forEach(method => {
+    methodGroupFromMethod[method] = groupId;
+  });
+});
+
+export { methodGroupFromMethod };
+export default methodGroups;