feat: add buys and sells as marks on tv chart

package.json

@@ -54,7 +54,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "1.8.85",
     "@dydxprotocol/v4-client-js": "^1.1.27",
-    "@dydxprotocol/v4-localization": "^1.1.174",
+    "@dydxprotocol/v4-localization": "^1.1.177",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",
     "@hugocxl/react-to-image": "^0.0.9",

src/constants/candles.ts

@@ -60,6 +60,19 @@ export enum CandleResolution {
   ONE_DAY = '1DAY',
 }
 
+/**
+ * @description ResolutionStrings used with TradingView's charting library mapped to time interval per candle in ms
+ */
+export const RESOLUTION_TO_INTERVAL_MS = {
+  '1': timeUnits.second,
+  '5': 5 * timeUnits.minute,
+  '15': 15 * timeUnits.minute,
+  '30': 30 * timeUnits.minute,
+  '60': timeUnits.hour,
+  '240': 4 * timeUnits.hour,
+  '1D': timeUnits.day,
+} as Record<ResolutionString, number>;
+
 /**
  * @description ResolutionStrings used with TradingView's charting library mapped to CandleResolution
  */

src/hooks/tradingView/useBuySellMarks.ts

@@ -0,0 +1,59 @@
+import { Dispatch, SetStateAction, useEffect } from 'react';
+
+import { TvWidget } from '@/constants/tvchart';
+
+import { getMarketFills } from '@/state/accountSelectors';
+import { useAppSelector } from '@/state/appTypes';
+import { getCurrentMarketId } from '@/state/perpetualsSelectors';
+
+import { useAppThemeAndColorModeContext } from '../useAppThemeAndColorMode';
+
+/**
+ * @description Hook to handle marks for historic buys and sells on the TV chart
+ */
+export function useBuySellMarks({
+  buySellMarksToggle,
+  buySellMarksToggleOn,
+  setBuySellMarksToggleOn,
+  tvWidget,
+  isChartReady,
+}: {
+  buySellMarksToggle: HTMLElement | null;
+  buySellMarksToggleOn: boolean;
+  setBuySellMarksToggleOn: Dispatch<SetStateAction<boolean>>;
+  tvWidget: TvWidget | null;
+  isChartReady: boolean;
+}) {
+  const marketId = useAppSelector(getCurrentMarketId);
+  const fills = useAppSelector(getMarketFills);
+  const currentMarketFills = marketId ? fills[marketId] : undefined;
+
+  const theme = useAppThemeAndColorModeContext();
+
+  useEffect(() => {
+    // Initialize onClick for Buys/Sells toggle
+    if (isChartReady && buySellMarksToggle) {
+      buySellMarksToggle.onclick = () => setBuySellMarksToggleOn((prev) => !prev);
+    }
+  }, [isChartReady, buySellMarksToggle, setBuySellMarksToggleOn]);
+
+  useEffect(
+    // Update marks on toggle and on new fills and on display preference changes
+    () => {
+      if (!isChartReady || !tvWidget) return;
+
+      tvWidget.onChartReady(() => {
+        tvWidget.headerReady().then(() => {
+          if (buySellMarksToggleOn) {
+            buySellMarksToggle?.classList?.add('toggle-active');
+            tvWidget.activeChart().refreshMarks();
+          } else {
+            buySellMarksToggle?.classList?.remove('toggle-active');
+            tvWidget.activeChart().clearMarks();
+          }
+        });
+      });
+    },
+    [buySellMarksToggleOn, buySellMarksToggle, tvWidget, isChartReady, currentMarketFills, theme]
+  );
+}

src/hooks/tradingView/useChartLines.ts

@@ -275,9 +275,9 @@ export const useChartLines = ({
       if (isChartReady) {
         runOnChartReady(() => {
           if (orderLinesToggleOn) {
-            orderLineToggle?.classList?.add('order-lines-active');
+            orderLineToggle?.classList?.add('toggle-active');
           } else {
-            orderLineToggle?.classList?.remove('order-lines-active');
+            orderLineToggle?.classList?.remove('toggle-active');
           }
         });
       }

src/hooks/tradingView/useOrderbookCandles.ts

@@ -7,7 +7,6 @@ import abacusStateManager from '@/lib/abacus';
 /**
  * @description Hook to handle drawing candles with historical trades or orderbook prices
  */
-
 export const useOrderbookCandles = ({
   orderbookCandlesToggle,
   isChartReady,
@@ -31,18 +30,18 @@ export const useOrderbookCandles = ({
   useEffect(
     // Update orderbookCandles button on toggle
     () => {
-      if (isChartReady) {
-        tvWidget?.onChartReady(() => {
-          tvWidget.headerReady().then(() => {
-            if (orderbookCandlesToggleOn) {
-              orderbookCandlesToggle?.classList?.add('ohlc-active');
-            } else {
-              orderbookCandlesToggle?.classList?.remove('ohlc-active');
-            }
-            abacusStateManager.toggleOrderbookCandles(orderbookCandlesToggleOn);
-          });
+      if (!isChartReady || !tvWidget) return;
+
+      tvWidget.onChartReady(() => {
+        tvWidget.headerReady().then(() => {
+          if (orderbookCandlesToggleOn) {
+            orderbookCandlesToggle?.classList?.add('toggle-active');
+          } else {
+            orderbookCandlesToggle?.classList?.remove('toggle-active');
+          }
+          abacusStateManager.toggleOrderbookCandles(orderbookCandlesToggleOn);
         });
-      }
+      });
     },
     [orderbookCandlesToggleOn, orderbookCandlesToggle, tvWidget, isChartReady]
   );

src/hooks/tradingView/useTradingView.ts

@@ -28,6 +28,7 @@ import { getSavedResolution, getWidgetOptions, getWidgetOverrides } from '@/lib/
 import { useDydxClient } from '../useDydxClient';
 import { useEnvFeatures } from '../useEnvFeatures';
 import { useLocalStorage } from '../useLocalStorage';
+import { useLocaleSeparators } from '../useLocaleSeparators';
 import { useAllStatsigGateValues } from '../useStatsig';
 import { useStringGetter } from '../useStringGetter';
 import { useURLConfigs } from '../useURLConfigs';
@@ -40,18 +41,21 @@ export const useTradingView = ({
   orderLineToggleRef,
   orderbookCandlesToggleRef,
   orderbookCandlesToggleOn,
+  buySellMarksToggleRef,
   setIsChartReady,
 }: {
   tvWidgetRef: React.MutableRefObject<TvWidget | null>;
   orderLineToggleRef: React.MutableRefObject<HTMLElement | null>;
   orderbookCandlesToggleRef: React.MutableRefObject<HTMLElement | null>;
   orderbookCandlesToggleOn: boolean;
+  buySellMarksToggleRef: React.MutableRefObject<HTMLElement | null>;
   setIsChartReady: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
   const stringGetter = useStringGetter();
   const urlConfigs = useURLConfigs();
   const featureFlags = useAllStatsigGateValues();
   const { isOhlcEnabled } = useEnvFeatures();
+  const { group, decimal } = useLocaleSeparators();
 
   const appTheme = useAppSelector(getAppTheme);
   const appColorMode = useAppSelector(getAppColorMode);
@@ -100,7 +104,10 @@ export const useTradingView = ({
           store,
           getCandlesForDatafeed,
           initialPriceScale,
-          orderbookCandlesToggleOn
+          orderbookCandlesToggleOn,
+          { decimal, group },
+          selectedLocale,
+          stringGetter
         ),
         interval: (savedResolution ?? DEFAULT_RESOLUTION) as ResolutionString,
         locale: SUPPORTED_LOCALE_BASE_TAGS[selectedLocale] as LanguageCode,
@@ -119,7 +126,7 @@ export const useTradingView = ({
               orderLineToggleRef.current = tvWidgetRef.current.createButton();
               orderLineToggleRef.current.innerHTML = `<span>${stringGetter({
                 key: STRING_KEYS.ORDER_LINES,
-              })}</span> <div class="displayOrdersButton-toggle"></div>`;
+              })}</span> <div class="toggle"></div>`;
               orderLineToggleRef.current.setAttribute(
                 'title',
                 stringGetter({ key: STRING_KEYS.ORDER_LINES_TOOLTIP })
@@ -135,9 +142,17 @@ export const useTradingView = ({
               });
 
               orderbookCandlesToggleRef.current = tvWidgetRef.current.createButton();
-              orderbookCandlesToggleRef.current.innerHTML = `<span>${`${ohlcTitle}*`}</span> <div class="ohlcButton-toggle"></div>`;
+              orderbookCandlesToggleRef.current.innerHTML = `<span>${`${ohlcTitle}*`}</span> <div class="toggle"></div>`;
               orderbookCandlesToggleRef.current.setAttribute('title', ohlcBody as string);
             }
+            if (buySellMarksToggleRef) {
+              buySellMarksToggleRef.current = tvWidgetRef.current.createButton();
+              buySellMarksToggleRef.current.innerHTML = `<span>${stringGetter({ key: STRING_KEYS.BUYS_SELLS_TOGGLE })}</span> <div class="toggle"></div>`;
+              buySellMarksToggleRef.current.setAttribute(
+                'title',
+                stringGetter({ key: STRING_KEYS.BUYS_SELLS_TOGGLE_TOOLTIP })
+              );
+            }
           }
         });
 
@@ -154,6 +169,8 @@ export const useTradingView = ({
       orderLineToggleRef.current = null;
       orderbookCandlesToggleRef.current?.remove();
       orderbookCandlesToggleRef.current = null;
+      buySellMarksToggleRef.current?.remove();
+      buySellMarksToggleRef.current = null;
       tvWidgetRef.current?.remove();
       tvWidgetRef.current = null;
       setIsChartReady(false);

src/hooks/tradingView/useTradingViewToggles.tsx

@@ -6,6 +6,7 @@ export const useTradingViewToggles = () => {
   // Otherwise, candles calculate OHLC data from historical trades.
   const [orderbookCandlesToggleOn, setOrderbookCandlesToggleOn] = useState(true);
   const [orderLinesToggleOn, setOrderLinesToggleOn] = useState(true);
+  const [buySellMarksToggleOn, setBuySellMarksToggleOn] = useState(true);
 
   return {
     // Orderbook Candles
@@ -14,5 +15,8 @@ export const useTradingViewToggles = () => {
     // Chart Order Lines
     orderLinesToggleOn,
     setOrderLinesToggleOn,
+    // Buy Sell Marks
+    buySellMarksToggleOn,
+    setBuySellMarksToggleOn,
   };
 };

src/lib/__test__/orders.spec.ts

@@ -0,0 +1,28 @@
+import BigNumber from 'bignumber.js';
+import { describe, expect, it } from 'vitest';
+
+import { SubaccountFill } from '@/constants/abacus';
+
+import { getAverageFillPrice } from '../orders';
+
+// TODO: add real SubaccountFill fixtures here, but `getAverageFillPrice` only uses 'size' and 'price' for now
+const mockFill1 = { size: 1, price: 2 } as SubaccountFill;
+const mockFill2 = { size: 0.5, price: 1 } as SubaccountFill;
+
+const fraction = (num: number, denom: number) => {
+  return BigNumber(num).div(BigNumber(denom));
+};
+
+describe('getAverageFillPrice', () => {
+  it('doesnt error on empty arrays', () => {
+    expect(getAverageFillPrice([])).toBeNull();
+  });
+
+  it('calculates single fill averages', () => {
+    expect(getAverageFillPrice([mockFill1])).toEqual(BigNumber(2));
+  });
+
+  it('calculates averages', () => {
+    expect(getAverageFillPrice([mockFill1, mockFill2])).toEqual(fraction(5, 3));
+  });
+});

src/lib/orders.ts

@@ -1,11 +1,13 @@
 import { OrderSide } from '@dydxprotocol/v4-client-js';
+import BigNumber from 'bignumber.js';
 
 import {
   AbacusOrderStatus,
   AbacusOrderType,
   AbacusOrderTypes,
   KotlinIrEnumValues,
   Nullable,
+  SubaccountFills,
   TRADE_TYPES,
   type Asset,
   type OrderStatus,
@@ -140,3 +142,13 @@ export const getHydratedTradingData = <
 
 export const getTradeType = (orderType: string) =>
   TRADE_TYPES[orderType as KotlinIrEnumValues<typeof AbacusOrderType>];
+
+export const getAverageFillPrice = (fills: SubaccountFills) => {
+  let total = BigNumber(0);
+  let totalSize = BigNumber(0);
+  fills.forEach((fill) => {
+    total = total.plus(BigNumber(fill.price).times(fill.size));
+    totalSize = totalSize.plus(fill.size);
+  });
+  return totalSize.gt(0) ? total.div(totalSize) : null;
+};

src/lib/tradingView/dydxfeed/__test__/utils.spec.ts

@@ -0,0 +1,26 @@
+import { ResolutionString } from 'public/tradingview/charting_library';
+import { describe, expect, it } from 'vitest';
+
+import { getBarTime } from '../utils';
+
+describe('getBarTime', () => {
+  it('should return the correct value when times start at 0', () => {
+    const beginningOfChart = getBarTime(0, 0, '1' as ResolutionString);
+    expect(beginningOfChart).toBe(0);
+
+    const middleOfChart = getBarTime(0, 10001, '1' as ResolutionString);
+    expect(middleOfChart).toBe(10);
+  });
+
+  it('should return the correct value when times dont start at 0', () => {
+    // Intervals here look like 100, 1100, ... 9100, 10100, .etc
+    // Should resolve to 9100ms bucket which is 9s
+    const nonZeroStart = getBarTime(100, 10001, '1' as ResolutionString);
+    expect(nonZeroStart).toBe(9);
+  });
+
+  it('should return correct value with real timestamps', () => {
+    const timestampInSeconds = getBarTime(1716091200000, 1723573418524, '1D' as ResolutionString);
+    expect(timestampInSeconds).toBe(1723521600);
+  });
+});