improve spot balances panel layout
This commit is contained in:
saml33
parent
d0797bf194
commit
a5c643ab56
|
|
@ -90,7 +90,7 @@ export default function MarginInfo() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-th-bkg-3 mt-4 p-4 rounded">
|
||||
<div className="border border-th-bkg-3 mt-4 p-4 rounded">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center">
|
||||
|
|
@ -100,7 +100,7 @@ export default function MarginInfo() {
|
|||
<div className="text-right">{maintHealth.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<div className="h-1.5 flex rounded bg-th-fgd-4">
|
||||
<div className="h-1.5 flex rounded bg-th-bkg-3">
|
||||
<div
|
||||
style={{
|
||||
width: `${maintHealth}%`,
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export default function MarketPosition() {
|
|||
<div className={!connected && 'filter blur'}>
|
||||
<ElementTitle>Balances</ElementTitle>
|
||||
{selectedMangoGroup ? (
|
||||
<div className="pt-2">
|
||||
<div className="grid grid-cols-2 grid-rows-1 gap-4 pt-2">
|
||||
{selectedMangoGroupConfig.tokens
|
||||
.filter((t) => t.symbol === baseSymbol || t.symbol === 'USDC')
|
||||
.reverse()
|
||||
|
|
@ -124,63 +124,40 @@ export default function MarketPosition() {
|
|||
/>
|
||||
<span className="text-th-fgd-2">{symbol}</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<LinkButton
|
||||
className="text-th-fgd-3 text-xs"
|
||||
onClick={() => setShowDepositModal(true)}
|
||||
disabled={!connected || loadingMangoAccount}
|
||||
>
|
||||
Deposit
|
||||
</LinkButton>
|
||||
<LinkButton
|
||||
className="ml-4 text-th-fgd-3 text-xs"
|
||||
onClick={() => setShowWithdrawModal(true)}
|
||||
disabled={
|
||||
!connected ||
|
||||
!selectedMangoAccount ||
|
||||
loadingMangoAccount
|
||||
}
|
||||
>
|
||||
Withdraw
|
||||
</LinkButton>
|
||||
</div>
|
||||
<div className="pb-2">
|
||||
<div className="text-th-fgd-3 tiny-text">Deposits</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{selectedMangoAccount
|
||||
? selectedMangoAccount
|
||||
.getUiDeposit(
|
||||
selectedMangoGroupCache.rootBankCache[
|
||||
tokenIndex
|
||||
],
|
||||
selectedMangoGroup,
|
||||
tokenIndex
|
||||
)
|
||||
.toFixed(tokenPrecision[symbol])
|
||||
: (0).toFixed(tokenPrecision[symbol])}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="w-1/4">
|
||||
<div className="text-th-fgd-3 tiny-text">
|
||||
Deposits
|
||||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{selectedMangoAccount
|
||||
? selectedMangoAccount
|
||||
.getUiDeposit(
|
||||
selectedMangoGroupCache.rootBankCache[
|
||||
tokenIndex
|
||||
],
|
||||
selectedMangoGroup,
|
||||
<div className="pb-2">
|
||||
<div className="text-th-fgd-3 tiny-text">Borrows</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{selectedMangoAccount
|
||||
? selectedMangoAccount
|
||||
.getUiBorrow(
|
||||
selectedMangoGroupCache.rootBankCache[
|
||||
tokenIndex
|
||||
)
|
||||
.toFixed(tokenPrecision[symbol])
|
||||
: (0).toFixed(tokenPrecision[symbol])}
|
||||
</div>
|
||||
],
|
||||
selectedMangoGroup,
|
||||
tokenIndex
|
||||
)
|
||||
.toFixed(tokenPrecision[symbol])
|
||||
: (0).toFixed(tokenPrecision[symbol])}
|
||||
</div>
|
||||
<div className="w-1/4">
|
||||
<div className="text-th-fgd-3 tiny-text">Borrows</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{selectedMangoAccount
|
||||
? selectedMangoAccount
|
||||
.getUiBorrow(
|
||||
selectedMangoGroupCache.rootBankCache[
|
||||
tokenIndex
|
||||
],
|
||||
selectedMangoGroup,
|
||||
tokenIndex
|
||||
)
|
||||
.toFixed(tokenPrecision[symbol])
|
||||
: (0).toFixed(tokenPrecision[symbol])}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/4">
|
||||
</div>
|
||||
{/* <div className="w-1/4">
|
||||
<Tooltip content="Maximum available with leverage">
|
||||
<div
|
||||
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 tiny-text default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
|
||||
|
|
@ -189,30 +166,29 @@ export default function MarketPosition() {
|
|||
</div>
|
||||
</Tooltip>
|
||||
<div className={`text-th-fgd-1`}>0.00</div>
|
||||
</div>
|
||||
<div className="w-1/4">
|
||||
<Tooltip content="Deposit APY and Borrow APR">
|
||||
<div
|
||||
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 tiny-text default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
|
||||
>
|
||||
Interest Rates
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
<span className={`text-th-green`}>
|
||||
{i80f48ToPercent(
|
||||
selectedMangoGroup.getDepositRate(tokenIndex)
|
||||
).toFixed(2)}
|
||||
%
|
||||
</span>
|
||||
<span className={`text-th-fgd-4`}>{' / '}</span>
|
||||
<span className={`text-th-red`}>
|
||||
{i80f48ToPercent(
|
||||
selectedMangoGroup.getBorrowRate(tokenIndex)
|
||||
).toFixed(2)}
|
||||
%
|
||||
</span>
|
||||
</div> */}
|
||||
<div>
|
||||
<Tooltip content="Deposit APY and Borrow APR">
|
||||
<div
|
||||
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 tiny-text default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
|
||||
>
|
||||
Interest Rates
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
<span className={`text-th-green`}>
|
||||
{i80f48ToPercent(
|
||||
selectedMangoGroup.getDepositRate(tokenIndex)
|
||||
).toFixed(2)}
|
||||
%
|
||||
</span>
|
||||
<span className={`text-th-fgd-4`}>{' / '}</span>
|
||||
<span className={`text-th-red`}>
|
||||
{i80f48ToPercent(
|
||||
selectedMangoGroup.getBorrowRate(tokenIndex)
|
||||
).toFixed(2)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -220,6 +196,22 @@ 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 && (
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export const defaultLayouts = {
|
|||
{ i: 'tradeForm', x: 9, y: 1, w: 3, h: 14 },
|
||||
{ i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
|
||||
{ i: 'balanceInfo', x: 9, y: 2, w: 3, h: 15 },
|
||||
{ i: 'marketPosition', x: 9, y: 3, w: 3, h: 14 },
|
||||
{ i: 'marketPosition', x: 9, y: 3, w: 3, h: 15 },
|
||||
{ i: 'userInfo', x: 0, y: 2, w: 9, h: 19 },
|
||||
{ i: 'marginInfo', x: 9, y: 4, w: 3, h: 14 },
|
||||
],
|
||||
|
|
@ -42,7 +42,7 @@ 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: 26, minW: 2 },
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 29, minW: 2 },
|
||||
{ i: 'balanceInfo', x: 8, y: 0, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 14, minW: 2 },
|
||||
|
|
@ -55,7 +55,7 @@ export const defaultLayouts = {
|
|||
{ i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 },
|
||||
{ i: 'balanceInfo', x: 0, y: 1, w: 6, h: 15, minW: 2 },
|
||||
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
|
||||
{ i: 'marginInfo', x: 6, y: 1, w: 6, h: 14, 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 },
|
||||
|
|
|
|||
Loading…
Reference in New Issue