From fda4c94670327ef93decae29b661d0364b5311c5 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 4 May 2020 18:10:09 -0230 Subject: [PATCH] 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 --- app/_locales/en/messages.json | 20 +++++++++---------- app/_locales/it/messages.json | 8 -------- .../permissions/restrictedMethods.js | 2 +- test/e2e/ethereum-on.spec.js | 4 +--- test/e2e/metamask-ui.spec.js | 2 +- test/e2e/permissions.spec.js | 4 +--- test/e2e/signature-request.spec.js | 4 +--- .../app/modals/new-account-modal/index.scss | 12 ++++++++++- .../new-account-modal.component.js | 5 +++++ .../app/permission-page-container/index.scss | 2 +- ...ission-page-container-content.component.js | 4 ++-- .../permission-page-container.component.js | 2 +- .../permission-page-container.container.js | 2 +- .../choose-account.component.js | 2 +- .../choose-account/index.scss | 2 +- ui/app/pages/permissions-connect/index.scss | 2 +- .../permissions-connect.component.js | 4 +++- 17 files changed, 41 insertions(+), 40 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index be35dd241..b8656abe0 100644 --- 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" }, diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index e00eabb7f..aa481eb83 100644 --- 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" }, diff --git a/app/scripts/controllers/permissions/restrictedMethods.js b/app/scripts/controllers/permissions/restrictedMethods.js index 717361d96..15f240aca 100644 --- 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) => { diff --git a/test/e2e/ethereum-on.spec.js b/test/e2e/ethereum-on.spec.js index ddc76c23a..9ec96c0e2 100644 --- 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) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index c660d0f38..1fe503d7d 100644 --- 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) diff --git a/test/e2e/permissions.spec.js b/test/e2e/permissions.spec.js index 08d9b5e10..b94e2014d 100644 --- 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) diff --git a/test/e2e/signature-request.spec.js b/test/e2e/signature-request.spec.js index 5aeaa67b6..de61d75f7 100644 --- 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) diff --git a/ui/app/components/app/modals/new-account-modal/index.scss b/ui/app/components/app/modals/new-account-modal/index.scss index d6c2d0ac1..687f6b5f0 100644 --- 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; } } diff --git 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 index 547b93285..f560036ad 100644 --- 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 {
{t('newAccount')} +
{t('accountName')} diff --git a/ui/app/components/app/permission-page-container/index.scss b/ui/app/components/app/permission-page-container/index.scss index 22104d029..a996aed5b 100644 --- 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; diff --git 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 index 834a3ad90..4a037496a 100644 --- 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') } />
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 index 759f960b6..26b81d73d 100644 --- 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} /> diff --git 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 index 827e12c8f..bf88eebf9 100644 --- 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), 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 index 208897310..3758d556b 100644 --- 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') } /> diff --git a/ui/app/pages/permissions-connect/choose-account/index.scss b/ui/app/pages/permissions-connect/choose-account/index.scss index 35a284160..9d5ffe8c4 100644 --- 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; } diff --git a/ui/app/pages/permissions-connect/index.scss b/ui/app/pages/permissions-connect/index.scss index a5263919d..de0f41940 100644 --- 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 { diff --git a/ui/app/pages/permissions-connect/permissions-connect.component.js b/ui/app/pages/permissions-connect/permissions-connect.component.js index a81750aba..b43005c86 100644 --- 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, }