Merge pull request #4408 from MetaMask/v4.7.0rc2

Version 4.7.0 - rc2

9 files changed, 132 insertions, 9 deletions

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index d9885daf5..5607cf051 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -25,7 +25,7 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
     },
     hideModal: () => dispatch(actions.hideModal()),
-    saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
+    setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
   }
 }
 
@@ -49,7 +49,7 @@ AccountDetailsModal.prototype.render = function () {
     selectedIdentity,
     network,
     showExportPrivateKeyModal,
-    saveAccountLabel,
+    setAccountLabel,
   } = this.props
   const { name, address } = selectedIdentity
 
@@ -57,7 +57,7 @@ AccountDetailsModal.prototype.render = function () {
       h(EditableLabel, {
         className: 'account-modal__name',
         defaultValue: name,
-        onSubmit: label => saveAccountLabel(address, label),
+        onSubmit: label => setAccountLabel(address, label),
       }),
 
       h(QrView, {
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index c79645dbf..5681a3cad 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -18,8 +18,8 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
-    saveAccountLabel: (account, label) => {
-      dispatch(actions.saveAccountLabel(account, label))
+    setAccountLabel: (account, label) => {
+      dispatch(actions.setAccountLabel(account, label))
     },
   }
 }
@@ -41,7 +41,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameMod
 
 
 EditAccountNameModal.prototype.render = function () {
-  const { hideModal, saveAccountLabel, identity } = this.props
+  const { hideModal, setAccountLabel, identity } = this.props
 
   return h('div', {}, [
     h('div.flex-column.edit-account-name-modal-content', {
@@ -69,7 +69,7 @@ EditAccountNameModal.prototype.render = function () {
       h('button.btn-clear.edit-account-name-modal-save-button.allcaps', {
         onClick: () => {
           if (this.state.inputText.length !== 0) {
-            saveAccountLabel(identity.address, this.state.inputText)
+            setAccountLabel(identity.address, this.state.inputText)
             hideModal()
           }
         },
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
new file mode 100644
index 000000000..ec6207f7e
--- /dev/null
+++ b/ui/app/components/modals/index.scss
@@ -0,0 +1 @@
+@import './transaction-confirmed/index';
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 43dcd20ae..841189277 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -20,6 +20,7 @@ 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 TransactionConfirmed = require('./transaction-confirmed')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -265,6 +266,37 @@ const MODALS = {
     },
   },
 
+  TRANSACTION_CONFIRMED: {
+    disableBackdropClick: true,
+    contents: [
+      h(TransactionConfirmed, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '100%',
+      height: '100%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '0',
+      display: 'flex',
+    },
+    laptopModalStyle: {
+      width: '344px',
+      transform: 'translate3d(-50%, 0, 0px)',
+      top: '15%',
+      border: '1px solid #CCCFD1',
+      borderRadius: '8px',
+      backgroundColor: '#FFFFFF',
+      boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
+    },
+    contentStyle: {
+      borderRadius: '8px',
+      height: '100%',
+    },
+  },
+
   DEFAULT: {
     contents: [],
     mobileModalStyle: {},
@@ -306,7 +338,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
 Modal.prototype.render = function () {
   const modal = MODALS[this.props.modalState.name || 'DEFAULT']
 
-  const children = modal.contents
+  const { contents: children, disableBackdropClick = false } = modal
   const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
   const contentStyle = modal.contentStyle || {}
 
@@ -326,6 +358,7 @@ Modal.prototype.render = function () {
       modalStyle,
       contentStyle,
       backdropStyle: BACKDROPSTYLE,
+      closeOnClick: !disableBackdropClick,
     },
     children,
   )
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 0635b3f72..a66a3ed4a 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -95,7 +95,7 @@ const mapDispatchToProps = dispatch => {
       dispatch(actions.addNewAccount())
         .then((newAccountAddress) => {
           if (newAccountName) {
-            dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+            dispatch(actions.setAccountLabel(newAccountAddress, newAccountName))
           }
           dispatch(actions.hideModal())
         })
diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js
new file mode 100644
index 000000000..c8db91388
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/index.js
@@ -0,0 +1,2 @@
+import TransactionConfirmed from './transaction-confirmed.container'
+module.exports = TransactionConfirmed
diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/modals/transaction-confirmed/index.scss
new file mode 100644
index 000000000..f8cd1f212
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/index.scss
@@ -0,0 +1,21 @@
+.transaction-confirmed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px;
+
+  &__title {
+    font-size: 2rem;
+    padding: 16px 0;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+    line-height: 1.5rem;
+  }
+
+  @media screen and (max-width: 575px) {
+    justify-content: center;
+  }
+}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
new file mode 100644
index 000000000..8d3b288ae
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../button'
+
+class TransactionConfirmed extends Component {
+  render () {
+    const { t } = this.context
+
+    return (
+      <div className="page-container page-container--full-width page-container--full-height">
+        <div className="page-container__content transaction-confirmed">
+          <img src="images/check-icon.svg" />
+          <div className="transaction-confirmed__title">
+            { `${t('confirmed')}!` }
+          </div>
+          <div className="transaction-confirmed__description">
+            { t('initialTransactionConfirmed') }
+          </div>
+        </div>
+        <div className="page-container__footer">
+          <Button
+            type="primary"
+            className="page-container__footer-button"
+            onClick={() => {
+              this.props.hideModal()
+              this.props.onHide()
+            }}
+          >
+            { t('ok') }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
+
+TransactionConfirmed.propTypes = {
+  hideModal: PropTypes.func.isRequired,
+  onHide: PropTypes.func.isRequired,
+}
+
+TransactionConfirmed.contextTypes = {
+  t: PropTypes.func,
+}
+
+export default TransactionConfirmed
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
new file mode 100644
index 000000000..63872f7f2
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
@@ -0,0 +1,20 @@
+import { connect } from 'react-redux'
+import TransactionConfirmed from './transaction-confirmed.component'
+
+const { hideModal } = require('../../../actions')
+
+const mapStateToProps = state => {
+  const { appState: { modal: { modalState: { props } } } } = state
+  const { onHide } = props
+  return {
+    onHide,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TransactionConfirmed)