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

View File

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

View File

@ -6,6 +6,7 @@ import {
Cog8ToothIcon,
MagnifyingGlassIcon,
ExclamationCircleIcon,
HeartIcon,
} from '@heroicons/react/20/solid'
import { RouteInfo } from '@jup-ag/core'
import NumberFormat, { NumberFormatValues } from 'react-number-format'
@ -384,16 +385,17 @@ const SwapForm = () => {
)}
</Button>
</div>
{/* {!!mangoAccount ? ( */}
<div
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'
}`}
>
<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">
<p className="text-sm text-th-fgd-1">{currentMaintHealth}%</p>
<ArrowRightIcon className="h-4 w-4 text-th-fgd-4" />
@ -421,7 +423,6 @@ const SwapForm = () => {
</div>
</div>
</div>
{/* ) : null} */}
</ContentBox>
)
}

View File

@ -28,7 +28,7 @@ const MarketSelectDropdown = () => {
{({ close, open }) => (
<div className="relative flex flex-col overflow-visible">
<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}
</div>
<ChevronDownIcon
@ -38,7 +38,7 @@ const MarketSelectDropdown = () => {
/>
</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.map((m) => (
<div
@ -68,7 +68,7 @@ const OraclePrice = () => {
)
return (
<div className="font-mono text-th-fgd-1 md:text-xs">
<div className="font-mono text-xs text-th-fgd-1">
$
{baseTokenBank.uiPrice
? formatFixedDecimals(baseTokenBank.uiPrice)
@ -100,18 +100,18 @@ const AdvancedMarketHeader = () => {
: 0
return (
<div className="flex h-12 items-center bg-th-bkg-1 px-5">
<div className="hidden md:block md:pr-6 lg:pb-0">
<div className="flex h-16 items-center bg-th-bkg-1 px-5 md:h-12">
<div className="md:pr-6 lg:pb-0">
<div className="flex items-center">
<MarketSelectDropdown />
</div>
</div>
<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 />
</div>
<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
className={`font-mono text-xs ${
change < 0 ? 'text-th-red' : 'text-th-gree'

View File

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

View File

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

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

View File

@ -474,7 +474,7 @@ const OrderbookRow = ({
<div className="flex w-full items-center justify-between hover:bg-th-bkg-2">
<div
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'
}`}
// onClick={handleSizeClick}
@ -482,7 +482,7 @@ const OrderbookRow = ({
{formattedSize.toFixed(minOrderSizeDecimals)}
</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}
>
{formattedPrice.toFixed(groupingDecimalCount)}

View File

@ -7,11 +7,12 @@ 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 { useViewport } from 'hooks/useViewport'
import Orderbook from './Orderbook'
import AdvancedMarketHeader from './AdvancedMarketHeader'
import AdvancedTradeForm from './AdvancedTradeForm'
import BalanceAndOpenOrders from './BalanceAndOpenOrders'
import MobileTradeAdvancedPage from './MobileTradeAdvancedPage'
const ResponsiveGridLayout = WidthProvider(Responsive)
@ -20,7 +21,7 @@ const TradingViewChart = dynamic(() => import('./TradingViewChart'), {
})
const gridBreakpoints = {
// sm: breakpoints.sm,
sm: breakpoints.sm,
md: breakpoints.md,
lg: breakpoints.lg,
xl: breakpoints.xl,
@ -28,49 +29,51 @@ const gridBreakpoints = {
xxxl: breakpoints['3xl'],
}
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 { height } = useViewport()
const { height, width } = useViewport()
const [currentBreakpoint, setCurrentBreakpoint] = useState<string>()
const [orderbookDepth, setOrderbookDepth] = useState(6)
const { uiLocked } = mangoStore((s) => s.settings)
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 showMobileView = width <= breakpoints.md
// const defaultLayouts: ReactGridLayout.Layouts = useMemo(() => {
// const innerHeight = Math.max(height - 36, 800)
@ -108,22 +111,42 @@ const TradeAdvancedPage = () => {
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(() => {
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)
}
if (bp) {
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)
setOrderbookDepth(depth)
}
}
adjustOrderBook(defaultLayouts, currentBreakpoint)
@ -139,68 +162,63 @@ const TradeAdvancedPage = () => {
setCurrentBreakpoint(newBreakpoint)
}, [])
return (
<div className="">
<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={[0, 0]}
margin={[0, 0]}
return showMobileView ? (
<MobileTradeAdvancedPage />
) : (
<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={[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">
<AdvancedMarketHeader />
<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
key="tv-chart"
className="h-full border border-x-0 border-th-bkg-3"
>
<div className={`relative h-full overflow-auto`}>
<TradingViewChart />
</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 key="balances" className="h-full">
<BalanceAndOpenOrders />
<div className="hide-scroll h-full overflow-y-scroll">
<Orderbook depth={orderbookDepth} />
</div>
<div
key="orderbook"
className="border border-t-0 border-r-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-r-0 border-t-0 border-th-bkg-3"
>
<AdvancedTradeForm />
</div>
</ResponsiveGridLayout>
</div>
</div>
<div
key="trade-form"
className="border border-r-0 border-t-0 border-th-bkg-3"
>
<AdvancedTradeForm />
</div>
</ResponsiveGridLayout>
)
}