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

orderbook layout

This commit is contained in:
saml33 2022-09-19 15:36:09 +10:00
parent 2b4f3410d2
commit a2f83b527d
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/trade/Orderbook.tsx
View File

@ -387,9 +387,9 @@ const Orderbook = ({ depth = 12 }) => {
/>
</Tooltip>
</div>
<div className="flex items-center justify-between px-4 pb-2 text-xs text-th-fgd-4">
<div>Size</div>
<div>Price</div>
<div className="grid grid-cols-2 px-4 pb-2 text-xs text-th-fgd-4">
<div className="col-span-1 text-right">Size</div>
<div className="col-span-1 text-right">Price</div>
</div>
<div className="">
{showSells
@ -421,12 +421,14 @@ const Orderbook = ({ depth = 12 }) => {
)
: null}
{showBuys && showSells ? (
<div className="my-2 flex justify-between border-y border-th-bkg-2 py-2 px-4 text-xs">
<div className="text-th-fgd-3">{t('spread')}</div>
<div className="text-th-fgd-1">
{orderbookData?.spread.toFixed(2)}
<div className="my-2 grid grid-cols-2 border-y border-th-bkg-3 py-2 px-4 text-xs">
<div className="col-span-1 flex justify-between">
<div className="text-th-fgd-3">{t('spread')}</div>
<div className="text-th-fgd-1">
{orderbookData?.spread.toFixed(2)}
</div>
</div>
<div className="text-th-fgd-1">
<div className="col-span-1 text-right text-th-fgd-1">
{orderbookData?.spreadPercentage.toFixed(2)}%
</div>
</div>
@ -544,7 +546,7 @@ const OrderbookRow = ({
<div className="flex w-full justify-start pl-2">
<div
style={{ fontFeatureSettings: 'zero 1' }}
className={`z-10 w-16 pl-2 font-mono text-xs leading-5 md:leading-6 ${
className={`z-10 w-full text-right font-mono text-xs leading-5 md:leading-6 ${
/*hasOpenOrder*/ false ? 'text-th-primary' : ''
}`}
// onClick={handleSizeClick}
@ -561,7 +563,7 @@ const OrderbookRow = ({
</div>
<Line
className={`absolute right-0 opacity-90 ${
className={`absolute left-0 opacity-90 ${
side === 'buy' ? `bg-th-green-muted` : `bg-th-red-muted`
}`}
data-width={sizePercent + '%'}