aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/modal/modal.component.js20
-rw-r--r--ui/app/components/modal/tests/modal.component.test.js16
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction.component.js8
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction.container.js21
-rw-r--r--ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js2
-rw-r--r--ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js15
-rw-r--r--ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js4
-rw-r--r--ui/app/components/modals/transaction-details/transaction-details.component.js9
-rw-r--r--ui/app/components/transaction-list-item/index.scss2
9 files changed, 40 insertions, 57 deletions
diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js
index f9d8c5867..2a75b559b 100644
--- a/ui/app/components/modal/modal.component.js
+++ b/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>
)
diff --git a/ui/app/components/modal/tests/modal.component.test.js b/ui/app/components/modal/tests/modal.component.test.js
index 31457751f..8cce1a808 100644
--- a/ui/app/components/modal/tests/modal.component.test.js
+++ b/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)
- })
})
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 }}
)
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
index 483c7062f..eff94a54a 100644
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
+++ b/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
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
index 59d48400d..45c6654ab 100644
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
+++ b/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)),
}
}
diff --git a/ui/app/components/modals/transaction-details/transaction-details.component.js b/ui/app/components/modals/transaction-details/transaction-details.component.js
index 7eec028fe..ef438d01f 100644
--- a/ui/app/components/modals/transaction-details/transaction-details.component.js
+++ b/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}`])}
>
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
index df513bb0c..9d694546b 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/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;
}
}
}