diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 50c70cef1..0f5750c04 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -54,9 +54,21 @@ "message": "Connect to $1", "description": "$1 is the name/origin of a site/dapp that the user can connect to metamask" }, + "connectToAll": { + "message": "Connect to all your $1", + "description": "$1 will be replaced by the translation of connectToAllAccounts" + }, + "connectToAllAccounts": { + "message": "accounts", + "description": "will replace $1 in connectToAll, completing the sentence 'connect to all of your accounts', will be text that shows list of accounts on hover" + }, "connectToMultiple": { - "message": "Connect to $1 accounts", - "description": "$1 is the number of accounts to connect to" + "message": "Connect to $1", + "description": "$1 will be replaced by the translation of connectToMultipleNumberOfAccounts" + }, + "connectToMultipleNumberOfAccounts": { + "message": "$1 accounts", + "description": "$1 is the number of accounts to which the site/dapp is asking to connect; this will substitute $1 in connectToMultiple" }, "contractInteraction": { "message": "Contract Interaction" @@ -1025,6 +1037,10 @@ "personalAddressDetected": { "message": "Personal address detected. Input the token contract address." }, + "plusXMore": { + "message": "+ $1 more", + "description": "$1 is a number of additional but unshown items in a list- this message will be shown in place of those items" + }, "prev": { "message": "Prev" }, diff --git a/ui/app/components/app/permission-page-container/index.scss b/ui/app/components/app/permission-page-container/index.scss index 08e7465d8..6daf9774b 100644 --- a/ui/app/components/app/permission-page-container/index.scss +++ b/ui/app/components/app/permission-page-container/index.scss @@ -3,7 +3,7 @@ border: none; box-shadow: none; margin-top: 45px; - width: 466px; + width: 488px; min-height: 468px; &__header { @@ -106,6 +106,15 @@ padding: 0; } } + + &__tooltip-body { + display: 'flex'; + flex-direction: 'column'; + } + + &__bold-title-elements { + font-weight: bold; + } } .permission-result { 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 8360548e9..9b31264a2 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 @@ -3,6 +3,7 @@ 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' import classnames from 'classnames' export default class PermissionPageContainerContent extends PureComponent { @@ -13,6 +14,7 @@ export default class PermissionPageContainerContent extends PureComponent { permissionsDescriptions: PropTypes.object.isRequired, onPermissionToggle: PropTypes.func.isRequired, selectedIdentities: PropTypes.array, + allIdentitiesSelected: PropTypes.bool, redirect: PropTypes.bool, permissionRejected: PropTypes.bool, } @@ -21,6 +23,7 @@ export default class PermissionPageContainerContent extends PureComponent { redirect: null, permissionRejected: null, selectedIdentities: [], + allIdentitiesSelected: false, } static contextTypes = { @@ -99,26 +102,92 @@ export default class PermissionPageContainerContent extends PureComponent { ) } - render () { - const { domainMetadata, redirect, permissionRejected, selectedIdentities } = this.props + getAccountDescriptor (identity) { + return `${identity.label} (...${identity.address.slice(identity.address.length - 4)})` + } + + renderAccountTooltip (textContent) { + const { selectedIdentities } = this.props + const { t } = this.context + + return ( + + { selectedIdentities.slice(0, 6).map((identity, index) => { + return ( +
+ { this.getAccountDescriptor(identity) } +
+ ) + }) } + { selectedIdentities.length > 6 + ? t('plusXMore', [ selectedIdentities.length - 6 ]) + : null + } + + )} + > + { textContent } +
+ ) + } + + getTitle () { + const { domainMetadata, redirect, permissionRejected, selectedIdentities, allIdentitiesSelected } = this.props const { t } = this.context - let titleArgs if (redirect && permissionRejected) { - titleArgs = [ 'cancelledConnectionWithMetaMask' ] + return t('cancelledConnectionWithMetaMask') } else if (redirect) { - titleArgs = [ 'connectingWithMetaMask' ] + return t('connectingWithMetaMask') } else if (domainMetadata.extensionId) { - titleArgs = [ 'externalExtension', [domainMetadata.extensionId] ] + return t('externalExtension', [domainMetadata.extensionId]) + } else if (allIdentitiesSelected) { + return t( + 'connectToAll', + [ + ( + + { this.renderAccountTooltip(t('connectToAllAccounts')) } + + ), + ] + ) } else if (selectedIdentities.length > 1) { - titleArgs = ['connectToMultiple', [ selectedIdentities.length ] ] + return t( + 'connectToMultiple', + [ + this.renderAccountTooltip(t('connectToMultipleNumberOfAccounts', [ selectedIdentities.length ])), + ] + ) } else { - titleArgs = [ + return t( 'connectTo', [ - `${selectedIdentities[0].label} (...${selectedIdentities[0].address.slice(selectedIdentities[0].address.length - 4)})`, - ], - ] + ( + + { this.getAccountDescriptor(selectedIdentities[0]) } + + ), + ] + ) } + } + + render () { + const { domainMetadata, redirect } = this.props + const { t } = this.context + + const title = this.getTitle() return (
{ !redirect ? ( 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 ddad61ebf..2c2e5ec53 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 @@ -3,15 +3,20 @@ import PermissionPageContainer from './permission-page-container.component' import { getPermissionsDescriptions, getTargetDomainMetadata, + getMetaMaskIdentities, } from '../../../selectors/selectors' const mapStateToProps = (state, ownProps) => { - const { request, cachedOrigin } = ownProps + const { request, cachedOrigin, selectedIdentities } = ownProps const targetDomainMetadata = getTargetDomainMetadata(state, request, cachedOrigin) + const allIdentities = getMetaMaskIdentities(state) + const allIdentitiesSelected = Object.keys(selectedIdentities).length === Object.keys(allIdentities).length + return { permissionsDescriptions: getPermissionsDescriptions(state), targetDomainMetadata, + allIdentitiesSelected, } }