refactor: relocate TradingView components to shared src/components directory

Author: DigHuang

frontend/src/app/home/home.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { useAllPollTaskList } from "@/api/conversation";
+import TradingViewTickerTape from "@/components/tradingview/tradingview-ticker-tape";
 import { agentSuggestions } from "@/mock/agent-data";
 import ChatInputArea from "../agent/components/chat-conversation/chat-input-area";
 import { AgentSuggestionsList, AgentTaskCards } from "./components";
-import TradingViewTickerTape from "./components/tradingview-ticker-tape";
 
 const INDEX_SYMBOLS = [
   "FOREXCOM:SPXUSD",

frontend/src/app/home/stock.tsx

@@ -6,17 +6,15 @@ import {
   useGetStockPrice,
   useRemoveStockFromWatchlist,
 } from "@/api/stock";
+import TradingViewAdvancedChart from "@/components/tradingview/tradingview-advanced-chart";
 import { Button } from "@/components/ui/button";
-import { useStockColors } from "@/store/settings-store";
 import type { Route } from "./+types/stock";
-import TradingViewAdvancedChart from "./components/tradingview-advanced-chart";
 
 function Stock() {
   const { stockId } = useParams<Route.LoaderArgs["params"]>();
   const navigate = useNavigate();
   // Use stockId as ticker to fetch real data from API
   const ticker = stockId || "";
-  const stockColors = useStockColors();
 
   // Fetch current stock price data
   const {
@@ -116,10 +114,6 @@ function Stock() {
           interval="D"
           minHeight={420}
           theme="light"
-          colors={{
-            upColor: stockColors.positive,
-            downColor: stockColors.negative,
-          }}
           locale="en"
           timezone="UTC"
         />

…omponents/tradingview-advanced-chart.tsx …adingview/tradingview-advanced-chart.tsxfrontend/src/app/home/components/tradingview-advanced-chart.tsx renamed to frontend/src/components/tradingview/tradingview-advanced-chart.tsx frontend/src/app/home/components/tradingview-advanced-chart.tsx renamed to frontend/src/components/tradingview/tradingview-advanced-chart.tsx

@@ -1,28 +1,43 @@
 import { memo, useEffect, useMemo, useRef } from "react";
 import defaultMap from "./tv-symbol-map.json";
 
-type Props = {
+interface TradingViewAdvancedChartProps {
   ticker: string;
   mappingUrl?: string;
   interval?: string;
   minHeight?: number;
   theme?: "light" | "dark";
-  colors?: { upColor: string; downColor: string };
   locale?: string;
   timezone?: string;
-};
+}
+
+interface TradingViewWindow extends Window {
+  TradingView?: {
+    widget: new (
+      config: Record<string, unknown>,
+    ) => {
+      remove?: () => void;
+    };
+  };
+  __tvScriptPromise?: Promise<void>;
+}
+
+interface TradingViewContainer extends HTMLDivElement {
+  __tv_widget__?: {
+    remove?: () => void;
+  } | null;
+}
 
 function TradingViewAdvancedChart({
   ticker,
   mappingUrl,
   interval = "D",
   minHeight = 420,
   theme = "light",
-  colors,
   locale = "en",
   timezone = "UTC",
-}: Props) {
-  const symbolMapRef = useRef<Record<string, string> | null>(
+}: TradingViewAdvancedChartProps) {
+  const symbolMapRef = useRef<Record<string, string>>(
     defaultMap as Record<string, string>,
   );
 
@@ -57,17 +72,17 @@ function TradingViewAdvancedChart({
       if (typeof v === "string" && v.length > 0) return v;
     }
     return t;
-  }, [ticker, mappingUrl]);
+  }, [ticker]);
 
   const containerId = useMemo(
     () => `tv_${tvSymbol.replace(/[^A-Za-z0-9_]/g, "_")}_${interval}`,
     [tvSymbol, interval],
   );
 
-  const containerRef = useRef<HTMLDivElement | null>(null);
+  const containerRef = useRef<TradingViewContainer | null>(null);
 
   const loadTradingView = () => {
-    const w = window as any;
+    const w = window as TradingViewWindow;
     if (w.TradingView) return Promise.resolve();
     if (w.__tvScriptPromise) return w.__tvScriptPromise;
     w.__tvScriptPromise = new Promise<void>((resolve, reject) => {
@@ -85,15 +100,15 @@ function TradingViewAdvancedChart({
     let cancelled = false;
 
     const cleanup = () => {
-      const current = containerRef.current as any;
+      const current = containerRef.current;
       const widget = current?.__tv_widget__;
       if (widget && typeof widget.remove === "function") {
         try {
           widget.remove();
         } catch {}
       }
       if (containerRef.current) {
-        (containerRef.current as any).__tv_widget__ = null;
+        containerRef.current.__tv_widget__ = null;
         containerRef.current.innerHTML = "";
       }
     };
@@ -102,26 +117,9 @@ function TradingViewAdvancedChart({
     if (!tvSymbol) return;
 
     loadTradingView().then(() => {
-      const w = window as any;
+      const w = window as TradingViewWindow;
       if (cancelled || !containerRef.current || !w.TradingView) return;
 
-      const overrides = colors
-        ? {
-            "mainSeriesProperties.candleStyle.upColor": colors.upColor,
-            "mainSeriesProperties.candleStyle.downColor": colors.downColor,
-            "mainSeriesProperties.candleStyle.borderUpColor": colors.upColor,
-            "mainSeriesProperties.candleStyle.borderDownColor":
-              colors.downColor,
-            "mainSeriesProperties.candleStyle.wickUpColor": colors.upColor,
-            "mainSeriesProperties.candleStyle.wickDownColor": colors.downColor,
-            "mainSeriesProperties.candleStyle.drawWick": true,
-            "mainSeriesProperties.candleStyle.drawBorder": true,
-          }
-        : {
-            "mainSeriesProperties.candleStyle.drawWick": true,
-            "mainSeriesProperties.candleStyle.drawBorder": true,
-          };
-
       const widget = new w.TradingView.widget({
         container_id: containerId,
         symbol: tvSymbol,
@@ -135,18 +133,17 @@ function TradingViewAdvancedChart({
         hide_bottom_toolbar: false,
         allow_symbol_change: false,
         details: true,
-        overrides,
       });
 
-      const current = containerRef.current as any;
+      const current = containerRef.current;
       if (current) current.__tv_widget__ = widget;
     });
 
     return () => {
       cancelled = true;
       cleanup();
     };
-  }, [tvSymbol, interval, theme, colors, locale, timezone]);
+  }, [tvSymbol, interval, theme, locale, timezone, containerId]);
 
   return (
     <div className="w-full" style={{ height: minHeight }}>

…e/components/tradingview-ticker-tape.tsx …/tradingview/tradingview-ticker-tape.tsxfrontend/src/app/home/components/tradingview-ticker-tape.tsx renamed to frontend/src/components/tradingview/tradingview-ticker-tape.tsx frontend/src/app/home/components/tradingview-ticker-tape.tsx renamed to frontend/src/components/tradingview/tradingview-ticker-tape.tsx

@@ -1,16 +1,16 @@
-import { useEffect, useMemo, useRef } from "react";
+import { memo, useEffect, useMemo, useRef } from "react";
 
-type Props = {
-  symbols: readonly string[];
+interface TradingViewTickerTapeProps {
+  symbols: string[];
   theme?: "light" | "dark";
   locale?: string;
-};
+}
 
 function TradingViewTickerTape({
   symbols,
   theme = "light",
   locale = "en",
-}: Props) {
+}: TradingViewTickerTapeProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const scriptRef = useRef<HTMLScriptElement | null>(null);
 
@@ -68,4 +68,4 @@ function TradingViewTickerTape({
   );
 }
 
-export default TradingViewTickerTape;
+export default memo(TradingViewTickerTape);