From c09e3cf921d71b1dc9a8f412462df31f223006e2 Mon Sep 17 00:00:00 2001
From: keshav-005 <keshavchaudhary0005@gmail.com>
Date: Wed, 22 Apr 2026 19:48:11 +0530
Subject: [PATCH 1/2] Preserve chart indicators when expanding

---
 components/TradingViewWidget.tsx | 11 ++++++-----
 hooks/useTradingViewWidget.tsx   | 27 +++++++++++----------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/components/TradingViewWidget.tsx b/components/TradingViewWidget.tsx
index 51aabb4..6225cd5 100644
--- a/components/TradingViewWidget.tsx
+++ b/components/TradingViewWidget.tsx
@@ -32,12 +32,11 @@ const TradingViewWidget = ({ title, scriptUrl, config, height = 600, className,
 
     const widgetConfig = {
         ...config,
-        height: currentHeight,
         width: "100%",
         autosize: true,
     };
 
-    const containerRef = useTradingViewWidget(scriptUrl, widgetConfig, currentHeight);
+    const containerRef = useTradingViewWidget(scriptUrl, widgetConfig);
 
     const toggleExpand = () => {
         setIsExpanded(!isExpanded);
@@ -63,9 +62,11 @@ const TradingViewWidget = ({ title, scriptUrl, config, height = 600, className,
                     </Button>
                 )}
 
-                <div className={cn('tradingview-widget-container', className, isExpanded && "h-full")} ref={containerRef}>
-                    <div className="tradingview-widget-container__widget" style={{ height: currentHeight, width: "100%" }} />
-                </div>
+                <div
+                    className={cn('tradingview-widget-container', className, isExpanded && "h-full")}
+                    ref={containerRef}
+                    style={{ height: currentHeight, width: "100%" }}
+                />
             </div>
         </div>
     );
diff --git a/hooks/useTradingViewWidget.tsx b/hooks/useTradingViewWidget.tsx
index 2bfe03d..f8875e0 100644
--- a/hooks/useTradingViewWidget.tsx
+++ b/hooks/useTradingViewWidget.tsx
@@ -1,36 +1,31 @@
 'use client';
 import { useEffect, useRef } from "react";
 
-const useTradingViewWidget = (scriptUrl: string, config: Record<string, unknown>, height: number | string = 600) => {
+const useTradingViewWidget = (scriptUrl: string, config: Record<string, unknown>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
+    const serializedConfig = JSON.stringify(config);
 
     useEffect(() => {
-        if (!containerRef.current) return;
+        const container = containerRef.current;
+        if (!container) return;
 
         // Clean up previous instance
-        containerRef.current.innerHTML = '';
+        container.innerHTML = '';
 
-        // Create wrapper with dynamic height support
-        // If autosize is true in config, we want 100% height/width
-        const isAutosize = config.autosize === true;
-        const styleHeight = isAutosize ? '100%' : `${height}px`;
-
-        containerRef.current.innerHTML = `<div class="tradingview-widget-container__widget" style="width: 100%; height: ${styleHeight};"></div>`;
+        container.innerHTML = '<div class="tradingview-widget-container__widget" style="width: 100%; height: 100%;"></div>';
 
         const script = document.createElement("script");
         script.src = scriptUrl;
         script.async = true;
-        script.innerHTML = JSON.stringify(config);
+        script.innerHTML = serializedConfig;
 
-        containerRef.current.appendChild(script);
+        container.appendChild(script);
 
         return () => {
-            if (containerRef.current) {
-                containerRef.current.innerHTML = '';
-            }
+            container.innerHTML = '';
         }
-    }, [scriptUrl, JSON.stringify(config), height]) // Use stringified config to avoid ref issues
+    }, [scriptUrl, serializedConfig])
 
     return containerRef;
 }
-export default useTradingViewWidget
\ No newline at end of file
+export default useTradingViewWidget

From daa6f1b423ad6c4ac681967958f6aeabc8f5fc7d Mon Sep 17 00:00:00 2001
From: keshav-005 <keshavchaudhary0005@gmail.com>
Date: Wed, 22 Apr 2026 19:56:59 +0530
Subject: [PATCH 2/2] Avoid zero-height fullscreen chart init

---
 components/TradingViewWidget.tsx | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/components/TradingViewWidget.tsx b/components/TradingViewWidget.tsx
index 6225cd5..95a0cda 100644
--- a/components/TradingViewWidget.tsx
+++ b/components/TradingViewWidget.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { memo, useState, useEffect } from 'react';
+import React, { memo, useState } from 'react';
 import useTradingViewWidget from "@/hooks/useTradingViewWidget";
 import { cn } from "@/lib/utils";
 import { Maximize2, Minimize2 } from 'lucide-react';
@@ -17,18 +17,6 @@ interface TradingViewWidgetProps {
 
 const TradingViewWidget = ({ title, scriptUrl, config, height = 600, className, allowExpand = false }: TradingViewWidgetProps) => {
     const [isExpanded, setIsExpanded] = useState(false);
-    const [windowHeight, setWindowHeight] = useState(0);
-
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            setWindowHeight(window.innerHeight);
-            const handleResize = () => setWindowHeight(window.innerHeight);
-            window.addEventListener('resize', handleResize);
-            return () => window.removeEventListener('resize', handleResize);
-        }
-    }, []);
-
-    const currentHeight = isExpanded ? windowHeight : height;
 
     const widgetConfig = {
         ...config,
@@ -65,7 +53,7 @@ const TradingViewWidget = ({ title, scriptUrl, config, height = 600, className,
                 <div
                     className={cn('tradingview-widget-container', className, isExpanded && "h-full")}
                     ref={containerRef}
-                    style={{ height: currentHeight, width: "100%" }}
+                    style={{ height: isExpanded ? '100vh' : height, width: "100%" }}
                 />
             </div>
         </div>