Connect flow via popup (#8269)

* Connect screen popup redesign * Open permission request in notification instead of tab * Remove no longer user locales * Update permissions unit test mock to accout for change of opts passed to permissions controller * Lint fix * Inline broken line svg in permission-page-container-content.component.js for faster loading * Add back button to second screen on connect flow * Add xOfY locale and use for the page count in the connect flow * Lint fix for svgs permission-page-container-content.component.js * Fix rebase error * Lint fix * Clean up styles on the connect-screen-into-popup branch * Use closeCurrentWindow to close window on cancel when in full screen connect flow * Handle errors in rejectPermissionsRequest * Full screen styles for connect flow * Lint fixed in permissions-connect and actions.js * Redirect screen now shows metamask icon instead of users identicon * Fix subtitle spacing in permissions-connect-header' * Use window.close instead of closeCurrentWindow() in cancelPermissionsRequest * Use permissions-connect-header__subtitle in permissions-connect-header.component
MetaMask · Apr 7, 2020 · d1e078b · d1e078b
1 parent d8e0c9e
commit d1e078b
Show file tree

Hide file tree

Showing 22 changed files with 286 additions and 200 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -1157,9 +1157,6 @@
   "readyToConnect": {
     "message": "Ready to Connect?"
   },
-  "revokeInPermissions": {
-    "message": "* You can view and revoke permissions in MetaMask settings."
-  },
   "rinkeby": {
     "message": "Rinkeby Test Network"
   },
@@ -1628,6 +1625,10 @@
   "writePhrase": {
     "message": "Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations."
   },
+  "xOfY": {
+    "message": "$1 of $2",
+    "description": "$1 and $2 are intended to be two numbers, where $2 is a total, and $1 is a count towards that total"
+  },
   "yesLetsTry": {
     "message": "Yes, let's try"
   },

diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json
@@ -1101,9 +1101,6 @@
   "readyToConnect": {
     "message": "Pronto a Connetterti?"
   },
-  "revokeInPermissions": {
-    "message": "* Puoi vedere e revocare i permessi nelle impostazioni di MetaMask."
-  },
   "rinkeby": {
     "message": "Rete di test Rinkeby"
   },

diff --git a/app/images/broken-line.svg b/app/images/broken-line.svg
diff --git a/app/scripts/background.js b/app/scripts/background.js
@@ -240,6 +240,7 @@ function setupController (initState, initLangCode) {
     // User confirmation callbacks:
     showUnconfirmedMessage: triggerUi,
     showUnapprovedTx: triggerUi,
+    showPermissionRequest: triggerUi,
     openPopup: openPopup,
     closePopup: notificationManager.closePopup.bind(notificationManager),
     // initial state

diff --git a/app/scripts/controllers/permissions/index.js b/app/scripts/controllers/permissions/index.js
@@ -29,7 +29,7 @@ export class PermissionsController {
       getUnlockPromise,
       notifyDomain,
       notifyAllDomains,
-      platform,
+      showPermissionRequest,
     } = {},
     restoredPermissions = {},
     restoredState = {}) {
@@ -44,7 +44,7 @@ export class PermissionsController {
     this.getUnlockPromise = getUnlockPromise
     this._notifyDomain = notifyDomain
     this.notifyAllDomains = notifyAllDomains
-    this._platform = platform
+    this._showPermissionRequest = showPermissionRequest
 
     this._restrictedMethods = getRestrictedMethods(this)
     this.permissionsLog = new PermissionsLogController({
@@ -544,7 +544,7 @@ export class PermissionsController {
           )
         }
 
-        this._platform.openExtensionInBrowser(`connect/${id}`)
+        this._showPermissionRequest()
 
         return new Promise((resolve, reject) => {
           this._addPendingApproval(id, origin, resolve, reject)

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
@@ -216,7 +216,7 @@ export default class MetamaskController extends EventEmitter {
       getUnlockPromise: this.appStateController.getUnlockPromise.bind(this.appStateController),
       notifyDomain: this.notifyConnections.bind(this),
       notifyAllDomains: this.notifyAllConnections.bind(this),
-      platform: opts.platform,
+      showPermissionRequest: opts.showPermissionRequest,
     }, initState.PermissionsController, initState.PermissionsMetadata)
 
     this.detectTokensController = new DetectTokensController({

diff --git a/test/unit/app/controllers/permissions/mocks.js b/test/unit/app/controllers/permissions/mocks.js
@@ -25,10 +25,6 @@ export const noop = () => {}
  * Mock Permissions Controller and Middleware
  */
 
-const platform = {
-  openExtensionInBrowser: noop,
-}
-
 const keyringAccounts = deepFreeze([
   '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
   '0xc42edfcc21ed14dda456aa0756c153f7985d8813',
@@ -67,7 +63,7 @@ const getUnlockPromise = () => Promise.resolve()
  */
 export function getPermControllerOpts () {
   return {
-    platform,
+    showPermissionRequest: noop,
     getKeyringAccounts,
     getUnlockPromise,
     getRestrictedMethods,

diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss
@@ -99,3 +99,5 @@
 @import '../ui/check-box/index';
 
 @import 'permissions-connect-header/index';
+
+@import 'permissions-connect-footer/index';
diff --git a/ui/app/components/app/permission-page-container/index.scss b/ui/app/components/app/permission-page-container/index.scss
@@ -2,9 +2,25 @@
   display: flex;
   border: none;
   box-shadow: none;
-  margin-top: 45px;
-  width: 488px;
-  min-height: 468px;
+  width: 100%;
+  margin-top: 2px;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @media screen and (min-width: 576px) {
+    width: 426px;
+    flex: 1;
+
+    &__footers {
+      display: flex;
+      flex-direction: column-reverse;
+      flex: 1;
+      padding-bottom: 20px;
+      justify-content: space-between;
+    }
+  }
+
 
   &__header {
     display: flex;
@@ -25,12 +41,13 @@
   &__content {
     display: flex;
     overflow-y: auto;
-    flex: 1;
     flex-direction: column;
     color: #7C808E;
+    padding-left: 24px;
+    padding-right: 24px;
 
     &--redirect {
-      margin-top: 50px;
+      margin-top: 140px;
       width: 100%;
       display: flex;
       align-items: center;
@@ -51,19 +68,27 @@
 
     &__permission {
       display: flex;
-      margin-top: 18px;
+      align-items: center;
 
       i {
         font-size: 1.4rem;
         color: $Grey-200;
       }
+
       label {
-        margin-left: 6px;
+        font-size: 14px;
+        margin-left: 16px;
         color: $Black-100;
       }
     }
   }
 
+  &__content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   &__permissions-header {
     @extend %content-text;
     line-height: 20px;
@@ -77,23 +102,28 @@
   &__permissions-container {
     display: flex;
     flex-direction: column;
-    margin-top: 33px;
+    margin-top: 38px;
   }
 
   .page-container__footer {
-    border-top: none;
     align-items: center;
+    margin-top: 8px;
+
+    @media screen and (min-width: 576px) {
+      border-top: none;
+    }
 
     footer {
-      width: 300px;
+      width: 100%;
+      justify-content: space-between;
+
+      button {
+        width: 124px;
+      }
     }
   }
 
   @media screen and (max-width: 575px) {
-    width: 100%;
-    margin-top: 25px;
-    padding: 10px;
-
     &__title {
       position: initial;
     }

diff --git a/...ontainer/permission-page-container-content/permission-page-container-content.component.js b/...ontainer/permission-page-container-content/permission-page-container-content.component.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
-import Identicon from '../../../ui/identicon'
 import IconWithFallBack from '../../../ui/icon-with-fallback'
 import PermissionsConnectHeader from '../../permissions-connect-header'
 import Tooltip from '../../../ui/tooltip-v2'
@@ -30,9 +29,17 @@ export default class PermissionPageContainerContent extends PureComponent {
     t: PropTypes.func,
   }
 
+  renderBrokenLine () {
+    return (
+      <svg width="131" height="2" viewBox="0 0 131 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 1H134" stroke="#CDD1E4" strokeLinejoin="round" strokeDasharray="8 7" />
+      </svg>
+    )
+  }
+
   renderRedirect () {
     const { t } = this.context
-    const { permissionRejected, selectedIdentities, domainMetadata } = this.props
+    const { permissionRejected, domainMetadata } = this.props
     return (
       <div className="permission-result">
         { permissionRejected ? t('cancelling') : t('connecting') }
@@ -43,15 +50,11 @@ export default class PermissionPageContainerContent extends PureComponent {
               ? <span className="permission-result__reject" ><i className="fa fa-times-circle" /></span>
               : <span className="permission-result__check" />
             }
-            <img className="permission-result__broken-line" src="/images/broken-line.svg" />
+            { this.renderBrokenLine() }
           </div>
           <div className="permission-result__identicon-container">
             <div className="permission-result__identicon-border">
-              <Identicon
-                className="permission-result__identicon"
-                address={selectedIdentities[0].address}
-                diameter={54}
-              />
+              <img src="/images/logo/metamask-fox.svg" />
             </div>
           </div>
         </div>
@@ -97,7 +100,6 @@ export default class PermissionPageContainerContent extends PureComponent {
     return (
       <div className="permission-approval-container__content__requested">
         {items}
-        <div className="permission-approval-container__content__revoke-note">{ t('revokeInPermissions') }</div>
       </div>
     )
   }
@@ -149,16 +151,7 @@ export default class PermissionPageContainerContent extends PureComponent {
     } else if (allIdentitiesSelected) {
       return t(
         'connectToAll',
-        [
-          (
-            <span
-              key="multi-account-connect-all-accounts"
-              className="permission-approval-container__bold-title-elements"
-            >
-              { this.renderAccountTooltip(t('connectToAllAccounts')) }
-            </span>
-          ),
-        ]
+        [ this.renderAccountTooltip(t('connectToAllAccounts')) ]
       )
     } else if (selectedIdentities.length > 1) {
       return t(
@@ -169,15 +162,9 @@ export default class PermissionPageContainerContent extends PureComponent {
       )
     } else {
       return t(
-        'connectTo', [
-          (
-            <span
-              key="connect-to-one-account"
-              className="permission-approval-container__bold-title-elements"
-            >
-              { this.getAccountDescriptor(selectedIdentities[0]) }
-            </span>
-          ),
+        'connectTo',
+        [
+          this.getAccountDescriptor(selectedIdentities[0]),
         ]
       )
     }
@@ -197,7 +184,7 @@ export default class PermissionPageContainerContent extends PureComponent {
       >
         { !redirect
           ? (
-            <div>
+            <div className="permission-approval-container__content-container">
               <PermissionsConnectHeader
                 icon={domainMetadata.icon}
                 iconName={domainMetadata.origin}

diff --git a/ui/app/components/app/permission-page-container/permission-page-container.component.js b/ui/app/components/app/permission-page-container/permission-page-container.component.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import { isEqual } from 'lodash'
 import { PermissionPageContainerContent } from '.'
 import { PageContainerFooter } from '../../ui/page-container'
+import PermissionsConnectFooter from '../permissions-connect-footer'
 
 export default class PermissionPageContainer extends Component {
 
@@ -137,15 +138,18 @@ export default class PermissionPageContainer extends Component {
         />
         { !redirect
           ? (
-            <PageContainerFooter
-              cancelButtonType="primary"
-              onCancel={() => this.onCancel()}
-              cancelText={this.context.t('cancel')}
-              onSubmit={() => this.onSubmit()}
-              submitText={this.context.t('submit')}
-              submitButtonType="confirm"
-              buttonSizeLarge={false}
-            />
+            <div className="permission-approval-container__footers">
+              <PermissionsConnectFooter />
+              <PageContainerFooter
+                cancelButtonType="default"
+                onCancel={() => this.onCancel()}
+                cancelText={this.context.t('cancel')}
+                onSubmit={() => this.onSubmit()}
+                submitText={this.context.t('submit')}
+                submitButtonType="confirm"
+                buttonSizeLarge={false}
+              />
+            </div>
           )
           : null
         }

diff --git a/...nnect/permissions-connect-footer/index.js → ...s/app/permissions-connect-footer/index.js b/...nnect/permissions-connect-footer/index.js → ...s/app/permissions-connect-footer/index.js
diff --git a/...ect/permissions-connect-footer/index.scss → ...app/permissions-connect-footer/index.scss b/...ect/permissions-connect-footer/index.scss → ...app/permissions-connect-footer/index.scss
@@ -3,12 +3,6 @@
   flex-direction: column;
   width: 100%;
   align-items: center;
-  position: absolute;
-  bottom: 50px;
-
-  @media screen and (max-width: 575px) {
-    bottom: 5px;
-  }
 
   &__text {
     @extend %content-text;

diff --git a/...r/permissions-connect-footer.component.js → ...r/permissions-connect-footer.component.js b/...r/permissions-connect-footer.component.js → ...r/permissions-connect-footer.component.js
diff --git a/ui/app/components/app/permissions-connect-header/index.scss b/ui/app/components/app/permissions-connect-header/index.scss
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  width: 92%;
 
   &__icon {
     display: flex;
@@ -27,13 +28,16 @@
     @extend %header--24;
     text-align: center;
     color: $Black-100;
-    margin-top: 16px;
+    margin-top: 14px;
   }
 
-  &__text {
+  &__text, &__subtitle {
     @extend %content-text;
     text-align: center;
-    margin-top: 4px;
     color: $Grey-500;
   }
+
+  &__subtitle {
+    margin-top: 4px;
+  }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -99,3 +99,5 @@
		@import '../ui/check-box/index';

		@import 'permissions-connect-header/index';

		@import 'permissions-connect-footer/index';