From 294d0b98e9ce00d5f2f63a64ad2127e4e96362a6 Mon Sep 17 00:00:00 2001
From: wenliang <wenliang@wenliangs-MacBook-Pro.local>
Date: Thu, 12 Feb 2026 12:37:02 +0800
Subject: [PATCH] Fix: Add symbol format conversion for A-Share/HK stocks in
 TradingView widgets

---
 app/(root)/stocks/[symbol]/page.tsx           | 14 ++++++-----
 components/watchlist/TradingViewWatchlist.tsx |  3 ++-
 lib/utils.ts                                  | 24 ++++++++++++++++++-
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/app/(root)/stocks/[symbol]/page.tsx b/app/(root)/stocks/[symbol]/page.tsx
index de8d835..11874fd 100644
--- a/app/(root)/stocks/[symbol]/page.tsx
+++ b/app/(root)/stocks/[symbol]/page.tsx
@@ -12,9 +12,11 @@ import {
 import { auth } from '@/lib/better-auth/auth';
 import { headers } from 'next/headers';
 import { isStockInWatchlist } from '@/lib/actions/watchlist.actions';
+import { formatSymbolForTradingView } from '@/lib/utils';
 
 export default async function StockDetails({ params }: StockDetailsPageProps) {
     const { symbol } = await params;
+    const tvSymbol = formatSymbolForTradingView(symbol);
     const scriptUrl = `https://s3.tradingview.com/external-embedding/embed-widget-`;
 
     const session = await auth.api.getSession({
@@ -30,13 +32,13 @@ export default async function StockDetails({ params }: StockDetailsPageProps) {
                 <div className="flex flex-col gap-6">
                     <TradingViewWidget
                         scriptUrl={`${scriptUrl}symbol-info.js`}
-                        config={SYMBOL_INFO_WIDGET_CONFIG(symbol)}
+                        config={SYMBOL_INFO_WIDGET_CONFIG(tvSymbol)}
                         height={170}
                     />
 
                     <TradingViewWidget
                         scriptUrl={`${scriptUrl}advanced-chart.js`}
-                        config={CANDLE_CHART_WIDGET_CONFIG(symbol)}
+                        config={CANDLE_CHART_WIDGET_CONFIG(tvSymbol)}
                         className="custom-chart"
                         height={600}
                         allowExpand={true}
@@ -44,7 +46,7 @@ export default async function StockDetails({ params }: StockDetailsPageProps) {
 
                     <TradingViewWidget
                         scriptUrl={`${scriptUrl}advanced-chart.js`}
-                        config={BASELINE_WIDGET_CONFIG(symbol)}
+                        config={BASELINE_WIDGET_CONFIG(tvSymbol)}
                         className="custom-chart"
                         height={600}
                         allowExpand={true}
@@ -64,19 +66,19 @@ export default async function StockDetails({ params }: StockDetailsPageProps) {
 
                     <TradingViewWidget
                         scriptUrl={`${scriptUrl}technical-analysis.js`}
-                        config={TECHNICAL_ANALYSIS_WIDGET_CONFIG(symbol)}
+                        config={TECHNICAL_ANALYSIS_WIDGET_CONFIG(tvSymbol)}
                         height={400}
                     />
 
                     <TradingViewWidget
                         scriptUrl={`${scriptUrl}company-profile.js`}
-                        config={COMPANY_PROFILE_WIDGET_CONFIG(symbol)}
+                        config={COMPANY_PROFILE_WIDGET_CONFIG(tvSymbol)}
                         height={440}
                     />
 
                     <TradingViewWidget
                         scriptUrl={`${scriptUrl}financials.js`}
-                        config={COMPANY_FINANCIALS_WIDGET_CONFIG(symbol)}
+                        config={COMPANY_FINANCIALS_WIDGET_CONFIG(tvSymbol)}
                         height={800}
                     />
                 </div>
diff --git a/components/watchlist/TradingViewWatchlist.tsx b/components/watchlist/TradingViewWatchlist.tsx
index 1e25426..2710166 100644
--- a/components/watchlist/TradingViewWatchlist.tsx
+++ b/components/watchlist/TradingViewWatchlist.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useRef, memo } from 'react';
 import { useTheme } from "next-themes";
+import { formatSymbolForTradingView } from '@/lib/utils';
 
 interface TradingViewWatchlistProps {
     symbols: string[];
@@ -26,7 +27,7 @@ function TradingViewWatchlist({ symbols }: TradingViewWatchlistProps) {
         // Since we don't have exchange data easily, we'll try raw symbol. 
         // Ideally we'd prefix "NASDAQ:" or "NYSE:" but let's test without first.
         const symbolList = symbols.map(s => ({
-            name: s,
+            name: formatSymbolForTradingView(s),
             displayName: s
         }));
 
diff --git a/lib/utils.ts b/lib/utils.ts
index 6b0b702..25c2452 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -152,4 +152,26 @@ export const getFormattedTodayDate = () => new Date().toLocaleDateString('en-US'
     month: 'long',
     day: 'numeric',
     timeZone: 'UTC',
-});
\ No newline at end of file
+});
+
+export function formatSymbolForTradingView(symbol: string): string {
+    if (!symbol) return symbol;
+    const upperSymbol = symbol.toUpperCase();
+    
+    // Shanghai
+    if (upperSymbol.endsWith('.SS')) {
+        return `SSE:${upperSymbol.replace('.SS', '')}`;
+    }
+    
+    // Shenzhen
+    if (upperSymbol.endsWith('.SZ')) {
+        return `SZSE:${upperSymbol.replace('.SZ', '')}`;
+    }
+    
+    // Hong Kong
+    if (upperSymbol.endsWith('.HK')) {
+        return `HKEX:${upperSymbol.replace('.HK', '')}`;
+    }
+    
+    return upperSymbol;
+}
\ No newline at end of file