feat: Implement Jupiter-style trading interface with token selection
- Add 'You're paying' and 'You're receiving' sections with proper token dropdowns - Implement balance display and MAX button functionality - Add automatic receiving amount calculation based on paying amount - Enhance token selector with icons, names, and balance information - Improve leverage position value calculations and risk warnings - Update trade execution to use new paying/receiving token structure - Maintain all existing functionality including stop loss, take profit, and position management This creates a more intuitive and professional trading interface that matches Jupiter's UX patterns.
This commit is contained in:
53
app/page.js
53
app/page.js
@@ -54,6 +54,59 @@ export default function HomePage() {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Featured: Chart Trading Demo */}
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white mb-2">🚀 Professional Chart Trading</h2>
|
||||
<p className="text-gray-400">Advanced trading interface with leverage, charting, and position management</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="inline-block px-3 py-1 bg-yellow-600/20 text-yellow-400 rounded-full text-sm font-medium">NEW</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-green-500/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-green-400 text-sm">📈</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white font-medium">Real-time Charts</div>
|
||||
<div className="text-gray-400 text-sm">Professional candlestick visualization</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-yellow-500/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-yellow-400 text-sm">⚡</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white font-medium">Leverage Trading</div>
|
||||
<div className="text-gray-400 text-sm">1x to 100x leverage options</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-blue-500/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-blue-400 text-sm">🎯</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white font-medium">Position Management</div>
|
||||
<div className="text-gray-400 text-sm">Stop loss & take profit</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="/chart-trading-demo"
|
||||
className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all transform hover:scale-105 font-medium"
|
||||
>
|
||||
<span className="mr-2">🚀</span>
|
||||
Launch Chart Trading Terminal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user