Adds cancel button to the account selection screen of the permissions…

… request flow
MetaMask · Dec 2, 2019 · 8c70c8a · 8c70c8a
1 parent 323bd9b
commit 8c70c8a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 7 deletions.
diff --git a/ui/app/pages/permissions-connect/choose-account/choose-account.component.js b/ui/app/pages/permissions-connect/choose-account/choose-account.component.js
@@ -17,6 +17,8 @@ export default class ChooseAccount extends Component {
     selectNewAccountViaModal: PropTypes.func.isRequired,
     nativeCurrency: PropTypes.string.isRequired,
     addressLastConnectedMap: PropTypes.object,
+    cancelPermissionsRequest: PropTypes.func.isRequired,
+    permissionsRequestId: PropTypes.string.isRequired,
   }
 
   static defaultProps = {
@@ -71,7 +73,7 @@ export default class ChooseAccount extends Component {
   }
 
   render () {
-    const { originName, selectNewAccountViaModal } = this.props
+    const { originName, selectNewAccountViaModal, permissionsRequestId, cancelPermissionsRequest } = this.props
     const { t } = this.context
     return (
       <div className="permissions-connect-choose-account">
@@ -82,11 +84,19 @@ export default class ChooseAccount extends Component {
           { t('toConnectWith', [originName]) }
         </div>
         { this.renderAccountsList() }
-        <div
-          onClick={ () => selectNewAccountViaModal() }
-          className="permissions-connect-choose-account__new-account"
-        >
-          { t('newAccount') }
+        <div className="permissions-connect-choose-account__bottom-buttons">
+          <div
+            onClick={ () => cancelPermissionsRequest(permissionsRequestId) }
+            className="permissions-connect-choose-account__cancel"
+          >
+            { t('cancel') }
+          </div>
+          <div
+            onClick={ () => selectNewAccountViaModal() }
+            className="permissions-connect-choose-account__new-account"
+          >
+            { t('newAccount') }
+          </div>
         </div>
       </div>
     )

diff --git a/ui/app/pages/permissions-connect/choose-account/index.scss b/ui/app/pages/permissions-connect/choose-account/index.scss
@@ -76,12 +76,22 @@
     }
   }
 
-  &__new-account {
+  &__new-account, &__cancel {
     @extend %content-text;
     line-height: 20px;
     color: #037DD6;
     margin-top: 24px;
     cursor: pointer;
   }
 
+  &__cancel {
+    color: $Red-400;
+  }
+
+  &__bottom-buttons {
+    display: flex;
+    justify-content: space-around;
+    width: 393px;
+  }
+
 }
diff --git a/ui/app/pages/permissions-connect/permissions-connect.component.js b/ui/app/pages/permissions-connect/permissions-connect.component.js
@@ -19,6 +19,7 @@ export default class PermissionConnect extends Component {
     permissionsRequest: PropTypes.object,
     addressLastConnectedMap: PropTypes.object,
     requestAccountTabs: PropTypes.object,
+    permissionsRequestId: PropTypes.string,
   }
 
   static defaultProps = {
@@ -27,6 +28,7 @@ export default class PermissionConnect extends Component {
     permissionsRequest: {},
     addressLastConnectedMap: {},
     requestAccountTabs: {},
+    permissionsRequestId: '',
   }
 
   static contextTypes = {
@@ -85,6 +87,7 @@ export default class PermissionConnect extends Component {
       nativeCurrency,
       permissionsRequest,
       addressLastConnectedMap,
+      permissionsRequestId,
     } = this.props
     const { page, selectedAccountAddress, permissionAccepted, originName } = this.state
 
@@ -107,6 +110,13 @@ export default class PermissionConnect extends Component {
               })
             }}
             addressLastConnectedMap={addressLastConnectedMap}
+            cancelPermissionsRequest={requestId => {
+              if (requestId) {
+                rejectPermissionsRequest(requestId)
+                this.redirectFlow(false)
+              }
+            }}
+            permissionsRequestId={permissionsRequestId}
           />
           : <div><PermissionPageContainer
             request={permissionsRequest || {}}

diff --git a/ui/app/pages/permissions-connect/permissions-connect.container.js b/ui/app/pages/permissions-connect/permissions-connect.container.js
@@ -26,8 +26,11 @@ const mapStateToProps = state => {
     addressLastConnectedMap[key] = formatDate(addressLastConnectedMap[key], 'yyyy-M-d')
   })
 
+  const permissionsRequestId = (permissionsRequest && permissionsRequest.metadata) ? permissionsRequest.metadata.id : null
+
   return {
     permissionsRequest,
+    permissionsRequestId,
     accounts: accountsWithLabels,
     originName: origin,
     newAccountNumber: accountsWithLabels.length + 1,