Design improvements for the Connect flow (#8494)

* Design improvements for the Connect flow * Make new-account-modal close a button * Update e2e tests for auto select account on connect flow
2024-11-22 09:57:02 +01:00 · 2020-05-04 18:10:09 -02:30 · 2020-05-04 18:10:09 -02:30 · fda4c94670
commit fda4c94670
parent e8fa0b7b5d
17 changed files with 41 additions and 40 deletions
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -152,6 +152,12 @@
    "message": "Allow $1 to spend your $2?",
    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
  },
+  "allowThisSiteTo": {
+    "message": "Allow this site to:"
+  },
+  "allowExternalExtensionTo": {
+    "message": "Allow this external extension to:"
+  },
  "allowWithdrawAndSpend": {
    "message": "Allow $1 to withdraw and spend up to the following amount:",
    "description": "The url of the site that requested permission to 'withdraw and spend'"
@ -291,9 +297,6 @@
  "chainId": {
    "message": "Chain ID"
  },
-  "chooseAccountsToUse": {
-    "message": "Choose the account(s) to use on this site"
-  },
  "clickToRevealSeed": {
    "message": "Click here to reveal secret words"
  },
@ -1213,6 +1216,9 @@
  "selectingAllWillAllow": {
    "message": "Selecting all will allow this site to view all of your current accounts. Make sure you trust this site."
  },
+  "selectAccounts": {
+    "message": "Select account(s)"
+  },
  "selectAll": {
    "message": "Select all"
  },
@ -1433,14 +1439,6 @@
  "testFaucet": {
    "message": "Test Faucet"
  },
-  "thisWillAllow": {
-    "message": "This will allow $1 to:",
-    "description": "$1 is the name or domain of a site/dapp that is requesting permissions"
-  },
-  "thisWillAllowExternalExtension": {
-    "message": "This will allow an external extension with id $1 to:",
-    "description": "$1 is a string of random letters that are the id of another extension connecting to MetaMask"
-  },
  "thisWillCreate": {
    "message": "This will create a new wallet and seed phrase"
  },
--- a/app/_locales/it/messages.json
+++ b/app/_locales/it/messages.json
@ -1345,14 +1345,6 @@
  "testFaucet": {
    "message": "Prova Faucet"
  },
-  "thisWillAllow": {
-    "message": "Questo consentirà $1 di:",
-    "description": "$1 is the name or domain of a site/dapp that is requesting permissions"
-  },
-  "thisWillAllowExternalExtension": {
-    "message": "Questo consentirà una estensione esterna con id $1 di:",
-    "description": "$1 is a string of random letters that are the id of another extension connecting to MetaMask"
-  },
  "thisWillCreate": {
    "message": "Questo creerà un nuovo portafoglio e frase seed"
  },
--- a/app/scripts/controllers/permissions/restrictedMethods.js
+++ b/app/scripts/controllers/permissions/restrictedMethods.js
@ -2,7 +2,7 @@ export default function getRestrictedMethods ({ getIdentities, getKeyringAccount
  return {

    'eth_accounts': {
-      description: `View the addresses of the user's chosen accounts.`,
+      description: `View your public address (required)`,
      method: (_, res, __, end) => {
        getKeyringAccounts()
          .then((accounts) => {
--- a/test/e2e/ethereum-on.spec.js
+++ b/test/e2e/ethereum-on.spec.js
@ -125,10 +125,8 @@ describe('MetaMask', function () {

      await driver.delay(regularDelayMs)

-      await driver.clickElement(By.css('.permissions-connect-choose-account__account'))
-
      await driver.clickElement(By.xpath(`//button[contains(text(), 'Next')]`))
-      await driver.clickElement(By.xpath(`//button[contains(text(), 'Submit')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Connect')]`))

      await driver.waitUntilXWindowHandles(2)
      await driver.switchToWindow(dapp)
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@ -416,7 +416,7 @@ describe('MetaMask', function () {
      await driver.clickElement(By.css('.permissions-connect-choose-account__account'))

      await driver.clickElement(By.xpath(`//button[contains(text(), 'Next')]`))
-      await driver.clickElement(By.xpath(`//button[contains(text(), 'Submit')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Connect')]`))

      await driver.waitUntilXWindowHandles(2)
      await driver.switchToWindow(dapp)
--- a/test/e2e/permissions.spec.js
+++ b/test/e2e/permissions.spec.js
@ -123,10 +123,8 @@ describe('MetaMask', function () {

      await driver.delay(regularDelayMs)

-      await driver.clickElement(By.css('.permissions-connect-choose-account__account'))
-
      await driver.clickElement(By.xpath(`//button[contains(text(), 'Next')]`))
-      await driver.clickElement(By.xpath(`//button[contains(text(), 'Submit')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Connect')]`))

      await driver.waitUntilXWindowHandles(2)
      await driver.switchToWindow(extension)
--- a/test/e2e/signature-request.spec.js
+++ b/test/e2e/signature-request.spec.js
@ -84,10 +84,8 @@ describe('MetaMask', function () {

      await driver.delay(regularDelayMs)

-      await driver.clickElement(By.css('.permissions-connect-choose-account__account'))
-
      await driver.clickElement(By.xpath(`//button[contains(text(), 'Next')]`))
-      await driver.clickElement(By.xpath(`//button[contains(text(), 'Submit')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Connect')]`))

      await driver.waitUntilXWindowHandles(2)
      await driver.switchToWindow(dapp)
--- a/ui/app/components/app/modals/new-account-modal/index.scss
+++ b/ui/app/components/app/modals/new-account-modal/index.scss
@ -8,7 +8,17 @@
    border-bottom: 1px solid $Grey-100;

    &__header {
-      @extend %h3;
+      @extend %header--18;
+      font-weight: bold;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &__header-close {
+      color: #24292E;
+      background: none;
+      font-size: 1.1rem;
    }
  }

--- a/ui/app/components/app/modals/new-account-modal/new-account-modal.component.js
+++ b/ui/app/components/app/modals/new-account-modal/new-account-modal.component.js
@ -43,6 +43,11 @@ export default class NewAccountModal extends Component {
        <div className="new-account-modal__content">
          <div className="new-account-modal__content__header">
            {t('newAccount')}
+            <button
+              className="fas fa-times new-account-modal__content__header-close"
+              title={t('close')}
+              onClick={this.props.hideModal}
+            />
          </div>
          <div className="new-account-modal__input-label">
            {t('accountName')}
--- a/ui/app/components/app/permission-page-container/index.scss
+++ b/ui/app/components/app/permission-page-container/index.scss
@ -108,7 +108,7 @@

  .page-container__footer {
    align-items: center;
-    margin-top: 8px;
+    margin-top: 12px;

    @media screen and (min-width: 576px) {
      border-top: none;
--- a/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
+++ b/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
@ -190,8 +190,8 @@ export default class PermissionPageContainerContent extends PureComponent {
                iconName={domainMetadata.origin}
                headerTitle={title}
                headerText={ domainMetadata.extensionId
-                  ? t('thisWillAllowExternalExtension', [domainMetadata.extensionId])
-                  : t('thisWillAllow', [domainMetadata.origin])
+                  ? t('allowExternalExtensionTo', [domainMetadata.extensionId])
+                  : t('allowThisSiteTo')
                }
              />
              <section className="permission-approval-container__permissions-container">
--- 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
@ -145,7 +145,7 @@ export default class PermissionPageContainer extends Component {
                onCancel={() => this.onCancel()}
                cancelText={this.context.t('cancel')}
                onSubmit={() => this.onSubmit()}
-                submitText={this.context.t('submit')}
+                submitText={this.context.t('connect')}
                submitButtonType="confirm"
                buttonSizeLarge={false}
              />
--- a/ui/app/components/app/permission-page-container/permission-page-container.container.js
+++ b/ui/app/components/app/permission-page-container/permission-page-container.container.js
@ -11,7 +11,7 @@ const mapStateToProps = (state, ownProps) => {
  const targetDomainMetadata = getTargetDomainMetadata(state, request, cachedOrigin)

  const allIdentities = getMetaMaskIdentities(state)
-  const allIdentitiesSelected = Object.keys(selectedIdentities).length === Object.keys(allIdentities).length
+  const allIdentitiesSelected = Object.keys(selectedIdentities).length === Object.keys(allIdentities).length && selectedIdentities.length > 1

  return {
    permissionsDescriptions: getPermissionsDescriptions(state),
--- a/ui/app/pages/permissions-connect/choose-account/choose-account.component.js
+++ b/ui/app/pages/permissions-connect/choose-account/choose-account.component.js
@ -195,7 +195,7 @@ export default class ChooseAccount extends Component {
          iconName={targetDomainMetadata.origin}
          headerTitle={t('connectWithMetaMask')}
          headerText={accounts.length > 0
-            ? t('chooseAccountsToUse')
+            ? t('selectAccounts')
            : t('connectAccountOrCreate')
          }
        />
--- a/ui/app/pages/permissions-connect/choose-account/index.scss
+++ b/ui/app/pages/permissions-connect/choose-account/index.scss
@ -104,7 +104,7 @@
    }

    &:hover {
-      background: aliceblue;
+      background: $Grey-000;
      cursor: pointer;
    }

--- a/ui/app/pages/permissions-connect/index.scss
+++ b/ui/app/pages/permissions-connect/index.scss
@ -24,7 +24,7 @@

  &__back {
    @extend %content-text;
-    color: $curious-blue;
+    color: $Grey-600;
    cursor: pointer;

    i {
--- a/ui/app/pages/permissions-connect/permissions-connect.component.js
+++ b/ui/app/pages/permissions-connect/permissions-connect.component.js
@ -52,7 +52,9 @@ export default class PermissionConnect extends Component {

  state = {
    redirecting: false,
-    selectedAccountAddresses: new Set(),
+    selectedAccountAddresses: this.props.accounts.length === 1
+      ? new Set([this.props.accounts[0].address])
+      : new Set(),
    permissionAccepted: null,
    originName: this.props.originName,
  }