Create Community Pools

[EmekaManuel]

Community Pools Feature Implementation

This PR implements a comprehensive community pools feature that enables users to create and manage community pools within the GoodCollective application. The implementation includes a complete multi-step pool creation flow with form validation, IPFS integration, and smart contract deployment.

Issue - #231

Summary of Changes

🎯 Core Features Implemented

1. Multi-Step Pool Creation Flow

• Welcome Screen (Welcome.tsx) - Introduction and terms acknowledgment
• Pool Type Selection (SelectCollectiveType.tsx) - Choose between Community Funds, Segmented Aid, and Results-based pools
• Get Started (GetStarted.tsx) - Basic project information and logo/cover photo upload
• Project Details (ProjectDetails.tsx) - Social links, website, and admin wallet configuration
• Pool Configuration (PoolConfiguration.tsx) - Advanced pool settings, member limits, and payout configuration
• Review & Launch (ReviewLaunch.tsx) - Final review and smart contract deployment

2. State Management & Context

• CreatePoolContext - Comprehensive state management for the entire creation flow
• useCreatePool Hook - Custom hook for accessing pool creation state and methods
• Form persistence across steps with validation

3. IPFS Integration

• File Upload Component (FileUpload.tsx) - Drag-and-drop file upload interface
• IPFS Upload Utilities (ipfsUpload.ts) - File validation and IPFS upload functionality
• Support for logo and cover photo uploads with size/type validation

4. Smart Contract Integration

• Pool Creation Logic - Integration with GoodCollective SDK for UBI pool deployment
• Contract Configuration - Proper setup of pool settings, UBI settings, and extended settings
• Error Handling - Comprehensive error handling for contract interactions

🛠 Technical Implementation

Components Added:

• CreateGoodCollective.tsx - Main orchestrator component
• CreatePool.tsx - Step navigation and progress tracking
• NavigationButtons.tsx - Reusable navigation component
• Success.tsx - Success modal with social sharing
• InfoBox.tsx - Reusable information display component

Utilities & Hooks:

• useCreatePool - Custom hook for pool creation state
• CreatePoolContext - React context for state management
• ipfsUpload.ts - IPFS file upload utilities
• Form validation and error handling throughout

Styling:

• Comprehensive responsive design with desktop/mobile support
• Consistent design system integration
• Progress indicators and visual feedback

📋 Form Validation & User Experience

Validation Features:

• Real-time form validation with error messages
• File type and size validation for uploads
• Ethereum address validation
• URL format validation for social links
• Required field enforcement

User Experience:

• Progress tracking with visual indicators
• Step-by-step navigation with ability to go back
• Form data persistence across steps
• Responsive design for all screen sizes
• Loading states and error handling

🔧 Configuration Options

Pool Settings:

• Pool type selection (Community Funds, Segmented Aid, Results-based)
• Member limits and recipient management
• Claim frequency configuration (daily, weekly, bi-weekly, monthly, custom)
• Manager fee settings (default 0% or custom percentage)
• Payout amount configuration per member per week

Project Details:

• Project name, description, and tagline
• Logo and cover photo upload
• Social media links (Twitter, Discord, Telegram, Facebook, Threads)
• Website URL
• Admin wallet address management

🚀 Smart Contract Deployment

Integration Features:

• Automatic contract deployment using GoodCollective SDK
• Proper network detection and configuration
• Transaction approval flow with user feedback
• Error handling for failed deployments
• Success confirmation with pool address

How Has This Been Tested?

• Form Validation Testing: All form fields tested with various input scenarios
• File Upload Testing: Logo and cover photo uploads tested with different file types and sizes
• Navigation Testing: Step-by-step navigation and form persistence verified
• Responsive Design Testing: Tested across desktop and mobile viewports
• Error Handling Testing: Various error scenarios tested including network failures and validation errors
• Smart Contract Integration: Pool creation flow tested with proper contract deployment

Dependencies Required

• @gooddollar/goodcollective-sdk - For smart contract interactions
• @reown/appkit/react - For wallet connection
• wagmi - For Ethereum interactions
• native-base - For UI components
• react-router - For navigation
• ethers - For blockchain utilities

Description by Korbit AI

What change is being made?

Add a full "Create Community Pool" flow with new UI screens, routing, and supporting components, hooks, and assets to enable creating and launching community pools.

Why are these changes being made?

Introduce a complete end-to-end flow for creating community pools (collective creation, configuration, and launch) and wire it into the app routes. Also extend the UI with new assets, components, and layout adjustments to support the new flow and its navigation.

Is this description stale? Ask me to generate a new description by commenting /korbit-generate-pr-description

[L03TJ3]

Approved, will be merged after the final request for excluding to display this on prod: goodcollective.xyz