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

trade grid layout for lg, md

This commit is contained in:
saml33 2022-09-16 13:40:30 +10:00
parent fd5b6ba60d
commit a2400638aa
6 changed files with 31 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/TokenList.tsx
View File

@ -82,7 +82,7 @@ const TokenList = () => {
}, [connected])
return (
<ContentBox hideBorder hidePadding className="-mt-[53px]">
<ContentBox hideBorder hidePadding className="-mt-[51px]">
<div className="mb-10 flex items-center justify-end pr-0 md:mb-6 md:pr-6">
<Switch
className="text-th-fgd-3"

2
components/shared/TabButtons.tsx
View File

@ -27,7 +27,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
{values.map((v, i) => (
<div key={v + i}>
<button
className={`default-transition rounded-md px-6 py-4 font-bold ${
className={`default-transition h-12 rounded-md px-6 font-bold ${
!rounded ? 'md:rounded-none' : ''
} ${showBorders ? 'md:border-r md:border-th-bkg-3' : ''} ${
v === activeValue

4
components/trade/BalanceAndOpenOrders.tsx
View File

@ -27,8 +27,8 @@ const BalanceAndOpenOrders = () => {
}, [mangoAccount, selectedMarket])
return (
<div className="h-full overflow-y-scroll">
<div className="sticky top-0">
<div>
<div className="">
<TabButtons
activeValue={selectedTab}
onChange={(tab: string) => setSelectedTab(tab)}

169
components/trade/TradeAdvancedPage copy.tsx
View File

@ -1,169 +0,0 @@
import { useCallback, useEffect, useMemo, 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'
const ResponsiveGridLayout = WidthProvider(Responsive)
const TradingViewChart = dynamic(() => import('./TradingViewChart'), {
ssr: false,
})
const gridBreakpoints = {
// sm: breakpoints.sm,
// md: breakpoints.md,
// lg: breakpoints.lg,
xl: breakpoints.xl,
xxl: breakpoints['2xl'],
xxxl: breakpoints['3xl'],
}
const totalCols = 24
const TradeAdvancedPage = () => {
const { height } = useViewport()
const [currentBreakpoint, setCurrentBreakpoint] = useState<string>()
const [orderbookDepth, setOrderbookDepth] = useState(12)
const { uiLocked } = mangoStore((s) => s.settings)
const defaultLayouts: ReactGridLayout.Layouts = useMemo(() => {
const innerHeight = Math.max(height - 36, 800)
const tvChartHeight = 432
const headerHeight = 48
const balancesHeight = innerHeight - tvChartHeight - headerHeight
return {
xxxl: [
{ i: 'market-header', x: 0, y: 0, w: 16, h: headerHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 16, h: tvChartHeight },
{ i: 'balances', x: 0, y: 2, w: 16, h: balancesHeight },
{ i: 'orderbook', x: 16, y: 1, w: 4, h: innerHeight },
{ i: 'trade-form', x: 20, y: 1, w: 4, h: innerHeight },
],
xxl: [
{ i: 'market-header', x: 0, y: 0, w: 14, h: headerHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 14, h: tvChartHeight },
{ i: 'balances', x: 0, y: 2, w: 14, h: balancesHeight },
{ i: 'orderbook', x: 14, y: 1, w: 5, h: innerHeight },
{ i: 'trade-form', x: 20, y: 1, w: 5, h: innerHeight },
],
xl: [
{ i: 'market-header', x: 0, y: 0, w: 14, h: headerHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 14, h: tvChartHeight },
{ i: 'balances', x: 0, y: 2, w: 14, h: balancesHeight },
{ i: 'orderbook', x: 14, y: 1, w: 5, h: innerHeight },
{ i: 'trade-form', x: 20, y: 1, w: 5, h: innerHeight },
],
}
}, [height])
const [savedLayouts, setSavedLayouts] = useLocalStorageState(
GRID_LAYOUT_KEY,
defaultLayouts
)
useEffect(() => {
const adjustOrderBook = (
layouts: ReactGridLayout.Layouts,
breakpoint?: string | null
) => {
const bp = 'xxl'
const orderbookLayout = layouts[bp].find((obj) => {
return obj.i === 'orderbook'
})
let depth = orderbookLayout!.h / 24 / 2 - 2
const maxNum = Math.max(1, depth)
if (typeof maxNum === 'number') {
depth = Math.round(maxNum)
}
setOrderbookDepth(depth)
}
adjustOrderBook(defaultLayouts, currentBreakpoint)
}, [currentBreakpoint, defaultLayouts])
const onLayoutChange = useCallback((layouts: ReactGridLayout.Layouts) => {
if (layouts) {
setSavedLayouts(layouts)
}
}, [])
const onBreakpointChange = useCallback((newBreakpoint: string) => {
setCurrentBreakpoint(newBreakpoint)
}, [])
return (
<div className="relative">
<ResponsiveGridLayout
// layouts={savedLayouts ? savedLayouts : defaultLayouts}
layouts={defaultLayouts}
breakpoints={gridBreakpoints}
cols={{
xxxl: totalCols,
xxl: totalCols,
xl: totalCols,
lg: totalCols,
md: totalCols,
sm: totalCols,
}}
rowHeight={1}
isDraggable={!uiLocked}
isResizable={!uiLocked}
onBreakpointChange={(newBreakpoint) =>
onBreakpointChange(newBreakpoint)
}
onLayoutChange={(layout, layouts) => onLayoutChange(layouts)}
measureBeforeMount
containerPadding={{ xxl: [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 border border-x-0 border-t-0 border-th-bkg-3"
>
<BalanceAndOpenOrders />
</div>
<div key="orderbook" className="border 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>
</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={orderbookDepth} />
</div>
</div>
<div
key="trade-form"
className="border border-x-0 border-t-0 border-th-bkg-3"
>
<AdvancedTradeForm />
</div>
</ResponsiveGridLayout>
</div>
)
}
export default TradeAdvancedPage

38
components/trade/TradeAdvancedPage.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useCallback, useEffect, useState } from 'react'
// import { useTranslation } from 'next-i18next'
import dynamic from 'next/dynamic'
import ReactGridLayout, { Responsive, WidthProvider } from 'react-grid-layout'
@ -21,8 +21,8 @@ const TradingViewChart = dynamic(() => import('./TradingViewChart'), {
const gridBreakpoints = {
// sm: breakpoints.sm,
// md: breakpoints.md,
// lg: breakpoints.lg,
md: breakpoints.md,
lg: breakpoints.lg,
xl: breakpoints.xl,
xxl: breakpoints['2xl'],
xxxl: breakpoints['3xl'],
@ -36,25 +36,39 @@ const TradeAdvancedPage = () => {
const defaultLayouts = {
xxxl: [
{ i: 'market-header', x: 0, y: 0, w: 12, h: 48 },
{ 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: 473 },
{ 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: 1197 },
{ i: 'trade-form', x: 20, y: 1, w: 4, h: 1193 },
],
xxl: [
{ i: 'market-header', x: 0, y: 0, w: 12, h: 48 },
{ 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: 473 },
{ 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: 1097 },
{ i: 'trade-form', x: 19, y: 1, w: 5, h: 1093 },
],
xl: [
{ i: 'market-header', x: 0, y: 0, w: 12, h: 48 },
{ 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: 473 },
{ 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: 1041 },
{ 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 },
],
}

1
components/trade/TradingViewChart.tsx
View File

@ -68,6 +68,7 @@ const TradingViewChart = () => {
'paneProperties.horzGridProperties.color': 'rgba(0,0,0,0)',
'paneProperties.legendProperties.showStudyTitles': false,
'scalesProperties.showStudyLastValue': false,
'scalesProperties.fontSize': 11,
}
const mainSeriesProperties = [