fix: wrong css class (#4053)
This commit is contained in:
parent
5eba8fe28f
commit
1d06be8f4e
@ -65,6 +65,7 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
|
||||
asks={data?.depth.sell ?? []}
|
||||
decimalPlaces={market?.decimalPlaces ?? 0}
|
||||
positionDecimalPlaces={market?.positionDecimalPlaces ?? 0}
|
||||
assetSymbol={market?.tradableInstrument.instrument.product.quoteName}
|
||||
onClick={(price: string) => {
|
||||
if (price) {
|
||||
updateOrder(marketId, { price });
|
||||
|
@ -41,6 +41,7 @@ describe('Orderbook', () => {
|
||||
decimalPlaces={decimalPlaces}
|
||||
positionDecimalPlaces={0}
|
||||
{...generateMockData(params)}
|
||||
assetSymbol="USD"
|
||||
/>
|
||||
);
|
||||
await waitFor(() =>
|
||||
@ -61,6 +62,7 @@ describe('Orderbook', () => {
|
||||
positionDecimalPlaces={0}
|
||||
onClick={onClickSpy}
|
||||
{...mockedData}
|
||||
assetSymbol="USD"
|
||||
/>
|
||||
);
|
||||
expect(
|
||||
|
@ -18,6 +18,7 @@ const OrderbookMockDataProvider = ({ decimalPlaces, ...props }: Props) => {
|
||||
positionDecimalPlaces={0}
|
||||
decimalPlaces={decimalPlaces}
|
||||
{...generateMockData({ ...props })}
|
||||
assetSymbol="USD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -13,18 +13,10 @@ import classNames from 'classnames';
|
||||
import { useState } from 'react';
|
||||
import type { PriceLevelFieldsFragment } from './__generated__/MarketDepth';
|
||||
|
||||
interface OrderbookProps {
|
||||
decimalPlaces: number;
|
||||
positionDecimalPlaces: number;
|
||||
onClick?: (price: string) => void;
|
||||
midPrice?: string;
|
||||
bids: PriceLevelFieldsFragment[];
|
||||
asks: PriceLevelFieldsFragment[];
|
||||
}
|
||||
|
||||
// Sets row height, will be used to calculate number of rows that can be
|
||||
// displayed each side of the book without overflow
|
||||
export const rowHeight = 17;
|
||||
const rowGap = 1;
|
||||
const midHeight = 30;
|
||||
|
||||
const OrderbookTable = ({
|
||||
@ -52,7 +44,10 @@ const OrderbookTable = ({
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className={`grid auto-rows-[${rowHeight}px]`}>
|
||||
<div
|
||||
className="grid"
|
||||
style={{ gridAutoRows: rowHeight, gap: rowGap }} // use style as tailwind won't compile the dynamically set height
|
||||
>
|
||||
{rows.map((data) => (
|
||||
<OrderbookRow
|
||||
key={data.price}
|
||||
@ -71,6 +66,16 @@ const OrderbookTable = ({
|
||||
);
|
||||
};
|
||||
|
||||
interface OrderbookProps {
|
||||
decimalPlaces: number;
|
||||
positionDecimalPlaces: number;
|
||||
onClick?: (price: string) => void;
|
||||
midPrice?: string;
|
||||
bids: PriceLevelFieldsFragment[];
|
||||
asks: PriceLevelFieldsFragment[];
|
||||
assetSymbol: string | undefined;
|
||||
}
|
||||
|
||||
export const Orderbook = ({
|
||||
decimalPlaces,
|
||||
positionDecimalPlaces,
|
||||
@ -78,6 +83,7 @@ export const Orderbook = ({
|
||||
midPrice,
|
||||
asks,
|
||||
bids,
|
||||
assetSymbol,
|
||||
}: OrderbookProps) => {
|
||||
const [resolution, setResolution] = useState(1);
|
||||
const resolutions = new Array(
|
||||
@ -101,15 +107,18 @@ export const Orderbook = ({
|
||||
{({ height }) => {
|
||||
const limit = Math.max(
|
||||
1,
|
||||
Math.floor((height - midHeight) / 2 / rowHeight)
|
||||
Math.floor((height - midHeight) / 2 / (rowHeight + rowGap))
|
||||
);
|
||||
const askRows = groupedAsks?.slice(limit * -1) ?? [];
|
||||
const bidRows = groupedBids?.slice(0, limit) ?? [];
|
||||
return (
|
||||
<div
|
||||
className={`overflow-hidden grid grid-rows-[1fr_${midHeight}px_1fr]`}
|
||||
className="overflow-hidden grid"
|
||||
data-testid="orderbook-grid-element"
|
||||
style={{ height: height + 'px' }}
|
||||
style={{
|
||||
height: height + 'px',
|
||||
gridTemplateRows: `1fr ${midHeight}px 1fr`, // cannot use tailwind here as tailwind will not parse a class string with interpolation
|
||||
}}
|
||||
>
|
||||
{askRows.length || bidRows.length ? (
|
||||
<>
|
||||
@ -121,14 +130,17 @@ export const Orderbook = ({
|
||||
positionDecimalPlaces={positionDecimalPlaces}
|
||||
onClick={onClick}
|
||||
/>
|
||||
<div className="flex items-center justify-center text-lg">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{midPrice && (
|
||||
<span
|
||||
className="font-mono"
|
||||
data-testid={`middle-mark-price-${midPrice}`}
|
||||
>
|
||||
{addDecimalsFormatNumber(midPrice, decimalPlaces)}
|
||||
</span>
|
||||
<>
|
||||
<span
|
||||
className="font-mono text-lg"
|
||||
data-testid={`middle-mark-price-${midPrice}`}
|
||||
>
|
||||
{addDecimalsFormatNumber(midPrice, decimalPlaces)}
|
||||
</span>
|
||||
<span className="text-base">{assetSymbol}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<OrderbookTable
|
||||
|
Loading…
Reference in New Issue
Block a user