52454bbf98
Fixed Position Size Calculation: - Changed input from SOL to USD for clarity - Fixed calculation: positionSizeSOL = positionValueUSD / coinPrice - Resolved issue where entering 0.4 SOL showed incorrect 0.0025 underneath Added Real Wallet Balance Integration: - TradeModal now fetches actual wallet balance from /api/wallet/balance - Percentage buttons now calculate from real available balance (3.40) - No more impossible 1 SOL positions when only 3.40 available Enhanced Position Sizing UI: - Added slider for smooth position adjustment ( to full balance) - Percentage buttons (25%, 50%, 75%, 100%) now accurate - Real-time display shows both USD and SOL amounts - Live percentage display of balance usage Added Wallet Overview to Dashboard: - Main dashboard shows real wallet balance prominently - Trading page displays actual wallet holdings - StatusOverview component enhanced with wallet info - Accurate position sizing based on actual 3.40 balance - Intuitive slider + percentage buttons - Real-time balance updates every 30 seconds - Clear USD/SOL conversion display - No more calculation errors in trading modal
96 lines
1.8 KiB
CSS
96 lines
1.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom styles for the trading dashboard */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Scrollbar styling for dark theme */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #374151;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #6b7280;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #9ca3af;
|
|
}
|
|
|
|
/* Custom button hover effects */
|
|
.btn-hover:hover {
|
|
transform: translateY(-1px);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
/* Loading animation */
|
|
.loading-spinner {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Trading card effects */
|
|
.trading-card {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.trading-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Custom range slider styling */
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 8px;
|
|
background: linear-gradient(to right, #3B82F6 0%, #3B82F6 30%, #374151 30%, #374151 100%);
|
|
border-radius: 4px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #3B82F6;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
border: 2px solid #1e40af;
|
|
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #3B82F6;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
border: 2px solid #1e40af;
|
|
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
input[type="range"]:focus::-webkit-slider-thumb {
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
input[type="range"]:focus::-moz-range-thumb {
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
|
|
}
|