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

fix panel layout

This commit is contained in:
saml33 2021-08-21 11:42:59 +10:00
parent 978f72a381
commit 5cc4719ef8
3 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/AccountInfo.tsx
View File

@ -102,7 +102,7 @@ export default function MarginInfo() {
<ElementTitle>Account</ElementTitle> <ElementTitle>Account</ElementTitle>
<div> <div>
<div> <div>
<div className="flex justify-between py-2"> <div className="flex justify-between pb-3">
<div className="font-normal text-th-fgd-3 leading-4">Equity</div> <div className="font-normal text-th-fgd-3 leading-4">Equity</div>
<div className="text-th-fgd-1"> <div className="text-th-fgd-1">
{isLoading ? ( {isLoading ? (
@ -112,7 +112,7 @@ export default function MarginInfo() {
)} )}
</div> </div>
</div> </div>
<div className="flex justify-between py-2"> <div className="flex justify-between pb-3">
<div className="font-normal text-th-fgd-3 leading-4"> <div className="font-normal text-th-fgd-3 leading-4">
Leverage Leverage
</div> </div>
@ -128,7 +128,7 @@ export default function MarginInfo() {
)} )}
</div> </div>
</div> </div>
<div className={`flex justify-between py-2`}> <div className={`flex justify-between pb-3`}>
<div className="font-normal text-th-fgd-3 leading-4"> <div className="font-normal text-th-fgd-3 leading-4">
Total Assets Value Total Assets Value
</div> </div>
@ -144,7 +144,7 @@ export default function MarginInfo() {
)} )}
</div> </div>
</div> </div>
<div className={`flex justify-between py-2`}> <div className={`flex justify-between pb-3`}>
<div className="font-normal text-th-fgd-3 leading-4"> <div className="font-normal text-th-fgd-3 leading-4">
Total Liabilities Value Total Liabilities Value
</div> </div>
@ -160,7 +160,7 @@ export default function MarginInfo() {
)} )}
</div> </div>
</div> </div>
<div className={`flex justify-between py-2`}> <div className={`flex justify-between pb-3`}>
<div className="font-normal text-th-fgd-3 leading-4"> <div className="font-normal text-th-fgd-3 leading-4">
Margin Available Margin Available
</div> </div>
@ -168,7 +168,7 @@ export default function MarginInfo() {
{mangoAccount ? formatUsdValue(marginAvailable) : '--'} {mangoAccount ? formatUsdValue(marginAvailable) : '--'}
</div> </div>
</div> </div>
<div className={`flex justify-between py-2`}> <div className={`flex justify-between pb-3`}>
<Tooltip <Tooltip
content={ content={
<div> <div>
@ -256,7 +256,7 @@ export default function MarginInfo() {
% %
</div> </div>
</div> </div>
<div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-2`}> <div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-4`}>
<Button <Button
onClick={() => setShowDepositModal(true)} onClick={() => setShowDepositModal(true)}
className="w-full" className="w-full"

37
components/MarketPosition.tsx
View File

@ -7,6 +7,7 @@ import {
floorToDecimal, floorToDecimal,
i80f48ToPercent, i80f48ToPercent,
formatUsdValue, formatUsdValue,
tokenPrecision,
} from '../utils/index' } from '../utils/index'
import { LinkButton } from './Button' import { LinkButton } from './Button'
import Tooltip from './Tooltip' import Tooltip from './Tooltip'
@ -284,8 +285,10 @@ export default function MarketPosition() {
<span className="text-th-fgd-2">{symbol}</span> <span className="text-th-fgd-2">{symbol}</span>
</div> </div>
</div> </div>
<div className="pb-4"> <div className="pb-3">
<div className="pb-0.5 text-th-fgd-3">Deposits</div> <div className="pb-0.5 text-th-fgd-3 text-xs">
Deposits
</div>
<div className={`text-th-fgd-1`}> <div className={`text-th-fgd-1`}>
{isLoading ? ( {isLoading ? (
<div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" /> <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
@ -298,15 +301,31 @@ export default function MarketPosition() {
tokenIndex tokenIndex
) )
.toNumber(), .toNumber(),
mangoGroup.tokens[tokenIndex].decimals tokenPrecision[symbol]
) )
) : ( ) : (
(0).toFixed(mangoGroup.tokens[tokenIndex].decimals) 0
)} )}
</div> </div>
</div> </div>
<div className="pb-4"> <div className="pb-3">
<div className="pb-0.5 text-th-fgd-3">Borrows</div> <div className="pb-0.5 text-th-fgd-3 text-xs">
Available
</div>
<div className={`text-th-fgd-1`}>
{isLoading ? (
<div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
) : mangoAccount ? (
'--'
) : (
0
)}
</div>
</div>
<div className="pb-3">
<div className="pb-0.5 text-th-fgd-3 text-xs">
Borrows
</div>
<div className={`text-th-fgd-1`}> <div className={`text-th-fgd-1`}>
{isLoading ? ( {isLoading ? (
<div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" /> <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
@ -319,17 +338,17 @@ export default function MarketPosition() {
tokenIndex tokenIndex
) )
.toNumber(), .toNumber(),
mangoGroup.tokens[tokenIndex].decimals tokenPrecision[symbol]
) )
) : ( ) : (
(0).toFixed(mangoGroup.tokens[tokenIndex].decimals) 0
)} )}
</div> </div>
</div> </div>
<div> <div>
<Tooltip content="Deposit APY and Borrow APR"> <Tooltip content="Deposit APY and Borrow APR">
<div <div
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 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 text-xs hover:border-th-bkg-2 hover:text-th-fgd-3`}
> >
Interest Rates Interest Rates
</div> </div>

24
components/TradePageGrid.tsx
View File

@ -24,23 +24,23 @@ export const defaultLayouts = {
{ i: 'orderbook', x: 6, y: 0, w: 3, h: 17 }, { i: 'orderbook', x: 6, y: 0, w: 3, h: 17 },
{ i: 'tradeForm', x: 9, y: 1, w: 3, h: 14 }, { i: 'tradeForm', x: 9, y: 1, w: 3, h: 14 },
{ i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 }, { i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
{ i: 'accountInfo', x: 9, y: 3, w: 3, h: 15 }, { i: 'accountInfo', x: 9, y: 3, w: 3, h: 16 },
{ i: 'userInfo', x: 0, y: 2, w: 9, h: 19 }, { i: 'userInfo', x: 0, y: 2, w: 9, h: 19 },
{ i: 'marketPosition', x: 9, y: 4, w: 3, h: 13 }, { i: 'marketPosition', x: 9, y: 4, w: 3, h: 14 },
], ],
lg: [ lg: [
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 }, { i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 }, { i: 'marketPosition', x: 8, y: 0, w: 4, h: 14, minW: 2 },
{ i: 'accountInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 }, { i: 'accountInfo', x: 8, y: 1, w: 4, h: 16, minW: 2 },
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, 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 }, { i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
{ i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 }, { i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
{ i: 'userInfo', x: 0, y: 3, w: 12, h: 19, minW: 6 }, { i: 'userInfo', x: 0, y: 3, w: 12, h: 19, minW: 6 },
], ],
md: [ md: [
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 }, { i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 }, { i: 'marketPosition', x: 8, y: 0, w: 4, h: 14, minW: 2 },
{ i: 'accountInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 }, { i: 'accountInfo', x: 8, y: 1, w: 4, h: 16, minW: 2 },
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, 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 }, { i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
{ i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 }, { i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
@ -48,8 +48,8 @@ export const defaultLayouts = {
], ],
sm: [ sm: [
{ i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 }, { 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: 'marketPosition', x: 0, y: 1, w: 6, h: 16, minW: 2 },
{ i: 'accountInfo', x: 6, y: 1, w: 6, h: 15, minW: 2 }, { i: 'accountInfo', x: 6, y: 1, w: 6, h: 16, minW: 2 },
{ i: 'tradeForm', x: 0, y: 2, w: 12, h: 13, minW: 3 }, { 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: 'orderbook', x: 0, y: 3, w: 6, h: 17, minW: 3 },
{ i: 'marketTrades', x: 6, y: 3, w: 6, h: 17, minW: 2 }, { i: 'marketTrades', x: 6, y: 3, w: 6, h: 17, minW: 2 },
@ -57,8 +57,8 @@ export const defaultLayouts = {
], ],
xs: [ xs: [
{ i: 'tvChart', x: 0, y: 0, w: 0, h: 0, minW: 6 }, { i: 'tvChart', x: 0, y: 0, w: 0, h: 0, minW: 6 },
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 13, minW: 2 }, { i: 'marketPosition', x: 0, y: 1, w: 6, h: 14, minW: 2 },
{ i: 'accountInfo', x: 0, y: 2, w: 6, h: 15, minW: 2 }, { i: 'accountInfo', x: 0, y: 2, w: 6, h: 16, minW: 2 },
{ i: 'tradeForm', x: 0, y: 3, w: 12, h: 13, minW: 3 }, { 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: 'orderbook', x: 0, y: 4, w: 6, h: 17, minW: 3 },
{ i: 'marketTrades', x: 0, y: 5, w: 6, h: 17, minW: 2 }, { i: 'marketTrades', x: 0, y: 5, w: 6, h: 17, minW: 2 },