2022-09-28 13:02:12 -07:00
|
|
|
import { useMemo, useState } from 'react'
|
|
|
|
import TabButtons from '@components/shared/TabButtons'
|
|
|
|
import OpenOrders from './OpenOrders'
|
2022-11-17 14:16:45 -08:00
|
|
|
import SwapTradeBalances from '../shared/BalancesTable'
|
2022-09-28 13:02:12 -07:00
|
|
|
import UnsettledTrades from './UnsettledTrades'
|
2022-09-28 13:44:49 -07:00
|
|
|
import mangoStore from '@store/mangoStore'
|
2022-10-06 20:16:11 -07:00
|
|
|
import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
|
2022-10-31 12:11:34 -07:00
|
|
|
import PerpPositions from './PerpPositions'
|
2022-11-14 02:18:38 -08:00
|
|
|
import { useViewport } from 'hooks/useViewport'
|
|
|
|
import { breakpoints } from 'utils/theme'
|
2022-12-11 22:01:49 -08:00
|
|
|
import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
|
2022-12-19 09:12:03 -08:00
|
|
|
import TradeHistory from './TradeHistory'
|
2022-09-28 13:02:12 -07:00
|
|
|
|
|
|
|
const TradeInfoTabs = () => {
|
2022-10-03 03:38:05 -07:00
|
|
|
const [selectedTab, setSelectedTab] = useState('balances')
|
2022-09-28 13:44:49 -07:00
|
|
|
const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
|
2022-12-27 15:15:57 -08:00
|
|
|
const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
|
2022-10-06 20:16:11 -07:00
|
|
|
const unsettledSpotBalances = useUnsettledSpotBalances()
|
2022-12-11 22:01:49 -08:00
|
|
|
const unsettledPerpPositions = useUnsettledPerpPositions()
|
2022-11-14 02:18:38 -08:00
|
|
|
const { width } = useViewport()
|
2023-01-03 01:20:34 -08:00
|
|
|
const isMobile = width ? width < breakpoints['2xl'] : false
|
2022-09-28 13:02:12 -07:00
|
|
|
|
|
|
|
const tabsWithCount: [string, number][] = useMemo(() => {
|
2022-11-20 18:29:51 -08:00
|
|
|
const unsettledTradeCount =
|
|
|
|
Object.values(unsettledSpotBalances).flat().length +
|
2022-12-11 22:01:49 -08:00
|
|
|
unsettledPerpPositions?.length
|
2022-12-27 15:15:57 -08:00
|
|
|
const openPerpPositions = Object.values(perpPositions).filter((p) =>
|
|
|
|
p.basePositionLots.toNumber()
|
|
|
|
)
|
2022-09-28 13:44:49 -07:00
|
|
|
return [
|
2022-10-03 03:38:05 -07:00
|
|
|
['balances', 0],
|
|
|
|
['trade:orders', Object.values(openOrders).flat().length],
|
2022-11-20 18:29:51 -08:00
|
|
|
['trade:unsettled', unsettledTradeCount],
|
2023-01-22 03:27:04 -08:00
|
|
|
['trade:positions', openPerpPositions.length],
|
|
|
|
['trade-history', 0],
|
2022-09-28 13:44:49 -07:00
|
|
|
]
|
2022-12-27 15:34:40 -08:00
|
|
|
}, [openOrders, unsettledPerpPositions, unsettledSpotBalances, perpPositions])
|
2022-09-28 13:02:12 -07:00
|
|
|
|
|
|
|
return (
|
2022-10-23 16:04:08 -07:00
|
|
|
<div className="hide-scroll h-full overflow-y-scroll pb-5">
|
2023-01-22 01:27:04 -08:00
|
|
|
<div className="hide-scroll overflow-x-auto border-b border-th-bkg-3">
|
2022-09-28 13:02:12 -07:00
|
|
|
<TabButtons
|
|
|
|
activeValue={selectedTab}
|
|
|
|
onChange={(tab: string) => setSelectedTab(tab)}
|
|
|
|
values={tabsWithCount}
|
|
|
|
showBorders
|
2022-11-14 02:18:38 -08:00
|
|
|
fillWidth={isMobile}
|
2022-09-28 13:02:12 -07:00
|
|
|
/>
|
|
|
|
</div>
|
2022-10-06 20:16:11 -07:00
|
|
|
{selectedTab === 'balances' ? <SwapTradeBalances /> : null}
|
2022-10-03 03:38:05 -07:00
|
|
|
{selectedTab === 'trade:orders' ? <OpenOrders /> : null}
|
|
|
|
{selectedTab === 'trade:unsettled' ? (
|
2022-11-20 18:29:51 -08:00
|
|
|
<UnsettledTrades
|
|
|
|
unsettledSpotBalances={unsettledSpotBalances}
|
2022-12-11 22:01:49 -08:00
|
|
|
unsettledPerpPositions={unsettledPerpPositions}
|
2022-11-20 18:29:51 -08:00
|
|
|
/>
|
2022-10-02 22:42:28 -07:00
|
|
|
) : null}
|
2023-01-22 03:27:04 -08:00
|
|
|
{selectedTab === 'trade:positions' ? <PerpPositions /> : null}
|
|
|
|
{selectedTab === 'trade-history' ? <TradeHistory /> : null}
|
2022-09-28 13:02:12 -07:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TradeInfoTabs
|