3 files changed, 18 insertions, 13 deletions
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
index a30fbea96..8b00cb9b9 100644
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
+++ b/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')}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
index 15bff4bc6..eede8b1ee 100644
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
+++ b/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' })),
   }
diff --git a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js
index 053223467..858fb01a8 100644
--- a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js
+++ b/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 }}
     )