68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import Switch from '@components/forms/Switch'
|
|
import TabsText from '@components/shared/TabsText'
|
|
import SwapOrders from '@components/swap/SwapTriggerOrders'
|
|
import OpenOrders from '@components/trade/OpenOrders'
|
|
import mangoStore from '@store/mangoStore'
|
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
|
import useMangoAccount from 'hooks/useMangoAccount'
|
|
import { useRouter } from 'next/router'
|
|
import { useMemo, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { FILTER_ORDERS_FOR_MARKET_KEY } from 'utils/constants'
|
|
|
|
const AccountOrders = () => {
|
|
const { t } = useTranslation('trade')
|
|
const { mangoAccount } = useMangoAccount()
|
|
const { asPath } = useRouter()
|
|
const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
|
|
const [activeTab, setActiveTab] = useState('trade:limit')
|
|
const [filterForCurrentMarket, setFilterForCurrentMarket] =
|
|
useLocalStorageState(FILTER_ORDERS_FOR_MARKET_KEY, false)
|
|
|
|
// only filter on trade page
|
|
const isFiltered = useMemo(() => {
|
|
if (asPath === '/') return false
|
|
return filterForCurrentMarket
|
|
}, [asPath, filterForCurrentMarket])
|
|
|
|
const tabsWithCount: [string, number][] = useMemo(() => {
|
|
const stopOrdersCount =
|
|
mangoAccount?.tokenConditionalSwaps.filter((tcs) => tcs.isConfigured)
|
|
?.length || 0
|
|
const tabs: [string, number][] = [
|
|
['trade:limit', Object.values(openOrders).flat().length],
|
|
['trade:trigger-orders', stopOrdersCount],
|
|
]
|
|
return tabs
|
|
}, [mangoAccount, openOrders])
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between p-4 md:px-6">
|
|
<TabsText
|
|
activeTab={activeTab}
|
|
onChange={setActiveTab}
|
|
tabs={tabsWithCount}
|
|
/>
|
|
{activeTab === 'trade:limit' && asPath.includes('/trade') ? (
|
|
<Switch
|
|
checked={filterForCurrentMarket}
|
|
onChange={() => setFilterForCurrentMarket(!filterForCurrentMarket)}
|
|
>
|
|
{t('filter-current-market')}
|
|
</Switch>
|
|
) : null}
|
|
</div>
|
|
<div className="flex flex-1 flex-col border-t border-th-bkg-3">
|
|
{activeTab === 'trade:limit' ? (
|
|
<OpenOrders filterForCurrentMarket={isFiltered} />
|
|
) : (
|
|
<SwapOrders />
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AccountOrders
|