-
AI Analysis
-
Get comprehensive market insights powered by AI analysis
+
AI Analysis & Trading
+
Get comprehensive market insights powered by AI analysis and execute trades
-
-
+
+ {/* Left Column - AI Analysis */}
+
+
+
๐ AI Market Analysis
+
+
+
+
+ {/* Right Column - Trading Panel */}
+
+
+
๐ฐ Execute Trade
+
+
+
+ {/* Analysis Summary */}
+ {analysisResult && (
+
+
๐ฏ Analysis Summary
+
+
+ Symbol:
+ {currentSymbol}
+
+
+ Sentiment:
+
+ {analysisResult.sentiment}
+
+
+ {analysisResult.entryPrice && (
+
+ Entry Price:
+ ${analysisResult.entryPrice}
+
+ )}
+ {analysisResult.stopLoss && (
+
+ Stop Loss:
+ ${analysisResult.stopLoss}
+
+ )}
+ {analysisResult.takeProfit && (
+
+ Take Profit:
+ ${analysisResult.takeProfit}
+
+ )}
+
+
+ )}
+
)
diff --git a/app/chart-test/page.tsx b/app/chart-test/page.tsx
deleted file mode 100644
index dbb1798..0000000
--- a/app/chart-test/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-'use client'
-import React from 'react'
-import TradingChart from '../../components/TradingChart'
-
-export default function SimpleChartTest() {
- return (
-
- )
-}
diff --git a/app/chart-trading-demo/page.tsx b/app/chart-trading-demo/page.tsx
new file mode 100644
index 0000000..3e46069
--- /dev/null
+++ b/app/chart-trading-demo/page.tsx
@@ -0,0 +1,595 @@
+'use client'
+import React, { useState, useRef, useEffect } from 'react'
+import SimpleChart from '../../components/SimpleChart'
+
+interface Position {
+ id: string
+ symbol: string
+ side: 'BUY' | 'SELL'
+ amount: number
+ entryPrice: number
+ stopLoss: number
+ takeProfit: number
+ currentPrice: number
+ unrealizedPnl: number
+ leverage: number
+}
+
+export default function ChartTradingDemo() {
+ const [selectedSymbol, setSelectedSymbol] = useState('SOL')
+ const [leverage, setLeverage] = useState(1)
+ const [payingAmount, setPayingAmount] = useState('')
+ const [payingToken, setPayingToken] = useState('USDC')
+ const [receivingAmount, setReceivingAmount] = useState('')
+ const [stopLoss, setStopLoss] = useState('')
+ const [takeProfit, setTakeProfit] = useState('')
+ const [isSymbolDropdownOpen, setIsSymbolDropdownOpen] = useState(false)
+ const [isPayingTokenDropdownOpen, setIsPayingTokenDropdownOpen] = useState(false)
+ const dropdownRef = useRef
(null)
+ const payingTokenDropdownRef = useRef(null)
+ const [positions, setPositions] = useState([
+ // Mock position data for demo
+ {
+ id: 'demo_pos_1',
+ symbol: 'SOL/USDC',
+ side: 'BUY' as 'BUY' | 'SELL',
+ amount: 0.5,
+ entryPrice: 165.50,
+ stopLoss: 160.00,
+ takeProfit: 170.00,
+ currentPrice: 166.21,
+ unrealizedPnl: 0.355,
+ leverage: 2,
+ }
+ ])
+
+ const symbols = [
+ { symbol: 'SOL', name: 'Solana', price: 166.21, change: 2.45, icon: '๐ฃ' },
+ { symbol: 'BTC', name: 'Bitcoin', price: 42150.00, change: -1.23, icon: '๐ ' },
+ { symbol: 'ETH', name: 'Ethereum', price: 2580.50, change: 3.12, icon: 'โฌ' },
+ { symbol: 'BONK', name: 'Bonk', price: 0.00003456, change: 15.67, icon: '๐' },
+ { symbol: 'JUP', name: 'Jupiter', price: 0.8234, change: 5.43, icon: '๐ช' },
+ { symbol: 'WIF', name: 'dogwifhat', price: 3.42, change: -8.21, icon: '๐งข' },
+ ]
+
+ const payingTokens = [
+ { symbol: 'USDC', name: 'USD Coin', balance: 1234.56, icon: '๐ต' },
+ { symbol: 'USDT', name: 'Tether', balance: 892.34, icon: '๐ฐ' },
+ { symbol: 'SOL', name: 'Solana', balance: 5.42, icon: '๐ฃ' },
+ { symbol: 'BTC', name: 'Bitcoin', balance: 0.025, icon: '๐ ' },
+ { symbol: 'ETH', name: 'Ethereum', balance: 1.85, icon: 'โฌ' },
+ ]
+
+ // Close dropdown when clicking outside
+ useEffect(() => {
+ function handleClickOutside(event: MouseEvent) {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+ setIsSymbolDropdownOpen(false)
+ }
+ if (payingTokenDropdownRef.current && !payingTokenDropdownRef.current.contains(event.target as Node)) {
+ setIsPayingTokenDropdownOpen(false)
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside)
+ }
+ }, [])
+
+ const getCurrentSymbolData = () => {
+ return symbols.find(s => s.symbol === selectedSymbol) || symbols[0]
+ }
+
+ const getCurrentPayingTokenData = () => {
+ return payingTokens.find(t => t.symbol === payingToken) || payingTokens[0]
+ }
+
+ // Calculate receiving amount based on paying amount
+ useEffect(() => {
+ if (payingAmount && payingToken === 'USDC') {
+ const symbolPrice = getCurrentSymbolData().price
+ const receiving = parseFloat(payingAmount) / symbolPrice
+ setReceivingAmount(receiving.toFixed(6))
+ } else if (payingAmount && payingToken === selectedSymbol) {
+ setReceivingAmount(payingAmount)
+ } else {
+ setReceivingAmount('')
+ }
+ }, [payingAmount, payingToken, selectedSymbol])
+
+ const handleTrade = (side: 'BUY' | 'SELL') => {
+ const amount = parseFloat(payingAmount)
+ const symbolData = getCurrentSymbolData()
+
+ if (!amount || amount <= 0) {
+ alert('Please enter a valid amount')
+ return
+ }
+
+ const newPosition: Position = {
+ id: `pos_${Date.now()}`,
+ symbol: `${selectedSymbol}/USDC`,
+ side,
+ amount,
+ entryPrice: symbolData.price,
+ stopLoss: stopLoss ? parseFloat(stopLoss) : symbolData.price * (side === 'BUY' ? 0.95 : 1.05),
+ takeProfit: takeProfit ? parseFloat(takeProfit) : symbolData.price * (side === 'BUY' ? 1.05 : 0.95),
+ currentPrice: symbolData.price,
+ unrealizedPnl: 0,
+ leverage,
+ }
+
+ setPositions(prev => [...prev, newPosition])
+ setPayingAmount('')
+ setReceivingAmount('')
+ setStopLoss('')
+ setTakeProfit('')
+ alert(`${side} order placed (demo)`)
+ }
+
+ const handleClosePosition = (positionId: string) => {
+ setPositions(prev => prev.filter(pos => pos.id !== positionId))
+ alert('Position closed (demo)')
+ }
+
+ return (
+ <>
+
+
+ {/* Top Bar */}
+
+
+
+
Chart Trading Terminal
+
+ {/* Symbol Selector Dropdown */}
+
+
+
+ {/* Dropdown Menu */}
+ {isSymbolDropdownOpen && (
+
+
+
+ Select Trading Pair
+
+ {symbols.map(({ symbol, name, price, change, icon }) => (
+
+ ))}
+
+
+ )}
+
+
+
+ {/* Market Status */}
+
+
+
+ {new Date().toLocaleTimeString()}
+
+
+
+
+
+ {/* Main Trading Interface */}
+
+ {/* Chart Area (70% width) */}
+
+
+
+
+ {/* Trading Panel (30% width) */}
+
+
+
{selectedSymbol}/USDC
+
+ ${getCurrentSymbolData().price.toLocaleString()}
+
+
= 0 ? 'text-green-400' : 'text-red-400'}`}>
+ {getCurrentSymbolData().change >= 0 ? '+' : ''}{getCurrentSymbolData().change}%
+
+
+ {/* Leverage Selector */}
+
+
+
+
+ {leverage}x
+
+
+
+ {/* Leverage Slider */}
+
+
setLeverage(parseInt(e.target.value))}
+ className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
+ style={{
+ background: `linear-gradient(to right, #eab308 0%, #eab308 ${((leverage - 1) / 99) * 100}%, #374151 ${((leverage - 1) / 99) * 100}%, #374151 100%)`
+ }}
+ />
+
+ {/* Leverage Marks */}
+
+ {[1, 2, 5, 10, 20, 50, 100].map((mark) => (
+
+ ))}
+
+
+
+ {/* Leverage Warning */}
+ {leverage > 10 && (
+
+
+
High leverage increases liquidation risk
+
+ )}
+
+
+ {/* Quick Trade Buttons */}
+
+
+
+
+
+ {/* Trade Form */}
+
+ {/* You're Paying Section */}
+
+
+
+
+
setPayingAmount(e.target.value)}
+ placeholder="0.00"
+ step="0.01"
+ min="0"
+ className="bg-transparent text-white text-lg font-medium focus:outline-none flex-1 mr-3"
+ />
+
+ {/* Paying Token Selector */}
+
+
+
+ {/* Paying Token Dropdown */}
+ {isPayingTokenDropdownOpen && (
+
+
+ {payingTokens.map(({ symbol, name, balance, icon }) => (
+
+ ))}
+
+
+ )}
+
+
+
+ {/* Balance and MAX button */}
+
+ Balance: {getCurrentPayingTokenData().balance.toLocaleString()} {payingToken}
+
+
+
+ {leverage > 1 && payingAmount && (
+
+ Position value: ${(parseFloat(payingAmount) * leverage).toLocaleString()} ({leverage}x leverage)
+
+ )}
+
+
+ {/* You're Receiving Section */}
+
+
+
+
+
+ {receivingAmount || '0.00'}
+
+
+ {getCurrentSymbolData().icon}
+ {selectedSymbol}
+
+
+
+ Rate: 1 {payingToken} = {payingToken === 'USDC' ? (1 / getCurrentSymbolData().price).toFixed(8) : '1.00'} {selectedSymbol}
+
+
+
+
+
+
+ {/* Risk Information */}
+ {payingAmount && leverage > 1 && (
+
+
โ ๏ธ Leveraged Position Risk
+
+ Position value: ${(parseFloat(payingAmount) * leverage).toLocaleString()} ({leverage}x leverage)
+
+
+ Liquidation risk: High with {leverage}x leverage
+
+
+ )}
+
+
+
+
+
+ {/* Bottom Panel - Positions */}
+
+
+
+
+
+
+
+
+
+ {positions.length > 0 && (
+
+ Total P&L: sum + pos.unrealizedPnl, 0) >= 0
+ ? 'text-green-400' : 'text-red-400'
+ }`}>
+ {positions.reduce((sum, pos) => sum + pos.unrealizedPnl, 0) >= 0 ? '+' : ''}
+ ${positions.reduce((sum, pos) => sum + pos.unrealizedPnl, 0).toFixed(2)}
+
+
+ )}
+
+
+ {/* Positions Table */}
+
+ {positions.length === 0 ? (
+
+ No open positions
+
+ ) : (
+
+ {positions.map((position: Position) => (
+
+
+
+
+
+ {position.symbol} โข {position.side}
+ {position.leverage > 1 && (
+
+ {position.leverage}x
+
+ )}
+
+
+ Size: {position.amount} โข Entry: ${position.entryPrice?.toFixed(2)}
+
+
+ SL: ${position.stopLoss.toFixed(2)}
+
+
+ TP: ${position.takeProfit.toFixed(2)}
+
+
+
+
+
+
+ ${(position.amount * position.currentPrice).toFixed(2)}
+
+
= 0 ? 'text-green-400' : 'text-red-400'
+ }`}>
+ {position.unrealizedPnl >= 0 ? '+' : ''}${(position.unrealizedPnl || 0).toFixed(2)}
+
+ {position.leverage > 1 && (
+
+ {position.leverage}x Leveraged
+
+ )}
+
+
+
+
+
+
+ ))}
+
+ )}
+
+
+
+
+
+
Something went wrong!
+
An error occurred while loading this page.
+
+
+
+
+
404
+
Page Not Found
+
The page you're looking for doesn't exist.
+
+ Go Back Home
+
+
+
+
+ {/* Featured: Chart Trading Demo */}
+