17f13b6d7c
* MP-3442: set autolend to true by default * MP-3442: remember margin setting and toggle it on by default * MP-3442: add balances to AssetSelector * MP-3442: close assetOverlay on clickAway * fix: fixed TradeModule z-index * MP-3442: set priority of balance and cap * fix: overlayState * fix: adjusted to comments
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { useState } from 'react'
|
|
|
|
import MigrationBanner from 'components/MigrationBanner'
|
|
import AccountDetailsCard from 'components/Trade/AccountDetailsCard'
|
|
import TradeChart from 'components/Trade/TradeChart'
|
|
import TradeModule from 'components/Trade/TradeModule'
|
|
import useStore from 'store'
|
|
import { getEnabledMarketAssets } from 'utils/assets'
|
|
|
|
export default function TradePage() {
|
|
const enabledMarketAssets = getEnabledMarketAssets()
|
|
const [buyAsset, setBuyAsset] = useState(enabledMarketAssets[0])
|
|
const [sellAsset, setSellAsset] = useState(enabledMarketAssets[1])
|
|
const assetOverlayState = useStore((s) => s.assetOverlayState)
|
|
|
|
return (
|
|
<div className='flex flex-col w-full h-full gap-4'>
|
|
<MigrationBanner />
|
|
<div className='grid h-full w-full grid-cols-[346px_auto] gap-4'>
|
|
<TradeModule
|
|
buyAsset={buyAsset}
|
|
sellAsset={sellAsset}
|
|
onChangeBuyAsset={setBuyAsset}
|
|
onChangeSellAsset={setSellAsset}
|
|
/>
|
|
<TradeChart buyAsset={buyAsset} sellAsset={sellAsset} />
|
|
<div />
|
|
<AccountDetailsCard />
|
|
</div>
|
|
{assetOverlayState !== 'closed' && (
|
|
<div
|
|
className='fixed top-0 left-0 z-40 block w-full h-full hover:cursor-pointer'
|
|
onClick={() => useStore.setState({ assetOverlayState: 'closed' })}
|
|
role='button'
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|