Fix orderbook speed issues
This commit is contained in:
parent
c81e6a3239
commit
af2d28e805
|
@ -52,9 +52,7 @@ export default function Orderbook({ smallScreen, depth = 7, onPrice, onSize }) {
|
|||
const currentOrderbookData = useRef(null);
|
||||
const lastOrderbookData = useRef(null);
|
||||
|
||||
const [asksToDisplay, setAsksToDisplay] = useState([]);
|
||||
const [bidsToDisplay, setBidsToDisplay] = useState([]);
|
||||
const [totalSize, setTotalSize] = useState(0);
|
||||
const [orderbookData, setOrderbookData] = useState(null);
|
||||
|
||||
useInterval(() => {
|
||||
if (
|
||||
|
@ -65,24 +63,19 @@ export default function Orderbook({ smallScreen, depth = 7, onPrice, onSize }) {
|
|||
let bids = orderbook?.bids || [];
|
||||
let asks = orderbook?.asks || [];
|
||||
|
||||
let [asksToDisplay, totalAskSize] = getCumulativeOrderbookSide(
|
||||
asks,
|
||||
true,
|
||||
);
|
||||
let [bidsToDisplay, totalBidSize] = getCumulativeOrderbookSide(
|
||||
bids,
|
||||
false,
|
||||
);
|
||||
let totalSize = totalAskSize + totalBidSize;
|
||||
let sum = (total, [, size], index) =>
|
||||
index < depth ? total + size : total;
|
||||
let totalSize = bids.reduce(sum, 0) + asks.reduce(sum, 0);
|
||||
|
||||
setAsksToDisplay(asksToDisplay);
|
||||
setBidsToDisplay(bidsToDisplay);
|
||||
setTotalSize(totalSize);
|
||||
let bidsToDisplay = getCumulativeOrderbookSide(bids, totalSize, false);
|
||||
let asksToDisplay = getCumulativeOrderbookSide(asks, totalSize, true);
|
||||
|
||||
currentOrderbookData.current = {
|
||||
bids: orderbook?.bids,
|
||||
asks: orderbook?.asks,
|
||||
};
|
||||
|
||||
setOrderbookData({ bids: bidsToDisplay, asks: asksToDisplay });
|
||||
}
|
||||
}, 250);
|
||||
|
||||
|
@ -93,23 +86,23 @@ export default function Orderbook({ smallScreen, depth = 7, onPrice, onSize }) {
|
|||
};
|
||||
}, [orderbook]);
|
||||
|
||||
function getCumulativeOrderbookSide(orders, backwards = false) {
|
||||
function getCumulativeOrderbookSide(orders, totalSize, backwards = false) {
|
||||
let cumulative = orders
|
||||
.slice(0, depth)
|
||||
.reduce((cumulative, [price, size], i) => {
|
||||
const cumulativeSize = (cumulative[i - 1]?.cumulativeSize || 0) + size;
|
||||
cumulative.push({
|
||||
price,
|
||||
size,
|
||||
cumulativeSize: (cumulative[i - 1]?.cumulativeSize || 0) + size,
|
||||
cumulativeSize,
|
||||
sizePercent: Math.round((cumulativeSize / (totalSize || 1)) * 100),
|
||||
});
|
||||
return cumulative;
|
||||
}, []);
|
||||
if (backwards) {
|
||||
cumulative = cumulative.reverse();
|
||||
}
|
||||
let totalSize =
|
||||
cumulative[backwards ? 0 : cumulative.length - 1]?.cumulativeSize || 0;
|
||||
return [cumulative, totalSize];
|
||||
return cumulative;
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -127,27 +120,27 @@ export default function Orderbook({ smallScreen, depth = 7, onPrice, onSize }) {
|
|||
Price ({quoteCurrency})
|
||||
</Col>
|
||||
</SizeTitle>
|
||||
{asksToDisplay.map(({ price, size, cumulativeSize }) => (
|
||||
{orderbookData?.asks.map(({ price, size, sizePercent }) => (
|
||||
<OrderbookRow
|
||||
key={price + ''}
|
||||
price={price}
|
||||
size={size}
|
||||
side={'sell'}
|
||||
sizePercent={(cumulativeSize / (totalSize || 1)) * 100}
|
||||
onSizeClick={() => onSize(size)}
|
||||
sizePercent={sizePercent}
|
||||
onPriceClick={() => onPrice(price)}
|
||||
onSizeClick={() => onSize(size)}
|
||||
/>
|
||||
))}
|
||||
<MarkPriceComponent markPrice={markPrice} />
|
||||
{bidsToDisplay.map(({ price, size, cumulativeSize }) => (
|
||||
{orderbookData?.bids.map(({ price, size, sizePercent }) => (
|
||||
<OrderbookRow
|
||||
key={price + ''}
|
||||
price={price}
|
||||
size={size}
|
||||
side={'buy'}
|
||||
sizePercent={(cumulativeSize / (totalSize || 1)) * 100}
|
||||
onSizeClick={() => onSize(size)}
|
||||
sizePercent={sizePercent}
|
||||
onPriceClick={() => onPrice(price)}
|
||||
onSizeClick={() => onSize(size)}
|
||||
/>
|
||||
))}
|
||||
</FloatingElement>
|
||||
|
@ -168,7 +161,7 @@ const OrderbookRow = React.memo(
|
|||
() =>
|
||||
element.current?.classList.contains('flash') &&
|
||||
element.current?.classList.remove('flash'),
|
||||
500,
|
||||
250,
|
||||
);
|
||||
}, [price, size]);
|
||||
|
||||
|
@ -202,7 +195,7 @@ const OrderbookRow = React.memo(
|
|||
);
|
||||
},
|
||||
(prevProps, nextProps) =>
|
||||
isEqual(prevProps, nextProps, ['side', 'price', 'size', 'sizePercent']),
|
||||
isEqual(prevProps, nextProps, ['price', 'size', 'sizePercent']),
|
||||
);
|
||||
|
||||
const MarkPriceComponent = React.memo(
|
||||
|
|
|
@ -77,7 +77,7 @@ export default function TradeForm({ style, setChangeOrderRef }) {
|
|||
}, [setChangeOrderRef]);
|
||||
|
||||
useEffect(() => {
|
||||
onSliderChange(sizeFraction);
|
||||
baseSize && price && onSliderChange(sizeFraction);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [side]);
|
||||
|
||||
|
@ -221,7 +221,7 @@ export default function TradeForm({ style, setChangeOrderRef }) {
|
|||
style={{ textAlign: 'right', paddingBottom: 8 }}
|
||||
addonBefore={<div style={{ width: '30px' }}>Price</div>}
|
||||
suffix={
|
||||
<span style={{ fontSize: 10, opacity: 0.5 }}>{baseCurrency}</span>
|
||||
<span style={{ fontSize: 10, opacity: 0.5 }}>{quoteCurrency}</span>
|
||||
}
|
||||
value={price}
|
||||
type="number"
|
||||
|
|
|
@ -58,10 +58,14 @@ export default function TradePage() {
|
|||
const width = dimensions?.width;
|
||||
const componentProps = {
|
||||
onChangeOrderRef: (ref) => (changeOrderRef.current = ref),
|
||||
onPrice: (price) =>
|
||||
changeOrderRef.current && changeOrderRef.current({ price }),
|
||||
onSize: (size) =>
|
||||
changeOrderRef.current && changeOrderRef.current({ size }),
|
||||
onPrice: useCallback(
|
||||
(price) => changeOrderRef.current && changeOrderRef.current({ price }),
|
||||
[],
|
||||
),
|
||||
onSize: useCallback(
|
||||
(size) => changeOrderRef.current && changeOrderRef.current({ size }),
|
||||
[],
|
||||
),
|
||||
};
|
||||
const getComponent = useCallback(() => {
|
||||
if (handleDeprecated) {
|
||||
|
|
Loading…
Reference in New Issue