Launch Campaign: Review and Launch Implementation (#125)

* feat: implement Launch Campaign feature with review and success components- Added new components for Launch Campaign flow, including ReviewCampaign and CampaignLiveSuccess.- Integrated campaign details fetching and launching functionality.- Implemented share functionality for campaigns with social media options.- Updated project structure to include new components and API endpoints for campaign management.- Enhanced user experience with loading states and error handling during campaign launch.

* feat: enhance ReviewCampaign component and add slim scrollbar styling

- Updated ReviewCampaign component layout for improved responsiveness and visual hierarchy.
- Replaced User icon with UserCheck2 for better representation of verified users.
- Added financial target display and progress bar for clearer fundraising metrics.
- Enhanced engagement metrics section with consistent styling.
- Introduced slim scrollbar styling in globals.css for a cleaner UI experience.

* refactor: clean up middleware code for better readability and functionality

- Removed commented-out code for protected route checks.
- Ensured the logic for redirecting unauthenticated users to the signin page is active and properly formatted.

* feat: update CampaignLiveSuccess and LaunchCampaignFlow components for improved UI and functionality

- Refactored button styles in CampaignLiveSuccess for better visual consistency.
- Added mock campaign details in LaunchCampaignFlow to enhance campaign setup.
- Updated LoadingSpinner color in LaunchCampaignFlow for improved visibility during loading states.

* fix: resolve SSR build errors for user pages and auth components

- Add dynamic rendering to user layout to prevent pre-rendering issues
- Add client-side hydration checks to user page and sidebar components
- Fix localStorage and cookie access for SSR compatibility
- Remove problematic static generation exports
- Ensure auth hooks only run on client side

* feat: added progress bar

* feat: added campaign images

* feat: dropdown fixes

* Update CampaignLiveSuccess.tsx

* fix: reverted some changes

---------

Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com>

Author: 0xDeon

.env.example

@@ -1,35 +1,52 @@
+# Stellar Network Configuration
 NEXT_PUBLIC_STELLAR_NETWORK=testnet
+# Options: testnet, public
 
+# Application Configuration
 NEXT_PUBLIC_APP_URL=http://localhost:3000
+# Your application's public URL
 
-NEXT_PUBLIC_API_URL=https://staging-api.boundlessfi.xyz/api
+# API Configuration
+NEXT_PUBLIC_API_URL=http://localhost:8000/api
+# Your backend API URL
 
+# WalletConnect Configuration
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_wallet_connect_project_id
 # Get this from https://cloud.walletconnect.com/
 
+# Stellar Horizon URLs (optional - defaults will be used)
 NEXT_PUBLIC_HORIZON_TESTNET_URL=https://horizon-testnet.stellar.org
 NEXT_PUBLIC_HORIZON_PUBLIC_URL=https://horizon.stellar.org
 
+# Application Metadata
 NEXT_PUBLIC_APP_NAME=Boundless
 NEXT_PUBLIC_APP_DESCRIPTION=Stellar-based application
 NEXT_PUBLIC_APP_ICON=/logo.svg
 
+# Development Settings
 NEXT_PUBLIC_DEBUG_MODE=false
+# Enable debug logging for wallet operations
 
+# Feature Flags
 NEXT_PUBLIC_ENABLE_WALLET_CONNECT=true
 NEXT_PUBLIC_ENABLE_MULTI_WALLET=true
 NEXT_PUBLIC_ENABLE_NETWORK_SWITCHING=true
 
+# NextAuth Configuration
 NEXTAUTH_SECRET=your_nextauth_secret_here
+# Generate a random string for this secret
+# You can use: openssl rand -base64 32
 
 NEXTAUTH_URL=http://localhost:3000
+# Your application's public URL (same as NEXT_PUBLIC_APP_URL)
 
+# Google OAuth Configuration
 GOOGLE_CLIENT_ID=your_google_client_id
+# Get this from Google Cloud Console
 
 GOOGLE_CLIENT_SECRET=your_google_client_secret
+# Get this from Google Cloud Console
 
+# Environment
 NODE_ENV=development
-
-
-
-
+# Options: development, production, test

LAUNCH_CAMPAIGN_README.md

@@ -0,0 +1,201 @@
+# Launch Campaign: Review and Launch Implementation
+
+This document describes the implementation of the Launch Campaign: Review and Launch feature for the Boundless platform.
+
+## Overview
+
+The Launch Campaign feature allows users to review their campaign details and launch their campaign after completing the initialization and validation steps. The implementation includes:
+
+1. **Review Campaign Screen** - Displays all campaign details for final review
+2. **Campaign Live Success Screen** - Shows success message after launch
+3. **Share Campaign Modal** - Allows sharing on social media platforms
+4. **API Integration** - Mock endpoints for testing
+
+## Components
+
+### 1. ReviewCampaign Component
+
+- **Location**: `components/project/ReviewCampaign.tsx`
+- **Purpose**: Displays campaign details for final review before launch
+- **Features**:
+  - Campaign header with creator info and financials
+  - Engagement metrics (likes, comments, backers, days left)
+  - Campaign description and tags
+  - Campaign photos gallery
+  - Expandable milestones with details
+  - Confirmation checkbox
+  - Back and Launch buttons
+
+### 2. CampaignLiveSuccess Component
+
+- **Location**: `components/project/CampaignLiveSuccess.tsx`
+- **Purpose**: Displays success screen after campaign launch
+- **Features**:
+  - Large checkmark icon
+  - Success message
+  - Campaign preview
+  - Back to Dashboard and Share buttons
+  - Campaign link with copy functionality
+
+### 3. ShareCampaignModal Component
+
+- **Location**: `components/project/ShareCampaignModal.tsx`
+- **Purpose**: Modal for sharing campaign on social media
+- **Features**:
+  - Copyable campaign link
+  - Social media sharing buttons (Discord, X/Twitter, WhatsApp, Telegram)
+  - Campaign preview
+  - Copy to clipboard functionality
+
+### 4. LaunchCampaignFlow Component
+
+- **Location**: `components/project/LaunchCampaignFlow.tsx`
+- **Purpose**: Manages the entire launch flow
+- **Features**:
+  - State management for review, launching, and success steps
+  - Loading states during campaign launch
+  - Error handling
+  - Integration with API endpoints
+
+## API Endpoints
+
+### Mock Implementation
+
+The following endpoints are currently mocked for testing:
+
+1. **getCampaignDetails(projectId)** - Fetches campaign details for review
+2. **launchCampaign(projectId)** - Launches the campaign (simulates blockchain deployment)
+3. **generateCampaignLink(projectId)** - Generates shareable campaign link
+
+### Real Implementation
+
+When backend endpoints are available, replace the mock implementations in `lib/api/project.ts` with actual API calls.
+
+## Integration
+
+### ProjectSheetFlow Integration
+
+The Launch Campaign step has been integrated into the existing `ProjectSheetFlow` component:
+
+1. **Step 1**: Initialize (existing)
+2. **Step 2**: Validate (existing, updated with onSuccess callback)
+3. **Step 3**: Launch Campaign (new)
+
+### Flow Progression
+
+- After validation success, the flow automatically progresses to the Launch Campaign step
+- Users can navigate back to previous steps
+- The stepper UI updates to reflect current progress
+
+## Testing
+
+### Test Button
+
+A test button has been added to the dashboard (`app/dashboard/page.tsx`) to test the Launch Campaign flow:
+
+1. Navigate to `/dashboard`
+2. Click "Test Launch Campaign" button
+3. The flow will open in a modal sheet
+4. Test the review, launch, and success screens
+
+### Mock Data
+
+Mock campaign data is defined in `lib/mock.ts` and includes:
+
+- Campaign details matching the Figma designs
+- Realistic milestone information
+- Engagement metrics
+- Creator information
+
+## Design System Compliance
+
+The implementation follows the existing design system:
+
+- **Colors**: Uses predefined theme colors (`#F5F5F5`, `#B5B5B5`, `#2A2A2A`, etc.)
+- **Typography**: Consistent with existing components
+- **Spacing**: Follows established patterns
+- **Components**: Reuses existing UI components (Button, Badge, Dialog, etc.)
+- **Icons**: Uses Lucide React icons as specified
+
+## Accessibility
+
+The implementation includes accessibility features:
+
+- Proper ARIA labels
+- Keyboard navigation support
+- Screen reader friendly content
+- Focus management
+- Color contrast compliance
+
+## Responsive Design
+
+All components are responsive and work on:
+
+- Desktop (default)
+- Tablet (responsive breakpoints)
+- Mobile (optimized layouts)
+
+## Error Handling
+
+The implementation includes comprehensive error handling:
+
+- API error states
+- Loading states
+- Empty states
+- User-friendly error messages
+- Graceful fallbacks
+
+## Future Enhancements
+
+When backend integration is complete:
+
+1. Replace mock API calls with real endpoints
+2. Add real-time status updates during campaign launch
+3. Implement actual blockchain transaction handling
+4. Add campaign analytics and tracking
+5. Implement real social media sharing with tracking
+
+## File Structure
+
+```
+components/project/
+├── ReviewCampaign.tsx          # Review campaign details
+├── CampaignLiveSuccess.tsx     # Success screen after launch
+├── ShareCampaignModal.tsx      # Social media sharing modal
+├── LaunchCampaignFlow.tsx      # Main flow controller
+└── index.ts                    # Component exports
+
+lib/
+├── api/
+│   └── project.ts              # API functions (mock)
+└── mock.ts                     # Mock data
+
+app/dashboard/
+└── page.tsx                    # Test button integration
+```
+
+## Usage
+
+To use the Launch Campaign flow:
+
+1. Import the components:
+
+```tsx
+import { LaunchCampaignFlow } from '@/components/project';
+```
+
+2. Use in your component:
+
+```tsx
+<LaunchCampaignFlow
+  projectId='your-project-id'
+  onBack={() => {
+    /* handle back */
+  }}
+  onComplete={() => {
+    /* handle completion */
+  }}
+/>
+```
+
+The implementation is ready for testing and can be easily integrated with real backend endpoints when available.

app/comment/page.tsx

@@ -17,7 +17,7 @@ const Page = () => {
     if (comment && comment.trim()) {
       // Comment is valid and can be processed
       // Add your comment handling logic here
-      console.log('Comment submitted:', comment);
+      // console.log('Comment submitted:', comment);
 
       // Close the sheet after submission
       setIsSheetOpen(false);

app/globals.css

@@ -158,3 +158,18 @@
 button {
   cursor: pointer;
 }
+
+/* reduce scrollbar width */
+.slim-scrollbar {
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  scrollbar-color: var(--background);
+}
+
+.slim-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.slim-scrollbar::-webkit-scrollbar-track {
+  background-color: transparent;
+}

app/test/page.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import LaunchCampaignFlow from '@/components/project/LaunchCampaignFlow';
+import BoundlessSheet from '@/components/sheet/boundless-sheet';
+import { Button } from '@/components/ui/button';
+import { Rocket } from 'lucide-react';
+
+export default function TestPage() {
+  const [showLaunchFlow, setShowLaunchFlow] = useState(false);
+
+  const handleOpenModal = () => {
+    setShowLaunchFlow(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowLaunchFlow(false);
+  };
+
+  return (
+    <div className='min-h-screen bg-gray-900 flex items-center justify-center'>
+      <div className='text-center space-y-6'>
+        <h1 className='text-4xl font-bold text-white mb-8'>
+          Launch Campaign Test
+        </h1>
+
+        <p className='text-gray-300 mb-8'>
+          Click the button below to test the Launch Campaign feature
+        </p>
+
+        <Button
+          onClick={handleOpenModal}
+          size='lg'
+          className='bg-green-600 hover:bg-green-700 text-white px-8 py-4 text-lg'
+        >
+          <Rocket className='mr-2 h-6 w-6' />
+          Test Launch Campaign
+        </Button>
+
+        {/* Debug info */}
+        <div className='text-white text-sm'>
+          Modal state: {showLaunchFlow ? 'Open' : 'Closed'}
+        </div>
+
+        {/* Launch Campaign Flow Modal */}
+        <BoundlessSheet
+          open={showLaunchFlow}
+          setOpen={handleCloseModal}
+          contentClassName='h-full'
+          title='Review Campaign'
+        >
+          <LaunchCampaignFlow
+            projectId='test-project-123'
+            onBack={handleCloseModal}
+            onComplete={handleCloseModal}
+          />
+        </BoundlessSheet>
+      </div>
+    </div>
+  );
+}

app/user/layout.tsx

@@ -4,6 +4,9 @@ import SidebarLayout from '@/components/layout/sidebar';
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { redirect } from 'next/navigation';
 
+// Force dynamic rendering for all user pages
+export const dynamic = 'force-dynamic';
+
 export default async function UserLayout({
   children,
 }: Readonly<{

app/user/page.tsx

@@ -8,17 +8,35 @@ import GrantHistory from '@/components/overview/GrantHistory';
 import PageTransition from '@/components/PageTransition';
 import { Coins, History } from 'lucide-react';
 import { useAuth } from '@/hooks/use-auth';
+import { useEffect, useState } from 'react';
+
+import LoadingSpinner from '@/components/LoadingSpinner';
 
 export default function UserPage() {
-  const { user } = useAuth();
+  const { user, isLoading } = useAuth();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Show loading until client-side hydration is complete
+  if (!mounted || isLoading) {
+    return (
+      <div className='min-h-screen flex items-center justify-center'>
+        <LoadingSpinner size='lg' />
+      </div>
+    );
+  }
+
   return (
     <PageTransition>
       <div className='min-h-screen'>
         <div className='p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto'>
           {/* Header Section */}
           <div className='mb-8'>
             <h1 className='text-2xl sm:text-3xl lg:text-[32px] font-medium leading-[120%] tracking-[-0.64px] text-white '>
-              Hello, {user?.name?.split(' ')[0]}
+              Hello, {user?.name?.split(' ')[0] || 'User'}
             </h1>
           </div>
           {/* Stats Cards Grid */}