fix: Prevent rental modals from closing (#1053)

* fix: Prevent rental modals from closing * fix: Use function instead of undefined
decentraland · Nov 29, 2022 · 3fde6d4 · 3fde6d4
1 parent 6f6cd0b
commit 3fde6d4
Show file tree

Hide file tree

Showing 11 changed files with 14 additions and 91 deletions.
diff --git a/webapp/src/components/Modals/ConfirmRentModal/ConfirmRentModal.tsx b/webapp/src/components/Modals/ConfirmRentModal/ConfirmRentModal.tsx
@@ -62,7 +62,7 @@ const ConfirmRentModal = ({
       size="small"
       className={styles.modal}
       name={t('rental_modal.confirm_rent_step.title')}
-      onClose={onClose}
+      onClose={!isLoading ? onClose : undefined}
     >
       <ModalNavigation title={t('rental_modal.confirm_rent_step.title')} />
       <Modal.Content>

diff --git a/webapp/src/components/Modals/RentalListingModal/AuthorizationStep/AuthorizationStep.tsx b/webapp/src/components/Modals/RentalListingModal/AuthorizationStep/AuthorizationStep.tsx
@@ -30,6 +30,7 @@ const AuthorizationStep = (props: Props) => {
 
   // State
   const [showError, setShowError] = useState(false)
+  const isLoading = isConfirmingAuthorization || isAuthorizing
 
   // Authorization
   const rentalContractData = getContract(ContractName.Rentals, nft.chainId)
@@ -70,7 +71,7 @@ const AuthorizationStep = (props: Props) => {
     <>
       <ModalNavigation
         title={t('rental_modal.authorization_step.title')}
-        onClose={onCancel}
+        onClose={!isLoading ? onCancel : undefined}
       />
       <Modal.Content>
         <div className={styles.notice}>
@@ -133,17 +134,14 @@ const AuthorizationStep = (props: Props) => {
         ) : (
           <Button
             primary
-            loading={isConfirmingAuthorization || isAuthorizing}
+            loading={isLoading}
             onClick={handleSubmit}
-            disabled={isConfirmingAuthorization || isAuthorizing}
+            disabled={isLoading}
           >
             {t('global.proceed')}
           </Button>
         )}
-        <Button
-          onClick={handleCancel}
-          disabled={isConfirmingAuthorization || isAuthorizing}
-        >
+        <Button onClick={handleCancel} disabled={isLoading}>
           {t('global.cancel')}
         </Button>
         {showError && (

diff --git a/webapp/src/components/Modals/RentalListingModal/ConfirmationStep/ConfirmationStep.tsx b/webapp/src/components/Modals/RentalListingModal/ConfirmationStep/ConfirmationStep.tsx
@@ -35,7 +35,7 @@ const ConfirmationStep = (props: Props) => {
     <>
       <ModalNavigation
         title={t('rental_modal.confirmation_step.title')}
-        onClose={onCancel}
+        onClose={!isSigning ? onCancel : undefined}
       />
       <Modal.Content>
         <div className={styles.notice}>

diff --git a/...pp/src/components/Modals/RentalListingModal/EditConfirmationStep/EditConfirmationStep.tsx b/...pp/src/components/Modals/RentalListingModal/EditConfirmationStep/EditConfirmationStep.tsx
@@ -22,6 +22,10 @@ const EditConfirmationStep = (props: Props) => {
 
   const [hasTriggeredStepOne, setHasTriggeredStepOne] = useState(false)
   const [isStepOneCompleted, setIsStepOneCompleted] = useState(false)
+  const isLoading =
+    isSubmittingRemoveTransaction ||
+    isRemoveTransactionBeingConfirmed ||
+    isSigning
 
   useEffect(() => {
     if (isRemoveTransactionBeingConfirmed) {
@@ -59,7 +63,7 @@ const EditConfirmationStep = (props: Props) => {
     <>
       <ModalNavigation
         title={t('rental_modal.confirmation_edit_step.title')}
-        onClose={onCancel}
+        onClose={!isLoading ? onCancel : undefined}
       />
       <Modal.Content>
         <div className={styles.notice}>

diff --git a/webapp/src/components/Modals/RentalListingModal/RentalListingModal.tsx b/webapp/src/components/Modals/RentalListingModal/RentalListingModal.tsx
@@ -77,7 +77,7 @@ const RentalListingModal = (props: Props) => {
         styles.modal,
         isConfirmingEditingStep && styles.editingModal
       )}
-      onClose={onClose}
+      onClose={() => undefined}
     >
       {!isAuthorized ? (
         <AuthorizationStep nft={nft} onCancel={onClose} />

diff --git a/webapp/src/components/Modals/SubmitTransactionModal/SubmitTransactionModal.tsx b/webapp/src/components/Modals/SubmitTransactionModal/SubmitTransactionModal.tsx
@@ -21,11 +21,7 @@ const SubmitTransactionModal = ({
   const isLoading = isTransactionBeingConfirmed || isSubmittingTransaction
 
   return (
-    <Modal
-      size="tiny"
-      name={name}
-      onClose={isLoading ? () => undefined : onClose}
-    >
+    <Modal size="tiny" name={name} onClose={!isLoading ? onClose : undefined}>
       <ModalNavigation title={title} />
       <Modal.Content className={className}>
         {children}

diff --git a/webapp/src/components/Modals/TestModal/TestModal.container.ts b/webapp/src/components/Modals/TestModal/TestModal.container.ts
diff --git a/webapp/src/components/Modals/TestModal/TestModal.tsx b/webapp/src/components/Modals/TestModal/TestModal.tsx
diff --git a/webapp/src/components/Modals/TestModal/TestModal.types.ts b/webapp/src/components/Modals/TestModal/TestModal.types.ts
diff --git a/webapp/src/components/Modals/TestModal/index.ts b/webapp/src/components/Modals/TestModal/index.ts
diff --git a/webapp/src/components/Modals/index.ts b/webapp/src/components/Modals/index.ts
@@ -1,4 +1,3 @@
-export { default as TestModal } from './TestModal'
 export { ClaimLandModal } from './ClaimLandModal'
 export { RemoveRentalModal } from './RemoveRentalModal'
 export { RentalListingModal } from './RentalListingModal'