- {project.name}
+ {project.title}
{project.description}
diff --git a/components/Projects.tsx b/components/Projects.tsx
deleted file mode 100644
index 0431b396..00000000
--- a/components/Projects.tsx
+++ /dev/null
@@ -1,407 +0,0 @@
-'use client';
-import React, { useState, useEffect, useCallback } from 'react';
-import { RecentProjectsProps } from '@/types/project';
-import { Plus, ChevronDown } from 'lucide-react';
-import ProjectCard from './project-card';
-import EmptyState from './EmptyState';
-import { BoundlessButton } from './buttons';
-import { motion } from 'framer-motion';
-import { fadeInUp, staggerContainer } from '@/lib/motion';
-import { Button } from './ui/button';
-import { Tabs, TabsList, TabsTrigger } from './ui/tabs';
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from './ui/dropdown-menu';
-import Pagination from './ui/pagination';
-
-import { getProjects } from '@/lib/api/project';
-import { toast } from 'sonner';
-import { useAuth } from '@/hooks/use-auth';
-import { useProjectSheetStore } from '@/lib/stores/project-sheet-store';
-import { ProjectsSkeleton } from './skeleton/ProjectsSkeleton';
-
-// Strongly typed shape for the project objects returned by the API
-type ProjectApi = {
- _id: string;
- title: string;
- description: string;
- whitepaperUrl?: string;
- tags?: string[];
- category?: string;
- type?: string;
- status: string;
- createdAt: string;
- updatedAt: string;
- owner?: {
- type?: {
- _id?: string;
- profile?: {
- firstName?: string;
- lastName?: string;
- username?: string;
- avatar?: string;
- } | null;
- } | null;
- } | null;
-};
-
-type StatusFilter =
- | 'all'
- | 'idea'
- | 'under_review'
- | 'approved'
- | 'funding'
- | 'funded'
- | 'completed';
-type TabFilter = 'mine' | 'others';
-
-const Projects = () => {
- const [statusFilter, setStatusFilter] = useState('all');
- const [tabFilter, setTabFilter] = useState('mine');
- const [projects, setProjects] = useState([]);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
- const [currentPage, setCurrentPage] = useState(1);
- const [totalPages, setTotalPages] = useState(1);
- const [totalItems, setTotalItems] = useState(0);
- const { user, isAuthenticated } = useAuth(false);
- const sheet = useProjectSheetStore();
-
- const ITEMS_PER_PAGE = 9;
-
- const filterOptions = [
- { value: 'all', label: 'All' },
- { value: 'idea', label: 'Ideas' },
- { value: 'under_review', label: 'Under Review' },
- { value: 'approved', label: 'Approved' },
- { value: 'funding', label: 'Funding' },
- { value: 'funded', label: 'Funded' },
- { value: 'completed', label: 'Completed' },
- ];
-
- const fetchProjects = useCallback(
- async (pageNum = 1) => {
- try {
- setLoading(true);
- setError(null);
-
- // Build filters based on current state
- const filters: { status?: string; owner?: string } = {};
-
- if (statusFilter !== 'all') {
- filters.status = statusFilter;
- }
-
- // Add owner filter for "mine" tab
- if (tabFilter === 'mine' && isAuthenticated && user) {
- filters.owner = user.id;
- }
-
- const response = await getProjects(pageNum, ITEMS_PER_PAGE, filters);
-
- const apiProjects = (response.projects ??
- []) as unknown as ProjectApi[];
- const transformedProjects: RecentProjectsProps[] = apiProjects.map(
- project => ({
- id: project._id,
- name: project.title,
- description: project.description,
- image: project.whitepaperUrl || '/banner.png',
- link: `/projects/${project._id}`,
- tags: project.tags || [],
- category: project.category ?? 'unknown',
- type: project.type ?? 'unknown',
- amount: 0,
- status: project.status,
- createdAt: project.createdAt,
- updatedAt: project.updatedAt,
- // Add owner information for filtering
- owner: project.owner?.type?._id || null,
- ownerName: project.owner?.type?.profile
- ? `${project.owner.type.profile.firstName} ${project.owner.type.profile.lastName}`
- : 'Anonymous',
- ownerUsername:
- project.owner?.type?.profile?.username || 'anonymous',
- ownerAvatar: project.owner?.type?.profile?.avatar || '',
- })
- );
-
- setProjects(transformedProjects);
-
- // Update pagination state
- if (response.pagination) {
- setTotalPages(response.pagination.totalPages || 1);
- setTotalItems(response.pagination.totalItems || 0);
- }
- } catch {
- setError('Failed to fetch projects');
- toast.error('Failed to fetch projects');
- } finally {
- setLoading(false);
- }
- },
- [isAuthenticated, statusFilter, tabFilter, user]
- );
-
- useEffect(() => {
- setCurrentPage(1);
- fetchProjects(1);
- }, [statusFilter, tabFilter, isAuthenticated, user?.id, fetchProjects]);
-
- const handlePageChange = (page: number) => {
- setCurrentPage(page);
- fetchProjects(page);
- };
-
- if (loading) {
- return (
-
-
-
- );
- }
-
- return (
-
-
-
- setTabFilter(value as TabFilter)}
- className='w-full sm:w-auto'
- >
-
-
- My Projects
-
-
- Explore ({totalItems})
-
-
-
-
-
- setStatusFilter(value as StatusFilter)}
- className='w-full sm:w-auto'
- >
-
-
- All
-
-
- Funding
-
-
- Funded
-
-
-
-
-
-
- {
- filterOptions.find(option => option.value === statusFilter)
- ?.label
- }{' '}
-
-
-
-
- {filterOptions.map(option => (
- setStatusFilter(option.value as StatusFilter)}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- {option.label}
-
- ))}
-
-
-
-
-
- {/* Authentication Notice */}
- {!isAuthenticated && (
-
-
- ๐ You're not signed in. Sign in to see your projects in the "Mine"
- tab.
-
-
- )}
-
- {/* Projects Grid */}
-
- {error ? (
-
-
-
-
{error}
-
-
-
-
-
-
- );
- }
-
- if (filteredProjects.length > 0) {
- return filteredProjects.map((project, index) => (
-
-
-
- ));
- } else {
- return (
-
-
- }
- iconPosition='right'
- onClick={() => {
- sheet.openInitialize();
- }}
- >
- New Project
-
- ) : undefined
- }
- />
-
-
- );
- }
- })()
- )}
-
-
- {/* Pagination */}
- {totalPages > 1 && (
-
-
-
- )}
-
- );
-};
-
-export default Projects;
diff --git a/components/auth/AuthGuard.tsx b/components/auth/AuthGuard.tsx
new file mode 100644
index 00000000..f924a22e
--- /dev/null
+++ b/components/auth/AuthGuard.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { useRequireAuthEnhanced } from '@/hooks/use-auth';
+
+interface AuthGuardProps {
+ children: ReactNode;
+ redirectTo?: string;
+ fallback?: ReactNode;
+}
+
+export function AuthGuard({
+ children,
+ redirectTo = '/auth?mode=signin',
+ fallback = (
+
+ ),
+}: AuthGuardProps) {
+ const { isPending, isAuthenticated } = useRequireAuthEnhanced(redirectTo);
+
+ if (isPending) {
+ return <>{fallback};
+ }
+
+ if (!isAuthenticated) {
+ return null; // Will redirect via useRequireAuthEnhanced
+ }
+
+ return <>{children};
+}
diff --git a/components/auth/README.md b/components/auth/README.md
new file mode 100644
index 00000000..14d0cbb3
--- /dev/null
+++ b/components/auth/README.md
@@ -0,0 +1,144 @@
+# Authentication Patterns
+
+This directory contains reusable authentication patterns for Better Auth integration with Next.js. These patterns provide different ways to handle authentication throughout your application.
+
+## Available Patterns
+
+### 1. Enhanced Hook (`useRequireAuthEnhanced`)
+
+A simplified hook that automatically redirects unauthenticated users.
+
+```typescript
+import { useRequireAuthEnhanced } from '@/hooks/use-auth'
+
+function MyComponent() {
+ const { session, isPending, isAuthenticated } = useRequireAuthEnhanced('/login')
+
+ if (isPending) return Loading...
+ if (!isAuthenticated) return null // Will redirect automatically
+
+ return Welcome {session.user.name}!
+}
+```
+
+### 2. Higher-Order Component (`withAuth`)
+
+Wraps components to require authentication.
+
+```typescript
+import { withAuth } from '@/components/auth'
+
+function Dashboard({ session }) {
+ return Welcome {session.user.name}
+}
+
+const ProtectedDashboard = withAuth(Dashboard, '/login')
+```
+
+### 3. Auth Guard Component (`AuthGuard`)
+
+A component wrapper that protects its children.
+
+```typescript
+import { AuthGuard } from '@/components/auth'
+
+function App() {
+ return (
+ } redirectTo="/login">
+
+
+ )
+}
+```
+
+### 4. Auth Context Provider (`AuthProvider`)
+
+Provides authentication state throughout the component tree.
+
+```typescript
+import { AuthProvider, useAuthContext } from '@/components/auth'
+
+function App() {
+ return (
+
+
+
+ )
+}
+
+function Profile() {
+ const { data: session, isPending } = useAuthContext()
+ // Use session data...
+}
+```
+
+### 5. Client Utilities (`requireAuthClient`)
+
+Programmatic authentication checks for actions.
+
+```typescript
+import {
+ requireAuthClient,
+ handleProtectedAction,
+} from '@/lib/auth/client-utils';
+
+async function deleteAccount() {
+ const session = await requireAuthClient();
+ if (!session) return;
+
+ // Proceed with deletion...
+}
+```
+
+## Integration with Existing Auth
+
+These patterns work alongside your existing `ProtectedRoute` component:
+
+- **Use `ProtectedRoute`** for complex requirements (roles, verification, etc.)
+- **Use these patterns** for simple authentication requirements
+- **Combine patterns** as needed for your specific use cases
+
+## Quick Start
+
+```typescript
+// In your layout or _app.tsx
+import { AuthProvider } from '@/components/auth'
+
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+
+// In components
+import { AuthGuard, withAuth } from '@/components/auth'
+import { useRequireAuthEnhanced } from '@/hooks/use-auth'
+```
+
+## Best Practices
+
+1. **Choose the right pattern** for your use case:
+ - Simple auth checks โ `useRequireAuthEnhanced`
+ - Component wrapping โ `withAuth` or `AuthGuard`
+ - Global state access โ `AuthProvider`
+ - Programmatic checks โ `requireAuthClient`
+
+2. **Use consistent redirect URLs** across your app
+
+3. **Combine with existing patterns** when needed
+
+4. **Test authentication flows** in development
+
+## Migration from Existing Code
+
+Your existing authentication patterns remain unchanged. These new patterns provide additional options:
+
+- `useAuth()` โ Still available for complex auth logic
+- `ProtectedRoute` โ Still available for advanced requirements
+- `useRequireAuthEnhanced` โ Simpler alternative for basic auth
+
+## Examples
+
+See `examples.tsx` for comprehensive usage examples showing all patterns working together.
diff --git a/components/auth/SignupForm.tsx b/components/auth/SignupForm.tsx
index eb54eff3..950807da 100644
--- a/components/auth/SignupForm.tsx
+++ b/components/auth/SignupForm.tsx
@@ -4,7 +4,7 @@ import { LockIcon, MailIcon, User } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import z from 'zod';
@@ -19,7 +19,6 @@ import {
FormMessage,
} from '../ui/form';
import { Input } from '../ui/input';
-import OtpForm from './OtpForm';
import { authClient } from '@/lib/auth-client';
const formSchema = z.object({
@@ -51,8 +50,6 @@ const SignupForm = ({
lastMethod,
}: SignupFormProps) => {
const router = useRouter();
- const [step, setStep] = useState<'signup' | 'otp'>('signup');
- const [userData, setUserData] = useState<{ email: string } | null>(null);
const isGoogleLastUsed = lastMethod === 'google';
const form = useForm>({
@@ -90,9 +87,12 @@ const SignupForm = ({
// Loading state handled by form
},
onSuccess: () => {
- setUserData({ email: values.email });
- setStep('otp');
- toast.success('OTP sent to your email!');
+ toast.success(
+ 'Verification email sent! Please check your email to verify your account. You will be automatically logged in once verified.'
+ );
+ router.push(
+ '/auth/check-email?email=' + encodeURIComponent(values.email)
+ );
},
onError: ctx => {
if (ctx.error.status === 409 || ctx.error.code === 'CONFLICT') {
@@ -133,40 +133,6 @@ const SignupForm = ({
}
};
- const handleOtpSuccess = () => {
- router.push('/auth?mode=signin');
- };
-
- const handleResendOtp = async () => {
- if (!userData) return;
-
- try {
- const { data, error } = await authClient.emailOtp.sendVerificationOtp({
- email: userData.email,
- type: 'email-verification',
- });
-
- if (data) {
- toast.success('OTP resent successfully!');
- } else if (error) {
- toast.error(error.message || 'Failed to resend OTP');
- }
- } catch {
- toast.error('Failed to resend OTP');
- }
- };
-
- if (step === 'otp' && userData) {
- return (
-
- );
- }
-
return (
<>
diff --git a/components/auth/index.ts b/components/auth/index.ts
new file mode 100644
index 00000000..c7b16301
--- /dev/null
+++ b/components/auth/index.ts
@@ -0,0 +1,13 @@
+// Export all authentication components and utilities
+export { withAuth } from './withAuth';
+export { AuthGuard } from './AuthGuard';
+export { AuthProvider, useAuthContext } from '../providers/AuthProvider';
+
+// Re-export existing components for convenience
+export {
+ ProtectedRoute,
+ RequireAuth,
+ RequireVerified,
+ RequireAdmin,
+ RequireUser,
+} from './protected-route';
diff --git a/components/auth/withAuth.tsx b/components/auth/withAuth.tsx
new file mode 100644
index 00000000..139d577e
--- /dev/null
+++ b/components/auth/withAuth.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { ComponentType } from 'react';
+import { useRequireAuthEnhanced } from '@/hooks/use-auth';
+
+export function withAuth
(
+ Component: ComponentType,
+ redirectTo = '/auth?mode=signin'
+) {
+ return function AuthenticatedComponent(props: T) {
+ const { session, isPending, isAuthenticated } =
+ useRequireAuthEnhanced(redirectTo);
+
+ if (isPending) {
+ return (
+
+ );
+ }
+
+ if (!isAuthenticated) {
+ return null; // Will redirect via useRequireAuthEnhanced
+ }
+
+ return ;
+ };
+}
diff --git a/components/bounties/BountyComments.tsx b/components/bounties/BountyComments.tsx
new file mode 100644
index 00000000..9907b171
--- /dev/null
+++ b/components/bounties/BountyComments.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { useAuth } from '@/hooks/use-auth';
+import { GenericCommentThread } from '@/components/comments/GenericCommentThread';
+import { useCommentSystem } from '@/hooks/use-comment-system';
+import { CommentEntityType } from '@/types/comment';
+
+interface BountyCommentsProps {
+ bountyId: string;
+}
+
+export function BountyComments({ bountyId }: BountyCommentsProps) {
+ const { user } = useAuth();
+
+ // Initialize the comment system for this bounty
+ const commentSystem = useCommentSystem({
+ entityType: CommentEntityType.BOUNTY,
+ entityId: bountyId,
+ page: 1,
+ limit: 20,
+ enabled: true,
+ });
+
+ // Current user info for the comment system
+ const currentUser = user
+ ? {
+ id: user.id,
+ name: user.name || user.email || 'Anonymous',
+ username: user.profile?.username || undefined,
+ image: user.image || undefined,
+ isModerator: user.role === 'ADMIN',
+ }
+ : {
+ id: 'anonymous',
+ name: 'Anonymous',
+ username: undefined,
+ image: undefined,
+ isModerator: false,
+ };
+
+ return (
+
+
+
Bounty Discussion
+
+ Discuss requirements, ask questions, and collaborate on this bounty
+
+
+
+
+
-
-
-
-
-
-
-
-
Boundless
- Successful
-
-
- #web3
- #crowdfunding
-
-
-
-
-
- CN
-
-
-
- Collins Odumeje
-
-
-
-
- This campaign successfully reached its funding goal.
- Contributions are now being distributed through escrow as
- milestones are completed.{' '}
-
- Click to track milestone progress
-
-
-
-
-
-
-
Raised
-
- $123,000.00
-
-
-
-
Target
-
- $123,000.00
-
-
-
-
-
-
-
-
- 100k
-
-
-
- 100k
-
-
-
-
-
- 100 backers
-
-
-
-
- 100 days left
-
-
-
-
-
-
-
- Campaign Details
-
-
-
- Boundless is a trustless, decentralized application (dApp)
- that empowers changemakers and builders to raise funds
- transparently without intermediaries. Campaigns are structured
- around clearly defined milestones, with funds held in escrow
- and released only upon approval. Grant creators can launch
- programs with rule-based logic, and applicants can apply with
- proposals that go through public validation. The platform is
- built on the Stellar blockchain and powered by Soroban smart
- contracts to ensure transparency, security, and autonomy.
-
-
-
-
-
Milestones
-
- {milestones.map((milestone, idx) => {
- const isExpanded = expandedMilestone === milestone.id;
- return (
-
-
- Milestone {idx + 1}
-
-
-
toggle(milestone.id)}
- >
-
- {milestone.title || `Milestone ${idx + 1}`}
-
-
-
- {isExpanded && (
-
-
- {milestone.description}
-
-
-
-
-
- {formatDate(milestone.deliveryDate)}
-
-
-
-
- $
- {calculateFundAmount(
- milestone.fundPercentage
- ).toLocaleString()}{' '}
- ({milestone.fundPercentage || 0}%)
-
-
-
-
- )}
-
-
- );
- })}
-
-
-
-
-
- Backing History
-
-
-
-
- {backingHistory.map(backer => (
-
-
-
-
-
-
- {backer.name.charAt(0)}
-
-
- {backer.isVerified && (
-
-
-
- )}
-
-
-
- {backer.name}
-
-
-
- {backer.wallet}
-
-
-
-
-
- ${backer.amount.toLocaleString()}
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
- {campaign.name}
-
-
- {campaign.tags.join(' ')}
-
-
-
-
-
-
-
-
-
- {campaign.creator.name
- .split(' ')
- .map(n => n[0])
- .join('')}
-
-
- {campaign.creator.verified && (
-
-
-
- )}
-
-
- {campaign.creator.name}
-
-
-
-
-
- ${campaign.fundingProgress.current.toLocaleString()} /
-
- ${campaign.fundingProgress.target.toLocaleString()}
-
-
-
-
-
-
- {campaign.endDate}
-
-
-
- {campaign.milestones}
-
-
-
-
- {campaign.status}
-
-
-
-
-
-
-
-
-
- {campaign.status === 'live' && (
- <>
- handleAction('back-project')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- Back Project
-
- handleAction('share')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- Share
-
- handleAction('view-history')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- View History
-
- handleAction('like')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- Like ({campaign.likes})
-
- handleAction('comment')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- Comment ({campaign.comments})
-
- handleAction('campaign-details')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- Campaign Details
-
-
- )}
- {campaign.status === 'successful' && (
- <>
- handleAction('view-summary')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- View Summary
-
- handleAction('like')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- Like ({campaign.likes})
-
- handleAction('comment')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- Comment ({campaign.comments})
-
-
- )}
- {campaign.status === 'failed' && (
- <>
- handleAction('view-summary')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- View Summary
-
- handleAction('like')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- Like ({campaign.likes})
-
- handleAction('comment')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- Comment ({campaign.comments})
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- {campaign.name}
-
-
- {campaign.tags.join(' ')}
-
-
-
-
-
- {campaign.status}
-
-
-
-
-
-
- {campaign.status === 'live' && (
- <>
- handleAction('share')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- Share
-
- handleAction('view-history')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- View History
-
- handleAction('like')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- Like ({campaign.likes})
-
- handleAction('comment')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- Comment ({campaign.comments})
-
- handleAction('campaign-details')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- Campaign Details
-
-
- )}
- {campaign.status === 'successful' && (
- <>
- handleAction('view-summary')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- View Summary
-
- handleAction('like')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- Like ({campaign.likes})
-
- handleAction('comment')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- Comment ({campaign.comments})
-
-
- )}
- {campaign.status === 'failed' && (
- <>
- handleAction('view-summary')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- View Summary
-
- handleAction('like')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- Like ({campaign.likes})
-
- handleAction('comment')}
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white'
- >
- Comment ({campaign.comments})
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- {campaign.creator.name
- .split(' ')
- .map(n => n[0])
- .join('')}
-
-
- {campaign.creator.verified && (
-
-
-
- )}
-
-
- {campaign.creator.name}
-
-
-
-
-
- ${campaign.fundingProgress.current.toLocaleString()} / $
- {campaign.fundingProgress.target.toLocaleString()}
-
-
-
-
-
-
- End Date: {campaign.endDate}
-
-
- Milestones:{' '}
- {campaign.milestones}
-
-
-
-
-
-
- );
- }
-
- return (
-
-
-
-
- Campaigns
-
- {/*
-
- */}
-
-
- setTabFilter(value as TabFilter)}
- className='w-full sm:w-auto'
- >
-
-
- Mine
-
-
- Others
-
-
-
-
-
-
- {
- filterOptions.find(option => option.value === statusFilter)
- ?.label
- }{' '}
-
-
-
-
- {filterOptions.map(option => (
-
- setStatusFilter(
- option.value as 'all' | 'live' | 'successful' | 'failed'
- )
- }
- className='cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-200 hover:!bg-[#2B2B2B] hover:!text-white hover:shadow-[0_1px_4px_0_rgba(40,45,40,0.04),_0_0_24px_1px_rgba(10,15,10,0.14)]'
- >
- {option.label}
-
- ))}
-
-
-
-
-
-
-
Campaign Name
-
Creator
-
Funding Progress
-
End Date
-
Milestones
-
Status
-
Actions
-
-
-
- {error ? (
-
-
-
{error}
-
-
-
- ) : campaigns.length === 0 ? (
-
-
-
-
-
-
- No Active Campaigns
-
-
- Projects you vote on, comment on, or fund will appear here. Get
- involved and support ideas that matter to you.
-
-
-
- ) : (
- campaigns.map(campaign => (
-
- ))
- )}
-
- {showPagination && campaigns.length > 0 && (
-
- )}
-
-
-
-
-
- {/* Header with Progress Steps */}
-
-
- {currentPhase === 'details' ? 'Set Campaign Details' : 'Escrow Setup'}
-
-
-
- {phases.map((phase, index) => (
-
- ))}
-
-
-
-
- {currentPhase === 'details' ? (
-
- ) : (
-
requireWallet(onComplete)}
- />
- )}
-
- {/* Wallet Required Modal */}
-
-
- {/* Campaign Title */}
-
-
-
-
-
onInputChange('title', e.target.value)}
- type='text'
- className='text-placeholder w-full bg-transparent text-base font-normal focus:outline-none'
- placeholder='Enter campaign title'
- />
-
-
-
-
-
-