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,58 +158,69 @@ 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
-          ? (
-            <ChooseAccount
-              accounts={accounts}
-              originName={originName}
-              nativeCurrency={nativeCurrency}
-              selectAccount={(address) => this.selectAccount(address)}
-              selectNewAccountViaModal={() => {
-                showNewAccountModal({
-                  onCreateNewAccount: this.selectAccount,
-                  newAccountNumber,
-                })
-              }}
-              addressLastConnectedMap={addressLastConnectedMap}
-              cancelPermissionsRequest={(requestId) => {
-                if (requestId) {
-                  rejectPermissionsRequest(requestId)
-                  this.redirectFlow(false)
-                }
-              }}
-              permissionsRequestId={permissionsRequestId}
-            />
-          )
-          : (
-            <div>
-              <PermissionPageContainer
-                request={permissionsRequest || {}}
-                approvePermissionsRequest={(request, accounts) => {
-                  approvePermissionsRequest(request, accounts)
-                  this.redirectFlow(true)
+        <Switch>
+          <Route
+            path={connectPath}
+            exact
+            render={() => (
+              <ChooseAccount
+                accounts={accounts}
+                originName={originName}
+                nativeCurrency={nativeCurrency}
+                selectAccount={(address) => this.selectAccount(address)}
+                selectNewAccountViaModal={() => {
+                  showNewAccountModal({
+                    onCreateNewAccount: this.selectAccount,
+                    newAccountNumber,
+                  })
                 }}
-                rejectPermissionsRequest={(requestId) => {
-                  rejectPermissionsRequest(requestId)
-                  this.redirectFlow(false)
+                addressLastConnectedMap={addressLastConnectedMap}
+                cancelPermissionsRequest={(requestId) => {
+                  if (requestId) {
+                    rejectPermissionsRequest(requestId)
+                    this.redirectFlow(false)
+                  }
                 }}
-                selectedIdentity={accounts.find((account) => account.address === selectedAccountAddress)}
-                redirect={page === null}
-                permissionRejected={ permissionAccepted === false }
+                permissionsRequestId={permissionsRequestId}
               />
-              <PermissionsConnectFooter />
-            </div>
-          )
-        }
+            )}
+          />
+          <Route
+            path={confirmPermissionPath}
+            exact
+            render={() => (
+              <div>
+                <PermissionPageContainer
+                  request={permissionsRequest || {}}
+                  approvePermissionsRequest={(request, accounts) => {
+                    approvePermissionsRequest(request, accounts)
+                    this.redirectFlow(true)
+                  }}
+                  rejectPermissionsRequest={(requestId) => {
+                    rejectPermissionsRequest(requestId)
+                    this.redirectFlow(false)
+                  }}
+                  selectedIdentity={accounts.find((account) => account.address === selectedAccountAddress)}
+                  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>