Refactor: Improve error handling in authentication flow

frontend/src/app/dashboard/page.tsx

@@ -20,9 +20,16 @@ import {
 } from 'lucide-react';
 import { formatNumber, truncateAddress } from '@/lib/utils';
 import { toast } from 'sonner';
+import { useSocket } from '@/lib/socket';
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
 import { TransactionList } from './components/TransactionList';
 import { WatchHistory } from './components/WatchHistory';
 import { CreateWalletModal } from './components/CreateWalletModal';
+import { WelcomeOnboarding } from './components/WelcomeOnboarding';
+import { ActivityFeed } from './components/ActivityFeed';
+import { SearchRequestModal } from './components/SearchRequestModal';
+import { RequestHistory } from './components/RequestHistory';
+import { Leaderboard } from './components/Leaderboard';
 
 interface WalletData {
   hasWallet: boolean;
@@ -39,7 +46,9 @@ export default function DashboardPage() {
   const [wallet, setWallet] = useState<WalletData | null>(null);
   const [requestCosts, setRequestCosts] = useState({ movie: 100, tv: 200 });
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const socket = useSocket();
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -50,6 +59,37 @@ export default function DashboardPage() {
     loadData();
   }, [isAuthenticated, router]);
 
+  useEffect(() => {
+    if (socket) {
+      socket.on('credits_earned', (data) => {
+        toast.success(`You earned ${data.amount} $COOP!`, {
+          description: `Watched: ${data.title}`,
+        });
+        loadData();
+      });
+
+      socket.on('bonus_received', (data) => {
+        toast.success(`Bonus Received: ${data.amount} $COOP!`, {
+          description: data.reason,
+        });
+        loadData();
+      });
+
+      socket.on('credits_spent', (data) => {
+        toast.info(`Requested: ${data.title}`, {
+          description: `Spent ${data.amount} $COOP`,
+        });
+        loadData();
+      });
+
+      return () => {
+        socket.off('credits_earned');
+        socket.off('bonus_received');
+        socket.off('credits_spent');
+      };
+    }
+  }, [socket]);
+
   const loadData = async () => {
     try {
       const [walletRes, costsRes] = await Promise.all([
@@ -84,15 +124,25 @@ export default function DashboardPage() {
               </Button>
             )}
           </div>
-          <Button variant="ghost" onClick={logout}>
-            Sign Out
-          </Button>
+          <div className="flex items-center gap-4">
+            <div className="wallet-adapter-custom-wrapper hidden md:block">
+              <WalletMultiButton className="!h-9 !px-4 !text-sm !rounded-md !bg-secondary !text-secondary-foreground hover:!bg-secondary/80" />
+            </div>
+            <Button variant="ghost" onClick={logout}>
+              Sign Out
+            </Button>
+          </div>
         </div>
       </header>
 
       <main className="max-w-7xl mx-auto px-4 py-8">
+        {/* Onboarding for new users */}
+        {!wallet?.hasWallet && !isLoading && (
+          <WelcomeOnboarding onStart={() => setIsCreateModalOpen(true)} onConnected={loadData} />
+        )}
+
         {/* Stats Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
           <Card>
             <CardHeader className="flex flex-row items-center justify-between pb-2">
               <CardTitle className="text-sm font-medium">Balance</CardTitle>
@@ -138,37 +188,21 @@ export default function DashboardPage() {
             </CardContent>
           </Card>
 
-          <Card>
+          <Card className="cursor-pointer hover:border-primary/50 transition-colors group" onClick={() => setIsSearchModalOpen(true)}>
             <CardHeader className="flex flex-row items-center justify-between pb-2">
               <CardTitle className="text-sm font-medium">Request Cost</CardTitle>
-              <Film className="h-4 w-4 text-muted-foreground" />
+              <Film className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold">{requestCosts.movie} $COOP</div>
               <p className="text-xs text-muted-foreground">
-                Per movie request
+                Click to request content
               </p>
             </CardContent>
           </Card>
         </div>
 
-        {/* Wallet Section */}
-        {!wallet?.hasWallet && (
-          <Card className="mb-8 border-dashed border-2">
-            <CardContent className="py-8 text-center">
-              <Wallet className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
-              <h3 className="text-lg font-semibold mb-2">No Wallet Connected</h3>
-              <p className="text-muted-foreground mb-4">
-                Create a Solana wallet to start earning and spending $COOP tokens
-              </p>
-              <Button onClick={() => setIsCreateModalOpen(true)}>
-                <Plus className="mr-2 h-4 w-4" />
-                Create Wallet
-              </Button>
-            </CardContent>
-          </Card>
-        )}
-
+        {/* Wallet Section removed from here if redundant, or kept if we want it to show after creation */}
         {wallet?.hasWallet && (
           <Card className="mb-8">
             <CardHeader>
@@ -206,20 +240,32 @@ export default function DashboardPage() {
         )}
 
         {/* Tabs */}
-        <Tabs defaultValue="transactions" className="space-y-4">
-          <TabsList>
-            <TabsTrigger value="transactions">Transactions</TabsTrigger>
-            <TabsTrigger value="history">Watch History</TabsTrigger>
-          </TabsList>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2">
+            <Tabs defaultValue="transactions" className="space-y-4">
+              <TabsList>
+                <TabsTrigger value="transactions">Transactions</TabsTrigger>
+                <TabsTrigger value="history">Watch History</TabsTrigger>
+                <TabsTrigger value="requests">My Requests</TabsTrigger>
+              </TabsList>
           
           <TabsContent value="transactions">
             <TransactionList />
           </TabsContent>
           
-          <TabsContent value="history">
-            <WatchHistory />
-          </TabsContent>
-        </Tabs>
+              <TabsContent value="history">
+                <WatchHistory />
+              </TabsContent>
+              <TabsContent value="requests">
+                <RequestHistory />
+              </TabsContent>
+            </Tabs>
+          </div>
+          <div className="lg:col-span-1 space-y-8">
+            <ActivityFeed />
+            <Leaderboard />
+          </div>
+        </div>
       </main>
 
       <CreateWalletModal 
@@ -227,6 +273,13 @@ export default function DashboardPage() {
         onClose={() => setIsCreateModalOpen(false)}
         onCreated={loadData}
       />
+      <SearchRequestModal
+        open={isSearchModalOpen}
+        onClose={() => setIsSearchModalOpen(false)}
+        onRequested={loadData}
+        costs={requestCosts}
+        balance={wallet?.balance || 0}
+      />
     </div>
   );
 }