fix: wrong css class (#4053)

This commit is contained in:
Maciek 2023-06-07 22:44:28 +02:00 committed by GitHub
parent 5eba8fe28f
commit 1d06be8f4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 20 deletions

View File

@ -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 });

View File

@ -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(

View File

@ -18,6 +18,7 @@ const OrderbookMockDataProvider = ({ decimalPlaces, ...props }: Props) => {
positionDecimalPlaces={0}
decimalPlaces={decimalPlaces}
{...generateMockData({ ...props })}
assetSymbol="USD"
/>
</div>
</div>

View File

@ -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