Merge pull request #3209 from danjm/MM-634-newui-reset-account

[NewUI] Add reset account button to new UI.

old-ui/app/css/index.css

@@ -761,4 +761,51 @@ div.message-container > div:first-child {
   right: 17.5px;
   font-family: sans-serif;
   cursor: pointer;
+}
+
+.notification-modal__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  border: 1px solid #dedede;
+  box-shadow: 0 0 2px 2px #dedede;
+  font-family: Roboto;
+}
+
+.notification-modal__header {
+  background: #f6f6f6;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 30px;
+  font-size: 22px;
+  color: #1b344d;
+  height: 79px;
+}
+
+.notification-modal__message {
+  padding: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  font-size: 17px;
+  color: #1b344d;
+}
+
+.notification-modal__buttons {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  margin-bottom: 24px;
+  padding: 0px 42px;
+}
+
+.notification-modal__buttons__btn {
+  cursor: pointer;
+}
+
+.notification-modal__link {
+  color: #2f9ae0;
 }

ui/app/components/modals/modal.js

@@ -18,6 +18,7 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
+const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -202,6 +203,18 @@ const MODALS = {
     },
   },
 
+  CONFIRM_RESET_ACCOUNT: {
+    contents: h(ConfirmResetAccount),
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '473px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),

ui/app/components/modals/notification-modal.js

@@ -9,26 +9,47 @@ class NotificationModal extends Component {
     const {
       header,
       message,
+      showCancelButton = false,
+      showConfirmButton = false,
+      hideModal,
+      onConfirm,
     } = this.props
 
+    const showButtons = showCancelButton || showConfirmButton
+
     return h('div', [
-      h('div.notification-modal-wrapper', {
+      h('div.notification-modal__wrapper', {
       }, [
 
-        h('div.notification-modal-header', {}, [
+        h('div.notification-modal__header', {}, [
           header,
         ]),
 
-        h('div.notification-modal-message-wrapper', {}, [
+        h('div.notification-modal__message-wrapper', {}, [
-          h('div.notification-modal-message', {}, [
+          h('div.notification-modal__message', {}, [
             message,
           ]),
         ]),
 
         h('div.modal-close-x', {
-          onClick: this.props.hideModal,
+          onClick: hideModal,
         }),
 
+        showButtons && h('div.notification-modal__buttons', [
+
+          showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
+            onClick: hideModal,
+          }, 'Cancel'),
+
+          showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
+            onClick: () => {
+              onConfirm()
+              hideModal()
+            },
+          }, 'Confirm'),
+
+        ]),
+
       ]),
     ])
   }
@@ -37,7 +58,10 @@ class NotificationModal extends Component {
 NotificationModal.propTypes = {
   hideModal: PropTypes.func,
   header: PropTypes.string,
-  message: PropTypes.string,
+  message: PropTypes.node,
+  showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
+  onConfirm: PropTypes.func,
 }
 
 const mapDispatchToProps = dispatch => {

ui/app/components/modals/notification-modals/confirm-reset-account.js

@@ -0,0 +1,46 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../../actions')
+const NotifcationModal = require('../notification-modal')
+
+class ConfirmResetAccount extends Component {
+  render () {
+    const { resetAccount } = this.props
+
+    return h(NotifcationModal, {
+      header: 'Are you sure you want to reset account?',
+      message: h('div', [
+
+        h('span', `Resetting is for developer use only. This button wipes the current account's transaction history,
+          which is used to calculate the current account nonce. `),
+
+        h('a.notification-modal__link', {
+          href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account',
+          target: '_blank',
+          onClick (event) { global.platform.openWindow({ url: event.target.href }) },
+        }, 'Read more.'),
+
+      ]),
+      showCancelButton: true,
+      showConfirmButton: true,
+      onConfirm: resetAccount,
+      
+    })
+  }
+}
+
+ConfirmResetAccount.propTypes = {
+  resetAccount: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    resetAccount: () => {
+      dispatch(actions.resetAccount())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount)

ui/app/css/itcss/components/modal.scss

@@ -547,38 +547,54 @@
 
 //Notification Modal
 
-.notification-modal-wrapper {
+.notification-modal {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  position: relative;
-  border: 1px solid $alto;
-  box-shadow: 0 0 2px 2px $alto;
-  font-family: Roboto;
-}
 
-.notification-modal-header {
+  &__wrapper {
-  background: $wild-sand;
+    display: flex;
-  width: 100%;
+    flex-direction: column;
-  display: flex;
+    justify-content: flex-start;
-  justify-content: center;
+    align-items: center;
-  padding: 30px;
+    position: relative;
-  font-size: 22px;
+    border: 1px solid $alto;
-  color: $nile-blue;
+    box-shadow: 0 0 2px 2px $alto;
-  height: 79px;
+    font-family: Roboto;
-}
+  }
 
-.notification-modal-message {
+  &__header {
-  padding: 20px;
+    background: $wild-sand;
-}
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 30px;
+    font-size: 22px;
+    color: $nile-blue;
+    height: 79px;
+  }
 
-.notification-modal-message {
+  &__message {
-  width: 100%;
+    padding: 20px;
-  display: flex;
+    width: 100%;
-  justify-content: center;
+    display: flex;
-  font-size: 17px;
+    justify-content: center;
-  color: $nile-blue;
+    font-size: 17px;
+    color: $nile-blue;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    margin-bottom: 24px;
+    padding: 0px 42px;
+
+    &__btn {
+      cursor: pointer;
+    }
+  }
+
+  &__link {
+    color: $curious-blue;
+  }
 }
 
 // Deposit Ether Modal

ui/app/settings.js

@@ -250,6 +250,24 @@ class Settings extends Component {
     )
   }
 
+  renderResetAccount () {
+    const { showResetAccountConfirmationModal } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', 'Reset Account'),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h('button.settings__clear-button.settings__clear-button--orange', {
+            onClick (event) {
+              event.preventDefault()
+              showResetAccountConfirmationModal()
+            },
+          }, 'Reset Account'),
+        ]),
+      ]),
+    ])
+  }
+
   renderSettingsContent () {
     const { warning, isMascara } = this.props
 
@@ -262,6 +280,7 @@ class Settings extends Component {
         this.renderStateLogs(),
         this.renderSeedWords(),
         !isMascara && this.renderOldUI(),
+        this.renderResetAccount(),
         this.renderBlockieOptIn(),
       ])
     )
@@ -387,6 +406,7 @@ Settings.propTypes = {
   displayWarning: PropTypes.func,
   revealSeedConfirmation: PropTypes.func,
   setFeatureFlagToBeta: PropTypes.func,
+  showResetAccountConfirmationModal: PropTypes.func,
   warning: PropTypes.string,
   goHome: PropTypes.func,
   isMascara: PropTypes.bool,
@@ -412,6 +432,9 @@ const mapDispatchToProps = dispatch => {
       return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
         .then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
     },
+    showResetAccountConfirmationModal: () => {
+      return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' }))
+    },
   }
 }