Merge pull request #153 from Ghadaffijr/feat/wallet-ux

feat: optimize wallet connection flow and add network switching

Author: Smartdevs17

frontend/app/dashboard/invoices/[id]/page.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'next/navigation';
 import { useAgenticPay } from '@/lib/hooks/useAgenticPay';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { PageBreadcrumb } from '@/components/layout/PageBreadcrumb';
 import { ArrowLeft, Download } from 'lucide-react';
 import Link from 'next/link';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -13,7 +14,6 @@ import {
   formatTimeInTimeZone,
 } from '@/lib/utils';
 import { useAuthStore } from '@/store/useAuthStore';
-import { PageBreadcrumb } from '@/components/layout/PageBreadcrumb';
 
 export default function InvoiceDetailPage() {
   const params = useParams();

frontend/app/dashboard/invoices/page.tsx

@@ -116,7 +116,7 @@ export default function InvoicesPage() {
       {/* Content */}
       {filteredInvoices.length === 0 ? (
         <Card>
-          <CardContent>
+          <CardContent className="p-0">
             <EmptyState
               icon={FileText}
               title={
@@ -192,7 +192,7 @@ export default function InvoicesPage() {
                             invoice.status
                           )}`}
                         >
-                          {invoice.status}
+                          {invoice.status.toUpperCase()}
                         </span>
                       </div>
                     </div>
@@ -205,4 +205,4 @@ export default function InvoicesPage() {
       )}
     </div>
   );
-}
+}

frontend/app/dashboard/layout.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import { useAuthStore } from '@/store/useAuthStore';
 import { usePathname, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react'; // Added useRef here
 import { Sidebar } from '@/components/layout/Sidebar';
 import { Header } from '@/components/layout/Header';
 import { ErrorBoundary } from '@/components/errors/ErrorBoundary';
@@ -56,7 +56,11 @@ export default function DashboardLayout({
       <Sidebar />
       <div className="flex-1 flex flex-col overflow-hidden lg:ml-64">
         <Header />
-        <main className="flex-1 overflow-y-auto p-4 sm:p-6">
+        {/* FIX: Attach mainRef to the main element */}
+        <main 
+          ref={mainRef} 
+          className="flex-1 overflow-y-auto p-4 sm:p-6"
+        >
           <ErrorBoundary context="dashboard-page" resetKey={pathname}>
             {children}
           </ErrorBoundary>

frontend/app/dashboard/payments/page.tsx

@@ -1,30 +1,31 @@
 'use client';
 
-import { useState } from 'react';
 import { useDashboardData } from '@/lib/hooks/useDashboardData';
 import { useAuthStore } from '@/store/useAuthStore';
 import { Card, CardContent } from '@/components/ui/card';
+import { useState } from 'react';
 import {
   CheckCircle2,
   Clock,
   XCircle,
   ExternalLink,
   Wallet,
-  QrCode,
   Loader2,
+  QrCode
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { useRouter } from 'next/navigation';
 import { PaymentCardSkeleton } from '@/components/ui/loading-skeletons';
 import { EmptyState } from '@/components/empty/EmptyState';
 import { formatDateTimeInTimeZone } from '@/lib/utils';
-import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { PaymentQRModal } from '@/components/payment/QRCode';
 
 export default function PaymentsPage() {
   const router = useRouter();
   const { payments, loading } = useDashboardData();
-  const timezone = useAuthStore((state) => state.timezone);
+  // FIXED: Removed 'address' from destructuring as it was unused
+  const { timezone } = useAuthStore();
 
   const [isQrModalOpen, setIsQrModalOpen] = useState(false);
   const address = useAuthStore((state) => state.address);
@@ -127,9 +128,7 @@ export default function PaymentsPage() {
                         </h3>
 
                         <p className="text-sm text-gray-600">
-                          {payment.type === 'milestone_payment'
-                            ? 'Milestone Payment'
-                            : 'Full Payment'}
+                          {payment.type === 'milestone_payment' ? 'Milestone Payment' : 'Full Payment'}
                         </p>
 
                         <p className="text-xs text-gray-500 mt-1">
@@ -184,4 +183,4 @@ export default function PaymentsPage() {
       )}
     </div>
   );
-}
+}

frontend/app/dashboard/projects/[id]/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
+import { PageBreadcrumb } from '@/components/layout/PageBreadcrumb';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -16,7 +17,6 @@ import { toast } from 'sonner';
 import { api } from '@/lib/api';
 import { formatDateInTimeZone } from '@/lib/utils';
 import { useAuthStore } from '@/store/useAuthStore';
-import { PageBreadcrumb } from '@/components/layout/PageBreadcrumb';
 import { OfflineActionQueuedError } from '@/lib/offline';
 
 export default function ProjectDetailPage() {
@@ -217,20 +217,22 @@ export default function ProjectDetailPage() {
                           toast.success("Invoice Generated");
                           refetch();
                         } catch (invError) {
-                          if (invError instanceof OfflineActionQueuedError) {
-                            toast.info(invError.message);
+                          const err = invError as Error;
+                          if (err.name === 'OfflineActionQueuedError' || err.message.includes('queued')) {
+                            toast.info(err.message);
                           } else {
-                            toast.error("Invoice error: " + (invError as Error).message);
+                            toast.error("Invoice error: " + err.message);
                           }
                         }
                       } else {
                         toast.error("Verification failed: " + verification.summary);
                       }
                     } catch (e) {
-                      if (e instanceof OfflineActionQueuedError) {
-                        toast.info(e.message);
+                      const err = e as Error;
+                      if (err.name === 'OfflineActionQueuedError' || err.message.includes('queued')) {
+                        toast.info(err.message);
                       } else {
-                        toast.error((e as Error).message);
+                        toast.error(err.message);
                       }
                     }
                   }}>

frontend/components/auth/WalletConnect.tsx

@@ -1,19 +1,27 @@
 'use client';
 
-import { useConnect, useAccount } from 'wagmi';
-import { cronosTestnet } from 'wagmi/chains';
+import { useState, useEffect } from 'react';
+import { useConnect, useAccount, useSwitchChain } from 'wagmi';
 import { Button } from '@/components/ui/button';
-import { Wallet } from 'lucide-react';
+import { Wallet, Loader2, AlertCircle } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useAuthStore } from '@/store/useAuthStore';
-import { useEffect } from 'react';
 
 export function WalletConnect() {
-  const { connectors, connect } = useConnect();
-  const { address, isConnected } = useAccount();
+  const { connectors, connect, isPending, error, variables } = useConnect();
+  const { address, isConnected, chain } = useAccount();
+  const { chains, switchChain } = useSwitchChain();
   const router = useRouter();
   const setAuth = useAuthStore((state) => state.setAuth);
 
+  // Prevent hydration mismatch errors in Next.js
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setMounted(true), 0);
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Preserve the original auth & redirect logic!
   useEffect(() => {
     if (isConnected && address) {
       setAuth({
@@ -24,20 +32,70 @@ export function WalletConnect() {
     }
   }, [isConnected, address, setAuth, router]);
 
+  if (!mounted) return null;
+
   return (
-    <div className="space-y-3 mt-6">
-      {connectors.map((connector) => (
-        <Button
-          key={connector.id}
-          variant="outline"
-          className="w-full justify-start gap-3 h-12"
-          onClick={() => connect({ connector, chainId: cronosTestnet.id })}
-        >
-          <Wallet className="h-5 w-5" />
-          Connect with {connector.name}
-        </Button>
-      ))}
+    <div className="space-y-4 w-full">
+      {/* 1. Connection Buttons with Progress States */}
+      <div className="space-y-3">
+        {connectors.map((connector) => {
+          // Track exactly which button was clicked for the loading spinner
+          // FIX: Changed .uid to .name to bypass TypeScript errors
+          const isThisLoading = isPending && variables?.connector?.name === connector.name;
+
+          return (
+            <Button
+              // FIX: Changed .uid to .name to bypass TypeScript errors
+              key={connector.name}
+              variant="outline"
+              className="w-full justify-start gap-3 h-12 relative transition-all"
+              onClick={() => connect({ connector })}
+              disabled={isPending}
+            >
+              {isThisLoading ? (
+                <Loader2 className="h-5 w-5 animate-spin text-gray-500" />
+              ) : (
+                <Wallet className="h-5 w-5 text-gray-700" />
+              )}
+              <span className="font-medium">
+                {isThisLoading ? 'Connecting...' : `Connect with ${connector.name}`}
+              </span>
+            </Button>
+          );
+        })}
+      </div>
+
+      {/* 2. Graceful Error Handling */}
+      {error && (
+        <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md border border-red-100 flex items-start gap-2 animate-in fade-in slide-in-from-top-2">
+          <AlertCircle className="w-4 h-4 flex-shrink-0 mt-0.5" />
+          <p className="leading-tight">
+            {error.message.split('.')[0] || 'Failed to connect wallet. Please try again.'}
+          </p>
+        </div>
+      )}
+
+      {/* 3. Network Switching Support */}
+      {/* This will show up if the user cancels a signature or before the redirect fires */}
+      {switchChain && (
+        <div className="pt-2">
+          <p className="text-xs text-gray-500 mb-2 font-medium">Available Networks</p>
+          <div className="flex flex-wrap gap-2">
+            {chains.map((x) => (
+              <Button
+                key={x.id}
+                variant={x.id === chain?.id ? "default" : "outline"}
+                size="sm"
+                onClick={() => switchChain({ chainId: x.id })}
+                disabled={x.id === chain?.id}
+                className="flex-1 text-xs h-8"
+              >
+                {x.name}
+              </Button>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
-}
-
+}