New style permissions

package.json

@@ -35,6 +35,7 @@
     "eth-provider": "^0.2.0",
     "file-saver": "^2.0.1",
     "history": "^4.9.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.memoize": "^4.1.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",

src/Wrapper.js

@@ -21,7 +21,7 @@ import {
   EthereumAddressType,
   RepoType,
 } from './prop-types'
-import { getAppPath, GLOBAL_PREFERENCES_QUERY_PARAM } from './routing'
+import { getAppPath, getPreferencesSearch } from './routing'
 import { APPS_STATUS_LOADING, DAO_STATUS_LOADING } from './symbols'
 import { addressesEqual } from './web3-utils'
 
@@ -104,13 +104,25 @@ class Wrapper extends React.PureComponent {
     }
   }
 
-  openApp = (instanceId, params) => {
+  openApp = (instanceId, { params, localPath } = {}) => {
     if (this.props.autoClosingPanel) {
       // this.handleMenuPanelClose()
     }
 
     const { historyPush, locator } = this.props
-    historyPush(getAppPath({ dao: locator.dao, instanceId, params }))
+    historyPush(getAppPath({ dao: locator.dao, instanceId, params, localPath }))
+  }
+
+  closePreferences = () => {
+    const { historyPush, locator } = this.props
+    historyPush(getAppPath(locator))
+  }
+
+  openPreferences = (screen, data) => {
+    const { historyPush, locator } = this.props
+    historyPush(
+      getAppPath({ ...locator, search: getPreferencesSearch(screen, data) })
+    )
   }
 
   handleAppIFrameRef = appIFrame => {
@@ -155,16 +167,14 @@ class Wrapper extends React.PureComponent {
     this.setState({ appLoading: false })
   }
 
-  handleClosePreferences = () => {
-    window.location.hash = getAppPath(this.props.locator)
-  }
-  handleOpenPreferences = path => {
-    const appPath = getAppPath(this.props.locator)
-    window.location.hash = `${appPath}${GLOBAL_PREFERENCES_QUERY_PARAM}${path}`
-  }
   // params need to be a string
   handleParamsRequest = params => {
-    this.openApp(this.props.locator.instanceId, params)
+    this.openApp(this.props.locator.instanceId, { params })
+  }
+
+  // Update the local path of the current instance
+  handlePathRequest = localPath => {
+    this.openApp(this.props.locator.instanceId, { localPath })
   }
 
   getAppInstancesGroups = memoize(apps =>
@@ -270,7 +280,7 @@ class Wrapper extends React.PureComponent {
           daoAddress={daoAddress}
           daoStatus={daoStatus}
           onOpenApp={this.openApp}
-          onOpenPreferences={this.handleOpenPreferences}
+          onOpenPreferences={this.openPreferences}
           onRequestAppsReload={onRequestAppsReload}
           onRequestEnable={onRequestEnable}
         >
@@ -281,7 +291,10 @@ class Wrapper extends React.PureComponent {
             daoLoading={daoStatus === DAO_STATUS_LOADING}
             instanceId={locator.instanceId}
           >
-            {this.renderApp(locator.instanceId, locator.params)}
+            {this.renderApp(locator.instanceId, {
+              params: locator.params,
+              localPath: locator.localPath,
+            })}
           </AppLoader>
 
           <SignerPanel
@@ -311,12 +324,13 @@ class Wrapper extends React.PureComponent {
         <GlobalPreferences
           locator={locator}
           wrapper={wrapper}
-          onClose={this.handleClosePreferences}
+          onScreenChange={this.openPreferences}
+          onClose={this.closePreferences}
         />
       </div>
     )
   }
-  renderApp(instanceId, params) {
+  renderApp(instanceId, { params, localPath }) {
     const {
       account,
       apps,
@@ -353,9 +367,9 @@ class Wrapper extends React.PureComponent {
           apps={apps}
           appsLoading={appsLoading}
           permissionsLoading={permissionsLoading}
-          params={params}
+          localPath={localPath}
           onMessage={this.handleAppMessage}
-          onParamsRequest={this.handleParamsRequest}
+          onPathRequest={this.handlePathRequest}
           wrapper={wrapper}
         />
       )