feat(performance): trading view kick off getBars / request candles so…

…oner (#399) * remove markets dependency for loading candles * separate indexer client out * nits * address feedback * add initial price scale * fix tv chart missing symbol error * remove stray console.log * bump abacus and add back settimeout
dydxprotocol · Mar 29, 2024 · b3d7625 · b3d7625
1 parent 78815ce
commit b3d7625
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 168 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "@cosmjs/proto-signing": "^0.32.1",
     "@cosmjs/stargate": "^0.32.1",
     "@cosmjs/tendermint-rpc": "^0.32.1",
-    "@dydxprotocol/v4-abacus": "^1.6.17",
+    "@dydxprotocol/v4-abacus": "^1.6.20",
     "@dydxprotocol/v4-client-js": "^1.0.25",
     "@dydxprotocol/v4-localization": "^1.1.51",
     "@ethersproject/providers": "^5.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/hooks/tradingView/useTradingView.ts b/src/hooks/tradingView/useTradingView.ts
@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
+import BigNumber from 'bignumber.js';
 import isEmpty from 'lodash/isEmpty';
 import { LanguageCode, ResolutionString, widget } from 'public/tradingview/charting_library';
 import { shallowEqual, useSelector } from 'react-redux';
@@ -41,7 +42,8 @@ export const useTradingView = ({
   const marketIds = useSelector(getMarketIds, shallowEqual);
   const selectedLocale = useSelector(getSelectedLocale);
   const selectedNetwork = useSelector(getSelectedNetwork);
-  const { getCandlesForDatafeed, isConnected: isClientConnected } = useDydxClient();
+
+  const { getCandlesForDatafeed, getMarketTickSize } = useDydxClient();
 
   const [savedTvChartConfig, setTvChartConfig] = useLocalStorage<object | undefined>({
     key: LocalStorageKey.TradingViewChartConfig,
@@ -51,14 +53,28 @@ export const useTradingView = ({
   const savedResolution = getSavedResolution({ savedConfig: savedTvChartConfig });
   const hasMarkets = marketIds.length > 0;
 
+  const [initialPriceScale, setInitialPriceScale] = useState(100);
+
+  useEffect(() => {
+    (async () => {
+      if (marketId && !hasMarkets) {
+        const marketTickSize = await getMarketTickSize(marketId);
+        const priceScale = BigNumber(10).exponentiatedBy(
+          BigNumber(marketTickSize).decimalPlaces() ?? 2
+        );
+        setInitialPriceScale(priceScale.toNumber());
+      }
+    })();
+  }, [marketId!!, hasMarkets]);
+
   useEffect(() => {
-    if (hasMarkets && isClientConnected && marketId) {
+    if (marketId) {
       const widgetOptions = getWidgetOptions();
       const widgetOverrides = getWidgetOverrides({ appTheme, appColorMode });
       const options = {
         ...widgetOptions,
         ...widgetOverrides,
-        datafeed: getDydxDatafeed(store, getCandlesForDatafeed),
+        datafeed: getDydxDatafeed(store, getCandlesForDatafeed, initialPriceScale),
         interval: (savedResolution || DEFAULT_RESOLUTION) as ResolutionString,
         locale: SUPPORTED_LOCALE_BASE_TAGS[selectedLocale] as LanguageCode,
         symbol: marketId,
@@ -97,14 +113,7 @@ export const useTradingView = ({
       tvWidgetRef.current = null;
       setIsChartReady(false);
     };
-  }, [
-    getCandlesForDatafeed,
-    isClientConnected,
-    hasMarkets,
-    selectedLocale,
-    selectedNetwork,
-    !!marketId,
-  ]);
+  }, [selectedLocale, selectedNetwork, initialPriceScale, marketId!!]);
 
   return { savedResolution };
 };
diff --git a/src/hooks/useAccounts.tsx b/src/hooks/useAccounts.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useContext, createContext, useEffect, useState, useMemo } from 'react';
 
+import { OfflineSigner } from '@cosmjs/proto-signing';
 import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
 import { AES, enc } from 'crypto-js';
 import { useDispatch } from 'react-redux';
@@ -27,7 +28,6 @@ import { useDydxClient } from './useDydxClient';
 import { useLocalStorage } from './useLocalStorage';
 import { useRestrictions } from './useRestrictions';
 import { useWalletConnection } from './useWalletConnection';
-import { OfflineSigner } from '@cosmjs/proto-signing';
 
 const AccountsContext = createContext<ReturnType<typeof useAccountsContext> | undefined>(undefined);
 
@@ -136,29 +136,24 @@ const useAccountsContext = () => {
   };
 
   // dYdXClient Onboarding & Account Helpers
-  const { compositeClient, getWalletFromEvmSignature } = useDydxClient();
+  const { indexerClient, getWalletFromEvmSignature } = useDydxClient();
   // dYdX subaccounts
   const [dydxSubaccounts, setDydxSubaccounts] = useState<Subaccount[] | undefined>();
 
-  const { getSubaccounts } = useMemo(
-    () => ({
-      getSubaccounts: async ({ dydxAddress }: { dydxAddress: DydxAddress }) => {
-        try {
-          const response = await compositeClient?.indexerClient.account.getSubaccounts(dydxAddress);
-          setDydxSubaccounts(response?.subaccounts);
-          return response?.subaccounts ?? [];
-        } catch (error) {
-          // 404 is expected if the user has no subaccounts
-          if (error.status === 404) {
-            return [];
-          } else {
-            throw error;
-          }
-        }
-      },
-    }),
-    [compositeClient]
-  );
+  const getSubaccounts = async ({ dydxAddress }: { dydxAddress: DydxAddress }) => {
+    try {
+      const response = await indexerClient.account.getSubaccounts(dydxAddress);
+      setDydxSubaccounts(response?.subaccounts);
+      return response?.subaccounts ?? [];
+    } catch (error) {
+      // 404 is expected if the user has no subaccounts
+      if (error.status === 404) {
+        return [];
+      } else {
+        throw error;
+      }
+    }
+  };
 
   // dYdX wallet / onboarding state
   const [localDydxWallet, setLocalDydxWallet] = useState<LocalWallet>();

diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts
@@ -24,7 +24,7 @@ import { useSelectedNetwork } from './useSelectedNetwork';
 export const useAnalytics = () => {
   const { walletType, walletConnectionType, evmAddress, dydxAddress, selectedWalletType } =
     useAccounts();
-  const { compositeClient } = useDydxClient();
+  const { indexerClient } = useDydxClient();
 
   /** User properties */
 
@@ -99,7 +99,7 @@ export const useAnalytics = () => {
 
   useEffect(() => {
     if (status) {
-      const websocketEndpoint = compositeClient?.indexerClient?.config.websocketEndpoint;
+      const websocketEndpoint = indexerClient.config.websocketEndpoint;
 
       const lastSuccessfulIndexerRpcQuery =
         (websocketEndpoint &&