From d1e078b8dec5653a536619274cd33debc20bab22 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 7 Apr 2020 16:08:15 -0230 Subject: [PATCH] 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 --- app/_locales/en/messages.json | 7 +- app/_locales/it/messages.json | 3 - app/images/broken-line.svg | 3 - app/scripts/background.js | 1 + app/scripts/controllers/permissions/index.js | 6 +- app/scripts/metamask-controller.js | 2 +- .../unit/app/controllers/permissions/mocks.js | 6 +- ui/app/components/app/index.scss | 2 + .../app/permission-page-container/index.scss | 58 +++++-- ...ission-page-container-content.component.js | 45 ++---- .../permission-page-container.component.js | 22 +-- .../app}/permissions-connect-footer/index.js | 0 .../permissions-connect-footer/index.scss | 6 - .../permissions-connect-footer.component.js | 0 .../app/permissions-connect-header/index.scss | 10 +- .../permissions-connect-header.component.js | 2 +- .../choose-account.component.js | 32 ++-- .../choose-account/index.scss | 66 +++++--- ui/app/pages/permissions-connect/index.scss | 47 ++++-- .../permissions-connect.component.js | 153 ++++++++++-------- .../permissions-connect.container.js | 3 - ui/app/store/actions.js | 12 +- 22 files changed, 286 insertions(+), 200 deletions(-) delete mode 100644 app/images/broken-line.svg rename ui/app/{pages/permissions-connect => components/app}/permissions-connect-footer/index.js (100%) rename ui/app/{pages/permissions-connect => components/app}/permissions-connect-footer/index.scss (77%) rename ui/app/{pages/permissions-connect => components/app}/permissions-connect-footer/permissions-connect-footer.component.js (100%) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0f5750c04224..59ee7a6fb026 100644 --- 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 index 445f04596eff..d974a82d2ab8 100644 --- 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 deleted file mode 100644 index 71e1a4f238f2..000000000000 --- a/app/images/broken-line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/scripts/background.js b/app/scripts/background.js index f8d80054a135..3a183849c463 100644 --- 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 index 637208f325ad..bc8d6811afa4 100644 --- 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 index 68e4f6f03c24..0098e94540c9 100644 --- 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 index 9b6e2d39b633..fdb70ea7740f 100644 --- 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 index 6b77907b156e..933d35ced891 100644 --- 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 index 6daf9774ba2b..ed9c5db76fdf 100644 --- 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/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 9b31264a2943..834a3ad90bad 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 @@ -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 ( + + + + ) + } + renderRedirect () { const { t } = this.context - const { permissionRejected, selectedIdentities, domainMetadata } = this.props + const { permissionRejected, domainMetadata } = this.props return (
{ permissionRejected ? t('cancelling') : t('connecting') } @@ -43,15 +50,11 @@ export default class PermissionPageContainerContent extends PureComponent { ? : } - + { this.renderBrokenLine() }
- +
@@ -97,7 +100,6 @@ export default class PermissionPageContainerContent extends PureComponent { return (
{items} -
{ t('revokeInPermissions') }
) } @@ -149,16 +151,7 @@ export default class PermissionPageContainerContent extends PureComponent { } else if (allIdentitiesSelected) { return t( 'connectToAll', - [ - ( - - { this.renderAccountTooltip(t('connectToAllAccounts')) } - - ), - ] + [ 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', [ - ( - - { this.getAccountDescriptor(selectedIdentities[0]) } - - ), + 'connectTo', + [ + this.getAccountDescriptor(selectedIdentities[0]), ] ) } @@ -197,7 +184,7 @@ export default class PermissionPageContainerContent extends PureComponent { > { !redirect ? ( -
+
{ !redirect ? ( - this.onCancel()} - cancelText={this.context.t('cancel')} - onSubmit={() => this.onSubmit()} - submitText={this.context.t('submit')} - submitButtonType="confirm" - buttonSizeLarge={false} - /> +
+ + this.onCancel()} + cancelText={this.context.t('cancel')} + onSubmit={() => this.onSubmit()} + submitText={this.context.t('submit')} + submitButtonType="confirm" + buttonSizeLarge={false} + /> +
) : null } diff --git a/ui/app/pages/permissions-connect/permissions-connect-footer/index.js b/ui/app/components/app/permissions-connect-footer/index.js similarity index 100% rename from ui/app/pages/permissions-connect/permissions-connect-footer/index.js rename to ui/app/components/app/permissions-connect-footer/index.js diff --git a/ui/app/pages/permissions-connect/permissions-connect-footer/index.scss b/ui/app/components/app/permissions-connect-footer/index.scss similarity index 77% rename from ui/app/pages/permissions-connect/permissions-connect-footer/index.scss rename to ui/app/components/app/permissions-connect-footer/index.scss index ff805e541daf..01e029cced23 100644 --- a/ui/app/pages/permissions-connect/permissions-connect-footer/index.scss +++ b/ui/app/components/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/ui/app/pages/permissions-connect/permissions-connect-footer/permissions-connect-footer.component.js b/ui/app/components/app/permissions-connect-footer/permissions-connect-footer.component.js similarity index 100% rename from ui/app/pages/permissions-connect/permissions-connect-footer/permissions-connect-footer.component.js rename to ui/app/components/app/permissions-connect-footer/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 index c6104aff70f3..79952abe9a39 100644 --- 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; + } } \ No newline at end of file diff --git a/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js index 9e11e6d52d8a..c15c988a6d38 100644 --- a/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js +++ b/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js @@ -35,7 +35,7 @@ export default class PermissionsConnectHeader extends Component {
{ headerTitle }
-
+
{ headerText }
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 d369ce54f8f5..aa1c6dc8aa2f 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 @@ -8,6 +8,7 @@ import Tooltip from '../../../components/ui/tooltip-v2' import { PRIMARY } from '../../../helpers/constants/common' import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display' import PermissionsConnectHeader from '../../../components/app/permissions-connect-header' +import PermissionsConnectFooter from '../../../components/app/permissions-connect-footer' export default class ChooseAccount extends Component { static propTypes = { @@ -190,20 +191,23 @@ export default class ChooseAccount extends Component { /> { this.renderAccountsListHeader() } { this.renderAccountsList() } -
- - +
+ +
+ + +
) diff --git a/ui/app/pages/permissions-connect/choose-account/index.scss b/ui/app/pages/permissions-connect/choose-account/index.scss index dec8803d7e10..8242757f9358 100644 --- a/ui/app/pages/permissions-connect/choose-account/index.scss +++ b/ui/app/pages/permissions-connect/choose-account/index.scss @@ -2,18 +2,22 @@ display: flex; flex-direction: column; align-items: center; - margin-top: 40px; - width: 428px; + width: 100%; margin-left: auto; margin-right: auto; + height: 100%; + + @media screen and (min-width: 576px) { + width: 426px; + } + &__title { @extend %header--18; } - &__text, &__text--blue, &__text--grey { + &__text, &__text-blue, &__text-grey { @extend %content-text; - line-height: 25px; } &__text-blue { @@ -26,17 +30,13 @@ } &__accounts-list { - width: 100%; + width: 92%; border: 1px solid #D0D5DA; box-sizing: border-box; border-radius: 8px; margin-top: 8px; - max-height: 338px; + max-height: 238px; overflow-y: auto; - - @media screen and (max-width: 575px) { - width: 100%; - } } &__accounts-list-header--one-item, @@ -44,7 +44,8 @@ display: flex; margin-top: 36px; width: 100%; - padding-right: 2px; + padding-left: 15px; + padding-right: 17px; } &__accounts-list-header--one-item { @@ -62,7 +63,11 @@ } &__list-check-box { - margin-right: 24px; + margin-right: 16px; + + i { + font-size: 0.8rem; + } } &__header-check-box { @@ -113,15 +118,14 @@ } &__label { - @extend %header--18; - line-height: 25px; - color: #000000; + @extend %content-text; + color: $Black-100; } &__balance { @extend %content-text; - line-height: 17px; - color: #6A737D; + font-size: 12px; + color: $Grey-500; } &__last-connected { @@ -139,11 +143,32 @@ color: $Red-400; } + &__footer-container { + width: 100%; + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: flex-end; + + @media screen and (min-width: 576px) { + flex-direction: column-reverse; + justify-content: space-between; + padding-bottom: 20px; + } + } + &__bottom-buttons { display: flex; justify-content: space-between; width: 100%; - margin-top: 16px; + padding-top: 16px; + padding-bottom: 16px; + margin-top: 8px; + border-top: 1px solid #D6D9DC; + + @media screen and (min-width: 576px) { + border-top: none; + } button { width: 124px; @@ -151,6 +176,11 @@ .btn-default { background: white; + margin-left: 16px; + } + + .btn-primary { + margin-right: 16px; } } diff --git a/ui/app/pages/permissions-connect/index.scss b/ui/app/pages/permissions-connect/index.scss index a577ea8c3488..a5263919df69 100644 --- a/ui/app/pages/permissions-connect/index.scss +++ b/ui/app/pages/permissions-connect/index.scss @@ -1,25 +1,44 @@ -@import 'permissions-connect-footer/index'; - @import 'choose-account/index'; .permissions-connect { width: 100%; + height: 100%; position: relative; background: white; + display: flex; + flex-direction: column; + + @media screen and (min-width: 576px) { + .page-container { + max-height: none; + min-height: auto; + } + } - &__page-count-wrapper { - margin-top: 26px; - margin-left: 20px; - display: flex; - justify-content: flex-end; - align-items: flex-end; + &__top-bar { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 16px 16px 0px 16px; + align-items: center; + } + + &__back { + @extend %content-text; + color: $curious-blue; + cursor: pointer; - &__page-count { - @extend %content-text; - margin-right: 30px; - font-size: 12px; - line-height: 17px; - color: #6A737D; + i { + margin-right: 10px; } } + + &__page-count { + @extend %content-text; + font-size: 12px; + color: #6A737D; + grid-column: 2; + justify-self: end; + font-weight: bold; + line-height: 21px; + } } diff --git a/ui/app/pages/permissions-connect/permissions-connect.component.js b/ui/app/pages/permissions-connect/permissions-connect.component.js index daed76c51432..3de6f9377574 100644 --- a/ui/app/pages/permissions-connect/permissions-connect.component.js +++ b/ui/app/pages/permissions-connect/permissions-connect.component.js @@ -1,7 +1,6 @@ import PropTypes from 'prop-types' import React, { Component } from 'react' import { Switch, Route } from 'react-router-dom' -import PermissionsConnectFooter from './permissions-connect-footer' import ChooseAccount from './choose-account' import { getEnvironmentType } from '../../../../app/scripts/lib/util' import { @@ -28,7 +27,6 @@ export default class PermissionConnect extends Component { nativeCurrency: PropTypes.string, permissionsRequest: PropTypes.object, addressLastConnectedMap: PropTypes.object, - requestAccountTabs: PropTypes.object, permissionsRequestId: PropTypes.string, domains: PropTypes.object, history: PropTypes.object.isRequired, @@ -44,7 +42,6 @@ export default class PermissionConnect extends Component { nativeCurrency: '', permissionsRequest: undefined, addressLastConnectedMap: {}, - requestAccountTabs: {}, permissionsRequestId: '', domains: {}, redirecting: false, @@ -71,7 +68,7 @@ export default class PermissionConnect extends Component { } removeBeforeUnload = () => { - if (getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN) { + if (getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN || getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) { window.removeEventListener('beforeunload', this.beforeUnload) } } @@ -101,8 +98,7 @@ export default class PermissionConnect extends Component { } redirectFlow (accepted) { - const { requestAccountTabs, history } = this.props - const { originName } = this.state + const { history } = this.props this.setState({ redirecting: true, @@ -113,16 +109,12 @@ export default class PermissionConnect extends Component { if (getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN) { setTimeout(async () => { const currentTab = await global.platform.currentTab() - try { - if (currentTab.active) { - await global.platform.switchToTab(requestAccountTabs[originName]) - } - } finally { - global.platform.closeTab(currentTab.id) - } + global.platform.closeTab(currentTab.id) }, 2000) } else if (getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) { - history.push(DEFAULT_ROUTE) + setTimeout(async () => { + global.platform.closeCurrentWindow() + }, 2000) } else if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) { history.push(CONNECTED_ROUTE) } @@ -142,11 +134,55 @@ export default class PermissionConnect extends Component { return history.push(DEFAULT_ROUTE) } - if (getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN) { + if (getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN || getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) { window.addEventListener('beforeunload', this.beforeUnload) } } + cancelPermissionsRequest = async (requestId) => { + const { rejectPermissionsRequest } = this.props + if (requestId) { + await rejectPermissionsRequest(requestId) + + if (getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN || getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) { + window.close() + } else if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) { + history.push(DEFAULT_ROUTE) + } + } + } + + goBack () { + const { history, connectPath } = this.props + history.push(connectPath) + } + + renderTopBar () { + const { redirecting } = this.state + const { page } = this.props + const { t } = this.context + return !redirecting + ? ( +
+ { page === '2' + ? ( +
this.goBack()}> + + { t('back') } +
+ ) + : null + } +
+ { t('xOfY', [ page, '2' ]) } +
+
+ ) + : null + } + render () { const { approvePermissionsRequest, @@ -160,7 +196,6 @@ export default class PermissionConnect extends Component { permissionsRequestId, connectPath, confirmPermissionPath, - page, targetDomainMetadata, } = this.props const { @@ -172,70 +207,50 @@ export default class PermissionConnect extends Component { return (
- { !redirecting - ? ( -
-
- { `${page}/2` } -
-
- ) - : null - } + { this.renderTopBar() } ( -
- this.selectAccounts(addresses)} - selectNewAccountViaModal={(handleAccountClick) => { - showNewAccountModal({ - onCreateNewAccount: (address) => handleAccountClick(address), - newAccountNumber, - }) - }} - addressLastConnectedMap={addressLastConnectedMap} - cancelPermissionsRequest={(requestId) => { - if (requestId) { - rejectPermissionsRequest(requestId) - this.redirectFlow(false) - } - }} - permissionsRequestId={permissionsRequestId} - selectedAccountAddresses={selectedAccountAddresses} - targetDomainMetadata={targetDomainMetadata} - /> - { !redirecting ? : null } -
+ this.selectAccounts(addresses)} + selectNewAccountViaModal={(handleAccountClick) => { + showNewAccountModal({ + onCreateNewAccount: (address) => handleAccountClick(address), + newAccountNumber, + }) + }} + addressLastConnectedMap={addressLastConnectedMap} + cancelPermissionsRequest={(requestId) => this.cancelPermissionsRequest(requestId)} + permissionsRequestId={permissionsRequestId} + selectedAccountAddresses={selectedAccountAddresses} + targetDomainMetadata={targetDomainMetadata} + /> )} /> ( -
- { - approvePermissionsRequest(request, accounts) - this.redirectFlow(true) - }} - rejectPermissionsRequest={(requestId) => { - rejectPermissionsRequest(requestId) - this.redirectFlow(false) - }} - selectedIdentities={accounts.filter((account) => selectedAccountAddresses.has(account.address))} - redirect={redirecting} - permissionRejected={ permissionAccepted === false } - cachedOrigin={originName} - /> - { !redirecting ? : null } -
+ { + approvePermissionsRequest(request, accounts) + this.redirectFlow(true) + }} + rejectPermissionsRequest={(requestId) => { + rejectPermissionsRequest(requestId) + this.redirectFlow(false) + }} + selectedIdentities={accounts.filter((account) => selectedAccountAddresses.has(account.address))} + redirect={redirecting} + permissionRejected={ permissionAccepted === false } + cachedOrigin={originName} + /> )} /> diff --git a/ui/app/pages/permissions-connect/permissions-connect.container.js b/ui/app/pages/permissions-connect/permissions-connect.container.js index a589587311b9..f32ea08f0c15 100644 --- a/ui/app/pages/permissions-connect/permissions-connect.container.js +++ b/ui/app/pages/permissions-connect/permissions-connect.container.js @@ -32,8 +32,6 @@ const mapStateToProps = (state, ownProps) => { const accountsWithLabels = getAccountsWithLabels(state) - const { requestAccountTabs = {} } = state.appState - const lastConnectedInfo = getLastConnectedInfo(state) || {} const addressLastConnectedMap = lastConnectedInfo[origin] || {} @@ -62,7 +60,6 @@ const mapStateToProps = (state, ownProps) => { originName: origin, newAccountNumber: accountsWithLabels.length + 1, nativeCurrency, - requestAccountTabs, addressLastConnectedMap, domains: getPermissionsDomains(state), connectPath, diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js index afd73c24ab8c..38043c9b0f0f 100644 --- a/ui/app/store/actions.js +++ b/ui/app/store/actions.js @@ -2217,8 +2217,16 @@ export function approvePermissionsRequest (request, accounts) { * @param {string} requestId - The id of the request to be rejected */ export function rejectPermissionsRequest (requestId) { - return () => { - background.rejectPermissionsRequest(requestId) + return (dispatch) => { + return new Promise((resolve, reject) => { + background.rejectPermissionsRequest(requestId, (err) => { + if (err) { + dispatch(displayWarning(err.message)) + reject() + } + resolve() + }) + }) } }