fix

components/Layout.tsx

@@ -130,7 +130,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
   const [mounted, setMounted] = useState(false)
   useEffect(() => setMounted(true), [])
   if (!mounted) return null
-  console.log(showCollateralFeeWarning)
+
   return (
     <main
       className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} ${themeData.fonts.mono.variable} font-sans`}

components/modals/CollateralFeeWarningModal.tsx

@@ -1,26 +1,24 @@
 import useCollateralFeePopupConditions from 'hooks/useCollateralFeePositions'
 import Modal from '../shared/Modal'
 import Button from '@components/shared/Button'
-import { Bank } from '@blockworks-foundation/mango-v4'
 
 type WarningProps = {
-  callBack?: () => void
   isOpen: boolean
-  bank?: Bank
 }
 
-const CollateralFeeWarningModal = ({ isOpen, callBack }: WarningProps) => {
-  const { setWasModalOpen } = useCollateralFeePopupConditions()
-
+const CollateralFeeWarningModal = ({ isOpen }: WarningProps) => {
+  const { setWasModalOpen, marginPositionBalanceWithBanks } =
+    useCollateralFeePopupConditions()
+  console.log(marginPositionBalanceWithBanks)
+  //current collateral fee can be get from marginPositionBalanceWithBanks
   return (
-    <Modal isOpen={isOpen} onClose={() => null}>
+    <Modal isOpen={isOpen} onClose={() => setWasModalOpen(true)}>
       <h2 className="mb-2 text-center">Warning text</h2>
       <p className="mb-2">text</p>
       <Button
         className="mt-6 w-full"
         onClick={() => {
           setWasModalOpen(true)
-          callBack ? callBack() : null
         }}
       >
         ok

hooks/useCollateralFeePositions.ts

@@ -8,17 +8,22 @@ const useCollateralFeePopupConditions = () => {
     false,
   )
   const banks = useBanksWithBalances('balance')
-  //check if there is at least 100$ active margin position and bank has collateral fee set
-  const hasMarginPosition = !!banks.filter(
+  //check if there is at least 100$ active margin position and bank has collateral fee active
+  const marginPositionBalanceWithBanks = banks.filter(
     (x) =>
       x.balance < 0 &&
       Math.abs(x.balance) * x.bank.uiPrice >= 100 &&
       x.bank.collateralFeePerDay > 0,
-  ).length
+  )
 
-  const showCollateralFeeWarning = hasMarginPosition && !wasModalOpen
+  const showCollateralFeeWarning =
+    !!marginPositionBalanceWithBanks.length && !wasModalOpen
 
-  return { showCollateralFeeWarning, setWasModalOpen }
+  return {
+    showCollateralFeeWarning,
+    setWasModalOpen,
+    marginPositionBalanceWithBanks,
+  }
 }
 
 export default useCollateralFeePopupConditions