2022-09-28 13:02:12 -07:00
|
|
|
import { useMemo, useState } from 'react'
|
|
|
|
import TabButtons from '@components/shared/TabButtons'
|
|
|
|
import OpenOrders from './OpenOrders'
|
|
|
|
import Balances from './TradeBalances'
|
|
|
|
import UnsettledTrades from './UnsettledTrades'
|
2022-09-28 13:44:49 -07:00
|
|
|
import mangoStore from '@store/mangoStore'
|
2022-09-28 13:02:12 -07:00
|
|
|
|
|
|
|
const TradeInfoTabs = () => {
|
|
|
|
const [selectedTab, setSelectedTab] = useState('Balances')
|
2022-09-28 13:44:49 -07:00
|
|
|
const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
|
2022-09-28 13:02:12 -07:00
|
|
|
|
|
|
|
const tabsWithCount: [string, number][] = useMemo(() => {
|
2022-09-28 13:44:49 -07:00
|
|
|
return [
|
|
|
|
['Balances', 0],
|
|
|
|
['Orders', Object.values(openOrders).flat().length],
|
2022-09-28 18:50:02 -07:00
|
|
|
['Unsettled', 0],
|
2022-09-28 13:44:49 -07:00
|
|
|
]
|
|
|
|
}, [openOrders])
|
2022-09-28 13:02:12 -07:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="hide-scroll h-full overflow-y-scroll">
|
|
|
|
<div className="sticky top-0 z-10">
|
|
|
|
<TabButtons
|
|
|
|
activeValue={selectedTab}
|
|
|
|
onChange={(tab: string) => setSelectedTab(tab)}
|
|
|
|
values={tabsWithCount}
|
|
|
|
showBorders
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{selectedTab === 'Balances' ? <Balances /> : null}
|
|
|
|
{selectedTab === 'Orders' ? <OpenOrders /> : null}
|
|
|
|
{selectedTab === 'Unsettled' ? <UnsettledTrades /> : null}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TradeInfoTabs
|