Merge pull request #11 from blockworks-foundation/move-deposit-withdraw-buttons
move buttons to margininfo panel
This commit is contained in:
tjshipe
GitHub
commit
2fa3b81b74
|
|
@ -13,7 +13,9 @@ const DayHighLow = ({ high, low, latest }) => {
|
|||
|
||||
return (
|
||||
<div className="pr-6">
|
||||
<div className="text-center text-th-fgd-3 tiny-text">24h Range</div>
|
||||
<div className="text-center text-th-fgd-3 tiny-text pb-0.5">
|
||||
24h Range
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="pr-2 text-th-fgd-1 text-xs">
|
||||
{formatUsdValue(low?.baseOraclePrice)}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import {
|
|||
ZERO_BN,
|
||||
ZERO_I80F48,
|
||||
} from '@blockworks-foundation/mango-client'
|
||||
import { HeartIcon } from '@heroicons/react/outline'
|
||||
import { useMemo } from 'react'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { HeartIcon } from '@heroicons/react/solid'
|
||||
import useMangoStore, { mangoClient, MNGO_INDEX } from '../stores/useMangoStore'
|
||||
import { formatUsdValue } from '../utils'
|
||||
import { notify } from '../utils/notifications'
|
||||
|
|
@ -12,6 +12,9 @@ import { LinkButton } from './Button'
|
|||
import FloatingElement from './FloatingElement'
|
||||
import { ElementTitle } from './styles'
|
||||
import Tooltip from './Tooltip'
|
||||
import DepositModal from './DepositModal'
|
||||
import WithdrawModal from './WithdrawModal'
|
||||
import Button from './Button'
|
||||
|
||||
export default function MarginInfo() {
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
|
|
@ -20,6 +23,17 @@ export default function MarginInfo() {
|
|||
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
|
||||
const actions = useMangoStore((s) => s.actions)
|
||||
|
||||
const [showDepositModal, setShowDepositModal] = useState(false)
|
||||
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
|
||||
|
||||
const handleCloseDeposit = useCallback(() => {
|
||||
setShowDepositModal(false)
|
||||
}, [])
|
||||
|
||||
const handleCloseWithdraw = useCallback(() => {
|
||||
setShowWithdrawModal(false)
|
||||
}, [])
|
||||
|
||||
const equity = mangoAccount
|
||||
? mangoAccount.computeValue(mangoGroup, mangoCache)
|
||||
: ZERO_I80F48
|
||||
|
|
@ -78,11 +92,11 @@ export default function MarginInfo() {
|
|||
<ElementTitle>Account</ElementTitle>
|
||||
<div>
|
||||
<div>
|
||||
<div className="flex justify-between pt-2 pb-2">
|
||||
<div className="flex justify-between py-2">
|
||||
<div className="font-normal text-th-fgd-3 leading-4">Equity</div>
|
||||
<div className="text-th-fgd-1">{formatUsdValue(+equity)}</div>
|
||||
</div>
|
||||
<div className="flex justify-between pt-2 pb-2">
|
||||
<div className="flex justify-between py-2">
|
||||
<div className="font-normal text-th-fgd-3 leading-4">
|
||||
Leverage
|
||||
</div>
|
||||
|
|
@ -93,7 +107,7 @@ export default function MarginInfo() {
|
|||
x
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex justify-between pt-2 pb-2`}>
|
||||
<div className={`flex justify-between py-2`}>
|
||||
<div className="font-normal text-th-fgd-3 leading-4">
|
||||
Total Assets Value
|
||||
</div>
|
||||
|
|
@ -105,7 +119,7 @@ export default function MarginInfo() {
|
|||
: '--'}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex justify-between pt-2 pb-2`}>
|
||||
<div className={`flex justify-between py-2`}>
|
||||
<div className="font-normal text-th-fgd-3 leading-4">
|
||||
Total Liabilities Value
|
||||
</div>
|
||||
|
|
@ -117,7 +131,7 @@ export default function MarginInfo() {
|
|||
: '--'}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex justify-between pt-2 pb-2`}>
|
||||
<div className={`flex justify-between py-2`}>
|
||||
<Tooltip
|
||||
content={
|
||||
<div>
|
||||
|
|
@ -145,7 +159,7 @@ export default function MarginInfo() {
|
|||
: 0}
|
||||
<LinkButton
|
||||
onClick={handleRedeemMngo}
|
||||
className="ml-2 text-th-primary text-xs"
|
||||
className="ml-2 text-th-primary text-xs disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:underline"
|
||||
disabled={mngoAccrued.eq(ZERO_BN)}
|
||||
>
|
||||
Claim
|
||||
|
|
@ -153,57 +167,78 @@ export default function MarginInfo() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-th-bkg-4 mt-4 p-4 rounded">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center">
|
||||
<HeartIcon
|
||||
className="h-5 w-5 text-th-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="ml-2">
|
||||
<Tooltip
|
||||
content={
|
||||
<div>
|
||||
Account will be liquidated if Health Ratio reaches 0%.{' '}
|
||||
<a
|
||||
href="https://docs.mango.markets/mango-v3/overview#health"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="cursor-help font-normal text-th-fgd-3 leading-4 border-b border-th-fgd-3 border-dashed border-opacity-20 default-transition hover:border-th-bkg-2">
|
||||
Health Ratio
|
||||
</div>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-right">{maintHealthRatio.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<div className="h-1.5 flex rounded bg-th-bkg-3 mt-4">
|
||||
<div
|
||||
style={{
|
||||
width: `${maintHealthRatio}%`,
|
||||
}}
|
||||
className={`flex rounded ${
|
||||
maintHealthRatio > 30
|
||||
? 'bg-th-green'
|
||||
: initHealthRatio > 0
|
||||
? 'bg-th-orange'
|
||||
: 'bg-th-red'
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-th-bkg-4 rounded flex items-center my-3 p-2.5">
|
||||
<div className="flex items-center pr-2">
|
||||
<HeartIcon
|
||||
className="h-5 mr-1.5 w-5 text-th-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>
|
||||
<Tooltip
|
||||
content={
|
||||
<div>
|
||||
Account will be liquidated if Health Ratio reaches 0%.{' '}
|
||||
<a
|
||||
href="https://docs.mango.markets/mango-v3/overview#health"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="cursor-help font-normal text-th-fgd-3 leading-4 border-b border-th-fgd-3 border-dashed border-opacity-20 default-transition hover:border-th-bkg-2">
|
||||
Health
|
||||
</div>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1.5 flex flex-grow rounded bg-th-bkg-4">
|
||||
<div
|
||||
style={{
|
||||
width: `${maintHealthRatio}%`,
|
||||
}}
|
||||
className={`flex rounded ${
|
||||
maintHealthRatio > 30
|
||||
? 'bg-th-green'
|
||||
: initHealthRatio > 0
|
||||
? 'bg-th-orange'
|
||||
: 'bg-th-red'
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
<div className="pl-2 text-right">
|
||||
{maintHealthRatio.toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-2`}>
|
||||
<Button
|
||||
onClick={() => setShowDepositModal(true)}
|
||||
className="w-full"
|
||||
disabled={!connected}
|
||||
>
|
||||
<span>Deposit</span>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setShowWithdrawModal(true)}
|
||||
className="w-full"
|
||||
disabled={!connected}
|
||||
>
|
||||
<span>Withdraw</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showDepositModal && (
|
||||
<DepositModal isOpen={showDepositModal} onClose={handleCloseDeposit} />
|
||||
)}
|
||||
{showWithdrawModal && (
|
||||
<WithdrawModal
|
||||
isOpen={showWithdrawModal}
|
||||
onClose={handleCloseWithdraw}
|
||||
/>
|
||||
)}
|
||||
</FloatingElement>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -152,13 +152,13 @@ const MarketHeader = () => {
|
|||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="pr-6">
|
||||
<div className="text-th-fgd-3 tiny-text">Oracle price</div>
|
||||
<div className="text-th-fgd-3 tiny-text pb-0.5">Oracle price</div>
|
||||
<div className="font-semibold text-th-fgd-1 text-xs">
|
||||
{oraclePrice ? formatUsdValue(oraclePrice) : '--'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pr-4">
|
||||
<div className="text-th-fgd-3 tiny-text">24h Change</div>
|
||||
<div className="text-th-fgd-3 tiny-text pb-0.5">24h Change</div>
|
||||
{spotStats?.change ? (
|
||||
<div
|
||||
className={`font-semibold text-xs ${
|
||||
|
|
@ -176,13 +176,13 @@ const MarketHeader = () => {
|
|||
)}
|
||||
</div>
|
||||
<div className="pr-6">
|
||||
<div className="text-th-fgd-3 tiny-text">24h Vol</div>
|
||||
<div className="text-th-fgd-3 tiny-text pb-0.5">24h Vol</div>
|
||||
<div className="font-semibold text-th-fgd-1 text-xs">
|
||||
{ohlcv && !loading && volume ? (
|
||||
volume !== '--' ? (
|
||||
<>
|
||||
{volume.toFixed(2)}
|
||||
<span className="ml-1 text-th-fgd-3 tiny-text">
|
||||
<span className="ml-1 text-th-fgd-3 tiny-text pb-0.5">
|
||||
{baseSymbol}
|
||||
</span>
|
||||
</>
|
||||
|
|
@ -202,7 +202,7 @@ const MarketHeader = () => {
|
|||
{selectedMarketName.includes('PERP') ? (
|
||||
<>
|
||||
<div className="pr-6">
|
||||
<div className="text-th-fgd-3 tiny-text">
|
||||
<div className="text-th-fgd-3 tiny-text pb-0.5">
|
||||
Avg Funding Rate (1h)
|
||||
</div>
|
||||
<div className="font-semibold text-th-fgd-1 text-xs">
|
||||
|
|
@ -210,7 +210,9 @@ const MarketHeader = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="pr-6">
|
||||
<div className="text-th-fgd-3 tiny-text">Open Interest</div>
|
||||
<div className="text-th-fgd-3 tiny-text pb-0.5">
|
||||
Open Interest
|
||||
</div>
|
||||
<div className="font-semibold text-th-fgd-1 text-xs">
|
||||
{parseOpenInterest(perpStats, selectedMarket)} {baseSymbol}
|
||||
</div>
|
||||
|
|
@ -219,7 +221,7 @@ const MarketHeader = () => {
|
|||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex items-center">
|
||||
<UiLock />
|
||||
{connected && mangoAccount ? <ManualRefresh className="pl-2" /> : null}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { useMemo } from 'react'
|
||||
import FloatingElement from './FloatingElement'
|
||||
import { ElementTitle } from './styles'
|
||||
import useMangoStore, { mangoClient } from '../stores/useMangoStore'
|
||||
|
|
@ -8,9 +8,7 @@ import {
|
|||
i80f48ToPercent,
|
||||
formatUsdValue,
|
||||
} from '../utils/index'
|
||||
import DepositModal from './DepositModal'
|
||||
import WithdrawModal from './WithdrawModal'
|
||||
import Button from './Button'
|
||||
import { LinkButton } from './Button'
|
||||
import Tooltip from './Tooltip'
|
||||
import SideBadge from './SideBadge'
|
||||
import {
|
||||
|
|
@ -69,6 +67,7 @@ export default function MarketPosition() {
|
|||
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
|
||||
const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
|
||||
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
|
||||
const selectedMarketName = marketConfig.name
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
const baseSymbol = marketConfig.baseSymbol
|
||||
const marketName = marketConfig.name
|
||||
|
|
@ -77,9 +76,6 @@ export default function MarketPosition() {
|
|||
(t) => t.marketName === marketName
|
||||
)
|
||||
|
||||
const [showDepositModal, setShowDepositModal] = useState(false)
|
||||
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
|
||||
|
||||
const marketIndex = useMemo(() => {
|
||||
return getMarketIndexBySymbol(mangoGroupConfig, baseSymbol)
|
||||
}, [mangoGroupConfig, baseSymbol])
|
||||
|
|
@ -90,14 +86,6 @@ export default function MarketPosition() {
|
|||
}
|
||||
}, [marketName, mangoAccount, marketIndex])
|
||||
|
||||
const handleCloseDeposit = useCallback(() => {
|
||||
setShowDepositModal(false)
|
||||
}, [])
|
||||
|
||||
const handleCloseWithdraw = useCallback(() => {
|
||||
setShowWithdrawModal(false)
|
||||
}, [])
|
||||
|
||||
return selectedMarket instanceof PerpMarket ? (
|
||||
<FloatingElement showConnect>
|
||||
<div className={!connected ? 'filter blur-sm' : null}>
|
||||
|
|
@ -170,7 +158,7 @@ export default function MarketPosition() {
|
|||
<div className="font-normal text-th-fgd-3 leading-4">
|
||||
Unsettled PnL
|
||||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
<div className={`flex items-center text-th-fgd-1`}>
|
||||
{perpAccount
|
||||
? formatUsdValue(
|
||||
+nativeI80F48ToUi(
|
||||
|
|
@ -182,18 +170,23 @@ export default function MarketPosition() {
|
|||
)
|
||||
)
|
||||
: '0'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
{perpAccount ? (
|
||||
<Button
|
||||
className="mt-4 w-full"
|
||||
disabled={!connected}
|
||||
<LinkButton
|
||||
onClick={() => handleSettlePnl(selectedMarket, perpAccount)}
|
||||
className="ml-2 text-th-primary text-xs disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:underline"
|
||||
disabled={
|
||||
perpAccount &&
|
||||
+nativeI80F48ToUi(
|
||||
perpAccount.getPnl(
|
||||
mangoGroup.perpMarkets[marketIndex],
|
||||
mangoGroupCache.priceCache[marketIndex].price
|
||||
),
|
||||
marketConfig.quoteDecimals
|
||||
) === 0
|
||||
}
|
||||
>
|
||||
Settle PNL
|
||||
</Button>
|
||||
) : null}
|
||||
Settle
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FloatingElement>
|
||||
|
|
@ -201,7 +194,7 @@ export default function MarketPosition() {
|
|||
<>
|
||||
<FloatingElement showConnect>
|
||||
<div className={!connected ? 'filter blur' : null}>
|
||||
<ElementTitle>Balances</ElementTitle>
|
||||
<ElementTitle>Balance</ElementTitle>
|
||||
{mangoGroup ? (
|
||||
<div className="grid grid-cols-2 grid-rows-1 gap-4 pt-2">
|
||||
{mangoGroupConfig.tokens
|
||||
|
|
@ -211,10 +204,10 @@ export default function MarketPosition() {
|
|||
const tokenIndex = mangoGroup.getTokenIndex(mintKey)
|
||||
return (
|
||||
<div
|
||||
className="border border-th-bkg-4 mb-4 p-3 rounded-md"
|
||||
className="border border-th-bkg-4 p-4 rounded-md"
|
||||
key={mintKey.toString()}
|
||||
>
|
||||
<div className="border-b border-th-bkg-4 flex items-center justify-between mb-3 pb-3">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -224,10 +217,8 @@ export default function MarketPosition() {
|
|||
<span className="text-th-fgd-2">{symbol}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pb-3">
|
||||
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
||||
Deposits
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<div className="pb-0.5 text-th-fgd-3">Deposits</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{mangoAccount
|
||||
? floorToDecimal(
|
||||
|
|
@ -245,10 +236,8 @@ export default function MarketPosition() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pb-3">
|
||||
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
||||
Borrows
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<div className="pb-0.5 text-th-fgd-3">Borrows</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{mangoAccount
|
||||
? ceilToDecimal(
|
||||
|
|
@ -269,7 +258,7 @@ export default function MarketPosition() {
|
|||
<div>
|
||||
<Tooltip content="Deposit APY and Borrow APR">
|
||||
<div
|
||||
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 text-xs default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
|
||||
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
|
||||
>
|
||||
Interest Rates
|
||||
</div>
|
||||
|
|
@ -295,33 +284,8 @@ export default function MarketPosition() {
|
|||
})}
|
||||
</div>
|
||||
) : null}
|
||||
<div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-2`}>
|
||||
<Button
|
||||
onClick={() => setShowDepositModal(true)}
|
||||
className="w-full"
|
||||
disabled={!connected}
|
||||
>
|
||||
<span>Deposit</span>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setShowWithdrawModal(true)}
|
||||
className="w-full"
|
||||
disabled={!connected}
|
||||
>
|
||||
<span>Withdraw</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</FloatingElement>
|
||||
{showDepositModal && (
|
||||
<DepositModal isOpen={showDepositModal} onClose={handleCloseDeposit} />
|
||||
)}
|
||||
{showWithdrawModal && (
|
||||
<WithdrawModal
|
||||
isOpen={showWithdrawModal}
|
||||
onClose={handleCloseWithdraw}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ export const defaultLayouts = {
|
|||
{ i: 'orderbook', x: 6, y: 0, w: 3, h: 17 },
|
||||
{ i: 'tradeForm', x: 9, y: 1, w: 3, h: 14 },
|
||||
{ i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
|
||||
{ i: 'marketPosition', x: 9, y: 3, w: 3, h: 15 },
|
||||
{ i: 'marketPosition', x: 9, y: 3, w: 3, h: 13 },
|
||||
{ i: 'userInfo', x: 0, y: 2, w: 9, h: 19 },
|
||||
{ i: 'marginInfo', x: 9, y: 4, w: 3, h: 15 },
|
||||
],
|
||||
lg: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 },
|
||||
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
|
||||
{ i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
|
||||
|
|
@ -38,8 +38,8 @@ export const defaultLayouts = {
|
|||
{ i: 'userInfo', x: 0, y: 3, w: 12, h: 19, minW: 6 },
|
||||
],
|
||||
md: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 },
|
||||
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
|
||||
{ i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
|
||||
|
|
@ -49,7 +49,7 @@ export const defaultLayouts = {
|
|||
sm: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 },
|
||||
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
|
||||
{ i: 'marginInfo', x: 6, y: 1, w: 6, h: 16, minW: 2 },
|
||||
{ i: 'marginInfo', x: 6, y: 1, w: 6, h: 15, minW: 2 },
|
||||
{ i: 'tradeForm', x: 0, y: 2, w: 12, h: 13, minW: 3 },
|
||||
{ i: 'orderbook', x: 0, y: 3, w: 6, h: 17, minW: 3 },
|
||||
{ i: 'marketTrades', x: 6, y: 3, w: 6, h: 17, minW: 2 },
|
||||
|
|
@ -57,8 +57,8 @@ export const defaultLayouts = {
|
|||
],
|
||||
xs: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 0, h: 0, minW: 6 },
|
||||
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
|
||||
{ i: 'marginInfo', x: 0, y: 2, w: 6, h: 16, minW: 2 },
|
||||
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 13, minW: 2 },
|
||||
{ i: 'marginInfo', x: 0, y: 2, w: 6, h: 15, minW: 2 },
|
||||
{ i: 'tradeForm', x: 0, y: 3, w: 12, h: 13, minW: 3 },
|
||||
{ i: 'orderbook', x: 0, y: 4, w: 6, h: 17, minW: 3 },
|
||||
{ i: 'marketTrades', x: 0, y: 5, w: 6, h: 17, minW: 2 },
|
||||
|
|
|
|||
Loading…
Reference in New Issue