Switch existing modals from using Notification to Modal. Remove Notification component. Add CancelTransaction modal

7 files changed, 195 insertions, 0 deletions

diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
new file mode 100644
index 000000000..56765698e
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import CurrencyDisplay from '../../../currency-display'
+import { ETH } from '../../../../constants/common'
+
+export default class CancelTransaction extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    value: PropTypes.string,
+  }
+
+  render () {
+    const { className, value } = this.props
+    console.log('VALUE', value)
+
+    return (
+      <div className={classnames('cancel-transaction-gas-fee', className)}>
+        <CurrencyDisplay
+          className="cancel-transaction-gas-fee__eth"
+          currency={ETH}
+          value={value}
+          numberOfDecimals={6}
+        />
+        <CurrencyDisplay
+          className="cancel-transaction-gas-fee__fiat"
+          value={value}
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
new file mode 100644
index 000000000..1a9ae2e07
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
@@ -0,0 +1 @@
+export { default } from './cancel-transaction-gas-fee.component'
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
new file mode 100644
index 000000000..ce81dd448
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
@@ -0,0 +1,17 @@
+.cancel-transaction-gas-fee {
+  background: #F1F4F9;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+
+  &__eth {
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
+
+  &__fiat {
+    font-size: .75rem;
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
new file mode 100644
index 000000000..f5f0ea783
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
@@ -0,0 +1,71 @@
+import React, { PureComponent } from 'react'
+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 = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    createCancelTransaction: PropTypes.func,
+    hideModal: PropTypes.func,
+    showTransactionConfirmedModal: PropTypes.func,
+    transactionStatus: PropTypes.string,
+    defaultNewGasPrice: PropTypes.string,
+  }
+
+  componentDidUpdate () {
+    const { transactionStatus, showTransactionConfirmedModal } = this.props
+
+    if (transactionStatus !== SUBMITTED_STATUS) {
+      showTransactionConfirmedModal()
+      return
+    }
+  }
+
+  handleSubmit = async () => {
+    const { createCancelTransaction, hideModal } = this.props
+
+    await createCancelTransaction()
+    hideModal()
+  }
+
+  handleCancel = () => {
+    this.props.hideModal()
+  }
+
+  render () {
+    const { t } = this.context
+    const { defaultNewGasPrice: gasPrice } = this.props
+    const newGasFee = getHexGasTotal({ gasPrice, gasLimit: decimalToHex(21000) })
+
+    return (
+      <Modal
+        headerText={t('attemptToCancel')}
+        onSubmit={this.handleSubmit}
+        onCancel={this.handleCancel}
+        submitText={t('yesLetsTry')}
+        cancelText={t('nevermind')}
+        submitType="secondary"
+      >
+        <div>
+          <div className="cancel-transaction__title">
+            { t('cancellationGasFee') }
+          </div>
+          <CancelTransactionGasFee
+            className="cancel-transaction__cancel-transaction-gas-fee-container"
+            value={newGasFee}
+          />
+          <div className="cancel-transaction__description">
+            { t('attemptToCancelDescription') }
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
new file mode 100644
index 000000000..15bff4bc6
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
@@ -0,0 +1,55 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import R from 'ramda'
+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'
+
+const mapStateToProps = (state, ownProps) => {
+  const { metamask } = state
+  const { transactionId, originalGasPrice } = ownProps
+  const { selectedAddressTxList } = metamask
+  const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
+  const transactionStatus = transaction ? transaction.status : ''
+
+  const defaultNewGasPrice = bnToHex(multiplyCurrencies(originalGasPrice, 1.1))
+
+  return {
+    transactionId,
+    transactionStatus,
+    originalGasPrice,
+    defaultNewGasPrice,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+    createCancelTransaction: txId => dispatch(createCancelTransaction(txId)),
+    showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { transactionId, ...restStateProps } = stateProps
+  const {
+    createCancelTransaction: dispatchCreateCancelTransaction,
+    ...restDispatchProps
+  } = dispatchProps
+
+  return {
+    ...restStateProps,
+    ...restDispatchProps,
+    ...ownProps,
+    createCancelTransaction: newGasPrice => {
+      return dispatchCreateCancelTransaction(transactionId, newGasPrice)
+    },
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+)(CancelTransaction)
diff --git a/ui/app/components/modals/cancel-transaction/index.js b/ui/app/components/modals/cancel-transaction/index.js
new file mode 100644
index 000000000..7abc871ee
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/index.js
@@ -0,0 +1 @@
+export { default } from './cancel-transaction.container'
diff --git a/ui/app/components/modals/cancel-transaction/index.scss b/ui/app/components/modals/cancel-transaction/index.scss
new file mode 100644
index 000000000..62e8e36fd
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/index.scss
@@ -0,0 +1,18 @@
+@import './cancel-transaction-gas-fee/index';
+
+.cancel-transaction {
+  &__title {
+    font-weight: 500;
+    padding-bottom: 16px;
+    text-align: center;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+
+  &__cancel-transaction-gas-fee-container {
+    margin-bottom: 16px;
+  }
+}
\ No newline at end of file