64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
|
|
import AccountDetailsCard from 'components/trade/AccountDetailsCard'
|
|
import TradeChart from 'components/trade/TradeChart'
|
|
import TradeModule from 'components/trade/TradeModule'
|
|
import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
|
|
import { LocalStorageKeys } from 'constants/localStorageKeys'
|
|
import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
|
|
import useLocalStorage from 'hooks/localStorage/useLocalStorage'
|
|
import useChainConfig from 'hooks/useChainConfig'
|
|
import useStore from 'store'
|
|
import { byDenom } from 'utils/array'
|
|
import { getPage } from 'utils/route'
|
|
|
|
export default function TradePage() {
|
|
const { pathname } = useLocation()
|
|
const chainConfig = useChainConfig()
|
|
const page = getPage(pathname)
|
|
const isAdvanced = useMemo(() => page === 'trade-advanced', [page])
|
|
|
|
const [tradingPairAdvanced] = useLocalStorage<Settings['tradingPairAdvanced']>(
|
|
chainConfig.id + '/' + LocalStorageKeys.TRADING_PAIR_ADVANCED,
|
|
DEFAULT_SETTINGS.tradingPairAdvanced,
|
|
)
|
|
const [tradingPairSimple] = useLocalStorage<Settings['tradingPairSimple']>(
|
|
chainConfig.id + '/' + LocalStorageKeys.TRADING_PAIR_SIMPLE,
|
|
DEFAULT_SETTINGS.tradingPairSimple,
|
|
)
|
|
|
|
const enabledMarketAssets = useMarketEnabledAssets()
|
|
const assetOverlayState = useStore((s) => s.assetOverlayState)
|
|
const buyAsset = useMemo(
|
|
() =>
|
|
enabledMarketAssets.find(
|
|
byDenom(isAdvanced ? tradingPairAdvanced.buy : tradingPairSimple.buy),
|
|
) ?? enabledMarketAssets[0],
|
|
[tradingPairAdvanced, tradingPairSimple, enabledMarketAssets, isAdvanced],
|
|
)
|
|
const sellAsset = useMemo(
|
|
() =>
|
|
enabledMarketAssets.find(
|
|
byDenom(isAdvanced ? tradingPairAdvanced.sell : tradingPairSimple.sell),
|
|
) ?? enabledMarketAssets[1],
|
|
[tradingPairAdvanced, tradingPairSimple, enabledMarketAssets, isAdvanced],
|
|
)
|
|
return (
|
|
<div className='flex flex-col w-full h-full gap-4'>
|
|
<div className='grid w-full grid-cols-[auto_346px] gap-4'>
|
|
<TradeChart buyAsset={buyAsset} sellAsset={sellAsset} />
|
|
<TradeModule buyAsset={buyAsset} sellAsset={sellAsset} isAdvanced={isAdvanced} />
|
|
<AccountDetailsCard />
|
|
</div>
|
|
{assetOverlayState !== 'closed' && (
|
|
<div
|
|
className='fixed top-0 left-0 z-20 block w-full h-full hover:cursor-pointer'
|
|
onClick={() => useStore.setState({ assetOverlayState: 'closed' })}
|
|
role='button'
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|