Fix TradingView chart embedding

This commit is contained in:
root
2026-02-23 19:20:46 +00:00
parent 13112a9cee
commit a0a2fc1d40
+27 -5
View File
@@ -52,6 +52,17 @@ function TradingViewChart() {
const [symbol, setSymbol] = useState('BTCUSD') const [symbol, setSymbol] = useState('BTCUSD')
const [timeframe, setTimeframe] = useState('60') const [timeframe, setTimeframe] = useState('60')
// Map our symbol format to TradingView format
const getTvSymbol = (sym: string) => {
const map: Record<string, string> = {
'BTCUSD': 'BINANCE:BTCUSDT',
'ETHUSD': 'BINANCE:ETHUSDT',
'SOLUSD': 'BINANCE:SOLUSDT',
'EURUSD': 'FX:EURUSD',
}
return map[sym] || `BINANCE:${sym}`
}
const symbols = [ const symbols = [
{ id: 'BTCUSD', label: 'BTC/USD' }, { id: 'BTCUSD', label: 'BTC/USD' },
{ id: 'ETHUSD', label: 'ETH/USD' }, { id: 'ETHUSD', label: 'ETH/USD' },
@@ -67,6 +78,8 @@ function TradingViewChart() {
{ id: 'W', label: '1W' }, { id: 'W', label: '1W' },
] ]
const chartUrl = `https://www.tradingview.com/widget/advanced-chart/?symbol=${getTvSymbol(symbol)}&interval=${timeframe}&hideToolbar=false&theme=dark&style=1&locale=en`
return ( return (
<div className="border border-white/20 rounded-lg p-4 bg-white/5"> <div className="border border-white/20 rounded-lg p-4 bg-white/5">
<div className="flex justify-between items-center mb-4 flex-wrap gap-2"> <div className="flex justify-between items-center mb-4 flex-wrap gap-2">
@@ -93,11 +106,20 @@ function TradingViewChart() {
</div> </div>
</div> </div>
<iframe {/* TradingView Widget */}
src={`https://www.tradingview.com/widget/advanced-chart/?symbol=BINANCE:${symbol}&interval=${timeframe}&hideToolbar=false&hideStudies=false&theme=dark&style=1&locale=en`} <div className="w-full h-[500px] rounded-lg overflow-hidden border border-white/10 bg-black">
className="w-full h-[500px] rounded-lg border border-white/10" <iframe
title="TradingView Chart" src={chartUrl}
/> className="w-full h-full"
title="TradingView Chart"
allow="clipboard-write"
sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
/>
</div>
<p className="text-xs text-white/50 mt-2 text-center">
Powered by TradingView {symbols.find(s => s.id === symbol)?.label}
</p>
</div> </div>
) )
} }