diff --git a/app/page.js b/app/page.js index 928e976..145b4ee 100644 --- a/app/page.js +++ b/app/page.js @@ -4,109 +4,9 @@ import StatusOverview from '../components/StatusOverview.js' export default function HomePage() { return ( -
+
{/* Status Overview */} - - {/* Quick Actions */} -
-
-
- 📊 -
-

AI Analysis

-

Get market insights and TradingView analysis

- - View Analysis - -
- -
-
- 💰 -
-

Manual Trading

-

Execute trades and view history

- - Trade Now - -
- -
-
- 🤖 -
-

Auto Trading

-

Configure automation

- - Setup Bot - -
- -
-
- ⚙️ -
-

Settings

-

Developer configuration

- - Configure - -
-
- - {/* Featured: Chart Trading Demo */} -
-
-
-

🚀 Professional Chart Trading

-

Advanced trading interface with leverage, charting, and position management

-
-
- NEW -
-
- -
-
-
- 📈 -
-
-
Real-time Charts
-
Professional candlestick visualization
-
-
- -
-
- -
-
-
Leverage Trading
-
1x to 100x leverage options
-
-
- -
-
- 🎯 -
-
-
Position Management
-
Stop loss & take profit
-
-
-
- - - 🚀 - Launch Chart Trading Terminal - -
) } diff --git a/components/StatusOverview.js b/components/StatusOverview.js index 0529924..2988052 100644 --- a/components/StatusOverview.js +++ b/components/StatusOverview.js @@ -3,17 +3,24 @@ import React, { useEffect, useState } from 'react' export default function StatusOverview() { const [status, setStatus] = useState({ - driftBalance: 0, + portfolioValue: 0, activeTrades: 0, dailyPnL: 0, systemStatus: 'offline', - bitqueryStatus: 'unknown', marketPrices: [], - walletBalance: null, // Real wallet balance - availableCoins: [] // Available coins in wallet + walletBalance: null, + availableCoins: [] }) const [loading, setLoading] = useState(true) + // Coin icons mapping - using CoinGecko images + const coinIcons = { + 'BTC': 'https://assets.coingecko.com/coins/images/1/large/bitcoin.png', + 'ETH': 'https://assets.coingecko.com/coins/images/279/large/ethereum.png', + 'SOL': 'https://assets.coingecko.com/coins/images/4128/large/solana.png', + 'SOL-USD': 'https://assets.coingecko.com/coins/images/4128/large/solana.png' + } + useEffect(() => { async function fetchStatus() { try { @@ -36,18 +43,18 @@ export default function StatusOverview() { console.warn('Could not fetch wallet balance:', e) } - // Get market data from Bitquery - let balance = walletBalance?.totalValue || 0 // Use real wallet balance - let bitqueryStatus = 'error' + // Get market data - only BTC, ETH, SOL let marketPrices = [] - try { const marketRes = await fetch('/api/market') if (marketRes.ok) { const marketData = await marketRes.json() if (marketData.success) { - marketPrices = marketData.data.prices || [] - bitqueryStatus = marketData.data.status?.connected ? 'online' : 'error' + // Filter to only show BTC, ETH, SOL + const targetCoins = ['BTC', 'ETH', 'SOL'] + marketPrices = (marketData.data.prices || []) + .filter(price => targetCoins.includes(price.symbol)) + .sort((a, b) => targetCoins.indexOf(a.symbol) - targetCoins.indexOf(b.symbol)) } } } catch (e) { @@ -66,11 +73,10 @@ export default function StatusOverview() { } setStatus({ - driftBalance: balance, - activeTrades: 0, // No fake trades - will show real ones when we have them - dailyPnL: 0, // No fake P&L + portfolioValue: walletBalance?.totalValue || 0, + activeTrades: 0, + dailyPnL: 0, systemStatus: systemStatus, - bitqueryStatus: bitqueryStatus, marketPrices: marketPrices, walletBalance: walletBalance, availableCoins: availableCoins @@ -100,154 +106,165 @@ export default function StatusOverview() { error: '🔴' } - return ( -
-
-

System Status

-
- {statusIcon[status.systemStatus]} - - {status.systemStatus.toUpperCase()} - + if (loading) { + return ( +
+
+
+ Loading overview...
+ ) + } - {loading ? ( -
-
- Loading status... + return ( +
+ {/* System Status Header */} +
+
+

System Status

+
+ {statusIcon[status.systemStatus]} + + Trading Bot {status.systemStatus.toUpperCase()} + +
- ) : ( -
- {/* Main Status Grid */} -
-
-
- 💎 -
-

- ${status.driftBalance.toFixed(2)} -

-

Portfolio Value

-
- {/* Wallet Balance */} + {/* Portfolio Overview - Combined Section */} +
+
+
+
+ 💎 +
+
+

Portfolio Value

+

${status.portfolioValue.toFixed(2)}

+
+
+
+ {status.walletBalance && ( -
-
- 🪙 +
+
+
+ SOL +
+
+

Wallet Balance

+

+ {status.walletBalance.positions?.[0]?.amount?.toFixed(4) || '0.0000'} SOL +

+
-

- {status.walletBalance.positions?.[0]?.amount?.toFixed(4) || '0.0000'} SOL -

-

Wallet Balance

)} -
-
- 🔄 +
+
+
+
-

- {status.activeTrades} -

-

Active Trades

-
- -
-
- 📈 -
-

= 0 ? 'text-green-400' : 'text-red-400'}`}> - {status.dailyPnL >= 0 ? '+' : ''}${status.dailyPnL.toFixed(2)} -

-

Daily P&L

-
-
- - {/* Service Status */} -
-
-

Service Status

-
-
-
- Trading Bot -
- {statusIcon[status.systemStatus]} - - {status.systemStatus.toUpperCase()} - -
-
-
- Bitquery API -
- {statusIcon[status.bitqueryStatus]} - - {status.bitqueryStatus.toUpperCase()} - -
+
+

Active Trades

+

{status.activeTrades}

- {/* Market Prices */} - {status.marketPrices.length > 0 && ( -
-
-

Live Market Prices

- Via Bitquery +
+
+
+ 📈
-
- {status.marketPrices.map((price, index) => ( -
-
- {price.symbol} - ${price.price?.toFixed(4)} -
-
- 24h Change - = 0 ? 'text-green-400' : 'text-red-400' - }`}> - {price.change24h >= 0 ? '+' : ''}{price.change24h?.toFixed(2)}% - -
-
- ))} +
+

Daily P&L

+

= 0 ? 'text-green-400' : 'text-red-400'}`}> + {status.dailyPnL >= 0 ? '+' : ''}${status.dailyPnL.toFixed(2)} +

- )} +
+
- {/* Available Coins in Wallet */} - {status.availableCoins.length > 0 && ( -
-
-

Available Wallet Coins

- Ready for Trading -
-
- {status.availableCoins.map((coin, index) => ( -
-
-
- 🪙 -
- {coin.symbol} -
${coin.price?.toFixed(2)}
-
-
-
-
{coin.amount?.toFixed(4)}
-
${coin.usdValue?.toFixed(2)}
+ {/* Available Wallet Coins */} + {status.availableCoins.length > 0 && ( +
+

Available Coins

+
+ {status.availableCoins.map((coin, index) => ( +
+
+
+ {coinIcons[coin.symbol] ? ( + {coin.symbol} + ) : ( + 🪙 + )} +
+ {coin.symbol} +
${coin.price?.toFixed(2)}
+
+
{coin.amount?.toFixed(4)}
+
${coin.usdValue?.toFixed(2)}
+
- ))} -
+
+ ))}
- )} +
+ )} +
+ + {/* Live Market Prices - BTC, ETH, SOL only */} + {status.marketPrices.length > 0 && ( +
+
+

Live Market Prices

+ Real-time data +
+
+ {status.marketPrices.map((price, index) => ( +
+
+
+ {coinIcons[price.symbol] ? ( + {price.symbol} + ) : ( + 🪙 + )} + {price.symbol} +
+ ${price.price?.toFixed(2)} +
+
+ 24h Change + = 0 + ? 'text-green-400 bg-green-400/10' + : 'text-red-400 bg-red-400/10' + }`}> + {price.change24h >= 0 ? '+' : ''}{price.change24h?.toFixed(2)}% + +
+
+ ))} +
)}