Redesign analytics dashboard with ASCII theme to match website design

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

src/components/AnalyticsDashboard.js

@@ -185,7 +185,7 @@ export default function AnalyticsDashboard() {
         <div className="header-content">
           <div className="title-section">
             <h1 className="analytics-title">
-              📊 Protocol Analytics Dashboard
+              Protocol Analytics Dashboard
             </h1>
             <p className="analytics-subtitle">
               Monitor svmp2p trading performance and user metrics on {network.name}
@@ -208,11 +208,11 @@ export default function AnalyticsDashboard() {
             <div className="connection-status">
               {connected ? (
                 <span className="status-connected">
-                  🟢 Connected to {network.name}
+                  [ONLINE] {network.name}
                 </span>
               ) : (
                 <span className="status-disconnected">
-                  🔴 Wallet not connected
+                  [OFFLINE] WALLET NOT CONNECTED
                 </span>
               )}
             </div>

src/components/analytics/OverviewPanel.js

@@ -29,13 +29,13 @@ export default function OverviewPanel({ data, network, timeframe }) {
         <h2 className="panel-title">Protocol Trading Overview</h2>
         <div className="live-indicator">
           <span className="live-dot"></span>
-          <span className="live-text">Live</span>
+          <span className="live-text">[LIVE]</span>
         </div>
       </div>
 
       <div className="kpi-grid">
         <div className="kpi-card trades">
-          <div className="kpi-icon">🔄</div>
+          <div className="kpi-icon">[T]</div>
           <div className="kpi-content">
             <div className="kpi-value">{data.totalTrades?.toLocaleString() || 0}</div>
             <div className="kpi-label">Total Trades ({timeframe})</div>
@@ -44,7 +44,7 @@ export default function OverviewPanel({ data, network, timeframe }) {
         </div>
 
         <div className="kpi-card volume">
-          <div className="kpi-icon">💰</div>
+          <div className="kpi-icon">[$]</div>
           <div className="kpi-content">
             <div className="kpi-value">{formatVolume(data.protocolVolume)}</div>
             <div className="kpi-label">Protocol Volume ({timeframe})</div>
@@ -53,7 +53,7 @@ export default function OverviewPanel({ data, network, timeframe }) {
         </div>
 
         <div className="kpi-card fees">
-          <div className="kpi-icon">💵</div>
+          <div className="kpi-icon">[F]</div>
           <div className="kpi-content">
             <div className="kpi-value">{formatNumber(data.totalFees)}</div>
             <div className="kpi-label">Total Fees Collected</div>
@@ -62,7 +62,7 @@ export default function OverviewPanel({ data, network, timeframe }) {
         </div>
 
         <div className="kpi-card completion-rate">
-          <div className="kpi-icon">✅</div>
+          <div className="kpi-icon">[%]</div>
           <div className="kpi-content">
             <div className="kpi-value">{formatPercentage(data.completionRate)}</div>
             <div className="kpi-label">Trade Completion Rate</div>

src/components/analytics/RecentTrades.js

@@ -18,19 +18,19 @@ export default function RecentTrades({ trades, network }) {
 
   const getStatusIcon = (status) => {
     switch (status) {
-      case 'completed': return '✅';
-      case 'in_progress': return '⏳';
-      case 'cancelled': return '❌';
-      case 'disputed': return '⚠️';
-      default: return '❓';
+      case 'completed': return '[C]';
+      case 'in_progress': return '[P]';
+      case 'cancelled': return '[X]';
+      case 'disputed': return '[!]';
+      default: return '[?]';
     }
   };
 
   const getTradeTypeIcon = (type) => {
     switch (type) {
-      case 'buy': return '🟢';
-      case 'sell': return '🔴';
-      default: return '🔄';
+      case 'buy': return '[B]';
+      case 'sell': return '[S]';
+      default: return '[T]';
     }
   };
 
@@ -96,7 +96,7 @@ export default function RecentTrades({ trades, network }) {
       <div className="trades-list">
         {filteredTrades.length === 0 ? (
           <div className="empty-state">
-            <div className="empty-icon">📊</div>
+            <div className="empty-icon">[*]</div>
             <div className="empty-text">No trades match your filters</div>
           </div>
         ) : (

src/components/analytics/TopTraders.js

@@ -94,7 +94,7 @@ export default function TopTraders({ tradersData }) {
               <div className="trader-cell">
                 <div className="trader-info">
                   <div className="trader-address">{formatAddress(trader.address)}</div>
-                  {trader.verified && <span className="verified-badge">✓</span>}
+                  {trader.verified && <span className="verified-badge">[V]</span>}
                 </div>
               </div>
 

src/components/analytics/VolumePerDayChart.js

@@ -226,7 +226,7 @@ export default function VolumePerDayChart({ data, network, timeframe }) {
           />
         ) : (
           <div className="chart-placeholder">
-            <div className="placeholder-icon">📈</div>
+            <div className="placeholder-icon">[CHART]</div>
             <div className="placeholder-text">Loading volume data...</div>
           </div>
         )}
@@ -235,10 +235,10 @@ export default function VolumePerDayChart({ data, network, timeframe }) {
       <div className="chart-footer">
         <div className="chart-info">
           <span className="info-item">
-            🔄 Updates every 5 minutes
+            [UPDATE] Updates every 5 minutes
           </span>
           <span className="info-item">
-            📊 Protocol trading volume only
+            [DATA] Protocol trading volume only
           </span>
         </div>
       </div>