Improve disconnection modal messages (#7612)

* Improve disconnectAccountModalDescription and disconnectAllModalDescription messages * Update disconnectAccountModalDescription app/_locales/en/messages.json Co-Authored-By: Mark Stacey <markjstacey@gmail.com> * Improve disconnectAccount modal message clarity
MetaMask · Dec 2, 2019 · be288f4 · be288f4
1 parent 323bd9b
commit be288f4
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -421,10 +421,10 @@
     "message": "Disconnect All"
   },
   "disconnectAllModalDescription": {
-    "message": "Are you sure? You will no longer be able to interact with any of these sites."
+    "message": "Are you sure? You will be disconnected from all sites on all accounts."
   },
   "disconnectAccountModalDescription": {
-    "message": "Are you sure? You will no longer be able to interact with this site."
+    "message": "Are you sure? Your account (\"$1\") will be disconnected from this site."
   },
   "disconnectAccountQuestion": {
     "message": "Disconnect account?"

diff --git a/ui/app/components/app/modals/disconnect-account/disconnect-account.component.js b/ui/app/components/app/modals/disconnect-account/disconnect-account.component.js
@@ -8,6 +8,7 @@ export default class DisconnectAccount extends PureComponent {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     disconnectAccount: PropTypes.func.isRequired,
+    accountLabel: PropTypes.string.isRequired,
   }
 
   static contextTypes = {
@@ -16,7 +17,7 @@ export default class DisconnectAccount extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { hideModal, disconnectAccount } = this.props
+    const { hideModal, disconnectAccount, accountLabel } = this.props
 
     return (
       <Modal
@@ -26,7 +27,7 @@ export default class DisconnectAccount extends PureComponent {
       >
         <div className="disconnect-account-modal">
           <div className="disconnect-account-modal__description">
-            { t('disconnectAccountModalDescription') }
+            { t('disconnectAccountModalDescription', [ accountLabel ]) }
           </div>
           <Button
             type="primary"

diff --git a/ui/app/components/app/modals/disconnect-account/disconnect-account.container.js b/ui/app/components/app/modals/disconnect-account/disconnect-account.container.js
@@ -2,11 +2,13 @@ import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
 import DisconnectAccount from './disconnect-account.component'
+import { getCurrentAccountWithSendEtherInfo } from '../../../../selectors/selectors'
 import { removePermissionsFor } from '../../../../store/actions'
 
 const mapStateToProps = state => {
   return {
     ...state.appState.modal.modalState.props || {},
+    accountLabel: getCurrentAccountWithSendEtherInfo(state).name,
   }
 }