diff --git a/src/hooks/tradingView/useTradingView.ts b/src/hooks/tradingView/useTradingView.ts index f75d3cc..dc8a641 100644 --- a/src/hooks/tradingView/useTradingView.ts +++ b/src/hooks/tradingView/useTradingView.ts @@ -70,15 +70,14 @@ export const useTradingView = ({ tvWidgetRef.current.onChartReady(() => { tvWidgetRef?.current?.headerReady().then(() => { - const button = tvWidgetRef?.current?.createButton(); - - if (button) { - button.innerHTML = `${stringGetter({ - key: STRING_KEYS.ORDER_LINES, - })}
`; - button.setAttribute('title', stringGetter({ key: STRING_KEYS.ORDER_LINES_TOOLTIP })); - displayButtonRef.current = button; - } + displayButtonRef.current = tvWidgetRef?.current?.createButton(); + displayButtonRef.current.innerHTML = `${stringGetter({ + key: STRING_KEYS.ORDER_LINES, + })} `; + displayButtonRef.current.setAttribute( + 'title', + stringGetter({ key: STRING_KEYS.ORDER_LINES_TOOLTIP }) + ); }); tvWidgetRef?.current?.subscribe('onAutoSaveNeeded', () => @@ -90,6 +89,8 @@ export const useTradingView = ({ } return () => { + displayButtonRef.current?.remove(); + displayButtonRef.current = null; tvWidgetRef.current?.remove(); tvWidgetRef.current = null; setIsChartReady(false); diff --git a/src/state/accountSelectors.ts b/src/state/accountSelectors.ts index c756429..e7390eb 100644 --- a/src/state/accountSelectors.ts +++ b/src/state/accountSelectors.ts @@ -177,7 +177,7 @@ export const getMarketOrders = (state: RootState): { [marketId: string]: Subacco export const getCurrentMarketOrders = createSelector( [getCurrentMarketId, getMarketOrders], (currentMarketId, marketOrders): SubaccountOrder[] => - !currentMarketId ? [] : marketOrders[currentMarketId] ?? [] + !currentMarketId ? [] : marketOrders[currentMarketId] ); /** diff --git a/src/views/charts/TvChart.tsx b/src/views/charts/TvChart.tsx index fedf080..6f67d44 100644 --- a/src/views/charts/TvChart.tsx +++ b/src/views/charts/TvChart.tsx @@ -76,8 +76,21 @@ export const TvChart = () => { tvWidget?.activeChart().setVisibleRange(newRange, { percentRightMargin: 10 }); }; + /** + * @description Hook to handle changing markets + */ useEffect(() => { - if (displayButtonRef && displayButtonRef.current) { + if (currentMarketId && isWidgetReady) { + const resolution = savedResolution || selectedResolution; + tvWidget?.setSymbol(currentMarketId, resolution as ResolutionString, () => {}); + } + }, [currentMarketId, isWidgetReady]); + + /** + * @description Hook to handle order line toggle state + */ + useEffect(() => { + if (isChartReady && displayButtonRef && displayButtonRef.current) { displayButtonRef.current.onclick = () => { const newShowOrderLinesState = !showOrderLines; if (newShowOrderLinesState) { @@ -91,26 +104,24 @@ export const TvChart = () => { }, [isChartReady, showOrderLines]); /** - * @description Hooks to handle state of show orders button + * @description Hook to handle drawing order lines */ - useEffect(() => { - if (!tvWidgetRef || !tvWidget || !isChartReady) { - return; - } - - tvWidget.onChartReady(() => { - tvWidget.chart().dataReady(() => { - if (showOrderLines) { - drawOrderLines(); - } else { - deleteOrderLines(); - } + if (tvWidget && isChartReady) { + tvWidget.onChartReady(() => { + tvWidget.chart().dataReady(() => { + if (showOrderLines) { + drawOrderLines(); + } else { + deleteOrderLines(); + } + }); }); - }); - }, [showOrderLines, currentMarketOrders, isChartReady]); + } + }, [isChartReady, showOrderLines, currentMarketOrders, currentMarketId]); const drawOrderLines = () => { + if (!currentMarketOrders) return; currentMarketOrders.forEach( ({ id, @@ -180,6 +191,9 @@ export const TvChart = () => { orderLines = {}; }; + /** + * @description Hook to handle changing chart resolution + */ useEffect(() => { if (chartResolution) { if (chartResolution !== selectedResolution) { @@ -190,16 +204,6 @@ export const TvChart = () => { } }, [chartResolution]); - /** - * @description Hook to handle changing markets - */ - useEffect(() => { - if (currentMarketId && isWidgetReady) { - const resolution = savedResolution || selectedResolution; - tvWidget?.setSymbol(currentMarketId, resolution as ResolutionString, () => {}); - } - }, [currentMarketId, isWidgetReady]); - return (