fix(trading): stored state causing wrong chart data (#5928)

apps/trading/components/chart-container/chart-container.tsx

@@ -30,8 +30,6 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
     setStudies,
     setStudySizes,
     setOverlays,
-    state,
-    setState,
   } = useChartSettings();
 
   const pennantChart = (
@@ -68,10 +66,6 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
           onIntervalChange={(newInterval) => {
             setInterval(fromTradingViewResolution(newInterval));
           }}
-          onAutoSaveNeeded={(data) => {
-            setState(data);
-          }}
-          state={state}
         />
       );
     }

apps/trading/components/chart-container/use-chart-settings.ts

@@ -9,7 +9,6 @@ type StudySizes = { [S in Study]?: number };
 export type Chartlib = 'pennant' | 'tradingview';
 
 interface StoredSettings {
-  state: object | undefined; // Don't see a better type provided from TradingView type definitions
   chartlib: Chartlib;
   // For interval we use the enum from @vegaprotocol/types, this is to make mapping between different
   // chart types easier and more consistent
@@ -30,7 +29,6 @@ const STUDY_ORDER: Study[] = [
 ];
 
 export const DEFAULT_CHART_SETTINGS = {
-  state: undefined,
   chartlib: 'pennant' as const,
   interval: Interval.INTERVAL_I15M,
   type: ChartType.CANDLE,
@@ -47,7 +45,6 @@ export const useChartSettingsStore = create<
     setStudies: (studies?: Study[]) => void;
     setStudySizes: (sizes: number[]) => void;
     setChartlib: (lib: Chartlib) => void;
-    setState: (state: object) => void;
   }
 >()(
   persist(
@@ -95,9 +92,6 @@ export const useChartSettingsStore = create<
           state.chartlib = lib;
         });
       },
-      setState: (state) => {
-        set({ state });
-      },
     })),
     {
       name: 'vega_candles_chart_store',
@@ -151,7 +145,5 @@ export const useChartSettings = () => {
     setOverlays: settings.setOverlays,
     setStudySizes: settings.setStudySizes,
     setChartlib: settings.setChartlib,
-    state: settings.state,
-    setState: settings.setState,
   };
 };

libs/trading-view/src/lib/trading-view-container.tsx

@@ -1,7 +1,7 @@
 import { useScript } from '@vegaprotocol/react-helpers';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useT } from './use-t';
-import { TradingView, type OnAutoSaveNeededCallback } from './trading-view';
+import { TradingView } from './trading-view';
 import { CHARTING_LIBRARY_FILE, type ResolutionString } from './constants';
 
 export const TradingViewContainer = ({
@@ -10,16 +10,12 @@ export const TradingViewContainer = ({
   marketId,
   interval,
   onIntervalChange,
-  onAutoSaveNeeded,
-  state,
 }: {
   libraryPath: string;
   libraryHash: string;
   marketId: string;
   interval: ResolutionString;
   onIntervalChange: (interval: string) => void;
-  onAutoSaveNeeded: OnAutoSaveNeededCallback;
-  state: object | undefined;
 }) => {
   const t = useT();
   const scriptState = useScript(
@@ -49,8 +45,6 @@ export const TradingViewContainer = ({
       marketId={marketId}
       interval={interval}
       onIntervalChange={onIntervalChange}
-      onAutoSaveNeeded={onAutoSaveNeeded}
-      state={state}
     />
   );
 };

libs/trading-view/src/lib/trading-view.tsx

@@ -25,15 +25,11 @@ export const TradingView = ({
   libraryPath,
   interval,
   onIntervalChange,
-  onAutoSaveNeeded,
-  state,
 }: {
   marketId: string;
   libraryPath: string;
   interval: ResolutionString;
   onIntervalChange: (interval: string) => void;
-  onAutoSaveNeeded: OnAutoSaveNeededCallback;
-  state: object | undefined;
 }) => {
   const { isMobile } = useScreenDimensions();
   const { theme } = useThemeSwitcher();
@@ -108,7 +104,6 @@ export const TradingView = ({
         backgroundColor: overrides['paneProperties.background'],
       },
       auto_save_delay: 1,
-      saved_data: state,
     };
 
     widgetRef.current = new window.TradingView.widget(widgetOptions);
@@ -117,25 +112,12 @@ export const TradingView = ({
       if (!widgetRef.current) return;
 
       const activeChart = widgetRef.current.activeChart();
-
-      if (!state) {
-        // If chart has loaded with no state, create a volume study
-        activeChart.createStudy('Volume');
-      }
+      activeChart.createStudy('Volume');
 
       // Subscribe to interval changes so it can be persisted in chart settings
       activeChart.onIntervalChanged().subscribe(null, onIntervalChange);
     });
-
-    widgetRef.current.subscribe('onAutoSaveNeeded', () => {
-      if (!widgetRef.current) return;
-
-      widgetRef.current.save((newState) => {
-        onAutoSaveNeeded(newState);
-      });
-    });
   }, [
-    state,
     datafeed,
     interval,
     prevTheme,
@@ -145,7 +127,6 @@ export const TradingView = ({
     language,
     libraryPath,
     isMobile,
-    onAutoSaveNeeded,
     onIntervalChange,
   ]);