chore: spot tradingview chart QOL (dydxprotocol#2024)

Author: qardpeet

src/clients/spotApi.ts

@@ -206,6 +206,11 @@ export type SpotApiGetBarsQuery = {
   countback?: number;
 };
 
+export enum SpotApiHistoricalBarsStatus {
+  OK = 'ok',
+  NO_DATA = 'no_data',
+}
+
 export interface SpotApiGetBarsResponseData {
   buyVolume: string[];
   buyers: number[];
@@ -223,7 +228,7 @@ export interface SpotApiGetBarsResponseData {
   transactions: number[];
   volume: string[];
   volumeNativeToken: string[];
-  s: string;
+  s: SpotApiHistoricalBarsStatus;
   pair: Record<string, any>;
 }
 
@@ -380,8 +385,7 @@ export const transformBarsResponseToBars = (
 
 export const getSpotBars = async (apiUrl: string, query: SpotApiGetBarsQuery) => {
   const client = getOrCreateSpotApiClient(apiUrl);
-  const response = await client.getBars(query);
-  return transformBarsResponseToBars(response);
+  return client.getBars(query);
 };
 
 export const getSpotPortfolioTrades = async (apiUrl: string, address: string) => {

src/constants/candles.ts

@@ -122,22 +122,6 @@ export const RESOLUTION_CHART_CONFIGS = {
   '1D': { defaultRange: 2 * timeUnits.month },
 } as Record<ResolutionString, { defaultRange: number }>;
 
-export const SPOT_RESOLUTION_CHART_CONFIGS = {
-  '1S': { defaultRange: 5 * timeUnits.minute },
-  '5S': { defaultRange: 10 * timeUnits.minute },
-  '15S': { defaultRange: 30 * timeUnits.minute },
-  '30S': { defaultRange: timeUnits.hour },
-  '1': { defaultRange: 2 * timeUnits.hour },
-  '5': { defaultRange: 10 * timeUnits.hour },
-  '15': { defaultRange: 30 * timeUnits.hour },
-  '30': { defaultRange: timeUnits.day },
-  '60': { defaultRange: 6 * timeUnits.day },
-  '240': { defaultRange: 24 * timeUnits.day },
-  '720': { defaultRange: 48 * timeUnits.day },
-  '1D': { defaultRange: 4 * timeUnits.month },
-  '1W': { defaultRange: timeUnits.year },
-} as Record<ResolutionString, { defaultRange: number }>;
-
 export const RESOLUTION_STRING_TO_LABEL = {
   '1': { value: '1', unitStringKey: STRING_KEYS.MINUTES_ABBREVIATED },
   '5': { value: '5', unitStringKey: STRING_KEYS.MINUTES_ABBREVIATED },

src/constants/spot.ts

@@ -7,3 +7,4 @@ export const SOLANA_BASE_TRANSACTION_FEE = 0.000005;
 export const SOL_WITHDRAWAL_POLL_INTERVAL_MS = 1000;
 export const SOL_WITHDRAWAL_TIMEOUT_MS = 30000;
 export const SPOT_DEFAULT_TOKEN_MINT = 'DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263';
+export const SPOT_TV_DEFAULT_VISIBLE_BAR_COUNT = 250;

src/hooks/tradingView/useSpotChartMarketAndResolution.ts

@@ -2,7 +2,8 @@ import { useEffect, useRef } from 'react';
 
 import type { ResolutionString } from 'public/tradingview/charting_library';
 
-import { DEFAULT_RESOLUTION, SPOT_RESOLUTION_CHART_CONFIGS } from '@/constants/candles';
+import { DEFAULT_RESOLUTION } from '@/constants/candles';
+import { SPOT_TV_DEFAULT_VISIBLE_BAR_COUNT } from '@/constants/spot';
 import type { TvWidget } from '@/constants/tvchart';
 
 import { useAppSelector } from '@/state/appTypes';
@@ -42,29 +43,43 @@ export const useSpotChartMarketAndResolution = ({
       tvWidget
         .activeChart()
         .onIntervalChanged()
-        .subscribe(null, (newResolution) => {
-          setVisibleRangeForResolution(tvWidget, newResolution);
+        .subscribe(null, () => {
+          setVisibleRange(tvWidget);
         });
 
-      // Set visible range on initial render
-      setVisibleRangeForResolution(tvWidget, resolution);
+      setVisibleRange(tvWidget);
     });
   }, [tokenMint, tvWidget]);
 };
 
-const setVisibleRangeForResolution = (tvWidget: TvWidget, resolution: ResolutionString) => {
-  const defaultRange: number | undefined = SPOT_RESOLUTION_CHART_CONFIGS[resolution]?.defaultRange;
-
-  if (defaultRange) {
-    const to = Date.now() / 1000;
-    const from = (Date.now() - defaultRange) / 1000;
-
-    tvWidget.activeChart().setVisibleRange(
-      {
-        from,
-        to,
-      },
-      { percentRightMargin: 10 }
-    );
-  }
+const setVisibleRange = (tvWidget: TvWidget) => {
+  const defaultBarCount = SPOT_TV_DEFAULT_VISIBLE_BAR_COUNT;
+  const chart = tvWidget.activeChart();
+
+  const handleDataLoaded = () => {
+    chart
+      .exportData({ includeTime: true, includeSeries: true, includedStudies: [] })
+      .then((exportedData) => {
+        const bars = exportedData.data;
+        if (bars.length === 0) return;
+
+        const startIndex = Math.max(0, bars.length - defaultBarCount);
+        const fromBar = bars[startIndex];
+        const toBar = bars[bars.length - 1];
+        const from = fromBar?.[0];
+        const to = toBar?.[0];
+
+        if (from && to) {
+          chart.setVisibleRange({ from, to }, { percentRightMargin: 10 });
+        }
+      })
+      .catch(() => {
+        // Fallback: do nothing, let TradingView use default zoom
+      });
+
+    // Unsubscribe after handling
+    chart.onDataLoaded().unsubscribe(null, handleDataLoaded);
+  };
+
+  chart.onDataLoaded().subscribe(null, handleDataLoaded);
 };

src/lib/tradingView/spotDatafeed/index.ts

@@ -7,7 +7,9 @@ import { type RootStore } from '@/state/_store';
 import {
   getSpotBars,
   SpotApiGetBarsQuery,
+  SpotApiHistoricalBarsStatus,
   SpotApiTokenPairStatisticsType,
+  transformBarsResponseToBars,
 } from '@/clients/spotApi';
 import { waitForSelector } from '@/lib/asyncUtils';
 import {
@@ -54,7 +56,10 @@ export const getSpotDatafeed = (store: RootStore, spotApiUrl: string): IBasicDat
   resolveSymbol: async (tokenMint, onSymbolResolvedCallback) => {
     setTimeout(async () => {
       const tokenPrice = await waitForSelector(store, (s) => BonsaiCore.spot.tokenPrice.data(s));
-      const symbolInfo = createSpotSymbolInfo(tokenMint, tokenPrice);
+      const { symbol, tokenNameFull } = await waitForSelector(store, (s) =>
+        BonsaiCore.spot.tokenMetadata.data(s)
+      );
+      const symbolInfo = createSpotSymbolInfo(tokenMint, tokenPrice, tokenNameFull, symbol);
       onSymbolResolvedCallback(symbolInfo);
     }, 0);
   },
@@ -82,12 +87,14 @@ export const getSpotDatafeed = (store: RootStore, spotApiUrl: string): IBasicDat
         statsType: SpotApiTokenPairStatisticsType.Filtered,
       };
 
-      const bars = await wrapAndLogBonsaiError(
+      const barsResponse = await wrapAndLogBonsaiError(
         () => getSpotBars(spotApiUrl, query),
-        'getSpotBars'
+        'spot/getSpotBars'
       )();
 
-      if (bars.length === 0) {
+      const bars = transformBarsResponseToBars(barsResponse);
+
+      if (barsResponse.data.s === SpotApiHistoricalBarsStatus.NO_DATA) {
         onHistoryCallback([], { noData: true });
       } else {
         const chartBars = transformSpotCandlesForChart(bars);

src/lib/tradingView/spotDatafeed/utils.ts

@@ -50,15 +50,17 @@ const getSpotPriceDecimals = (price?: number | null): number => {
 // Create symbol info for spot tokens
 export const createSpotSymbolInfo = (
   tokenMint: string,
-  tokenPrice?: number | null
+  tokenPrice?: number | null,
+  tokenName?: string,
+  tokenSymbol?: string
 ): LibrarySymbolInfo => {
   const decimals = getSpotPriceDecimals(tokenPrice);
   const pricescale = 10 ** decimals;
 
   return {
     ticker: tokenMint,
-    name: tokenMint,
-    description: tokenMint,
+    name: `${tokenSymbol ?? tokenMint}/USD`,
+    description: tokenName ?? tokenSymbol ?? tokenMint,
     type: 'crypto',
     session: '24x7',
     timezone,