Collins (#330)

* refactor: update project components and API for voting functionality

- Adjust layout and styling in ProjectsPage and ProjectCard components.
- Enhance ProjectSidebar to include crowdfund data and voting logic.
- Implement new API methods for voting, retrieving votes, and removing votes.
- Update types for vote handling in the API.
- Clean up unused code and improve responsiveness across components.

* chore: update project dependencies and enhance project details layout

* feat: added static api for staging

* fix: made few changes

* fix: minor changes

* feat: chaged test data

* fix:  minor fixes

* refactor: update project components and improve functionality

* feat: file clean up

* feat:  added extra validation

* feat: integrate wallet protection and validation across components

Author: 0xdevcollins

app/providers.tsx

@@ -3,6 +3,7 @@
 import { SessionProvider } from 'next-auth/react';
 import { ReactNode } from 'react';
 import { AuthProvider } from '@/components/providers/auth-provider';
+import { WalletProvider } from '@/components/providers/wallet-provider';
 import { NotificationProvider } from 'react-notification-core';
 import {
   mockFetchNotifications,
@@ -19,19 +20,21 @@ export function Providers({ children }: ProvidersProps) {
   return (
     <SessionProvider>
       <AuthProvider>
-        <NotificationProvider
-          fetchNotifications={mockFetchNotifications}
-          onMarkAsRead={mockMarkAsRead}
-          onMarkAllAsRead={mockMarkAllAsRead}
-          onDeleteNotification={mockDeleteNotification}
-          fetchOptions={{
-            retryCount: 2,
-            retryDelay: 1000,
-            timeout: 5000,
-          }}
-        >
-          {children}
-        </NotificationProvider>
+        <WalletProvider>
+          <NotificationProvider
+            fetchNotifications={mockFetchNotifications}
+            onMarkAsRead={mockMarkAsRead}
+            onMarkAllAsRead={mockMarkAllAsRead}
+            onDeleteNotification={mockDeleteNotification}
+            fetchOptions={{
+              retryCount: 2,
+              retryDelay: 1000,
+              timeout: 5000,
+            }}
+          >
+            {children}
+          </NotificationProvider>
+        </WalletProvider>
       </AuthProvider>
     </SessionProvider>
   );

components/landing-page/navbar.tsx

@@ -29,7 +29,9 @@ import { User, LogOut, Settings } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import WalletConnectButton from '../wallet/WalletConnectButton';
 import CreateProjectModal from './project/CreateProjectModal';
+import { useProtectedAction } from '@/hooks/use-protected-action';
 import { useAuthStore } from '@/lib/stores/auth-store';
+import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
 
 gsap.registerPlugin(useGSAP);
 
@@ -229,6 +231,16 @@ function AuthenticatedNav({
   const { logout } = useAuthActions();
   const { isLoading } = useAuthStore();
   const [createProjectModalOpen, setCreateProjectModalOpen] = useState(false);
+
+  const {
+    executeProtectedAction,
+    showWalletModal,
+    closeWalletModal,
+    handleWalletConnected,
+  } = useProtectedAction({
+    actionName: 'create project',
+    onSuccess: () => setCreateProjectModalOpen(true),
+  });
   return (
     <div className='flex items-center space-x-3'>
       <WalletConnectButton />
@@ -243,7 +255,11 @@ function AuthenticatedNav({
           className='bg-background w-[300px] rounded-[8px] border border-[#2B2B2B] pt-3 pb-6 text-white shadow-[0_4px_4px_0_rgba(26,26,26,0.25)]'
         >
           <DropdownMenuItem
-            onClick={() => setCreateProjectModalOpen(true)}
+            onClick={async () => {
+              await executeProtectedAction(() =>
+                setCreateProjectModalOpen(true)
+              );
+            }}
             className='group hover:text-primary px-6 py-3.5 text-white hover:!bg-transparent'
           >
             <span className='group-hover:text-primary flex w-full items-center justify-between'>
@@ -366,6 +382,14 @@ function AuthenticatedNav({
         open={createProjectModalOpen}
         setOpen={setCreateProjectModalOpen}
       />
+
+      {/* Wallet Required Modal */}
+      <WalletRequiredModal
+        open={showWalletModal}
+        onOpenChange={closeWalletModal}
+        actionName='create project'
+        onWalletConnected={handleWalletConnected}
+      />
     </div>
   );
 }
@@ -375,6 +399,16 @@ function AuthenticatedNav({
 function UnauthenticatedNav() {
   const [createProjectModalOpen, setCreateProjectModalOpen] = useState(false);
 
+  const {
+    executeProtectedAction,
+    showWalletModal,
+    closeWalletModal,
+    handleWalletConnected,
+  } = useProtectedAction({
+    actionName: 'create project',
+    onSuccess: () => setCreateProjectModalOpen(true),
+  });
+
   const showDevAddProject =
     process.env.NODE_ENV !== 'production' &&
     (process.env.NEXT_PUBLIC_SHOW_ADD_PROJECT_FOR_GUESTS === 'true' || true);
@@ -391,7 +425,9 @@ function UnauthenticatedNav() {
     <div className='flex items-center space-x-3'>
       <BoundlessButton
         variant='outline'
-        onClick={() => setCreateProjectModalOpen(true)}
+        onClick={async () => {
+          await executeProtectedAction(() => setCreateProjectModalOpen(true));
+        }}
         className='border-white/20 text-white hover:bg-white/10'
       >
         <Plus className='mr-2 h-4 w-4' />
@@ -404,6 +440,14 @@ function UnauthenticatedNav() {
         open={createProjectModalOpen}
         setOpen={setCreateProjectModalOpen}
       />
+
+      {/* Wallet Required Modal */}
+      <WalletRequiredModal
+        open={showWalletModal}
+        onOpenChange={closeWalletModal}
+        actionName='create project'
+        onWalletConnected={handleWalletConnected}
+      />
     </div>
   );
 }