diff --git a/components/account/AccountTabs.tsx b/components/account/AccountTabs.tsx index e48d8f16..8071b74d 100644 --- a/components/account/AccountTabs.tsx +++ b/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 ( <> diff --git a/components/trade/TradeInfoTabs.tsx b/components/trade/TradeInfoTabs.tsx index f126e45a..a52436c6 100644 --- a/components/trade/TradeInfoTabs.tsx +++ b/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 (
diff --git a/hooks/useOpenPerpPositions.ts b/hooks/useOpenPerpPositions.ts new file mode 100644 index 00000000..84d0f54b --- /dev/null +++ b/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 diff --git a/hooks/useUnsettledPerpPositions.ts b/hooks/useUnsettledPerpPositions.ts index 88c95a66..b826280c 100644 --- a/hooks/useUnsettledPerpPositions.ts +++ b/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