Fix decimal precision in protocol overview percentage changes to 2 decimal places

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

Author: Copilot

src/components/analytics/OverviewPanel.js

@@ -23,6 +23,10 @@ export default function OverviewPanel({ data, network, timeframe }) {
     return `${percent.toFixed(1)}%`;
   };
 
+  const formatPercentageChange = (percent) => {
+    return `${percent >= 0 ? '+' : ''}${percent.toFixed(2)}%`;
+  };
+
   return (
     <div className="overview-panel">
       <div className="panel-header">
@@ -39,7 +43,7 @@ export default function OverviewPanel({ data, network, timeframe }) {
           <div className="kpi-content">
             <div className="kpi-value">{data.totalTrades?.toLocaleString() || 0}</div>
             <div className="kpi-label">Total Trades ({timeframe})</div>
-            <div className="kpi-change positive">+{data.tradesChange || 0}%</div>
+            <div className={`kpi-change ${data.tradesChange >= 0 ? 'positive' : 'negative'}`}>{formatPercentageChange(data.tradesChange || 0)}</div>
           </div>
         </div>
 
@@ -48,7 +52,7 @@ export default function OverviewPanel({ data, network, timeframe }) {
           <div className="kpi-content">
             <div className="kpi-value">{formatVolume(data.protocolVolume)}</div>
             <div className="kpi-label">Protocol Volume ({timeframe})</div>
-            <div className="kpi-change positive">+{data.volumeChange || 0}%</div>
+            <div className={`kpi-change ${data.volumeChange >= 0 ? 'positive' : 'negative'}`}>{formatPercentageChange(data.volumeChange || 0)}</div>
           </div>
         </div>
 
@@ -57,7 +61,7 @@ export default function OverviewPanel({ data, network, timeframe }) {
           <div className="kpi-content">
             <div className="kpi-value">{formatNumber(data.totalFees)}</div>
             <div className="kpi-label">Total Fees Collected</div>
-            <div className="kpi-change positive">+{data.feesChange || 0}%</div>
+            <div className={`kpi-change ${data.feesChange >= 0 ? 'positive' : 'negative'}`}>{formatPercentageChange(data.feesChange || 0)}</div>
           </div>
         </div>
 
@@ -66,7 +70,7 @@ export default function OverviewPanel({ data, network, timeframe }) {
           <div className="kpi-content">
             <div className="kpi-value">{formatPercentage(data.completionRate)}</div>
             <div className="kpi-label">Trade Completion Rate</div>
-            <div className="kpi-change positive">+{data.completionChange || 0}%</div>
+            <div className={`kpi-change ${data.completionChange >= 0 ? 'positive' : 'negative'}`}>{formatPercentageChange(data.completionChange || 0)}</div>
           </div>
         </div>
       </div>

src/tests/OverviewPanel.test.js

@@ -33,7 +33,7 @@ describe('OverviewPanel', () => {
     expect(screen.getByText('Protocol Trading Overview')).toBeInTheDocument();
 
     // Check live indicator
-    expect(screen.getByText('Live')).toBeInTheDocument();
+    expect(screen.getByText('[LIVE]')).toBeInTheDocument();
 
     // Check KPI values
     expect(screen.getByText('1,250')).toBeInTheDocument(); // Total trades
@@ -155,6 +155,7 @@ describe('OverviewPanel', () => {
     expect(screen.getByText('0.00 SOL')).toBeInTheDocument(); // Volume
     expect(screen.getByText('$0.00')).toBeInTheDocument(); // Fees
     expect(screen.getByText('0.0%')).toBeInTheDocument(); // Completion rate
+    expect(screen.getAllByText('+0.00%')).toHaveLength(4); // All change percentages should be +0.00%
   });
 
   test('displays change percentages correctly', () => {
@@ -166,9 +167,32 @@ describe('OverviewPanel', () => {
       />
     );
 
-    expect(screen.getByText('+8%')).toBeInTheDocument(); // Trades change
-    expect(screen.getByText('+15%')).toBeInTheDocument(); // Volume change
-    expect(screen.getByText('+12%')).toBeInTheDocument(); // Fees change
-    expect(screen.getByText('+2%')).toBeInTheDocument(); // Completion change
+    expect(screen.getByText('+8.20%')).toBeInTheDocument(); // Trades change
+    expect(screen.getByText('+15.30%')).toBeInTheDocument(); // Volume change
+    expect(screen.getByText('+12.10%')).toBeInTheDocument(); // Fees change
+    expect(screen.getByText('+1.80%')).toBeInTheDocument(); // Completion change
+  });
+
+  test('displays negative change percentages correctly', () => {
+    const negativeChangeData = {
+      ...mockData,
+      tradesChange: -5.25,
+      volumeChange: -8.75,
+      feesChange: -2.5,
+      completionChange: -1.15
+    };
+
+    render(
+      <OverviewPanel 
+        data={negativeChangeData} 
+        network={mockNetwork} 
+        timeframe="24h" 
+      />
+    );
+
+    expect(screen.getByText('-5.25%')).toBeInTheDocument(); // Trades change
+    expect(screen.getByText('-8.75%')).toBeInTheDocument(); // Volume change
+    expect(screen.getByText('-2.50%')).toBeInTheDocument(); // Fees change
+    expect(screen.getByText('-1.15%')).toBeInTheDocument(); // Completion change
   });
 });