root
458 lines
16 KiB
TypeScript
458 lines
16 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export function TradingTools() {
|
|
const [activeTool, setActiveTool] = useState<'calculator' | 'alerts' | 'notes' | 'charts' | 'sentiment'>('charts')
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Tool Navigation */}
|
|
<div className="flex gap-2 flex-wrap">
|
|
{[
|
|
{ id: 'charts', label: '📈 Charts', count: 0 },
|
|
{ id: 'sentiment', label: '😱 Sentiment', count: 0 },
|
|
{ id: 'calculator', label: '🧮 Calculator', count: 0 },
|
|
{ id: 'alerts', label: '🔔 Alerts', count: 0 },
|
|
{ id: 'notes', label: '📝 Notes', count: 0 },
|
|
].map(tool => (
|
|
<button
|
|
key={tool.id}
|
|
onClick={() => setActiveTool(tool.id as any)}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition ${
|
|
activeTool === tool.id
|
|
? 'bg-brand-pink text-white'
|
|
: 'bg-white/10 text-white/70 hover:bg-white/20'
|
|
}`}
|
|
>
|
|
{tool.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* TradingView Charts */}
|
|
{activeTool === 'charts' && <TradingViewChart />}
|
|
|
|
{/* Market Sentiment */}
|
|
{activeTool === 'sentiment' && <MarketSentiment />}
|
|
|
|
{/* Position Calculator */}
|
|
{activeTool === 'calculator' && <PositionCalculator />}
|
|
|
|
{/* Trade Alerts */}
|
|
{activeTool === 'alerts' && <TradeAlerts />}
|
|
|
|
{/* Trade Notes */}
|
|
{activeTool === 'notes' && <TradeNotes />}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TradingViewChart() {
|
|
const [symbol, setSymbol] = useState('BTCUSD')
|
|
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 = [
|
|
{ id: 'BTCUSD', label: 'BTC/USD' },
|
|
{ id: 'ETHUSD', label: 'ETH/USD' },
|
|
{ id: 'SOLUSD', label: 'SOL/USD' },
|
|
{ id: 'EURUSD', label: 'EUR/USD' },
|
|
]
|
|
|
|
const timeframes = [
|
|
{ id: '15', label: '15m' },
|
|
{ id: '60', label: '1H' },
|
|
{ id: '240', label: '4H' },
|
|
{ id: 'D', label: '1D' },
|
|
{ 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 (
|
|
<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">
|
|
<h3 className="text-lg font-bold">📈 TradingView Charts</h3>
|
|
<div className="flex gap-2">
|
|
<select
|
|
value={symbol}
|
|
onChange={e => setSymbol(e.target.value)}
|
|
className="bg-white/10 border border-white/20 rounded-lg px-3 py-1.5 text-white text-sm"
|
|
>
|
|
{symbols.map(s => (
|
|
<option key={s.id} value={s.id}>{s.label}</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={timeframe}
|
|
onChange={e => setTimeframe(e.target.value)}
|
|
className="bg-white/10 border border-white/20 rounded-lg px-3 py-1.5 text-white text-sm"
|
|
>
|
|
{timeframes.map(t => (
|
|
<option key={t.id} value={t.id}>{t.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* TradingView Widget */}
|
|
<div className="w-full h-[500px] rounded-lg overflow-hidden border border-white/10 bg-black">
|
|
<iframe
|
|
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>
|
|
)
|
|
}
|
|
|
|
function MarketSentiment() {
|
|
const [fearGreed, setFearGreed] = useState<{ value: number; classification: string } | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetch('https://api.alternative.me/fng/')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.data?.[0]) {
|
|
setFearGreed({
|
|
value: parseInt(data.data[0].value),
|
|
classification: data.data[0].value_classification
|
|
})
|
|
}
|
|
setLoading(false)
|
|
})
|
|
.catch(() => setLoading(false))
|
|
}, [])
|
|
|
|
const getColor = (val: number) => {
|
|
if (val <= 25) return 'text-red-500 bg-red-500/10 border-red-500/30'
|
|
if (val <= 45) return 'text-orange-500 bg-orange-500/10 border-orange-500/30'
|
|
if (val <= 55) return 'text-yellow-500 bg-yellow-500/10 border-yellow-500/30'
|
|
if (val <= 75) return 'text-blue-500 bg-blue-500/10 border-blue-500/30'
|
|
return 'text-green-500 bg-green-500/10 border-green-500/30'
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Fear & Greed Index */}
|
|
<div className="border border-white/20 rounded-lg p-4 bg-white/5">
|
|
<h3 className="text-lg font-bold mb-4">😱 Fear & Greed Index</h3>
|
|
|
|
{loading ? (
|
|
<p className="text-white/50">Loading...</p>
|
|
) : fearGreed ? (
|
|
<div className={`p-6 rounded-lg border ${getColor(fearGreed.value)} text-center`}>
|
|
<p className="text-5xl font-bold mb-2">{fearGreed.value}</p>
|
|
<p className="text-xl font-medium">{fearGreed.classification}</p>
|
|
</div>
|
|
) : (
|
|
<p className="text-white/50">Unable to fetch data</p>
|
|
)}
|
|
|
|
<div className="mt-4 grid grid-cols-5 gap-1 text-xs">
|
|
{['0', '25', '50', '75', '100'].map((v, i) => (
|
|
<div key={v} className={`text-center py-1 rounded ${getColor(parseInt(v)).split(' ')[0]}`}>
|
|
{v}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Long/Short Ratio */}
|
|
<div className="border border-white/20 rounded-lg p-4 bg-white/5">
|
|
<h3 className="text-lg font-bold mb-4">📊 Long/Short Ratio</h3>
|
|
<LongShortRatio />
|
|
</div>
|
|
|
|
{/* Funding Rates */}
|
|
<div className="border border-white/20 rounded-lg p-4 bg-white/5">
|
|
<h3 className="text-lg font-bold mb-4">💰 Funding Rates</h3>
|
|
<FundingRates />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LongShortRatio() {
|
|
const [data, setData] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
// Using Binance API for futures data
|
|
Promise.all([
|
|
fetch('https://api.binance.com/api/v3/ticker/24hr?symbol=BTCUSDT'),
|
|
fetch('https://api.binance.com/api/v3/ticker/24hr?symbol=ETHUSDT'),
|
|
fetch('https://api.binance.com/api/v3/ticker/24hr?symbol=SOLUSDT'),
|
|
])
|
|
.then(res => Promise.all(res.map(r => r.json())))
|
|
.then(results => {
|
|
setData(results.map(r => ({
|
|
symbol: r.symbol,
|
|
price: parseFloat(r.lastPrice),
|
|
change: parseFloat(r.priceChangePercent),
|
|
longShort: parseFloat(r.count) > 0 ? '50' : '50' // Simplified - real data needs futures API
|
|
})))
|
|
setLoading(false)
|
|
})
|
|
.catch(() => setLoading(false))
|
|
}, [])
|
|
|
|
if (loading) return <p className="text-white/50">Loading...</p>
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{data.map(item => (
|
|
<div key={item.symbol} className="flex justify-between items-center p-2 bg-white/5 rounded">
|
|
<span className="font-medium">{item.symbol.replace('USDT', '/USD')}</span>
|
|
<div className="text-right">
|
|
<span className="text-lg font-bold">${item.price.toLocaleString()}</span>
|
|
<span className={`ml-2 text-sm ${item.change >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
|
{item.change >= 0 ? '↑' : '↓'} {Math.abs(item.change).toFixed(2)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function FundingRates() {
|
|
const [rates, setRates] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
// Funding rates from Binance
|
|
Promise.all([
|
|
fetch('https://api.binance.com/api/v3/premiumIndex?symbol=BTCUSDT'),
|
|
fetch('https://api.binance.com/api/v3/premiumIndex?symbol=ETHUSDT'),
|
|
fetch('https://api.binance.com/api/v3/premiumIndex?symbol=SOLUSDT'),
|
|
])
|
|
.then(res => Promise.all(res.map(r => r.json())))
|
|
.then(results => {
|
|
setRates(results.map(r => ({
|
|
symbol: r.symbol,
|
|
fundingRate: parseFloat(r.lastFundingRate) * 100,
|
|
nextFunding: new Date(r.nextFundingTime).toLocaleTimeString()
|
|
})))
|
|
setLoading(false)
|
|
})
|
|
.catch(() => setLoading(false))
|
|
}, [])
|
|
|
|
if (loading) return <p className="text-white/50">Loading...</p>
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{rates.map(rate => (
|
|
<div key={rate.symbol} className="flex justify-between items-center p-2 bg-white/5 rounded">
|
|
<span className="font-medium">{rate.symbol.replace('USDT', '/USD')}</span>
|
|
<div className="text-right">
|
|
<span className={`text-lg font-bold ${rate.fundingRate >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
|
{rate.fundingRate >= 0 ? '+' : ''}{rate.fundingRate.toFixed(4)}%
|
|
</span>
|
|
<p className="text-xs text-white/50">Next: {rate.nextFunding}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function PositionCalculator() {
|
|
const [form, setForm] = useState({
|
|
accountSize: '10000',
|
|
riskPercent: '2',
|
|
stopLossPercent: '1',
|
|
leverage: '1',
|
|
entryPrice: '',
|
|
direction: 'long' as 'long' | 'short',
|
|
})
|
|
|
|
const calculate = () => {
|
|
const account = parseFloat(form.accountSize) || 0
|
|
const riskPct = parseFloat(form.riskPercent) || 0
|
|
const slPct = parseFloat(form.stopLossPercent) || 0
|
|
const lev = parseFloat(form.leverage) || 1
|
|
|
|
const riskAmount = account * (riskPct / 100)
|
|
const positionSize = lev * (riskAmount / (slPct / 100))
|
|
const margin = positionSize / lev
|
|
const potentialProfit = positionSize * (slPct / 100) * 2
|
|
|
|
return { riskAmount, positionSize, margin, potentialProfit }
|
|
}
|
|
|
|
const result = calculate()
|
|
|
|
return (
|
|
<div className="border border-white/20 rounded-lg p-4 bg-white/5">
|
|
<h3 className="text-lg font-bold mb-4">🧮 Position Size Calculator</h3>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm text-white/70 mb-1">Account Size ($)</label>
|
|
<input
|
|
type="number"
|
|
value={form.accountSize}
|
|
onChange={e => setForm({...form, accountSize: e.target.value})}
|
|
className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm text-white/70 mb-1">Risk Per Trade (%)</label>
|
|
<input
|
|
type="number"
|
|
value={form.riskPercent}
|
|
onChange={e => setForm({...form, riskPercent: e.target.value})}
|
|
className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm text-white/70 mb-1">Stop Loss (%)</label>
|
|
<input
|
|
type="number"
|
|
value={form.stopLossPercent}
|
|
onChange={e => setForm({...form, stopLossPercent: e.target.value})}
|
|
className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm text-white/70 mb-1">Leverage</label>
|
|
<input
|
|
type="number"
|
|
value={form.leverage}
|
|
onChange={e => setForm({...form, leverage: e.target.value})}
|
|
className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<div className="p-3 bg-white/5 rounded-lg text-center">
|
|
<p className="text-xs text-white/50">Max Risk</p>
|
|
<p className="text-xl font-bold text-red-400">${result.riskAmount.toFixed(2)}</p>
|
|
</div>
|
|
<div className="p-3 bg-white/5 rounded-lg text-center">
|
|
<p className="text-xs text-white/50">Position Size</p>
|
|
<p className="text-xl font-bold text-white">${result.positionSize.toFixed(2)}</p>
|
|
</div>
|
|
<div className="p-3 bg-white/5 rounded-lg text-center">
|
|
<p className="text-xs text-white/50">Required Margin</p>
|
|
<p className="text-xl font-bold text-blue-400">${result.margin.toFixed(2)}</p>
|
|
</div>
|
|
<div className="p-3 bg-white/5 rounded-lg text-center">
|
|
<p className="text-xs text-white/50">Potential Profit</p>
|
|
<p className="text-xl font-bold text-green-400">+${result.potentialProfit.toFixed(2)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TradeAlerts() {
|
|
const [alerts, setAlerts] = useState([
|
|
{ id: '1', pair: 'BTC/USD', type: 'SL Hit', price: 66500, time: '2h ago', triggered: true },
|
|
{ id: '2', pair: 'ETH/USD', type: 'TP Hit', price: 3200, time: '5h ago', triggered: true },
|
|
])
|
|
|
|
return (
|
|
<div className="border border-white/20 rounded-lg p-4 bg-white/5">
|
|
<h3 className="text-lg font-bold mb-4">🔔 Trade Alerts</h3>
|
|
|
|
{alerts.length === 0 ? (
|
|
<p className="text-white/50 text-center py-8">No alerts yet</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{alerts.map(alert => (
|
|
<div
|
|
key={alert.id}
|
|
className={`p-3 rounded-lg border flex justify-between items-center ${
|
|
alert.triggered ? 'bg-green-500/10 border-green-500/30' : 'bg-yellow-500/10 border-yellow-500/30'
|
|
}`}
|
|
>
|
|
<div>
|
|
<span className="font-medium">{alert.pair}</span>
|
|
<span className={`ml-2 text-xs px-2 py-0.5 rounded ${
|
|
alert.triggered ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
|
|
}`}>
|
|
{alert.type}
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-medium">${alert.price.toLocaleString()}</p>
|
|
<p className="text-xs text-white/50">{alert.time}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TradeNotes() {
|
|
const [notes, setNotes] = useState<{id: string, date: string, content: string}[]>([])
|
|
const [newNote, setNewNote] = useState('')
|
|
|
|
const addNote = () => {
|
|
if (!newNote.trim()) return
|
|
setNotes([{ id: Date.now().toString(), date: new Date().toISOString(), content: newNote }, ...notes])
|
|
setNewNote('')
|
|
}
|
|
|
|
return (
|
|
<div className="border border-white/20 rounded-lg p-4 bg-white/5">
|
|
<h3 className="text-lg font-bold mb-4">📝 Trade Notes</h3>
|
|
|
|
<div className="mb-4">
|
|
<textarea
|
|
value={newNote}
|
|
onChange={e => setNewNote(e.target.value)}
|
|
placeholder="Write a note about your trade..."
|
|
className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/50 h-24 resize-none"
|
|
/>
|
|
<button
|
|
onClick={addNote}
|
|
className="mt-2 px-4 py-2 bg-brand-pink rounded-lg text-white font-medium hover:bg-brand-pink/80"
|
|
>
|
|
Add Note
|
|
</button>
|
|
</div>
|
|
|
|
{notes.length === 0 ? (
|
|
<p className="text-white/50 text-center py-8">No notes yet</p>
|
|
) : (
|
|
<div className="space-y-2 max-h-[400px] overflow-y-auto">
|
|
{notes.map(note => (
|
|
<div key={note.id} className="p-3 bg-white/5 rounded-lg border border-white/10">
|
|
<p className="text-sm text-white/80">{note.content}</p>
|
|
<p className="text-xs text-white/50 mt-2">
|
|
{new Date(note.date).toLocaleDateString()} • {new Date(note.date).toLocaleTimeString()}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|