fix: only show volume bars in USD (#1243)

dydxprotocol · Nov 4, 2024 · 19ff47f · 19ff47f
1 parent 203cba8
commit 19ff47f
Show file tree

Hide file tree

Showing 4 changed files with 316 additions and 367 deletions.
diff --git a/src/hooks/tradingView/useTradingView.ts b/src/hooks/tradingView/useTradingView.ts
@@ -1,8 +1,8 @@
-import React, { Dispatch, SetStateAction, useCallback, useEffect, useMemo } from 'react';
+import React, { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react';
 
+import BigNumber from 'bignumber.js';
 import isEmpty from 'lodash/isEmpty';
 import {
-  type IBasicDataFeed,
   LanguageCode,
   ResolutionString,
   TradingTerminalWidgetOptions,
@@ -16,16 +16,21 @@ import { StatsigFlags } from '@/constants/statsig';
 import { tooltipStrings } from '@/constants/tooltips';
 import type { TvWidget } from '@/constants/tvchart';
 
+import { store } from '@/state/_store';
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { getAppColorMode, getAppTheme } from '@/state/appUiConfigsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
-import { getCurrentMarketId } from '@/state/perpetualsSelectors';
+import { getCurrentMarketConfig, getCurrentMarketId } from '@/state/perpetualsSelectors';
 import { updateChartConfig } from '@/state/tradingView';
 import { getTvChartConfig } from '@/state/tradingViewSelectors';
 
+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 { useStringGetter } from '../useStringGetter';
 import { useURLConfigs } from '../useURLConfigs';
@@ -46,8 +51,6 @@ export const useTradingView = ({
   buySellMarksToggleOn,
   setBuySellMarksToggleOn,
   setIsChartReady,
-  tickSizeDecimals,
-  datafeed,
 }: {
   tvWidgetRef: React.MutableRefObject<TvWidget | null>;
   orderLineToggleRef: React.MutableRefObject<HTMLElement | null>;
@@ -60,21 +63,23 @@ export const useTradingView = ({
   buySellMarksToggleOn: boolean;
   setBuySellMarksToggleOn: Dispatch<SetStateAction<boolean>>;
   setIsChartReady: React.Dispatch<React.SetStateAction<boolean>>;
-  tickSizeDecimals?: number;
-  datafeed: IBasicDataFeed;
 }) => {
   const stringGetter = useStringGetter();
   const urlConfigs = useURLConfigs();
   const featureFlags = useAllStatsigGateValues();
   const dispatch = useAppDispatch();
 
+  const { group, decimal } = useLocaleSeparators();
+
   const appTheme = useAppSelector(getAppTheme);
   const appColorMode = useAppSelector(getAppColorMode);
 
   const marketId = useAppSelector(getCurrentMarketId);
   const selectedLocale = useAppSelector(getSelectedLocale);
   const selectedNetwork = useAppSelector(getSelectedNetwork);
 
+  const { getCandlesForDatafeed, getMarketTickSize } = useDydxClient();
+
   const savedTvChartConfig = useAppSelector(getTvChartConfig);
   const ffEnableOrderbookCandles = useStatsigGateValue(StatsigFlags.ffEnableOhlc);
 
@@ -83,6 +88,17 @@ export const useTradingView = ({
     [savedTvChartConfig]
   );
 
+  const [tickSizeDecimalsIndexer, setTickSizeDecimalsIndexer] = useState<{
+    [marketId: string]: number | undefined;
+  }>({});
+  const { tickSizeDecimals: tickSizeDecimalsAbacus } = orEmptyObj(
+    useAppSelector(getCurrentMarketConfig)
+  );
+  const tickSizeDecimals =
+    (marketId
+      ? tickSizeDecimalsIndexer[marketId] ?? tickSizeDecimalsAbacus
+      : tickSizeDecimalsAbacus) ?? undefined;
+
   const initializeToggle = useCallback(
     ({
       toggleRef,
@@ -110,17 +126,40 @@ export const useTradingView = ({
     []
   );
 
+  useEffect(() => {
+    // we only need tick size from current market for the price scale settings
+    // if markets haven't been loaded via abacus, get the current market info from indexer
+    (async () => {
+      if (marketId && tickSizeDecimals === undefined) {
+        const marketTickSize = await getMarketTickSize(marketId);
+        setTickSizeDecimalsIndexer((prev) => ({
+          ...prev,
+          [marketId]: BigNumber(marketTickSize).decimalPlaces() ?? undefined,
+        }));
+      }
+    })();
+  }, [marketId, tickSizeDecimals, getMarketTickSize]);
+
   const tradingViewLimitOrder = useTradingViewLimitOrder(marketId, tickSizeDecimals);
 
   useEffect(() => {
-    if (marketId) {
+    if (marketId && tickSizeDecimals !== undefined) {
       const widgetOptions = getWidgetOptions();
       const widgetOverrides = getWidgetOverrides({ appTheme, appColorMode });
 
+      const initialPriceScale = BigNumber(10).exponentiatedBy(tickSizeDecimals).toNumber();
       const options: TradingTerminalWidgetOptions = {
         ...widgetOptions,
         ...widgetOverrides,
-        datafeed,
+        datafeed: getDydxDatafeed(
+          store,
+          getCandlesForDatafeed,
+          initialPriceScale,
+          orderbookCandlesToggleOn,
+          { decimal, group },
+          selectedLocale,
+          stringGetter
+        ),
         interval: (savedResolution ?? DEFAULT_RESOLUTION) as ResolutionString,
         locale: SUPPORTED_LOCALE_BASE_TAGS[selectedLocale] as LanguageCode,
         symbol: marketId,
@@ -212,7 +251,6 @@ export const useTradingView = ({
     selectedLocale,
     selectedNetwork,
     !!marketId,
-    datafeed,
     tickSizeDecimals !== undefined,
     orderLineToggleRef,
     orderbookCandlesToggleRef,