wallet integration

CLAUDE.md

@@ -27,8 +27,8 @@ This is a React/TypeScript NAO (Network of Authentic Others) community managemen
 - Always completely implement any functionality as requested.
 - Do not hallucinate, or pretend
 - Always use the most up to date official documentation for libraries or techniques
-- prefer zustand stores above useState
-- use LDO and nextgraphauth.session for persistent data (contacts for example) consider this to be our "database" 
+- prefer zustand stores above useState when we have more than 3 useState
+- use LDO and nextgraphauth.session for persistent data (contacts for example), consider this to be our "database" 
 
 # Code Style
 - Use react hooks: useMemo, useCallback, and other standard hooks

src/App.tsx

@@ -21,20 +21,69 @@ import MessagesPage from '@/pages/MessagesPage';
 import AccountPage from '@/pages/AccountPage';
 import NotificationsPage from '@/pages/NotificationsPage';
 import { createAppTheme } from '@/theme/theme';
-import { Container } from '@mui/material';
+import { Container, Box, Typography, Button } from '@mui/material';
 
 const theme = createAppTheme('light');
 
 const AppContent = () => {
-  const nextGraphAuth = useNextGraphAuth() as NextGraphAuth;
+  const nextGraphAuth = useNextGraphAuth();
+  const { session, login, logout } = nextGraphAuth || {};
   
-  const hasLogin = Boolean(nextGraphAuth?.login);
-  const hasLogout = Boolean(nextGraphAuth?.logout);
+  console.log('NextGraph Auth:', nextGraphAuth);
+  console.log('Session:', session);
+  console.log('Keys:', nextGraphAuth ? Object.keys(nextGraphAuth) : 'no auth');
+  
+  const hasLogin = Boolean(login);
+  const hasLogout = Boolean(logout);
+  const isAuthenticated = Boolean(session?.ng);
   
   const isNextGraphReady = hasLogin && hasLogout;
+  
+  console.log('hasLogin:', hasLogin, 'hasLogout:', hasLogout);
+  console.log('isAuthenticated:', isAuthenticated, 'isNextGraphReady:', isNextGraphReady);
 
   if (!isNextGraphReady) {
-    return <div>Loading NextGraph...</div>;
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh'
+        }}
+      >
+        <Typography variant="h6">Loading NextGraph...</Typography>
+      </Box>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          gap: 2
+        }}
+      >
+        <Typography variant="h4" component="h2" gutterBottom>
+          Welcome to NAO
+        </Typography>
+        <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+          Please log in with your NextGraph wallet to continue.
+        </Typography>
+        <Button
+          variant="contained"
+          size="large"
+          onClick={() => login?.()}
+        >
+          Login with NextGraph
+        </Button>
+      </Box>
+    );
   }
 
   return (