2022-10-06 20:16:11 -07:00
|
|
|
import { useMemo, useState } from 'react'
|
|
|
|
import TabButtons from '@components/shared/TabButtons'
|
2022-11-17 14:16:45 -08:00
|
|
|
import SwapTradeBalances from '../shared/BalancesTable'
|
2022-10-06 20:16:11 -07:00
|
|
|
import SwapHistoryTable from './SwapHistoryTable'
|
2022-11-18 09:09:39 -08:00
|
|
|
import useMangoAccount from 'hooks/useMangoAccount'
|
2023-06-13 18:09:15 -07:00
|
|
|
import ManualRefresh from '@components/shared/ManualRefresh'
|
|
|
|
import { useViewport } from 'hooks/useViewport'
|
|
|
|
import { breakpoints } from 'utils/theme'
|
2023-07-30 23:05:26 -07:00
|
|
|
import SwapOrders from './SwapOrders'
|
2023-08-08 18:03:54 -07:00
|
|
|
import { useIsWhiteListed } from 'hooks/useIsWhiteListed'
|
2022-10-06 20:16:11 -07:00
|
|
|
|
|
|
|
const SwapInfoTabs = () => {
|
|
|
|
const [selectedTab, setSelectedTab] = useState('balances')
|
2022-11-18 09:09:39 -08:00
|
|
|
const { mangoAccount } = useMangoAccount()
|
2023-06-13 18:09:15 -07:00
|
|
|
const { width } = useViewport()
|
2023-08-08 18:03:54 -07:00
|
|
|
const { data: isWhiteListed } = useIsWhiteListed()
|
2023-06-13 18:09:15 -07:00
|
|
|
const isMobile = width ? width < breakpoints.lg : false
|
2022-10-06 20:16:11 -07:00
|
|
|
|
|
|
|
const tabsWithCount: [string, number][] = useMemo(() => {
|
2023-08-08 18:03:54 -07:00
|
|
|
let tabs: [string, number][] = [
|
2022-10-06 20:16:11 -07:00
|
|
|
['balances', 0],
|
|
|
|
['swap:swap-history', 0],
|
|
|
|
]
|
2023-08-08 18:03:54 -07:00
|
|
|
if (isWhiteListed) {
|
|
|
|
const stopOrdersCount =
|
|
|
|
mangoAccount?.tokenConditionalSwaps.filter((tcs) => tcs.hasData)
|
|
|
|
?.length || 0
|
|
|
|
tabs = [
|
|
|
|
['balances', 0],
|
|
|
|
['trade:trigger-orders', stopOrdersCount],
|
|
|
|
['swap:swap-history', 0],
|
|
|
|
]
|
|
|
|
}
|
|
|
|
return tabs
|
|
|
|
}, [isWhiteListed, mangoAccount])
|
2022-10-06 20:16:11 -07:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="hide-scroll h-full overflow-y-scroll">
|
2023-06-13 18:09:15 -07:00
|
|
|
<div className="flex items-center border-b border-th-bkg-3">
|
2022-10-06 20:16:11 -07:00
|
|
|
<TabButtons
|
|
|
|
activeValue={selectedTab}
|
|
|
|
onChange={(tab: string) => setSelectedTab(tab)}
|
|
|
|
values={tabsWithCount}
|
|
|
|
showBorders
|
|
|
|
/>
|
2023-06-13 18:09:15 -07:00
|
|
|
<ManualRefresh
|
|
|
|
classNames="fixed bottom-16 right-4 lg:relative lg:bottom-0 md:bottom-6 md:right-6 z-10 shadow-lg lg:shadow-none bg-th-bkg-3 lg:bg-transparent"
|
|
|
|
hideBg={isMobile}
|
|
|
|
size={isMobile ? 'large' : 'small'}
|
|
|
|
/>
|
2022-10-06 20:16:11 -07:00
|
|
|
</div>
|
|
|
|
{selectedTab === 'balances' ? <SwapTradeBalances /> : null}
|
2023-08-01 22:32:20 -07:00
|
|
|
{selectedTab === 'trade:trigger-orders' ? <SwapOrders /> : null}
|
2023-01-05 17:56:03 -08:00
|
|
|
{selectedTab === 'swap:swap-history' ? <SwapHistoryTable /> : null}
|
2022-10-06 20:16:11 -07:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SwapInfoTabs
|