fix: prefetching fee scenarios (#1384)

src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx

@@ -60,7 +60,7 @@ type InheritAttrs = Omit<ModalProps, keyof Props | 'children'>;
 
 type CollateralModalProps = Props & InheritAttrs;
 
-const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModalProps): JSX.Element | null => {
+const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: CollateralModalProps): JSX.Element | null => {
   const { t } = useTranslation();
   const { refetch } = useGetAccountLendingStatistics();
   const { getLTV } = useGetLTV();
@@ -107,18 +107,19 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal
   // Doing this call on mount so that the form becomes dirty
   // TODO: find better approach
   useEffect(() => {
-    if (variant === 'disable-error') return;
+    if (variant === 'disable-error' || !isOpen) return;
 
     form.setFieldValue(LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isOpen, variant]);
 
   const content = getContentMap(t, variant, asset);
 
   const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee);
 
   return (
     <Modal
+      isOpen={isOpen}
       onClose={onClose}
       shouldCloseOnInteractOutside={(el) => !overlappingModalRef.current?.contains(el)}
       {...props}

src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx

@@ -57,9 +57,11 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => {
   // Doing this call on mount so that the form becomes dirty
   // TODO: improve approach
   useEffect(() => {
+    if (!isOpen) return;
+
     form.setFieldValue(LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isOpen]);
 
   const { supplyAmountUSD, netAPY } = statistics || {};