Fix multiplyCurrencies. Add onClose prop for Modal component. Remove hideModal from modal components.

app/_locales/en/messages.json

@@ -1244,7 +1244,7 @@
     "message": "What's this?"
   },
   "yesLetsTry": {
-    "message": "yes, let's try"
+    "message": "Yes, let's try"
   },
   "youNeedToAllowCameraAccess": {
     "message": "You need to allow camera access to use this feature."

ui/app/components/modal/modal.component.js

@@ -7,6 +7,7 @@ export default class Modal extends PureComponent {
     children: PropTypes.node,
     // Header text
     headerText: PropTypes.string,
+    onClose: PropTypes.func,
     // Submit button (right button)
     onSubmit: PropTypes.func,
     submitType: PropTypes.string,
@@ -22,26 +23,11 @@ export default class Modal extends PureComponent {
     cancelType: 'default',
   }
 
-  handleClose = () => {
-    const { onCancel, onSubmit } = this.props
-
-    /**
-     * The close button should be used to dismiss the modal, without performing any actions, which
-     * is typically what props.onCancel does. However, if props.onCancel is undefined, that should
-     * mean that the modal is a simple notification modal and props.onSubmit can be used to dismiss
-     * it.
-     */
-    if (onCancel && typeof onCancel === 'function') {
-      onCancel()
-    } else {
-      onSubmit()
-    }
-  }
-
   render () {
     const {
       children,
       headerText,
+      onClose,
       onSubmit,
       submitType,
       submitText,
@@ -60,7 +46,7 @@ export default class Modal extends PureComponent {
               </div>
               <div
                 className="modal-container__header-close"
-                onClick={this.handleClose}
+                onClick={onClose}
               />
             </div>
           )

ui/app/components/modal/tests/modal.component.test.js

@@ -88,6 +88,7 @@ describe('Modal Component', () => {
         onSubmit={handleSubmit}
         submitText="Submit"
         headerText="My Header"
+        onClose={handleCancel}
       />
     )
 
@@ -99,19 +100,4 @@ describe('Modal Component', () => {
     assert.equal(handleCancel.callCount, 1)
     assert.equal(handleSubmit.callCount, 0)
   })
-
-  it('should call onSubmit when onCancel is undefined and the header close button is clicked', () => {
-    const handleSubmit = sinon.spy()
-    const wrapper = shallow(
-      <Modal
-        onSubmit={handleSubmit}
-        submitText="Submit"
-        headerText="My Header"
-      />
-    )
-
-    assert.equal(handleSubmit.callCount, 0)
-    wrapper.find('.modal-container__header-close').simulate('click')
-    assert.equal(handleSubmit.callCount, 1)
-  })
 })

ui/app/components/modals/cancel-transaction/cancel-transaction.component.js

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types'
 import Modal from '../../modal'
 import CancelTransactionGasFee from './cancel-transaction-gas-fee'
 import { SUBMITTED_STATUS } from '../../../constants/transactions'
-import { decimalToHex } from '../../../helpers/conversions.util'
-import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
 
 export default class CancelTransaction extends PureComponent {
   static contextTypes = {
@@ -16,7 +14,7 @@ export default class CancelTransaction extends PureComponent {
     hideModal: PropTypes.func,
     showTransactionConfirmedModal: PropTypes.func,
     transactionStatus: PropTypes.string,
-    defaultNewGasPrice: PropTypes.string,
+    newGasFee: PropTypes.string,
   }
 
   componentDidUpdate () {
@@ -41,12 +39,12 @@ export default class CancelTransaction extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { defaultNewGasPrice: gasPrice } = this.props
-    const newGasFee = getHexGasTotal({ gasPrice, gasLimit: decimalToHex(21000) })
+    const { newGasFee } = this.props
 
     return (
       <Modal
         headerText={t('attemptToCancel')}
+        onClose={this.handleCancel}
         onSubmit={this.handleSubmit}
         onCancel={this.handleCancel}
         submitText={t('yesLetsTry')}

ui/app/components/modals/cancel-transaction/cancel-transaction.container.js

@@ -1,32 +1,39 @@
 import { connect } from 'react-redux'
 import { compose } from 'recompose'
-import R from 'ramda'
+import ethUtil from 'ethereumjs-util'
 import { multiplyCurrencies } from '../../../conversion-util'
-import { bnToHex } from '../../../helpers/conversions.util'
 import withModalProps from '../../../higher-order-components/with-modal-props'
 import CancelTransaction from './cancel-transaction.component'
-import { showModal, hideModal, createCancelTransaction } from '../../../actions'
+import { showModal, createCancelTransaction } from '../../../actions'
+import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
 
 const mapStateToProps = (state, ownProps) => {
   const { metamask } = state
   const { transactionId, originalGasPrice } = ownProps
   const { selectedAddressTxList } = metamask
-  const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
+  const transaction = selectedAddressTxList.find(({ id }) => id === transactionId)
   const transactionStatus = transaction ? transaction.status : ''
 
-  const defaultNewGasPrice = bnToHex(multiplyCurrencies(originalGasPrice, 1.1))
+  const defaultNewGasPrice = ethUtil.addHexPrefix(
+    multiplyCurrencies(originalGasPrice, 1.1, {
+      toNumericBase: 'hex',
+      multiplicandBase: 16,
+      multiplierBase: 10,
+    })
+  )
+
+  const newGasFee = getHexGasTotal({ gasPrice: defaultNewGasPrice, gasLimit: '0x5208' })
 
   return {
     transactionId,
     transactionStatus,
     originalGasPrice,
-    defaultNewGasPrice,
+    newGasFee,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    hideModal: () => dispatch(hideModal()),
     createCancelTransaction: txId => dispatch(createCancelTransaction(txId)),
     showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })),
   }

ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js

@@ -12,7 +12,7 @@ describe('CancelTransaction Component', () => {
   it('should render a CancelTransaction modal', () => {
     const wrapper = shallow(
       <CancelTransaction
-        defaultNewGasPrice="0x3b9aca00"
+        newGasFee="0x1319718a5000"
       />,
       { context: { t }}
     )

ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js

@@ -5,7 +5,7 @@ import { addressSummary } from '../../../util'
 import Identicon from '../../identicon'
 import genAccountLink from '../../../../lib/account-link'
 
-class ConfirmRemoveAccount extends Component {
+export default class ConfirmRemoveAccount extends Component {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     removeAccount: PropTypes.func.isRequired,
@@ -17,11 +17,15 @@ class ConfirmRemoveAccount extends Component {
     t: PropTypes.func,
   }
 
-  handleRemove () {
+  handleRemove = () => {
     this.props.removeAccount(this.props.identity.address)
       .then(() => this.props.hideModal())
   }
 
+  handleCancel = () => {
+    this.props.hideModal()
+  }
+
   renderSelectedAccount () {
     const { identity } = this.props
     return (
@@ -60,8 +64,9 @@ class ConfirmRemoveAccount extends Component {
     return (
       <Modal
         headerText={`${t('removeAccount')}?`}
-        onSubmit={() => this.handleRemove()}
-        onCancel={() => this.props.hideModal()}
+        onClose={this.handleCancel}
+        onSubmit={this.handleRemove}
+        onCancel={this.handleCancel}
         submitText={t('remove')}
         cancelText={t('nevermind')}
         submitType="secondary"
@@ -82,5 +87,3 @@ class ConfirmRemoveAccount extends Component {
     )
   }
 }
-
-export default ConfirmRemoveAccount

ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js

@@ -2,8 +2,7 @@ import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import ConfirmRemoveAccount from './confirm-remove-account.component'
 import withModalProps from '../../../higher-order-components/with-modal-props'
-
-const { hideModal, removeAccount } = require('../../../actions')
+import { removeAccount } from '../../../actions'
 
 const mapStateToProps = state => {
   return {
@@ -13,7 +12,6 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    hideModal: () => dispatch(hideModal()),
     removeAccount: (address) => dispatch(removeAccount(address)),
   }
 }

ui/app/components/modals/transaction-details/transaction-details.component.js

@@ -18,15 +18,20 @@ export default class TransactionConfirmed extends PureComponent {
     showCancel: PropTypes.bool,
   }
 
+  handleSubmit = () => {
+    this.props.hideModal()
+  }
+
   render () {
     const { t } = this.context
-    const { transaction, onRetry, showRetry, onCancel, showCancel, hideModal } = this.props
+    const { transaction, onRetry, showRetry, onCancel, showCancel } = this.props
     const { txParams: { nonce } = {} } = transaction
     const decimalNonce = nonce && hexToDecimal(nonce)
 
     return (
       <Modal
-        onSubmit={() => hideModal()}
+        onSubmit={this.handleSubmit}
+        onClose={this.handleSubmit}
         submitText={t('ok')}
         headerText={t('transactionWithNonce', [`#${decimalNonce}`])}
       >

ui/app/components/transaction-list-item/index.scss

@@ -125,7 +125,7 @@
 
     &--show {
       max-height: 1000px;
-      transition: max-height 300ms ease-out;
+      transition: max-height 700ms ease-out;
     }
   }
 }