fix: Prevent rental modals from closing (#1053)

* fix: Prevent rental modals from closing

* fix: Use function instead of undefined

Author: LautaroPetaccio

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>

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 && (

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}>

webapp/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}>

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} />

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}