fix: Crash intermittently when creating lightweight charts (#12480)

Crash in canvas library intermittently

`throw new Error('No window is associated with the canvas');`


<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on enhancing the safety checks in various
`useEffect` hooks across multiple components by ensuring that
`chartRef.current?.ownerDocument?.defaultView` is defined before
proceeding with chart creation.

### Detailed summary
- Updated `useEffect` in `PairPriceChart.tsx` to check for
`chartRef.current?.ownerDocument?.defaultView`.
- Similar updates made in `ChainlinkChart.tsx`, `BarChart/index.tsx`,
`CandleChart/index.tsx`, `LineChart/index.tsx`, and other chart-related
components.
- Added checks for `chartRef.current?.ownerDocument?.defaultView` in
`DropdownMenu.tsx` and `V3Info` charts to ensure proper chart
initialization.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

Author: memoyil

apps/web/src/views/Info/components/InfoCharts/BarChart/index.tsx

@@ -36,7 +36,7 @@ const Chart = ({ data, setHoverValue, setHoverDate }: LineChartProps) => {
   }, [data])
 
   useEffect(() => {
-    if (!chartRef?.current || !transformedData || transformedData.length === 0) return
+    if (!chartRef.current?.ownerDocument?.defaultView || !transformedData || transformedData.length === 0) return
 
     const chart = createChart(chartRef?.current, {
       layout: {

apps/web/src/views/Info/components/InfoCharts/CandleChart/index.tsx

@@ -24,7 +24,7 @@ const CandleChart = ({ data, setValue, setLabel }: LineChartProps) => {
 
   // if chart not instantiated in canvas, create it
   useEffect(() => {
-    if (!chartRef.current || !data) return
+    if (!chartRef.current?.ownerDocument?.defaultView || !data) return
     const chart = createChart(chartRef.current, {
       autoSize: true,
       // height: CANDLE_CHART_HEIGHT,

apps/web/src/views/Info/components/InfoCharts/LineChart/index.tsx

@@ -39,7 +39,7 @@ const LineChart = ({ data, setHoverValue, setHoverDate, dateFormat = 'h:mm a' }:
   }, [data])
 
   useEffect(() => {
-    if (!chartRef?.current || !transformedData || transformedData.length === 0) return
+    if (!chartRef.current?.ownerDocument?.defaultView || !transformedData || transformedData.length === 0) return
 
     const chart = createChart(chartRef?.current, {
       layout: {

apps/web/src/views/Predictions/components/ChainlinkChart.tsx

@@ -237,7 +237,7 @@ const Chart = ({
   const [chartCreated, setChart] = useState<IChartApi | undefined>()
 
   useEffect(() => {
-    if (!chartRef?.current) return
+    if (!chartRef.current?.ownerDocument?.defaultView) return
 
     const chart = createChart(chartRef?.current, {
       layout: {

apps/web/src/views/V3Info/components/BarChart/index.tsx

@@ -89,7 +89,7 @@ const BarChart = ({
 
   // if chart not instantiated in canvas, create it
   useEffect(() => {
-    if (!chartCreated && data && !!chartRef?.current?.parentElement) {
+    if (!chartCreated && data && !!chartRef?.current?.parentElement && !!chartRef.current?.ownerDocument?.defaultView) {
       const chart = createChart(chartRef.current, {
         height,
         width: chartRef.current.parentElement.clientWidth - 62,

apps/web/src/views/V3Info/components/CandleChart/index.tsx

@@ -81,7 +81,13 @@ const CandleChart = ({
 
   // if chart not instantiated in canvas, create it
   useEffect(() => {
-    if (!chartCreated && data && data?.length > 0 && !!chartRef?.current?.parentElement) {
+    if (
+      !chartCreated &&
+      data &&
+      data?.length > 0 &&
+      !!chartRef?.current?.parentElement &&
+      !!chartRef.current?.ownerDocument?.defaultView
+    ) {
       const chart = createChart(chartRef.current, {
         height,
         width: chartRef.current.parentElement.clientWidth - 32,

apps/web/src/views/V3Info/components/LineChart/index.tsx

@@ -87,7 +87,7 @@ const LineChart = ({
 
   // if chart not instantiated in canvas, create it
   useEffect(() => {
-    if (!chartCreated && data && !!chartRef?.current?.parentElement) {
+    if (!chartCreated && data && !!chartRef?.current?.parentElement && !!chartRef.current?.ownerDocument?.defaultView) {
       const chart = createChart(chartRef.current, {
         height,
         width: chartRef.current.parentElement.clientWidth - 32,

packages/uikit/src/components/Chart/PairPriceChart.tsx

@@ -171,7 +171,7 @@ export const PairPriceChart: React.FC<PairPriceChartNewProps> = ({
   }, [setHoverValue, setHoverDate, legendRef]);
 
   useEffect(() => {
-    if (!chartRef?.current) return;
+    if (!chartRef.current?.ownerDocument?.defaultView) return;
 
     const chart = createChart(chartRef?.current, {
       layout: {

packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx

@@ -229,7 +229,7 @@ const DropdownMenu: React.FC<React.PropsWithChildren<DropdownMenuProps>> = ({
       });
       hideDropdownMenu.cancel();
     };
-  }, [setIsOpen, tooltipRef, targetRef, isBottomNav, hasItems]);
+  }, [setIsOpen, tooltipRef, targetRef, isBottomNav, hasItems, trigger]);
 
   useEffect(() => {
     if (setMenuOpenByIndex && index !== undefined) {