Change permissions connect screen to use browser routing (#8072)

ui/app/helpers/constants/routes.js

@@ -26,6 +26,7 @@ const IMPORT_ACCOUNT_ROUTE = '/new-account/import'
 const CONNECT_HARDWARE_ROUTE = '/new-account/connect'
 const SEND_ROUTE = '/send'
 const CONNECT_ROUTE = '/connect'
+const CONNECT_CONFIRM_PERMISSIONS_ROUTE = '/confirm-permissions'
 const CONNECTED_ROUTE = '/connected'
 
 const INITIALIZE_ROUTE = '/initialize'
@@ -101,5 +102,6 @@ export {
   NETWORKS_ROUTE,
   INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
   CONNECT_ROUTE,
+  CONNECT_CONFIRM_PERMISSIONS_ROUTE,
   CONNECTED_ROUTE,
 }

ui/app/pages/permissions-connect/permissions-connect.component.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+import { Switch, Route } from 'react-router-dom'
 import PermissionsConnectHeader from './permissions-connect-header'
 import PermissionsConnectFooter from './permissions-connect-footer'
 import ChooseAccount from './choose-account'
@@ -9,7 +10,10 @@ import {
   ENVIRONMENT_TYPE_NOTIFICATION,
   ENVIRONMENT_TYPE_POPUP,
 } from '../../../../app/scripts/lib/enums'
-import { DEFAULT_ROUTE, CONNECTED_ROUTE } from '../../helpers/constants/routes'
+import {
+  DEFAULT_ROUTE,
+  CONNECTED_ROUTE,
+} from '../../helpers/constants/routes'
 import PermissionPageContainer from '../../components/app/permission-page-container'
 
 export default class PermissionConnect extends Component {
@@ -29,6 +33,10 @@ export default class PermissionConnect extends Component {
     permissionsRequestId: PropTypes.string,
     domains: PropTypes.object,
     history: PropTypes.object.isRequired,
+    connectPath: PropTypes.string.isRequired,
+    confirmPermissionPath: PropTypes.string.isRequired,
+    page: PropTypes.string.isRequired,
+    redirecting: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -39,6 +47,7 @@ export default class PermissionConnect extends Component {
     requestAccountTabs: {},
     permissionsRequestId: '',
     domains: {},
+    redirecting: false,
   }
 
   static contextTypes = {
@@ -46,7 +55,7 @@ export default class PermissionConnect extends Component {
   }
 
   state = {
-    page: 1,
+    redirecting: false,
     selectedAccountAddress: '',
     permissionAccepted: null,
     originName: this.props.originName,
@@ -68,10 +77,10 @@ export default class PermissionConnect extends Component {
   }
 
   componentDidUpdate (prevProps) {
-    const { domains, permissionsRequest } = this.props
-    const { originName, page } = this.state
+    const { domains, permissionsRequest, redirecting } = this.props
+    const { originName } = this.state
 
-    if (!permissionsRequest && prevProps.permissionsRequest && page !== null) {
+    if (!permissionsRequest && prevProps.permissionsRequest && !redirecting) {
       const permissionDataForDomain = (domains && domains[originName]) || {}
       const permissionsForDomain = permissionDataForDomain.permissions || []
       const prevPermissionDataForDomain = (prevProps.domains && prevProps.domains[originName]) || {}
@@ -87,9 +96,8 @@ export default class PermissionConnect extends Component {
 
   selectAccount = (address) => {
     this.setState({
-      page: 2,
       selectedAccountAddress: address,
-    })
+    }, () => this.props.history.push(this.props.confirmPermissionPath))
   }
 
   redirectFlow (accepted) {
@@ -97,7 +105,7 @@ export default class PermissionConnect extends Component {
     const { originName } = this.state
 
     this.setState({
-      page: null,
+      redirecting: true,
       permissionAccepted: accepted,
     })
     this.removeBeforeUnload()
@@ -150,17 +158,23 @@ export default class PermissionConnect extends Component {
       permissionsRequest,
       addressLastConnectedMap,
       permissionsRequestId,
+      connectPath,
+      confirmPermissionPath,
+      page,
     } = this.props
-    const { page, selectedAccountAddress, permissionAccepted, originName } = this.state
+    const { selectedAccountAddress, permissionAccepted, originName, redirecting } = this.state
 
     return (
       <div className="permissions-connect">
-        { page !== null
+        { !redirecting
           ? <PermissionsConnectHeader page={page} />
           : null
         }
-        { page === 1
-          ? (
+        <Switch>
+          <Route
+            path={connectPath}
+            exact
+            render={() => (
               <ChooseAccount
                 accounts={accounts}
                 originName={originName}
@@ -181,8 +195,12 @@ export default class PermissionConnect extends Component {
                 }}
                 permissionsRequestId={permissionsRequestId}
               />
-          )
-          : (
+            )}
+          />
+          <Route
+            path={confirmPermissionPath}
+            exact
+            render={() => (
               <div>
                 <PermissionPageContainer
                   request={permissionsRequest || {}}
@@ -195,13 +213,14 @@ export default class PermissionConnect extends Component {
                     this.redirectFlow(false)
                   }}
                   selectedIdentity={accounts.find((account) => account.address === selectedAccountAddress)}
-                redirect={page === null}
+                  redirect={redirecting}
                   permissionRejected={ permissionAccepted === false }
                 />
                 <PermissionsConnectFooter />
               </div>
-          )
-        }
+            )}
+          />
+        </Switch>
       </div>
     )
   }

ui/app/pages/permissions-connect/permissions-connect.container.js

@@ -10,9 +10,16 @@ import {
 } from '../../selectors/selectors'
 import { formatDate } from '../../helpers/utils/util'
 import { approvePermissionsRequest, rejectPermissionsRequest, showModal, getCurrentWindowTab, getRequestAccountTabIds } from '../../store/actions'
+import {
+  CONNECT_ROUTE,
+  CONNECT_CONFIRM_PERMISSIONS_ROUTE,
+} from '../../helpers/constants/routes'
 
 const mapStateToProps = (state, ownProps) => {
-  const { match: { params: { id: permissionsRequestId } } } = ownProps
+  const {
+    match: { params: { id: permissionsRequestId } },
+    location: { pathname },
+  } = ownProps
   const permissionsRequests = getPermissionsRequests(state)
 
   const permissionsRequest = permissionsRequests
@@ -33,6 +40,18 @@ const mapStateToProps = (state, ownProps) => {
     addressLastConnectedMap[key] = formatDate(addressLastConnectedMap[key], 'yyyy-M-d')
   })
 
+  const connectPath = `${CONNECT_ROUTE}/${permissionsRequestId}`
+  const confirmPermissionPath = `${CONNECT_ROUTE}/${permissionsRequestId}${CONNECT_CONFIRM_PERMISSIONS_ROUTE}`
+
+  let page = ''
+  if (pathname === connectPath) {
+    page = '1'
+  } else if (pathname === confirmPermissionPath) {
+    page = '2'
+  } else {
+    throw new Error('Incorrect path for permissions-connect component')
+  }
+
   return {
     permissionsRequest,
     permissionsRequestId,
@@ -43,6 +62,9 @@ const mapStateToProps = (state, ownProps) => {
     requestAccountTabs,
     addressLastConnectedMap,
     domains: getPermissionsDomains(state),
+    connectPath,
+    confirmPermissionPath,
+    page,
   }
 }
 

ui/app/pages/routes/index.js

@@ -126,7 +126,7 @@ class Routes extends Component {
         <Authenticated path={CONFIRM_ADD_TOKEN_ROUTE} component={ConfirmAddTokenPage} exact />
         <Authenticated path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE} component={ConfirmAddSuggestedTokenPage} exact />
         <Authenticated path={NEW_ACCOUNT_ROUTE} component={CreateAccountPage} />
-        <Authenticated path={`${CONNECT_ROUTE}/:id`} component={PermissionsConnect} exact />
+        <Authenticated path={`${CONNECT_ROUTE}/:id`} component={PermissionsConnect} />
         <Authenticated path={CONNECTED_ROUTE} component={ConnectedSites} exact />
         <Authenticated path={DEFAULT_ROUTE} component={Home} exact />
       </Switch>