fix bug

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 = `<span>${stringGetter({
-              key: STRING_KEYS.ORDER_LINES,
-            })}</span> <div class="displayOrdersButton-toggle"></div>`;
-            button.setAttribute('title', stringGetter({ key: STRING_KEYS.ORDER_LINES_TOOLTIP }));
-            displayButtonRef.current = button;
-          }
+          displayButtonRef.current = tvWidgetRef?.current?.createButton();
+          displayButtonRef.current.innerHTML = `<span>${stringGetter({
+            key: STRING_KEYS.ORDER_LINES,
+          })}</span> <div class="displayOrdersButton-toggle"></div>`;
+          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);

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]
 );
 
 /**

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 (
     <Styled.PriceChart isChartReady={isChartReady}>
       {!isChartReady && <LoadingSpace id="tv-chart-loading" />}