59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef, memo } from 'react';
|
|
import { useTheme } from "next-themes";
|
|
|
|
interface TradingViewWatchlistProps {
|
|
symbols: string[];
|
|
}
|
|
|
|
function TradingViewWatchlist({ symbols }: TradingViewWatchlistProps) {
|
|
const container = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!container.current) return;
|
|
|
|
// Clear previous widget if any (though React key usually handles this, safety check)
|
|
container.current.innerHTML = "";
|
|
|
|
const script = document.createElement("script");
|
|
script.src = "https://s3.tradingview.com/external-embedding/embed-widget-market-quotes.js";
|
|
script.type = "text/javascript";
|
|
script.async = true;
|
|
|
|
// Map user symbols to TradingView format
|
|
// TradingView is smart enough to handle "AAPL", "GOOG" usually, but "NASDAQ:AAPL" is safer.
|
|
// 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,
|
|
displayName: s
|
|
}));
|
|
|
|
script.innerHTML = JSON.stringify({
|
|
"width": "100%",
|
|
"height": 550,
|
|
"symbolsGroups": [
|
|
{
|
|
"name": "My Watchlist",
|
|
"symbols": symbolList
|
|
}
|
|
],
|
|
"showSymbolLogo": true,
|
|
"isTransparent": true,
|
|
"colorTheme": "dark", // We can make this dynamic if needed
|
|
"locale": "en"
|
|
});
|
|
|
|
container.current.appendChild(script);
|
|
}, [symbols]);
|
|
|
|
return (
|
|
<div className="tradingview-widget-container border border-white/10 rounded-xl overflow-hidden shadow-2xl bg-black/40 backdrop-blur-md" ref={container}>
|
|
<div className="tradingview-widget-container__widget"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(TradingViewWatchlist);
|