Fix frontend build and TypeScript errors

- Install lightningcss platform-specific binaries (darwin-arm64, linux-x64-gnu)
- Fix dashboard-view.tsx: Replace getMockDashboardStats with fetchDashboardData
- Add proper state management for dashboard data loading
- Fix dashboard.ts: Import WalletId type and update mock data structure
- Update DashboardSnapshot to use outgoingStreams/incomingStreams

Author: Armolas

frontend/components/dashboard/dashboard-view.tsx

@@ -365,9 +365,33 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
   const [streamFormMessage, setStreamFormMessage] =
     React.useState<StreamFormMessageState | null>(null);
   const [showWizard, setShowWizard] = React.useState(false);
-  const [loading, setLoading] = React.useState(false);
+  const [stats, setStats] = React.useState<DashboardSnapshot | null>(null);
+  const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
-  const stats = getMockDashboardStats(session.walletId);
+  const [prevKey, setPrevKey] = React.useState(session.publicKey);
+
+  // Reset loading state during render if key changes
+  if (session.publicKey !== prevKey) {
+    setPrevKey(session.publicKey);
+    setLoading(true);
+  }
+
+  React.useEffect(() => {
+    async function loadData() {
+      try {
+        setError(null);
+        const data = await fetchDashboardData(session.publicKey);
+        setStats(data);
+      } catch (err) {
+        setError("Failed to load dashboard data. Please check your connection to the FlowFi backend.");
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadData();
+  }, [session.publicKey]);
 
   React.useEffect(() => {
     const loadedTemplates = safeLoadTemplates();

frontend/lib/dashboard.ts

@@ -1,4 +1,5 @@
 import type { BackendStream } from "./api-types";
+import type { WalletId } from "./wallet";
 
 export interface ActivityItem {
   id: string;
@@ -45,7 +46,7 @@ const MOCK_STATS_BY_WALLET: Record<WalletId, DashboardSnapshot | null> = {
     totalReceived: 4720,
     totalValueLocked: 32140,
     activeStreamsCount: 2,
-    streams: [
+    outgoingStreams: [
       {
         id: "stream-1",
         date: "2023-10-25",
@@ -67,6 +68,7 @@ const MOCK_STATS_BY_WALLET: Record<WalletId, DashboardSnapshot | null> = {
         withdrawn: 300,
       },
     ],
+    incomingStreams: [],
     recentActivity: [
       {
         id: "act-1",

package-lock.json

@@ -23,5 +23,9 @@
   },
   "dependencies": {
     "react-hot-toast": "^2.6.0"
+  },
+  "optionalDependencies": {
+    "lightningcss-darwin-arm64": "^1.31.1",
+    "lightningcss-linux-x64-gnu": "^1.31.1"
   }
 }