Feature/replace demo dashboard data on web with wallet scoped live portfolio mapping

veilend-web/package.json

@@ -30,12 +30,13 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitest/ui": "^3.2.7",
     "eslint": "^9",
     "eslint-config-next": "16.2.9",
     "eslint-config-prettier": "^10.1.8",
     "prettier": "^3.8.4",
     "tailwindcss": "^4",
     "typescript": "^5",
-    "vitest": "^3.2.6"
+    "vitest": "^3.2.7"
   }
 }

veilend-web/src/app/dashboard/error.tsx

@@ -2,41 +2,80 @@
 
 import { useEffect } from 'react';
 import { Container, Flex, Section } from '@/components/Layout';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle, RefreshCw } from 'lucide-react';
 
-export default function DashboardError({
-  error,
-  reset,
-}: {
+interface ErrorProps {
   error: Error & { digest?: string };
   reset: () => void;
-}) {
+}
+
+export default function DashboardError({ error, reset }: ErrorProps) {
   useEffect(() => {
     // Log the error to an error reporting service
-    console.error('Dashboard failed to load:', error);
+    console.error('Dashboard Error:', error);
   }, [error]);
 
+  const isAuthError = error.message?.includes('address') || error.message?.includes('wallet');
+  const isNetworkError = error.message?.includes('fetch') || error.message?.includes('network');
+
   return (
     <div className="min-h-screen bg-background">
       <Container className="pb-16">
         <Section className="pt-20 pb-10">
-          <Flex direction="col" gap="lg" className="max-w-2xl mx-auto text-center">
-            <Alert variant="destructive" className="text-left">
-              <AlertTitle>Failed to load dashboard</AlertTitle>
-              <AlertDescription>
-                We encountered an error while fetching your live portfolio and activity data. 
-                Please try again or check your network connection.
+          <Flex direction="col" align="center" gap="lg" className="max-w-2xl mx-auto">
+            <Alert variant="destructive" className="w-full">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle className="text-lg font-semibold">
+                {isAuthError ? 'Wallet Connection Error' : 
+                 isNetworkError ? 'Network Error' : 
+                 'Dashboard Error'}
+              </AlertTitle>
+              <AlertDescription className="mt-2">
+                <p className="text-sm">
+                  {isAuthError 
+                    ? 'Unable to load dashboard data. Please ensure your wallet is properly connected and try again.'
+                    : isNetworkError
+                    ? 'Network connection issue. Please check your internet connection and try again.'
+                    : error.message || 'An unexpected error occurred while loading the dashboard.'
+                  }
+                </p>
+                {error.digest && (
+                  <p className="text-xs mt-2 text-muted-foreground">
+                    Error ID: {error.digest}
+                  </p>
+                )}
               </AlertDescription>
             </Alert>
-            <div className="mt-4">
-              <Button onClick={() => reset()}>
-                Try again
+
+            <div className="flex gap-4">
+              <Button
+                onClick={reset}
+                className="flex items-center gap-2"
+              >
+                <RefreshCw className="h-4 w-4" />
+                Try Again
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => window.location.href = '/'}
+              >
+                Return Home
               </Button>
             </div>
+
+            <div className="text-sm text-muted-foreground mt-4">
+              <p>If the issue persists, please:</p>
+              <ul className="list-disc list-inside mt-2 space-y-1">
+                <li>Verify your wallet is connected</li>
+                <li>Check the backend API is running</li>
+                <li>Ensure you have a stable network connection</li>
+              </ul>
+            </div>
           </Flex>
         </Section>
       </Container>
     </div>
   );
-}
+}