fix(Loans): collateral overlapping modal ref issue (#1595)

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

@@ -1,5 +1,5 @@
 import { LoanAsset } from '@interlay/interbtc-api';
-import { useEffect, useRef } from 'react';
+import { RefObject, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Flex } from '@/component-library';
@@ -20,16 +20,21 @@ type CollateralFormProps = {
   asset: LoanAsset;
   variant: Extract<CollateralModalVariant, 'enable' | 'disable'>;
   isOpen?: boolean;
+  overlappingModalRef: RefObject<HTMLDivElement>;
   onSigning: () => void;
 };
 
-const CollateralForm = ({ asset, variant, isOpen, onSigning }: CollateralFormProps): JSX.Element => {
+const CollateralForm = ({
+  asset,
+  variant,
+  isOpen,
+  overlappingModalRef,
+  onSigning
+}: CollateralFormProps): JSX.Element => {
   const { t } = useTranslation();
 
   const { refetch } = useGetAccountLendingStatistics();
 
-  const overlappingModalRef = useRef<HTMLDivElement>(null);
-
   const transaction = useTransaction({
     onSigning,
     onSuccess: refetch

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

@@ -101,7 +101,13 @@ const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: Collate
             {t('dismiss')}
           </CTA>
         ) : (
-          <CollateralForm asset={asset} onSigning={onClose} variant={variant} isOpen={isOpen} />
+          <CollateralForm
+            asset={asset}
+            onSigning={onClose}
+            variant={variant}
+            isOpen={isOpen}
+            overlappingModalRef={overlappingModalRef}
+          />
         )}
       </ModalFooter>
     </Modal>