From 06ea58555efac605b35f1b8ce79021da9cf3d400 Mon Sep 17 00:00:00 2001 From: John Walley <john@walley.org.uk> Date: Wed, 16 Nov 2022 04:08:39 +0000 Subject: [PATCH] fix: update callback when market changes (#1934) --- libs/market-depth/src/lib/depth-chart.tsx | 98 ++++++++++++----------- 1 file changed, 50 insertions(+), 48 deletions(-) diff --git a/libs/market-depth/src/lib/depth-chart.tsx b/libs/market-depth/src/lib/depth-chart.tsx index dd4656043..2978b183f 100644 --- a/libs/market-depth/src/lib/depth-chart.tsx +++ b/libs/market-depth/src/lib/depth-chart.tsx @@ -48,43 +48,55 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => { buy: [], }); - const updateDepthData = useRef( - throttle(() => { - if (!dataRef.current || !marketDataRef.current || !market) { - return; - } - dataRef.current = { - ...dataRef.current, - midPrice: marketDataRef.current?.staticMidPrice - ? formatMidPrice( - marketDataRef.current?.staticMidPrice, - market.decimalPlaces - ) - : undefined, - data: { - buy: deltaRef.current.buy - ? updateLevels( - dataRef.current.data.buy, - deltaRef.current.buy, - market.decimalPlaces, - market.positionDecimalPlaces, - true + const { + data: market, + error: marketError, + loading: marketLoading, + } = useDataProvider({ + dataProvider: marketProvider, + skipUpdates: true, + variables, + }); + + const updateDepthData = useMemo( + () => + throttle(() => { + if (!dataRef.current || !marketDataRef.current || !market) { + return; + } + dataRef.current = { + ...dataRef.current, + midPrice: marketDataRef.current?.staticMidPrice + ? formatMidPrice( + marketDataRef.current?.staticMidPrice, + market.decimalPlaces ) - : dataRef.current.data.buy, - sell: deltaRef.current.sell - ? updateLevels( - dataRef.current.data.sell, - deltaRef.current.sell, - market.decimalPlaces, - market.positionDecimalPlaces - ) - : dataRef.current.data.sell, - }, - }; - deltaRef.current.buy = []; - deltaRef.current.sell = []; - setDepthData(dataRef.current); - }, 1000) + : undefined, + data: { + buy: deltaRef.current.buy + ? updateLevels( + dataRef.current.data.buy, + deltaRef.current.buy, + market.decimalPlaces, + market.positionDecimalPlaces, + true + ) + : dataRef.current.data.buy, + sell: deltaRef.current.sell + ? updateLevels( + dataRef.current.data.sell, + deltaRef.current.sell, + market.decimalPlaces, + market.positionDecimalPlaces + ) + : dataRef.current.data.sell, + }, + }; + deltaRef.current.buy = []; + deltaRef.current.sell = []; + setDepthData(dataRef.current); + }, 1000), + [market] ); // Apply updates to the table @@ -107,7 +119,7 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => { if (delta.buy) { deltaRef.current.buy.push(...delta.buy); } - updateDepthData.current(); + updateDepthData(); } return true; }, @@ -120,16 +132,6 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => { variables, }); - const { - data: market, - error: marketError, - loading: marketLoading, - } = useDataProvider({ - dataProvider: marketProvider, - skipUpdates: true, - variables, - }); - const marketDataUpdate = useCallback( ({ data }: { data: MarketData | null }) => { marketDataRef.current = data; @@ -148,7 +150,7 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => { variables, }); - if (marketDataRef.current && marketData) { + if (!marketDataRef.current && marketData) { marketDataRef.current = marketData; }