update tab count on disconnect

components/account/AccountTabs.tsx

@@ -9,24 +9,21 @@ import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
 import TradeHistory from '@components/trade/TradeHistory'
-import mangoStore from '@store/mangoStore'
 import PerpPositions from '@components/trade/PerpPositions'
+import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
 
 const AccountTabs = () => {
   const [activeTab, setActiveTab] = useState('balances')
   const { width } = useViewport()
-  const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
   const unsettledSpotBalances = useUnsettledSpotBalances()
   const unsettledPerpPositions = useUnsettledPerpPositions()
+  const openPerpPositions = useOpenPerpPositions()
   const isMobile = width ? width < breakpoints.lg : false
 
   const tabsWithCount: [string, number][] = useMemo(() => {
     const unsettledTradeCount =
       Object.values(unsettledSpotBalances).flat().length +
       unsettledPerpPositions?.length
-    const openPerpPositions = Object.values(perpPositions).filter((p) =>
-      p.basePositionLots.toNumber()
-    )
 
     return [
       ['balances', 0],
@@ -36,7 +33,7 @@ const AccountTabs = () => {
       ['swap:swap-history', 0],
       ['trade-history', 0],
     ]
-  }, [unsettledPerpPositions, unsettledSpotBalances])
+  }, [openPerpPositions, unsettledPerpPositions, unsettledSpotBalances])
 
   return (
     <>

components/trade/TradeInfoTabs.tsx

@@ -10,13 +10,14 @@ import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
 import TradeHistory from './TradeHistory'
+import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
 
 const TradeInfoTabs = () => {
   const [selectedTab, setSelectedTab] = useState('balances')
   const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
-  const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
   const unsettledSpotBalances = useUnsettledSpotBalances()
   const unsettledPerpPositions = useUnsettledPerpPositions()
+  const openPerpPositions = useOpenPerpPositions()
   const { width } = useViewport()
   const isMobile = width ? width < breakpoints['2xl'] : false
 
@@ -24,9 +25,6 @@ const TradeInfoTabs = () => {
     const unsettledTradeCount =
       Object.values(unsettledSpotBalances).flat().length +
       unsettledPerpPositions?.length
-    const openPerpPositions = Object.values(perpPositions).filter((p) =>
-      p.basePositionLots.toNumber()
-    )
     return [
       ['balances', 0],
       ['trade:orders', Object.values(openOrders).flat().length],
@@ -34,7 +32,12 @@ const TradeInfoTabs = () => {
       ['trade:positions', openPerpPositions.length],
       ['trade-history', 0],
     ]
-  }, [openOrders, unsettledPerpPositions, unsettledSpotBalances, perpPositions])
+  }, [
+    openOrders,
+    unsettledPerpPositions,
+    unsettledSpotBalances,
+    openPerpPositions,
+  ])
 
   return (
     <div className="hide-scroll h-full overflow-y-scroll pb-5">

hooks/useOpenPerpPositions.ts

@@ -0,0 +1,19 @@
+import mangoStore from '@store/mangoStore'
+import { useMemo } from 'react'
+import useMangoAccount from './useMangoAccount'
+
+const useOpenPerpPositions = () => {
+  const { mangoAccountAddress } = useMangoAccount()
+  const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
+
+  const openPositions = useMemo(() => {
+    if (!mangoAccountAddress) return []
+    return Object.values(perpPositions).filter((p) =>
+      p.basePositionLots.toNumber()
+    )
+  }, [mangoAccountAddress])
+
+  return openPositions
+}
+
+export default useOpenPerpPositions

hooks/useUnsettledPerpPositions.ts

@@ -1,15 +1,23 @@
 import mangoStore from '@store/mangoStore'
+import { useMemo } from 'react'
+import useMangoAccount from './useMangoAccount'
 import useMangoGroup from './useMangoGroup'
 
 const useUnsettledPerpPositions = () => {
   const { group } = useMangoGroup()
+  const { mangoAccountAddress } = useMangoAccount()
   const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
 
-  return perpPositions.filter((p) => {
-    const market = group?.getPerpMarketByMarketIndex(p.marketIndex)
-    if (!market || !group) return false
-    return p.getUnsettledPnlUi(group, market) !== 0
-  })
+  const positions = useMemo(() => {
+    if (!mangoAccountAddress) return []
+    return perpPositions.filter((p) => {
+      const market = group?.getPerpMarketByMarketIndex(p.marketIndex)
+      if (!market || !group) return false
+      return p.getUnsettledPnlUi(group, market) !== 0
+    })
+  }, [mangoAccountAddress])
+
+  return positions
 }
 
 export default useUnsettledPerpPositions