fix: prevent fabricated status data

Author: Nacho1499

package.json

@@ -23,7 +23,6 @@
     "@stellar/stellar-sdk": "^13.3.0",
     "@wraith-protocol/sdk": "^1.4.5",
     "i18next": "^26.2.0",
-    "lucide-react": "^1.34.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-helmet-async": "^3.0.0",

pnpm-lock.yaml

@@ -1,6 +1,8 @@
 import { useState, useEffect, useCallback } from 'react';
 import incidentsData from '../data/incidents.json';
 
+const statusApiUrl = import.meta.env.VITE_STATUS_API_URL || '';
+
 export type ComponentStatus = {
   id: string;
   name: string;
@@ -26,73 +28,33 @@ export type StatusData = {
   lastUpdated: string;
 };
 
-const MOCK_COMPONENTS: ComponentStatus[] = [
-  {
-    id: 'rpc-eth',
-    name: 'Ethereum RPC',
-    status: 'operational',
-    uptime90Days: Array(90).fill(1),
-    latencyMs: 42,
-  },
-  {
-    id: 'rpc-sol',
-    name: 'Solana RPC',
-    status: 'operational',
-    uptime90Days: Array(90).fill(1),
-    latencyMs: 28,
-  },
-  {
-    id: 'scanner',
-    name: 'Wraith Scanner',
-    status: 'operational',
-    uptime90Days: Array(90).fill(1),
-    latencyMs: 65,
-  },
-  {
-    id: 'docs',
-    name: 'Documentation',
-    status: 'operational',
-    uptime90Days: Array(90).fill(1),
-    latencyMs: 15,
-  },
-  {
-    id: 'marketing',
-    name: 'Marketing Web',
-    status: 'operational',
-    uptime90Days: Array(90).fill(1),
-    latencyMs: 20,
-  },
-];
-
 export function useStatus() {
   const [data, setData] = useState<StatusData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [lastUpdated, setLastUpdated] = useState<string>(new Date().toISOString());
+  const [lastUpdated, setLastUpdated] = useState<string | null>(null);
 
   const fetchStatus = useCallback(async () => {
+    if (!statusApiUrl) {
+      setData(null);
+      setError('Status endpoint unavailable');
+      setLoading(false);
+      setLastUpdated(null);
+      return;
+    }
+
     try {
-      // Respect DNT header if enabled in browser
-      const isDnt =
-        navigator.doNotTrack === '1' ||
-        (window as unknown as { doNotTrack?: string }).doNotTrack === '1';
       const headers: HeadersInit = {
         Accept: 'application/json',
       };
-      if (isDnt) {
-        // DNT honored, ensure no cookies are sent/requested
-      }
-
-      // Try fetching from public status endpoint or fallback gracefully to mock data
-      let apiComponents = MOCK_COMPONENTS;
-      try {
-        const res = await fetch('/api/status', { headers, credentials: 'omit' });
-        if (res.ok) {
-          const json = await res.json();
-          if (json.components) apiComponents = json.components;
-        }
-      } catch {
-        // Fallback gracefully if endpoint is unreachable without spinner-forever
+      // Status polling sends no telemetry and never includes cookies.
+      const res = await fetch(statusApiUrl, { headers, credentials: 'omit' });
+      if (!res.ok) throw new Error(`Status endpoint returned ${res.status}`);
+      const json = await res.json();
+      if (!Array.isArray(json.components)) throw new Error('Status response has no components');
+      const apiComponents = json.components as ComponentStatus[];
+      if (!apiComponents.some((component) => /stellar/i.test(component.name))) {
+        throw new Error('Status response is missing Stellar');
       }
 
       setData({
@@ -106,11 +68,13 @@ export function useStatus() {
         lastUpdated: new Date().toISOString(),
       });
       setError(null);
+      setLastUpdated(new Date().toISOString());
     } catch (err) {
+      setData(null);
       setError(err instanceof Error ? err.message : 'Failed to fetch status data');
+      setLastUpdated(null);
     } finally {
       setLoading(false);
-      setLastUpdated(new Date().toISOString());
     }
   }, []);
 

src/hooks/useStatus.ts

@@ -1,5 +1,4 @@
 import { useStatus } from '../hooks/useStatus';
-import { CheckCircle2, AlertTriangle, XCircle, RefreshCw, Clock } from 'lucide-react';
 
 export default function Status() {
   const { data, loading, error, refetch, lastUpdated } = useStatus();
@@ -8,20 +7,20 @@ export default function Status() {
     switch (status) {
       case 'operational':
         return (
-          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-500">
-            <CheckCircle2 className="w-3.5 h-3.5" /> Operational
+          <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-500">
+            Operational
           </span>
         );
       case 'degraded':
         return (
-          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-amber-500/10 text-amber-500">
-            <AlertTriangle className="w-3.5 h-3.5" /> Degraded Performance
+          <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-amber-500/10 text-amber-500">
+            Degraded Performance
           </span>
         );
       case 'outage':
         return (
-          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-red-500/10 text-red-500">
-            <XCircle className="w-3.5 h-3.5" /> Partial Outage
+          <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-500/10 text-red-500">
+            Partial Outage
           </span>
         );
     }
@@ -38,25 +37,27 @@ export default function Status() {
           </p>
         </div>
         <div className="flex items-center gap-3">
-          <span className="text-xs text-on-surface-muted flex items-center gap-1">
-            <Clock className="w-3.5 h-3.5" /> Updated {new Date(lastUpdated).toLocaleTimeString()}
-          </span>
+          {lastUpdated && (
+            <span className="text-xs text-on-surface-muted">
+              Updated {new Date(lastUpdated).toLocaleTimeString()}
+            </span>
+          )}
           <button
             onClick={() => refetch()}
             className="p-2 rounded-lg border border-surface-border hover:bg-surface-hover transition-colors"
             title="Refresh status"
           >
-            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+            {loading ? 'Refreshing...' : 'Refresh'}
           </button>
         </div>
       </div>
 
       {/* Overall Banner */}
       {error && !data ? (
         <div className="p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-600 dark:text-amber-400 mb-8">
-          <p className="font-medium">Unable to connect to live telemetry endpoints.</p>
+          <p className="font-medium">Status unavailable.</p>
           <p className="text-xs mt-1 opacity-80">
-            Displaying last known cached statuses. Retrying automatically...
+            Live component data could not be loaded. Please try again later.
           </p>
         </div>
       ) : data ? (
@@ -69,9 +70,9 @@ export default function Status() {
         >
           <div className="flex items-center gap-3">
             {data.overall === 'operational' ? (
-              <CheckCircle2 className="w-6 h-6 text-green-500" />
+              <span className="h-2 w-2 rounded-full bg-green-500" aria-hidden="true" />
             ) : (
-              <AlertTriangle className="w-6 h-6 text-amber-500" />
+              <span className="h-2 w-2 rounded-full bg-amber-500" aria-hidden="true" />
             )}
             <span className="font-semibold text-lg">
               {data.overall === 'operational'