diff options
Diffstat (limited to 'ui/app/components')
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; } } } |