61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
import { TrendingUp, Info, AlertTriangle, RefreshCw } from 'lucide-react';
|
|
|
|
export default function YieldDashboard() {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold flex items-center gap-3">
|
|
<TrendingUp className="text-synor-400" />
|
|
Yield Aggregator
|
|
</h1>
|
|
<p className="text-gray-400 mt-1">Auto-compound and find the best APY</p>
|
|
</div>
|
|
<button className="p-2 bg-gray-800 rounded-lg">
|
|
<RefreshCw size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-yellow-500/20 border border-yellow-500/30 rounded-xl p-4 flex items-start gap-3">
|
|
<AlertTriangle className="text-yellow-400 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-yellow-200">Coming Soon</p>
|
|
<p className="text-sm text-yellow-200/70">
|
|
The yield aggregator automatically finds the best yields across DeFi protocols
|
|
and compounds your earnings.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="bg-gray-900 rounded-xl p-4 border border-gray-800 text-center">
|
|
<p className="text-sm text-gray-400 mb-1">Total Deposited</p>
|
|
<p className="text-2xl font-bold">0 SYN</p>
|
|
</div>
|
|
<div className="bg-gray-900 rounded-xl p-4 border border-gray-800 text-center">
|
|
<p className="text-sm text-gray-400 mb-1">Total Earned</p>
|
|
<p className="text-2xl font-bold text-green-400">0 SYN</p>
|
|
</div>
|
|
<div className="bg-gray-900 rounded-xl p-4 border border-gray-800 text-center">
|
|
<p className="text-sm text-gray-400 mb-1">Best APY</p>
|
|
<p className="text-2xl font-bold text-synor-400">--%</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
|
|
<h3 className="font-medium mb-4">Available Strategies</h3>
|
|
<p className="text-sm text-gray-500 text-center py-4">
|
|
No yield strategies available yet
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-900/50 rounded-lg p-4 border border-gray-800 flex items-start gap-3">
|
|
<Info className="text-gray-500 mt-0.5" size={18} />
|
|
<p className="text-sm text-gray-400">
|
|
Yield aggregation optimizes gas costs and maximizes returns by automatically
|
|
moving funds to the highest-yielding opportunities.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|