Skip to content

Commit 4c37a06

Browse files
junhocodejunhocode
committed
fixed: fix OrderBook
max amount of depth ws is 20. Height modified
1 parent e5fdfd2 commit 4c37a06

File tree

5 files changed

+55
-79
lines changed

5 files changed

+55
-79
lines changed

‎src/components/Layout/Main/Main.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ export const chartContainer =
1717
"relative flex-1 w-full min-h-0 transition-opacity duration-300";
1818

1919
export const orderBookContainer =
20-
"w-[300px] p-2 h-full";
20+
"flex flex-col justify-center w-[300px] p-2 h-full";

‎src/components/OrderBook/OrderBook.styles.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const container =
2-
"flex w-full h-full flex-col bg-card font-mono text-xs rounded-md overflow-hidden";
2+
"flex w-full h-fit flex-col bg-card font-mono text-xs rounded-md overflow-hidden";
33

44
export const loadingContainer =
55
"flex h-full items-center justify-center text-xs text-muted-foreground font-mono";
@@ -8,25 +8,25 @@ export const errorContainer =
88
"flex h-full items-center justify-center text-xs text-destructive font-mono";
99

1010
export const asksWrapper =
11-
"flex flex-1 flex-col-reverse min-h-0 overflow-hidden";
11+
"flex flex-1 flex-col-reverse min-h-0 overflow-hidden w-full relative";
1212

1313
export const bidsWrapper =
14-
"flex flex-1 flex-col min-h-0 overflow-hidden";
14+
"flex flex-1 flex-col min-h-0 overflow-hidden w-full relative";
1515

1616
export const headerRow =
17-
"flex w-full px-3 pt-2 text-[#848E9C] text-xs font-semibold items-center";
17+
"flex w-full h-[30px] min-h-[30px] px-1 text-[#848E9C] text-xs font-semibold items-center select-none";
1818

1919
export const colPrice =
20-
"w-[30%] shrink-0 text-left truncate";
20+
"w-[30%] shrink-0 text-left truncate pl-1";
2121

2222
export const colAmount =
23-
"w-[35%] shrink-0 text-right truncate";
23+
"w-[30%] shrink-0 text-right truncate";
2424

2525
export const colTotal =
26-
"w-[35%] shrink-0 text-right truncate";
26+
"w-[40%] shrink-0 text-right truncate pr-1";
2727

2828
export const middleBar =
29-
"shrink-0 border-y border-border py-2 bg-muted/30 flex items-center justify-center z-20";
29+
"shrink-0 h-[40px] min-h-[40px] border-y border-border bg-muted/30 flex items-center justify-center z-20 select-none";
3030

3131
export const middlePriceWrapper =
3232
"flex text-lg font-bold text-yellow-600 dark:text-yellow-300 items-center";
@@ -35,7 +35,7 @@ export const dollarSign =
3535
"mr-1";
3636

3737
export const rowContainer =
38-
"relative flex w-full h-[25px] shrink-0 cursor-pointer items-center px-3 hover:bg-muted/50";
38+
"relative flex w-full h-[25px] min-h-[25px] max-h-[25px] shrink-0 cursor-pointer items-center px-1 hover:bg-muted/50 select-none";
3939

4040
export const rowBgBase =
4141
"absolute right-0 top-0 bottom-0 z-0 transition-all duration-300";

‎src/components/OrderBook/OrderBook.tsx‎

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
import { useMemo, useRef } from "react";
1+
import { useMemo } from "react";
22
import { SlidingNumber } from "@/components/ui/sliding-number";
33
import { useRealtimeOrderBook } from "@/hooks/useRealTimeOrderBookData";
4-
import { useFitRows } from "@/hooks/useFitRows";
54
import { useOrderBookQuery } from "@/queries/useOrderBookQuery";
65
import { cn } from "@/lib/utils";
76
import { parseNumber } from "@/utils/parseNumber";
87
import type { OrderBookRowProps } from "@/types/orderBook.type";
98
import * as S from "./OrderBook.styles";
109

11-
const ROW_HEIGHT = 25;
12-
1310
const OrderBookRow = ({ price, amount, maxQty, type }: OrderBookRowProps) => {
1411
const priceNum = parseFloat(price);
1512
const amountNum = parseFloat(amount);
@@ -21,22 +18,40 @@ const OrderBookRow = ({ price, amount, maxQty, type }: OrderBookRowProps) => {
2118
return (
2219
<div className={S.rowContainer}>
2320
<div
24-
className={cn(S.rowBgBase, isAsk ? S.rowBgAsk : S.rowBgBid)}
21+
className={cn(
22+
S.rowBgBase,
23+
isAsk ? S.rowBgAsk : S.rowBgBid
24+
)}
2525
style={{ width: widthPercent }}
2626
/>
27+
2728
<span
2829
className={cn(
2930
S.colPrice,
3031
S.rowTextBase,
3132
isAsk ? S.rowTextAsk : S.rowTextBid
3233
)}
3334
>
34-
{priceNum.toLocaleString(undefined, { minimumFractionDigits: 2 })}
35+
{priceNum.toLocaleString(undefined, {
36+
minimumFractionDigits: 2,
37+
})}
3538
</span>
36-
<span className={cn(S.colAmount, S.rowTextSecondary)}>
39+
40+
<span
41+
className={cn(
42+
S.colAmount,
43+
S.rowTextSecondary
44+
)}
45+
>
3746
{amountNum.toFixed(4)}
3847
</span>
39-
<span className={cn(S.colTotal, S.rowTextSecondary)}>
48+
49+
<span
50+
className={cn(
51+
S.colTotal,
52+
S.rowTextSecondary
53+
)}
54+
>
4055
{parseNumber(total)}
4156
</span>
4257
</div>
@@ -45,12 +60,6 @@ const OrderBookRow = ({ price, amount, maxQty, type }: OrderBookRowProps) => {
4560

4661
export const OrderBook = ({ symbol }: { symbol: string }) => {
4762
const { data, isLoading } = useOrderBookQuery(symbol);
48-
49-
const asksRef = useRef<HTMLDivElement>(null);
50-
const bidsRef = useRef<HTMLDivElement>(null);
51-
52-
const asksCount = useFitRows(asksRef, ROW_HEIGHT);
53-
const bidsCount = useFitRows(bidsRef, ROW_HEIGHT);
5463

5564
useRealtimeOrderBook(symbol);
5665

@@ -61,40 +70,35 @@ export const OrderBook = ({ symbol }: { symbol: string }) => {
6170
return Math.max(maxBid, maxAsk);
6271
}, [data]);
6372

64-
const displayAsks = useMemo(() => {
65-
const originalAsks = data?.asks || [];
66-
67-
if (asksCount === 0) return originalAsks;
68-
69-
return originalAsks.slice(0, asksCount);
70-
}, [data?.asks, asksCount]);
73+
const asks = data?.asks || [];
7174

72-
const displayBids = useMemo(() => {
73-
const originalBids = data?.bids || [];
74-
75-
if (bidsCount === 0) return originalBids;
76-
77-
return originalBids.slice(0, bidsCount);
78-
}, [data?.bids, bidsCount]);
75+
const bids = data?.bids || [];
7976

8077
if (isLoading) {
81-
return <div className={S.loadingContainer}>Loading...</div>;
78+
return (
79+
<div className={S.loadingContainer}>
80+
Loading...
81+
</div>
82+
);
8283
}
8384

8485
if (!data) {
85-
return <div className={S.errorContainer}>Failed to load</div>;
86+
return (
87+
<div className={S.errorContainer}>
88+
Failed to load
89+
</div>
90+
);
8691
}
8792

8893
return (
8994
<div className={S.container}>
9095
<div className={S.headerRow}>
91-
<span className={S.colPrice}>Price(USDT)</span>
92-
<span className={S.colAmount}>Amount</span>
93-
<span className={S.colTotal}>Total</span>
94-
</div>
95-
96-
<div ref={asksRef} className={S.asksWrapper}>
97-
{displayAsks.map((ask) => (
96+
<span className={S.colPrice}>Price(USDT)</span>
97+
<span className={S.colAmount}>Amount</span>
98+
<span className={S.colTotal}>Total</span>
99+
</div>
100+
<div className={S.asksWrapper}>
101+
{asks.map((ask) => (
98102
<OrderBookRow
99103
key={ask[0]}
100104
price={ask[0]}
@@ -109,14 +113,14 @@ export const OrderBook = ({ symbol }: { symbol: string }) => {
109113
<span className={S.middlePriceWrapper}>
110114
<span className={S.dollarSign}>$</span>
111115
<SlidingNumber
112-
number={parseFloat(data.bids[0]?.[0] || "0")}
116+
number={parseFloat(bids[0]?.[0] || "0")}
113117
decimalPlaces={2}
114118
/>
115119
</span>
116120
</div>
117121

118-
<div ref={bidsRef} className={S.bidsWrapper}>
119-
{displayBids.map((bid) => (
122+
<div className={S.bidsWrapper}>
123+
{bids.map((bid) => (
120124
<OrderBookRow
121125
key={bid[0]}
122126
price={bid[0]}

‎src/hooks/useFitRows.ts‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/hooks/useRealTimeOrderBookData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { OrderBookResponse } from "@/types/orderBook.type";
66
const WS_BASE_URL = import.meta.env.VITE_BINANCE_WS_URL;
77

88
const getOrderBookWsUrl = (symbol: string) =>
9-
`${WS_BASE_URL}/${symbol.toLowerCase()}@depth50@1000ms`;
9+
`${WS_BASE_URL}/${symbol.toLowerCase()}@depth20@1000ms`;
1010

1111
export const useRealtimeOrderBook = (symbol: string) => {
1212
const queryClient = useQueryClient();

0 commit comments

Comments
 (0)