Fix TradingView chart embedding
This commit is contained in:
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user