From 7b6534273167935bad8522d027eba91b1fd9c8e5 Mon Sep 17 00:00:00 2001 From: Tina <59578595+tinaszheng@users.noreply.github.com> Date: Wed, 4 Dec 2024 11:30:46 -0500 Subject: [PATCH] feat: enable order book candles using feature flag (#1351) --- src/constants/tooltips/index.ts | 2 - src/constants/tooltips/tradeChart.ts | 8 ---- src/hooks/tradingView/useOrderbookCandles.ts | 40 ----------------- src/hooks/tradingView/useTradingView.ts | 43 +++---------------- .../tradingView/useTradingViewToggles.tsx | 13 ------ src/lib/abacus/index.ts | 4 +- src/lib/abacus/websocket.ts | 2 +- src/lib/tradingView/utils.ts | 15 ++++--- src/views/charts/TradingView/TvChart.tsx | 13 ------ 9 files changed, 17 insertions(+), 123 deletions(-) delete mode 100644 src/constants/tooltips/tradeChart.ts delete mode 100644 src/hooks/tradingView/useOrderbookCandles.ts diff --git a/src/constants/tooltips/index.ts b/src/constants/tooltips/index.ts index a933fdeef..34e7958e5 100644 --- 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 deleted file mode 100644 index e7dab24a4..000000000 --- a/src/constants/tooltips/tradeChart.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TOOLTIP_STRING_KEYS, type TooltipStrings } from '@/constants/localization'; - -export const tradeChartTooltips = { - ohlc: ({ stringGetter }) => ({ - title: stringGetter({ key: TOOLTIP_STRING_KEYS.OHLC_TITLE }), - body: stringGetter({ key: TOOLTIP_STRING_KEYS.OHLC_BODY }), - }), -} satisfies TooltipStrings; diff --git a/src/hooks/tradingView/useOrderbookCandles.ts b/src/hooks/tradingView/useOrderbookCandles.ts deleted file mode 100644 index 23e2ca51b..000000000 --- a/src/hooks/tradingView/useOrderbookCandles.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { useEffect } from 'react'; - -import { TOGGLE_ACTIVE_CLASS_NAME } from '@/constants/charts'; -import { TvWidget } from '@/constants/tvchart'; - -import abacusStateManager from '@/lib/abacus'; - -/** - * @description Hook to handle drawing candles with historical trades or orderbook prices - */ -export const useOrderbookCandles = ({ - orderbookCandlesToggle, - orderbookCandlesToggleOn, - tvWidget, -}: { - orderbookCandlesToggle: HTMLElement | null; - orderbookCandlesToggleOn: boolean; - tvWidget?: TvWidget; -}) => { - useEffect( - // Update orderbookCandles button on toggle - () => { - if (!tvWidget) return; - - tvWidget.onChartReady(() => { - tvWidget.headerReady().then(() => { - if (orderbookCandlesToggleOn) { - orderbookCandlesToggle?.classList.add(TOGGLE_ACTIVE_CLASS_NAME); - } else { - orderbookCandlesToggle?.classList.remove(TOGGLE_ACTIVE_CLASS_NAME); - } - abacusStateManager.toggleOrderbookCandles(orderbookCandlesToggleOn); - }); - }); - }, - [orderbookCandlesToggleOn, orderbookCandlesToggle, tvWidget] - ); - - return { orderbookCandlesToggleOn }; -}; diff --git a/src/hooks/tradingView/useTradingView.ts b/src/hooks/tradingView/useTradingView.ts index 491326ac1..cbf119898 100644 --- 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; orderLinesToggleOn: boolean; setOrderLinesToggleOn: Dispatch>; - orderbookCandlesToggleRef: React.MutableRefObject; - orderbookCandlesToggleOn: boolean; - setOrderbookCandlesToggleOn: Dispatch>; buySellMarksToggleRef: React.MutableRefObject; buySellMarksToggleOn: boolean; setBuySellMarksToggleOn: Dispatch>; }) => { 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 index cd10522bd..31904f41a 100644 --- 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 index 3ad9c63fb..eac186d7d 100644 --- 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 index f34d53715..d0e96c168 100644 --- a/src/lib/abacus/websocket.ts +++ b/src/lib/abacus/websocket.ts @@ -28,7 +28,7 @@ class AbacusWebsocket implements Omit void, received: (p0: string) => void): void { this.url = url; diff --git a/src/lib/tradingView/utils.ts b/src/lib/tradingView/utils.ts index 95bef4084..5f9734c89 100644 --- 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 index 02df705a5..a469454a5 100644 --- 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(null); const orderLineToggle = orderLineToggleRef.current; - const orderbookCandlesToggleRef = useRef(null); - const orderbookCandlesToggle = orderbookCandlesToggleRef.current; const buySellMarksToggleRef = useRef(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,