Add submitDisabled prop to Modals. Disable submit button when creating a cancel transaction (#5910)

2 files changed, 10 insertions, 1 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 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 }}
     )