blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

mobile trade page

This commit is contained in:
saml33 2022-09-16 20:49:10 +10:00
parent a2400638aa
commit 3c55bf5b59
8 changed files with 208 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/shared/TabButtons.tsx
View File

@ -21,15 +21,15 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
return ( return (
<div <div
className={`flex bg-th-bkg-1 text-th-fgd-4 ${ className={`flex bg-th-bkg-1 text-th-fgd-4 ${
showBorders ? 'md:border-b md:border-th-bkg-3' : '' showBorders ? 'border-b border-th-bkg-3' : ''
}`} }`}
> >
{values.map((v, i) => ( {values.map((v, i) => (
<div key={v + i}> <div key={v + i}>
<button <button
className={`default-transition h-12 rounded-md px-6 font-bold ${ className={`default-transition h-12 px-6 font-bold ${
!rounded ? 'md:rounded-none' : '' rounded ? 'rounded-md' : 'rounded-none'
} ${showBorders ? 'md:border-r md:border-th-bkg-3' : ''} ${ } ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
v === activeValue v === activeValue
? 'bg-th-bkg-2 text-th-primary' ? 'bg-th-bkg-2 text-th-primary'
: 'hover:cursor-pointer hover:text-th-fgd-2' : 'hover:cursor-pointer hover:text-th-fgd-2'

11
components/swap/SwapForm.tsx
View File

@ -6,6 +6,7 @@ import {
Cog8ToothIcon, Cog8ToothIcon,
MagnifyingGlassIcon, MagnifyingGlassIcon,
ExclamationCircleIcon, ExclamationCircleIcon,
HeartIcon,
} from '@heroicons/react/20/solid' } from '@heroicons/react/20/solid'
import { RouteInfo } from '@jup-ag/core' import { RouteInfo } from '@jup-ag/core'
import NumberFormat, { NumberFormatValues } from 'react-number-format' import NumberFormat, { NumberFormatValues } from 'react-number-format'
@ -384,16 +385,17 @@ const SwapForm = () => {
)} )}
</Button> </Button>
</div> </div>
{/* {!!mangoAccount ? ( */}
<div <div
id="step-ten" id="step-ten"
className={`border-t border-th-bkg-3 bg-th-bkg-2 px-6 transition-all ${ className={`border-t border-th-bkg-3 px-6 transition-all ${
showHealthImpact ? 'max-h-40 py-4 ' : 'h-0' showHealthImpact ? 'max-h-40 py-4 ' : 'h-0'
}`} }`}
> >
<div className="flex justify-between"> <div className="flex justify-between">
<p className="text-sm">{t('health-impact')}</p> <div className="flex items-center">
<HeartIcon className="mr-1.5 h-4 w-4 text-th-fgd-4" />
<p className="text-sm">{t('health-impact')}</p>
</div>
<div className="flex items-center space-x-2 font-mono tracking-tight"> <div className="flex items-center space-x-2 font-mono tracking-tight">
<p className="text-sm text-th-fgd-1">{currentMaintHealth}%</p> <p className="text-sm text-th-fgd-1">{currentMaintHealth}%</p>
<ArrowRightIcon className="h-4 w-4 text-th-fgd-4" /> <ArrowRightIcon className="h-4 w-4 text-th-fgd-4" />
@ -421,7 +423,6 @@ const SwapForm = () => {
</div> </div>
</div> </div>
</div> </div>
{/* ) : null} */}
</ContentBox> </ContentBox>
) )
} }

14
components/trade/AdvancedMarketHeader.tsx
View File

@ -28,7 +28,7 @@ const MarketSelectDropdown = () => {
{({ close, open }) => ( {({ close, open }) => (
<div className="relative flex flex-col overflow-visible"> <div className="relative flex flex-col overflow-visible">
<Popover.Button className="flex w-full items-center hover:text-th-primary"> <Popover.Button className="flex w-full items-center hover:text-th-primary">
<div className="text-base font-bold"> <div className="text-xl font-bold md:text-base">
{selectedMarket?.name || DEFAULT_MARKET_NAME} {selectedMarket?.name || DEFAULT_MARKET_NAME}
</div> </div>
<ChevronDownIcon <ChevronDownIcon
@ -38,7 +38,7 @@ const MarketSelectDropdown = () => {
/> />
</Popover.Button> </Popover.Button>
<Popover.Panel className="absolute top-[66px] z-50 mr-4 w-56 border border-l-0 border-th-bkg-3 bg-th-bkg-1"> <Popover.Panel className="absolute -left-5 top-[46px] z-50 mr-4 w-screen border border-l-0 border-th-bkg-3 bg-th-bkg-1 sm:w-56 md:top-[37px]">
{serumMarkets?.length {serumMarkets?.length
? serumMarkets.map((m) => ( ? serumMarkets.map((m) => (
<div <div
@ -68,7 +68,7 @@ const OraclePrice = () => {
) )
return ( return (
<div className="font-mono text-th-fgd-1 md:text-xs"> <div className="font-mono text-xs text-th-fgd-1">
$ $
{baseTokenBank.uiPrice {baseTokenBank.uiPrice
? formatFixedDecimals(baseTokenBank.uiPrice) ? formatFixedDecimals(baseTokenBank.uiPrice)
@ -100,18 +100,18 @@ const AdvancedMarketHeader = () => {
: 0 : 0
return ( return (
<div className="flex h-12 items-center bg-th-bkg-1 px-5"> <div className="flex h-16 items-center bg-th-bkg-1 px-5 md:h-12">
<div className="hidden md:block md:pr-6 lg:pb-0"> <div className="md:pr-6 lg:pb-0">
<div className="flex items-center"> <div className="flex items-center">
<MarketSelectDropdown /> <MarketSelectDropdown />
</div> </div>
</div> </div>
<div className="ml-6 flex-col"> <div className="ml-6 flex-col">
<div className="text-th-fgd-4 md:text-xs">{t('oracle-price')}</div> <div className="text-xs text-th-fgd-4">{t('oracle-price')}</div>
<OraclePrice /> <OraclePrice />
</div> </div>
<div className="ml-6 flex-col"> <div className="ml-6 flex-col">
<div className="text-th-fgd-4 md:text-xs">{t('rolling-change')}</div> <div className="text-xs text-th-fgd-4">{t('rolling-change')}</div>
<div <div
className={`font-mono text-xs ${ className={`font-mono text-xs ${
change < 0 ? 'text-th-red' : 'text-th-gree' change < 0 ? 'text-th-red' : 'text-th-gree'

18
components/trade/AdvancedTradeForm.tsx
View File

@ -171,8 +171,8 @@ const AdvancedTradeForm = () => {
<nav className="-mb-px flex space-x-2" aria-label="Tabs"> <nav className="-mb-px flex space-x-2" aria-label="Tabs">
<button <button
onClick={() => handleSetSide('buy')} onClick={() => handleSetSide('buy')}
className={`default-transition relative flex w-1/2 cursor-pointer className={`default-transition relative flex h-10 w-1/2
items-center justify-center whitespace-nowrap py-1 text-sm font-semibold md:text-base md:hover:opacity-100 cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 text-sm font-semibold md:h-auto md:rounded-none md:text-base md:hover:opacity-100
${ ${
tradeForm.side === 'buy' tradeForm.side === 'buy'
? `border border-th-green text-th-green md:border-0` ? `border border-th-green text-th-green md:border-0`
@ -184,8 +184,8 @@ const AdvancedTradeForm = () => {
</button> </button>
<button <button
onClick={() => handleSetSide('sell')} onClick={() => handleSetSide('sell')}
className={`default-transition relative flex w-1/2 cursor-pointer className={`default-transition relative flex h-10 w-1/2 cursor-pointer items-center justify-center whitespace-nowrap
items-center justify-center whitespace-nowrap py-1 text-sm font-semibold md:text-base md:hover:opacity-100 rounded py-1 text-sm font-semibold md:h-auto md:rounded-none md:text-base md:hover:opacity-100
${ ${
tradeForm.side === 'sell' tradeForm.side === 'sell'
? `border border-th-red text-th-red md:border-0` ? `border border-th-red text-th-red md:border-0`
@ -202,7 +202,7 @@ const AdvancedTradeForm = () => {
<div className="my-2 flex items-center justify-between"> <div className="my-2 flex items-center justify-between">
<p className="text-xs text-th-fgd-3">{t('amount')}</p> <p className="text-xs text-th-fgd-3">{t('amount')}</p>
</div> </div>
<div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 px-3 py-2 text-lg font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2"> <div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-3 text-sm font-bold text-th-fgd-1 md:py-2 md:text-lg md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2">
<NumberFormat <NumberFormat
inputMode="decimal" inputMode="decimal"
thousandSeparator="," thousandSeparator=","
@ -223,7 +223,7 @@ const AdvancedTradeForm = () => {
<div className="mb-2 mt-4 flex items-center justify-between"> <div className="mb-2 mt-4 flex items-center justify-between">
<p className="text-xs text-th-fgd-3">Limit Price</p> <p className="text-xs text-th-fgd-3">Limit Price</p>
</div> </div>
<div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 px-3 py-2 text-lg font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2"> <div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-3 text-sm font-bold text-th-fgd-1 md:py-2 md:text-lg md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2">
<NumberFormat <NumberFormat
inputMode="decimal" inputMode="decimal"
thousandSeparator="," thousandSeparator=","
@ -242,9 +242,9 @@ const AdvancedTradeForm = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-5 flex px-5"> <div className="flex flex-wrap px-5">
{tradeForm.tradeType === 'Limit' ? ( {tradeForm.tradeType === 'Limit' ? (
<div className="flex"> <div className="mt-4 flex">
<div className="mr-4 "> <div className="mr-4 ">
<Tooltip <Tooltip
className="hidden md:block" className="hidden md:block"
@ -279,7 +279,7 @@ const AdvancedTradeForm = () => {
</div> </div>
</div> </div>
) : null} ) : null}
<div className=""> <div className="mt-4">
<Tooltip <Tooltip
delay={250} delay={250}
placement="left" placement="left"

14
components/trade/BalanceAndOpenOrders.tsx
View File

@ -28,14 +28,12 @@ const BalanceAndOpenOrders = () => {
return ( return (
<div> <div>
<div className=""> <TabButtons
<TabButtons activeValue={selectedTab}
activeValue={selectedTab} onChange={(tab: string) => setSelectedTab(tab)}
onChange={(tab: string) => setSelectedTab(tab)} values={TABS}
values={TABS} showBorders
showBorders />
/>
</div>
{selectedTab === 'Balances' ? <Balances /> : null} {selectedTab === 'Balances' ? <Balances /> : null}
{selectedTab === 'Open Orders' ? <OpenOrders /> : null} {selectedTab === 'Open Orders' ? <OpenOrders /> : null}
</div> </div>

48
components/trade/MobileTradeAdvancedPage.tsx Normal file
View File

@ -0,0 +1,48 @@
import { useCallback, useEffect, useState } from 'react'
// import { useTranslation } from 'next-i18next'
import dynamic from 'next/dynamic'
import ReactGridLayout, { Responsive, WidthProvider } from 'react-grid-layout'
import mangoStore from '@store/mangoStore'
import { GRID_LAYOUT_KEY } from 'utils/constants'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { breakpoints } from 'utils/theme'
import { useViewport } from 'hooks/useViewport'
import Orderbook from './Orderbook'
import AdvancedMarketHeader from './AdvancedMarketHeader'
import AdvancedTradeForm from './AdvancedTradeForm'
import BalanceAndOpenOrders from './BalanceAndOpenOrders'
import TradingViewChart from './TradingViewChart'
const MobileTradeAdvancedPage = () => {
return (
<div className="grid grid-cols-2 sm:grid-cols-3">
<div className="col-span-2 border-b border-th-bkg-3 sm:col-span-3">
<AdvancedMarketHeader />
</div>
{/* <div className="col-span-2 h-72 overflow-auto border-b border-th-bkg-3 sm:col-span-3 sm:h-96">
<TradingViewChart />
</div> */}
<div className="col-span-1 pb-6 sm:col-span-2">
<AdvancedTradeForm />
</div>
<div className="col-span-1 border-l border-th-bkg-3">
<div className="flex h-[49px] items-center border-b border-th-bkg-3 px-4 ">
<h2 className="text-sm text-th-fgd-3">Orderbook</h2>
</div>
<div className="flex items-center justify-between px-4 py-2 text-xs text-th-fgd-4">
<div>Size</div>
<div>Price</div>
</div>
<div className="hide-scroll h-full overflow-y-scroll">
<Orderbook depth={6} />
</div>
</div>
<div className="col-span-2 border-t border-th-bkg-3 sm:col-span-3">
<BalanceAndOpenOrders />
</div>
</div>
)
}
export default MobileTradeAdvancedPage

4
components/trade/Orderbook.tsx
View File

@ -474,7 +474,7 @@ const OrderbookRow = ({
<div className="flex w-full items-center justify-between hover:bg-th-bkg-2"> <div className="flex w-full items-center justify-between hover:bg-th-bkg-2">
<div <div
style={{ fontFeatureSettings: 'zero 1' }} style={{ fontFeatureSettings: 'zero 1' }}
className={`z-10 text-right font-mono text-xs tabular-nums leading-5 md:ml-4 md:leading-6 ${ className={`z-10 ml-4 text-right font-mono text-xs tabular-nums leading-5 md:leading-6 ${
/*hasOpenOrder*/ false ? 'text-th-primary' : 'text-th-fgd-3' /*hasOpenOrder*/ false ? 'text-th-primary' : 'text-th-fgd-3'
}`} }`}
// onClick={handleSizeClick} // onClick={handleSizeClick}
@ -482,7 +482,7 @@ const OrderbookRow = ({
{formattedSize.toFixed(minOrderSizeDecimals)} {formattedSize.toFixed(minOrderSizeDecimals)}
</div> </div>
<div <div
className={`z-10 font-mono text-xs tabular-nums leading-5 text-th-fgd-3 hover:normal-nums md:pr-4 md:leading-6`} className={`z-10 pr-4 font-mono text-xs tabular-nums leading-5 text-th-fgd-3 hover:normal-nums md:leading-6`}
// onClick={handlePriceClick} // onClick={handlePriceClick}
> >
{formattedPrice.toFixed(groupingDecimalCount)} {formattedPrice.toFixed(groupingDecimalCount)}

234
components/trade/TradeAdvancedPage.tsx
View File

@ -7,11 +7,12 @@ import mangoStore from '@store/mangoStore'
import { GRID_LAYOUT_KEY } from 'utils/constants' import { GRID_LAYOUT_KEY } from 'utils/constants'
import useLocalStorageState from 'hooks/useLocalStorageState' import useLocalStorageState from 'hooks/useLocalStorageState'
import { breakpoints } from 'utils/theme' import { breakpoints } from 'utils/theme'
// import { useViewport } from 'hooks/useViewport' import { useViewport } from 'hooks/useViewport'
import Orderbook from './Orderbook' import Orderbook from './Orderbook'
import AdvancedMarketHeader from './AdvancedMarketHeader' import AdvancedMarketHeader from './AdvancedMarketHeader'
import AdvancedTradeForm from './AdvancedTradeForm' import AdvancedTradeForm from './AdvancedTradeForm'
import BalanceAndOpenOrders from './BalanceAndOpenOrders' import BalanceAndOpenOrders from './BalanceAndOpenOrders'
import MobileTradeAdvancedPage from './MobileTradeAdvancedPage'
const ResponsiveGridLayout = WidthProvider(Responsive) const ResponsiveGridLayout = WidthProvider(Responsive)
@ -20,7 +21,7 @@ const TradingViewChart = dynamic(() => import('./TradingViewChart'), {
}) })
const gridBreakpoints = { const gridBreakpoints = {
// sm: breakpoints.sm, sm: breakpoints.sm,
md: breakpoints.md, md: breakpoints.md,
lg: breakpoints.lg, lg: breakpoints.lg,
xl: breakpoints.xl, xl: breakpoints.xl,
@ -28,49 +29,51 @@ const gridBreakpoints = {
xxxl: breakpoints['3xl'], xxxl: breakpoints['3xl'],
} }
const totalCols = 24 const totalCols = 24
const defaultLayouts = {
xxxl: [
{ i: 'market-header', x: 0, y: 0, w: 16, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 16, h: 676 },
{ i: 'balances', x: 0, y: 2, w: 20, h: 468 },
{ i: 'orderbook', x: 16, y: 1, w: 4, h: 724 },
{ i: 'trade-form', x: 20, y: 1, w: 4, h: 1193 },
],
xxl: [
{ i: 'market-header', x: 0, y: 0, w: 15, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 15, h: 576 },
{ i: 'balances', x: 0, y: 2, w: 19, h: 468 },
{ i: 'orderbook', x: 15, y: 1, w: 4, h: 624 },
{ i: 'trade-form', x: 19, y: 1, w: 5, h: 1093 },
],
xl: [
{ i: 'market-header', x: 0, y: 0, w: 14, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 14, h: 520 },
{ i: 'balances', x: 0, y: 2, w: 18, h: 468 },
{ i: 'orderbook', x: 14, y: 1, w: 4, h: 568 },
{ i: 'trade-form', x: 18, y: 1, w: 6, h: 1037 },
],
lg: [
{ i: 'market-header', x: 0, y: 0, w: 14, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 14, h: 520 },
{ i: 'balances', x: 0, y: 2, w: 18, h: 468 },
{ i: 'orderbook', x: 14, y: 1, w: 4, h: 568 },
{ i: 'trade-form', x: 18, y: 1, w: 6, h: 1037 },
],
md: [
{ i: 'market-header', x: 0, y: 0, w: 18, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 18, h: 520 },
{ i: 'balances', x: 0, y: 2, w: 18, h: 468 },
{ i: 'orderbook', x: 18, y: 2, w: 6, h: 469 },
{ i: 'trade-form', x: 18, y: 1, w: 6, h: 568 },
],
}
const TradeAdvancedPage = () => { const TradeAdvancedPage = () => {
// const { height } = useViewport() const { height, width } = useViewport()
const [currentBreakpoint, setCurrentBreakpoint] = useState<string>() const [currentBreakpoint, setCurrentBreakpoint] = useState<string>()
const [orderbookDepth, setOrderbookDepth] = useState(6) const [orderbookDepth, setOrderbookDepth] = useState(6)
const { uiLocked } = mangoStore((s) => s.settings) const { uiLocked } = mangoStore((s) => s.settings)
const showMobileView = width <= breakpoints.md
const defaultLayouts = {
xxxl: [
{ i: 'market-header', x: 0, y: 0, w: 16, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 16, h: 676 },
{ i: 'balances', x: 0, y: 2, w: 20, h: 468 },
{ i: 'orderbook', x: 16, y: 1, w: 4, h: 724 },
{ i: 'trade-form', x: 20, y: 1, w: 4, h: 1193 },
],
xxl: [
{ i: 'market-header', x: 0, y: 0, w: 15, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 15, h: 576 },
{ i: 'balances', x: 0, y: 2, w: 19, h: 468 },
{ i: 'orderbook', x: 15, y: 1, w: 4, h: 624 },
{ i: 'trade-form', x: 19, y: 1, w: 5, h: 1093 },
],
xl: [
{ i: 'market-header', x: 0, y: 0, w: 14, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 14, h: 520 },
{ i: 'balances', x: 0, y: 2, w: 18, h: 468 },
{ i: 'orderbook', x: 14, y: 1, w: 4, h: 568 },
{ i: 'trade-form', x: 18, y: 1, w: 6, h: 1037 },
],
lg: [
{ i: 'market-header', x: 0, y: 0, w: 14, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 14, h: 520 },
{ i: 'balances', x: 0, y: 2, w: 18, h: 468 },
{ i: 'orderbook', x: 14, y: 1, w: 4, h: 568 },
{ i: 'trade-form', x: 18, y: 1, w: 6, h: 1037 },
],
md: [
{ i: 'market-header', x: 0, y: 0, w: 18, h: 48 },
{ i: 'tv-chart', x: 0, y: 1, w: 18, h: 520 },
{ i: 'balances', x: 0, y: 2, w: 18, h: 468 },
{ i: 'orderbook', x: 18, y: 2, w: 6, h: 469 },
{ i: 'trade-form', x: 18, y: 1, w: 6, h: 568 },
],
}
// const defaultLayouts: ReactGridLayout.Layouts = useMemo(() => { // const defaultLayouts: ReactGridLayout.Layouts = useMemo(() => {
// const innerHeight = Math.max(height - 36, 800) // const innerHeight = Math.max(height - 36, 800)
@ -108,22 +111,42 @@ const TradeAdvancedPage = () => {
defaultLayouts defaultLayouts
) )
// const getCurrentBreakpoint = () => {
// const breakpointsArray = Object.entries(gridBreakpoints)
// let bp
// for (let i = 0; i < breakpointsArray.length; ++i) {
// if (
// width > breakpointsArray[i][1] &&
// width < breakpointsArray[i + 1][1] &&
// i <= breakpointsArray.length - 1
// ) {
// bp = breakpointsArray[i][0]
// } else if (width >= breakpointsArray[breakpointsArray.length - 1][1]) {
// bp = breakpointsArray[breakpointsArray.length - 1][0]
// }
// }
// return bp
// }
useEffect(() => { useEffect(() => {
const adjustOrderBook = ( const adjustOrderBook = (
layouts: ReactGridLayout.Layouts, layouts: ReactGridLayout.Layouts,
breakpoint?: string | null breakpoint?: string | null
) => { ) => {
const bp = 'xxl' const bp = 'xxl'
const orderbookLayout = layouts[bp].find((obj) => { if (bp) {
return obj.i === 'orderbook' const orderbookLayout = layouts[bp].find((obj) => {
}) return obj.i === 'orderbook'
let depth = orderbookLayout!.h / 24 / 2 - 2 })
const maxNum = Math.max(1, depth) let depth = orderbookLayout!.h / 24 / 2 - 2
if (typeof maxNum === 'number') { const maxNum = Math.max(1, depth)
depth = Math.round(maxNum) if (typeof maxNum === 'number') {
} depth = Math.round(maxNum)
}
setOrderbookDepth(depth) setOrderbookDepth(depth)
}
} }
adjustOrderBook(defaultLayouts, currentBreakpoint) adjustOrderBook(defaultLayouts, currentBreakpoint)
@ -139,68 +162,63 @@ const TradeAdvancedPage = () => {
setCurrentBreakpoint(newBreakpoint) setCurrentBreakpoint(newBreakpoint)
}, []) }, [])
return ( return showMobileView ? (
<div className=""> <MobileTradeAdvancedPage />
<ResponsiveGridLayout ) : (
// layouts={savedLayouts ? savedLayouts : defaultLayouts} <ResponsiveGridLayout
layouts={defaultLayouts} // layouts={savedLayouts ? savedLayouts : defaultLayouts}
breakpoints={gridBreakpoints} layouts={defaultLayouts}
cols={{ breakpoints={gridBreakpoints}
xxxl: totalCols, cols={{
xxl: totalCols, xxxl: totalCols,
xl: totalCols, xxl: totalCols,
lg: totalCols, xl: totalCols,
md: totalCols, lg: totalCols,
sm: totalCols, md: totalCols,
}} sm: totalCols,
rowHeight={1} }}
isDraggable={!uiLocked} rowHeight={1}
isResizable={!uiLocked} isDraggable={!uiLocked}
onBreakpointChange={(newBreakpoint) => isResizable={!uiLocked}
onBreakpointChange(newBreakpoint) onBreakpointChange={(newBreakpoint) => onBreakpointChange(newBreakpoint)}
} onLayoutChange={(layout, layouts) => onLayoutChange(layouts)}
onLayoutChange={(layout, layouts) => onLayoutChange(layouts)} measureBeforeMount
measureBeforeMount containerPadding={[0, 0]}
containerPadding={[0, 0]} margin={[0, 0]}
margin={[0, 0]} >
<div key="market-header" className="z-10">
<AdvancedMarketHeader />
</div>
<div key="tv-chart" className="h-full border border-x-0 border-th-bkg-3">
<div className={`relative h-full overflow-auto`}>
<TradingViewChart />
</div>
</div>
<div key="balances" className="h-full">
<BalanceAndOpenOrders />
</div>
<div
key="orderbook"
className="border border-t-0 border-r-0 border-th-bkg-3"
> >
<div key="market-header" className="z-10"> <div className="flex h-[49px] items-center border-b border-th-bkg-3 px-4 ">
<AdvancedMarketHeader /> <h2 className="text-sm text-th-fgd-3">Orderbook</h2>
</div> </div>
<div <div className="flex items-center justify-between px-4 py-2 text-xs text-th-fgd-4">
key="tv-chart" <div>Size</div>
className="h-full border border-x-0 border-th-bkg-3" <div>Price</div>
>
<div className={`relative h-full overflow-auto`}>
<TradingViewChart />
</div>
</div> </div>
<div key="balances" className="h-full"> <div className="hide-scroll h-full overflow-y-scroll">
<BalanceAndOpenOrders /> <Orderbook depth={orderbookDepth} />
</div> </div>
<div </div>
key="orderbook" <div
className="border border-t-0 border-r-0 border-th-bkg-3" key="trade-form"
> className="border border-r-0 border-t-0 border-th-bkg-3"
<div className="flex h-[49px] items-center border-b border-th-bkg-3 px-4 "> >
<h2 className="text-sm text-th-fgd-3">Orderbook</h2> <AdvancedTradeForm />
</div> </div>
<div className="flex items-center justify-between px-4 py-2 text-xs text-th-fgd-4"> </ResponsiveGridLayout>
<div>Size</div>
<div>Price</div>
</div>
<div className="hide-scroll h-full overflow-y-scroll">
<Orderbook depth={orderbookDepth} />
</div>
</div>
<div
key="trade-form"
className="border border-r-0 border-t-0 border-th-bkg-3"
>
<AdvancedTradeForm />
</div>
</ResponsiveGridLayout>
</div>
) )
} }