feat: enable order book candles using feature flag (#1351)

dydxprotocol · Dec 4, 2024 · 7b65342 · 7b65342
1 parent e6b0bd8
commit 7b65342
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 123 deletions.
diff --git a/src/constants/tooltips/index.ts b/src/constants/tooltips/index.ts
@@ -7,7 +7,6 @@ import { newMarketsTooltips } from './newMarkets';
 import { portfolioTooltips } from './portfolio';
 import { stakeTooltips } from './stake';
 import { tradeTooltips } from './trade';
-import { tradeChartTooltips } from './tradeChart';
 import { triggersTooltips } from './triggers';
 import { vaultTooltips } from './vault';
 import { withdrawTooltips } from './withdraw';
@@ -19,7 +18,6 @@ export const tooltipStrings = {
   ...portfolioTooltips,
   ...stakeTooltips,
   ...tradeTooltips,
-  ...tradeChartTooltips,
   ...triggersTooltips,
   ...withdrawTooltips,
   ...vaultTooltips,

diff --git a/src/constants/tooltips/tradeChart.ts b/src/constants/tooltips/tradeChart.ts
diff --git a/src/hooks/tradingView/useOrderbookCandles.ts b/src/hooks/tradingView/useOrderbookCandles.ts
diff --git a/src/hooks/tradingView/useTradingView.ts b/src/hooks/tradingView/useTradingView.ts
@@ -13,7 +13,6 @@ import { DEFAULT_RESOLUTION } from '@/constants/candles';
 import { TOGGLE_ACTIVE_CLASS_NAME } from '@/constants/charts';
 import { STRING_KEYS, SUPPORTED_LOCALE_MAP } from '@/constants/localization';
 import { StatsigFlags } from '@/constants/statsig';
-import { tooltipStrings } from '@/constants/tooltips';
 import type { TvWidget } from '@/constants/tvchart';
 
 import { store } from '@/state/_store';
@@ -25,15 +24,15 @@ import { getCurrentMarketConfig, getCurrentMarketId } from '@/state/perpetualsSe
 import { updateChartConfig } from '@/state/tradingView';
 import { getTvChartConfig } from '@/state/tradingViewSelectors';
 
+import abacusStateManager from '@/lib/abacus';
 import { getDydxDatafeed } from '@/lib/tradingView/dydxfeed';
 import { getSavedResolution, getWidgetOptions, getWidgetOverrides } from '@/lib/tradingView/utils';
 import { orEmptyObj } from '@/lib/typeUtils';
 
 import { useDydxClient } from '../useDydxClient';
 import { useLocaleSeparators } from '../useLocaleSeparators';
-import { useAllStatsigGateValues, useStatsigGateValue } from '../useStatsig';
+import { useStatsigGateValue } from '../useStatsig';
 import { useStringGetter } from '../useStringGetter';
-import { useURLConfigs } from '../useURLConfigs';
 import { useTradingViewLimitOrder } from './useTradingViewLimitOrder';
 
 /**
@@ -45,9 +44,6 @@ export const useTradingView = ({
   orderLineToggleRef,
   orderLinesToggleOn,
   setOrderLinesToggleOn,
-  orderbookCandlesToggleRef,
-  orderbookCandlesToggleOn,
-  setOrderbookCandlesToggleOn,
   buySellMarksToggleRef,
   buySellMarksToggleOn,
   setBuySellMarksToggleOn,
@@ -57,16 +53,11 @@ export const useTradingView = ({
   orderLineToggleRef: React.MutableRefObject<HTMLElement | null>;
   orderLinesToggleOn: boolean;
   setOrderLinesToggleOn: Dispatch<SetStateAction<boolean>>;
-  orderbookCandlesToggleRef: React.MutableRefObject<HTMLElement | null>;
-  orderbookCandlesToggleOn: boolean;
-  setOrderbookCandlesToggleOn: Dispatch<SetStateAction<boolean>>;
   buySellMarksToggleRef: React.MutableRefObject<HTMLElement | null>;
   buySellMarksToggleOn: boolean;
   setBuySellMarksToggleOn: Dispatch<SetStateAction<boolean>>;
 }) => {
   const stringGetter = useStringGetter();
-  const urlConfigs = useURLConfigs();
-  const featureFlags = useAllStatsigGateValues();
   const dispatch = useAppDispatch();
 
   const { group, decimal } = useLocaleSeparators();
@@ -82,6 +73,9 @@ export const useTradingView = ({
 
   const savedTvChartConfig = useAppSelector(getTvChartConfig);
   const ffEnableOrderbookCandles = useStatsigGateValue(StatsigFlags.ffEnableOhlc);
+  useEffect(() => {
+    abacusStateManager.toggleOrderbookCandles(ffEnableOrderbookCandles);
+  }, [ffEnableOrderbookCandles]);
 
   const savedResolution = useMemo(
     () => getSavedResolution({ savedConfig: savedTvChartConfig }),
@@ -156,7 +150,7 @@ export const useTradingView = ({
           store,
           getCandlesForDatafeed,
           initialPriceScale,
-          orderbookCandlesToggleOn,
+          ffEnableOrderbookCandles,
           { decimal, group },
           selectedLocale,
           stringGetter
@@ -190,26 +184,6 @@ export const useTradingView = ({
             }),
           });
 
-          if (ffEnableOrderbookCandles) {
-            // Orderbook Candles (OHLC)
-            const getOhlcTooltipString = tooltipStrings.ohlc;
-            const { title: ohlcTitle, body: ohlcBody } = getOhlcTooltipString({
-              stringGetter,
-              stringParams: {},
-              urlConfigs,
-              featureFlags,
-            });
-
-            initializeToggle({
-              toggleRef: orderbookCandlesToggleRef,
-              widget: tvChartWidget,
-              isOn: orderbookCandlesToggleOn,
-              setToggleOn: setOrderbookCandlesToggleOn,
-              label: `${ohlcTitle}*`,
-              tooltip: ohlcBody as string,
-            });
-          }
-
           // Buy/Sell Marks
           initializeToggle({
             toggleRef: buySellMarksToggleRef,
@@ -236,8 +210,6 @@ export const useTradingView = ({
     return () => {
       orderLineToggleRef.current?.remove();
       orderLineToggleRef.current = null;
-      orderbookCandlesToggleRef.current?.remove();
-      orderbookCandlesToggleRef.current = null;
       buySellMarksToggleRef.current?.remove();
       buySellMarksToggleRef.current = null;
       tvWidget?.remove();
@@ -248,12 +220,9 @@ export const useTradingView = ({
     !!marketId,
     tickSizeDecimals !== undefined,
     orderLineToggleRef,
-    orderbookCandlesToggleRef,
     buySellMarksToggleRef,
     setBuySellMarksToggleOn,
     setOrderLinesToggleOn,
-    setOrderbookCandlesToggleOn,
-    orderbookCandlesToggleOn,
     tvWidget,
     setTvWidget,
   ]);

diff --git a/src/hooks/tradingView/useTradingViewToggles.tsx b/src/hooks/tradingView/useTradingViewToggles.tsx
@@ -1,23 +1,10 @@
 import { useState } from 'react';
 
-import { StatsigFlags } from '@/constants/statsig';
-
-import { useStatsigGateValue } from '../useStatsig';
-
 export const useTradingViewToggles = () => {
-  const ffEnableOrderbookCandles = useStatsigGateValue(StatsigFlags.ffEnableOhlc);
-  // When the orderbook candles (displayed as OHLC) toggle is on, empty (0 trade) candles in markets will show
-  // O(pen) H(igh) L(ow) C(lose) data via orderbook mid-price.
-  // Otherwise, candles calculate OHLC data from historical trades.
-  const [orderbookCandlesToggleOn, setOrderbookCandlesToggleOn] =
-    useState(ffEnableOrderbookCandles);
   const [orderLinesToggleOn, setOrderLinesToggleOn] = useState(true);
   const [buySellMarksToggleOn, setBuySellMarksToggleOn] = useState(true);
 
   return {
-    // Orderbook Candles
-    orderbookCandlesToggleOn,
-    setOrderbookCandlesToggleOn,
     // Chart Order Lines
     orderLinesToggleOn,
     setOrderLinesToggleOn,

diff --git a/src/lib/abacus/index.ts b/src/lib/abacus/index.ts
@@ -516,8 +516,8 @@ class AbacusStateManager {
     this.websocket.send(requestText);
   };
 
-  toggleOrderbookCandles = (useOrderbookCandles: boolean) => {
-    this.websocket.orderbookCandlesToggleOn = useOrderbookCandles;
+  toggleOrderbookCandles = (showOrderbookCandles: boolean) => {
+    this.websocket.orderbookCandlesToggleOn = showOrderbookCandles;
   };
 
   getChainById = (chainId: string) => {

diff --git a/src/lib/abacus/websocket.ts b/src/lib/abacus/websocket.ts
@@ -28,7 +28,7 @@ class AbacusWebsocket implements Omit<AbacusWebsocketProtocol, '__doNotUseOrImpl
 
   private isConnecting: boolean = false;
 
-  orderbookCandlesToggleOn: boolean = false;
+  orderbookCandlesToggleOn: boolean = true;
 
   connect(url: string, connected: (p0: boolean) => void, received: (p0: string) => void): void {
     this.url = url;

diff --git a/src/lib/tradingView/utils.ts b/src/lib/tradingView/utils.ts
@@ -16,7 +16,8 @@ import { AppTheme, type AppColorMode } from '@/state/appUiConfigs';
 
 import { getDisplayableTickerFromMarket } from '../assetUtils';
 
-const MIN_NUM_TRADES_FOR_ORDERBOOK_PRICES = 10;
+// Show order book candles instead of trade candles if there are no trades in that time period
+const MAX_NUM_TRADES_FOR_ORDERBOOK_PRICES = 1;
 
 const getOhlcValues = ({
   orderbookCandlesToggleOn,
@@ -37,17 +38,17 @@ const getOhlcValues = ({
   orderbookOpen?: number;
   orderbookClose?: number;
 }) => {
-  const useOrderbookCandles =
+  const showOrderbookCandles =
     orderbookCandlesToggleOn &&
-    trades <= MIN_NUM_TRADES_FOR_ORDERBOOK_PRICES &&
+    trades <= MAX_NUM_TRADES_FOR_ORDERBOOK_PRICES &&
     orderbookOpen !== undefined &&
     orderbookClose !== undefined;
 
   return {
-    low: useOrderbookCandles ? Math.min(orderbookOpen, orderbookClose) : tradeLow,
-    high: useOrderbookCandles ? Math.max(orderbookOpen, orderbookClose) : tradeHigh,
-    open: useOrderbookCandles ? orderbookOpen : tradeOpen,
-    close: useOrderbookCandles ? orderbookClose : tradeClose,
+    low: showOrderbookCandles ? Math.min(orderbookOpen, orderbookClose) : tradeLow,
+    high: showOrderbookCandles ? Math.max(orderbookOpen, orderbookClose) : tradeHigh,
+    open: showOrderbookCandles ? orderbookOpen : tradeOpen,
+    close: showOrderbookCandles ? orderbookClose : tradeClose,
   };
 };
 

diff --git a/src/views/charts/TradingView/TvChart.tsx b/src/views/charts/TradingView/TvChart.tsx
@@ -6,7 +6,6 @@ import type { TvWidget } from '@/constants/tvchart';
 import { useBuySellMarks } from '@/hooks/tradingView/useBuySellMarks';
 import { useChartLines } from '@/hooks/tradingView/useChartLines';
 import { useChartMarketAndResolution } from '@/hooks/tradingView/useChartMarketAndResolution';
-import { useOrderbookCandles } from '@/hooks/tradingView/useOrderbookCandles';
 import { useTradingView } from '@/hooks/tradingView/useTradingView';
 import { useTradingViewTheme } from '@/hooks/tradingView/useTradingViewTheme';
 import { useTradingViewToggles } from '@/hooks/tradingView/useTradingViewToggles';
@@ -24,16 +23,12 @@ export const TvChart = () => {
   const orderLineToggleRef = useRef<HTMLElement | null>(null);
   const orderLineToggle = orderLineToggleRef.current;
 
-  const orderbookCandlesToggleRef = useRef<HTMLElement | null>(null);
-  const orderbookCandlesToggle = orderbookCandlesToggleRef.current;
   const buySellMarksToggleRef = useRef<HTMLElement | null>(null);
   const buySellMarksToggle = buySellMarksToggleRef.current;
 
   const {
     orderLinesToggleOn,
     setOrderLinesToggleOn,
-    orderbookCandlesToggleOn,
-    setOrderbookCandlesToggleOn,
     setBuySellMarksToggleOn,
     buySellMarksToggleOn,
   } = useTradingViewToggles();
@@ -44,9 +39,6 @@ export const TvChart = () => {
     orderLineToggleRef,
     orderLinesToggleOn,
     setOrderLinesToggleOn,
-    orderbookCandlesToggleRef,
-    orderbookCandlesToggleOn,
-    setOrderbookCandlesToggleOn,
     buySellMarksToggleRef,
     buySellMarksToggleOn,
     setBuySellMarksToggleOn,
@@ -60,11 +52,6 @@ export const TvChart = () => {
     orderLineToggle,
     orderLinesToggleOn,
   });
-  useOrderbookCandles({
-    orderbookCandlesToggle,
-    orderbookCandlesToggleOn,
-    tvWidget,
-  });
   useBuySellMarks({
     buySellMarksToggle,
     buySellMarksToggleOn,