fix tv chart not ready / console errors

dydxprotocol · Oct 3, 2024 · 91307b7 · 91307b7
1 parent 3b88a67
commit 91307b7
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 24 deletions.
diff --git a/src/components/CollapsibleTabs.tsx b/src/components/CollapsibleTabs.tsx
@@ -68,7 +68,7 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
       defaultValue={defaultTab}
       value={tab}
       onValueChange={(v) => setTab?.(v as TabItemsValue)}
-      uiRefreshEnabled={uiRefresh}
+      $uiRefreshEnabled={uiRefresh}
       asChild
     >
       <$CollapsibleRoot
@@ -112,15 +112,15 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
     </$TabsRoot>
   );
 };
-const $TabsRoot = styled(TabsRoot)<{ uiRefreshEnabled: boolean }>`
+const $TabsRoot = styled(TabsRoot)<{ $uiRefreshEnabled: boolean }>`
   /* Overrides */
   --trigger-backgroundColor: var(--color-layer-2);
   --trigger-textColor: var(--color-text-0);
 
   --trigger-active-backgroundColor: var(--color-layer-1);
   --trigger-active-textColor: var(--color-text-2);
-  --trigger-active-underlineColor: ${({ uiRefreshEnabled }) => css`
-    ${uiRefreshEnabled ? css`var(--color-accent);` : css`var(--color-text-2);`}
+  --trigger-active-underlineColor: ${({ $uiRefreshEnabled }) => css`
+    ${$uiRefreshEnabled ? css`var(--color-accent);` : css`var(--color-text-2);`}
   `};
   --trigger-active-underline-size: 2px;
   --trigger-underline-size: 0px;

diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx
@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 import { Separator } from '@radix-ui/react-separator';
 import styled, { css } from 'styled-components';
 
-const StyledSeparator = styled(Separator)<{ fullHeight: boolean }>`
+const StyledSeparator = styled(Separator)<{ $fullHeight: boolean }>`
   flex: 0 !important;
   z-index: -1;
 
@@ -17,10 +17,17 @@ const StyledSeparator = styled(Separator)<{ fullHeight: boolean }>`
   &[data-orientation='vertical'] {
     align-self: center;
     width: 0;
-    height: ${({ fullHeight }) => (fullHeight ? css`100%;` : css`calc(100% - 1.5rem);`)}
     margin: 0 !important;
-
     border-right: solid var(--border-width) var(--color-border);
+
+    ${({ $fullHeight }) =>
+      $fullHeight
+        ? css`
+            height: 100%;
+          `
+        : css`
+            height: calc(100% - 1.5rem);
+          `}
   }
 `;
 
@@ -37,7 +44,7 @@ export const VerticalSeparator = ({
     className={className}
     orientation="vertical"
     decorative={decorative}
-    fullHeight={fullHeight}
+    $fullHeight={fullHeight}
   />
 );
 
@@ -59,7 +66,7 @@ export const WithSeparators = ({
           {child}
           {i < length - 1 && (
             <StyledSeparator
-              fullHeight={fullHeight}
+              $fullHeight={fullHeight}
               orientation={
                 (
                   {

diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
@@ -126,7 +126,7 @@ export const Tabs = <TabItemsValue extends string>({
       onWheel={onWheel}
       $side={side}
       $withInnerBorder={withBorders || withUnderline}
-      uiRefreshEnabled={uiRefresh}
+      $uiRefreshEnabled={uiRefresh}
     >
       <$Header $side={side}>{triggers}</$Header>
 
@@ -154,7 +154,7 @@ export const Tabs = <TabItemsValue extends string>({
 const $Root = styled(Root)<{
   $side: 'top' | 'bottom';
   $withInnerBorder?: boolean;
-  uiRefreshEnabled: boolean;
+  $uiRefreshEnabled: boolean;
 }>`
   /* Overrides */
   --trigger-backgroundColor: var(--color-layer-2);
@@ -163,8 +163,8 @@ const $Root = styled(Root)<{
   --trigger-active-backgroundColor: var(--color-layer-1);
   --trigger-active-textColor: var(--color-text-2);
   --trigger-hover-textColor: var(--trigger-active-textColor);
-  --trigger-active-underlineColor: ${({ uiRefreshEnabled }) => css`
-    ${uiRefreshEnabled ? css`var(--color-accent);` : css`var(--color-text-2);`}
+  --trigger-active-underlineColor: ${({ $uiRefreshEnabled }) => css`
+    ${$uiRefreshEnabled ? css`var(--color-accent);` : css`var(--color-text-2);`}
   `};
   --trigger-active-underline-backgroundColor: transparent;
   --trigger-active-underline-size: 2px;

diff --git a/src/hooks/tradingView/useTradingView.ts b/src/hooks/tradingView/useTradingView.ts
@@ -18,7 +18,7 @@ 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, getSelectedDisplayUnit } from '@/state/configsSelectors';
+import { getAppColorMode, getAppTheme } from '@/state/configsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 import { getCurrentMarketConfig, getCurrentMarketId } from '@/state/perpetualsSelectors';
 import { updateChartConfig } from '@/state/tradingView';
@@ -260,14 +260,5 @@ export const useTradingView = ({
     tvWidgetRef,
   ]);
 
-  const displayUnit = useAppSelector(getSelectedDisplayUnit);
-  useEffect(() => {
-    // when display unit is toggled, update bars volume to be the correct unit
-    if (tvWidgetRef.current) {
-      const chart = tvWidgetRef.current.activeChart?.();
-      chart.resetData();
-    }
-  }, [displayUnit]);
-
   return { savedResolution };
 };
diff --git a/src/views/charts/TradingView/TvChart.tsx b/src/views/charts/TradingView/TvChart.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import type { ResolutionString } from 'public/tradingview/charting_library';
 
@@ -14,6 +14,7 @@ import { useTradingViewTheme } from '@/hooks/tradingView/useTradingViewTheme';
 import { useTradingViewToggles } from '@/hooks/tradingView/useTradingViewToggles';
 
 import { useAppSelector } from '@/state/appTypes';
+import { getSelectedDisplayUnit } from '@/state/configsSelectors';
 import { getCurrentMarketId } from '@/state/perpetualsSelectors';
 
 import { BaseTvChart } from './BaseTvChart';
@@ -81,5 +82,14 @@ export const TvChart = () => {
   });
   useTradingViewTheme({ tvWidget, isWidgetReady, chartLines });
 
+  const displayUnit = useAppSelector(getSelectedDisplayUnit);
+  useEffect(() => {
+    if (!isChartReady || !tvWidget) return;
+
+    // when display unit is toggled, update bars volume to be the correct unit
+    const chart = tvWidget.activeChart?.();
+    chart?.resetData();
+  }, [displayUnit, tvWidget, isChartReady]);
+
   return <BaseTvChart isChartReady={isChartReady} />;
 };