aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@users.noreply.github.com>2018-12-12 07:04:57 +0800
committerGitHub <noreply@github.com>2018-12-12 07:04:57 +0800
commit9c2401965911aa78496a8168a76e9c0c2e4c86b5 (patch)
treeae2f5031da161275cc4600e422e6016d8b2c510c /ui/app
parentd6fa967b1fe2d5ea9ed997878610081a4bce5f49 (diff)
downloadtangerine-wallet-browser-9c2401965911aa78496a8168a76e9c0c2e4c86b5.tar
tangerine-wallet-browser-9c2401965911aa78496a8168a76e9c0c2e4c86b5.tar.gz
tangerine-wallet-browser-9c2401965911aa78496a8168a76e9c0c2e4c86b5.tar.bz2
tangerine-wallet-browser-9c2401965911aa78496a8168a76e9c0c2e4c86b5.tar.lz
tangerine-wallet-browser-9c2401965911aa78496a8168a76e9c0c2e4c86b5.tar.xz
tangerine-wallet-browser-9c2401965911aa78496a8168a76e9c0c2e4c86b5.tar.zst
tangerine-wallet-browser-9c2401965911aa78496a8168a76e9c0c2e4c86b5.zip
Add submitDisabled prop to Modals. Disable submit button when creating a cancel transaction (#5910)
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/modal/modal.component.js3
-rw-r--r--ui/app/components/modal/tests/modal.component.test.js32
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction.component.js10
-rw-r--r--ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js1
4 files changed, 44 insertions, 2 deletions
diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js
index 2a75b559b..c73f8d903 100644
--- a/ui/app/components/modal/modal.component.js
+++ b/ui/app/components/modal/modal.component.js
@@ -12,6 +12,7 @@ export default class Modal extends PureComponent {
onSubmit: PropTypes.func,
submitType: PropTypes.string,
submitText: PropTypes.string,
+ submitDisabled: PropTypes.bool,
// Cancel button (left button)
onCancel: PropTypes.func,
cancelType: PropTypes.string,
@@ -31,6 +32,7 @@ export default class Modal extends PureComponent {
onSubmit,
submitType,
submitText,
+ submitDisabled,
onCancel,
cancelType,
cancelText,
@@ -69,6 +71,7 @@ export default class Modal extends PureComponent {
<Button
type={submitType}
onClick={onSubmit}
+ disabled={submitDisabled}
className="modal-container__footer-button"
>
{ submitText }
diff --git a/ui/app/components/modal/tests/modal.component.test.js b/ui/app/components/modal/tests/modal.component.test.js
index 8cce1a808..2ced3f32d 100644
--- a/ui/app/components/modal/tests/modal.component.test.js
+++ b/ui/app/components/modal/tests/modal.component.test.js
@@ -1,6 +1,6 @@
import React from 'react'
import assert from 'assert'
-import { shallow } from 'enzyme'
+import { mount, shallow } from 'enzyme'
import sinon from 'sinon'
import Modal from '../modal.component'
import Button from '../../button'
@@ -100,4 +100,34 @@ describe('Modal Component', () => {
assert.equal(handleCancel.callCount, 1)
assert.equal(handleSubmit.callCount, 0)
})
+
+ it('should disable the submit button if submitDisabled is true', () => {
+ const handleCancel = sinon.spy()
+ const handleSubmit = sinon.spy()
+ const wrapper = mount(
+ <Modal
+ onCancel={handleCancel}
+ cancelText="Cancel"
+ onSubmit={handleSubmit}
+ submitText="Submit"
+ submitDisabled={true}
+ headerText="My Header"
+ onClose={handleCancel}
+ />
+ )
+
+ const buttons = wrapper.find(Button)
+ assert.equal(buttons.length, 2)
+ const cancelButton = buttons.at(0)
+ const submitButton = buttons.at(1)
+
+ assert.equal(handleCancel.callCount, 0)
+ cancelButton.simulate('click')
+ assert.equal(handleCancel.callCount, 1)
+
+ assert.equal(submitButton.props().disabled, true)
+ assert.equal(handleSubmit.callCount, 0)
+ submitButton.simulate('click')
+ assert.equal(handleSubmit.callCount, 0)
+ })
})
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 8b00cb9b9..8fd7b2679 100644
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
@@ -17,6 +17,10 @@ export default class CancelTransaction extends PureComponent {
newGasFee: PropTypes.string,
}
+ state = {
+ busy: false,
+ }
+
componentDidUpdate () {
const { transactionStatus, showTransactionConfirmedModal } = this.props
@@ -29,8 +33,10 @@ export default class CancelTransaction extends PureComponent {
handleSubmit = async () => {
const { createCancelTransaction, hideModal } = this.props
+ this.setState({ busy: true })
+
await createCancelTransaction()
- hideModal()
+ this.setState({ busy: false }, () => hideModal())
}
handleCancel = () => {
@@ -40,6 +46,7 @@ export default class CancelTransaction extends PureComponent {
render () {
const { t } = this.context
const { newGasFee } = this.props
+ const { busy } = this.state
return (
<Modal
@@ -50,6 +57,7 @@ export default class CancelTransaction extends PureComponent {
submitText={t('yesLetsTry')}
cancelText={t('nevermind')}
submitType="secondary"
+ submitDisabled={busy}
>
<div>
<div className="cancel-transaction__title">
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 858fb01a8..345951b0f 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
@@ -34,6 +34,7 @@ describe('CancelTransaction Component', () => {
defaultNewGasPrice="0x3b9aca00"
createCancelTransaction={createCancelTransactionSpy}
hideModal={hideModalSpy}
+ showTransactionConfirmedModal={() => {}}
/>,
{ context: { t }}
)