Skip to content

ClearPath Integration into FairWins Platform

Overview

This document describes the integration of ClearPath DAO Governance pages into the FairWins platform with role-based access control.

Implementation Details

Files Modified

  1. frontend/src/components/fairwins/SidebarNav.jsx
  2. Added clearpath navigation item with requiresRole: 'CLEARPATH_USER'
  3. Icon: 🏛ī¸ (Government building - represents DAO governance)

  4. Position: Between "Other Markets" and "TokenMint" categories

  5. frontend/src/components/fairwins/FairWinsAppNew.jsx

  6. Added import for useRoles hook from ../../hooks/useRoles
  7. Added import for new ClearPathTab component
  8. Removed hardcoded userRoles state in favor of context-based roles
  9. Added userRoleNames memoized computation to map role constants to string names
  10. Added conditional rendering for clearpath category

Files Created

  1. frontend/src/components/fairwins/ClearPathTab.jsx
  2. Wrapper component that integrates ClearPath Dashboard into FairWins
  3. Provides consistent header and layout

  4. Imports the existing Dashboard component from ../Dashboard

  5. frontend/src/components/fairwins/ClearPathTab.css

  6. Styling for the integrated ClearPath view
  7. Fade-in animation for smooth transitions
  8. Responsive design for mobile and desktop
  9. Respects prefers-reduced-motion accessibility preference

User Flow

Without CLEARPATH_USER Role

  1. User logs into FairWins platform
  2. Sidebar shows standard categories (Dashboard, Trending, Politics, Sports, etc.)
  3. ClearPath option is not visible in navigation

With CLEARPATH_USER Role

  1. User with CLEARPATH_USER role logs into FairWins platform
  2. Sidebar shows all standard categories plus ClearPath option
  3. User clicks "ClearPath" in sidebar
  4. ClearPath DAO Governance interface loads within FairWins
  5. User can access all DAO management features:
  6. View DAOs
  7. Browse available DAOs
  8. View active proposals
  9. Submit proposals
  10. View welfare metrics
  11. Launch new DAOs

Acquiring the CLEARPATH_USER Role

Users can purchase the CLEARPATH_USER role via: - Navigate to /purchase-roles route - Select "ClearPath User" individual role (250 ETC) or bundle package - Complete purchase with connected wallet - Role is automatically assigned to wallet address - Refresh page to see ClearPath option appear in sidebar

Technical Architecture

Role-Based Filtering

// In SidebarNav.jsx
const visibleCategories = CATEGORIES.filter(category => {
  if (category.requiresRole) {
    return userRoles.includes(category.requiresRole)
  }
  return true
})

Role Context Integration

// In FairWinsAppNew.jsx
const { roles, ROLES } = useRoles()

const userRoleNames = useMemo(() => {
  return roles.map(role => {
    if (role === ROLES.CLEARPATH_USER) return 'CLEARPATH_USER'
    if (role === ROLES.TOKENMINT) return 'TOKENMINT_ROLE'
    // ... other role mappings
    return role
  })
}, [roles, ROLES])

Component Rendering

// In FairWinsAppNew.jsx
{selectedCategory === 'clearpath' ? (
  <ClearPathTab />
) : selectedCategory === 'tokenmint' ? (
  <TokenMintTab ... />
) : // ... other categories
}

Benefits

  1. Single Platform Experience: Users don't need to navigate to separate /clearpath route
  2. Consistent Navigation: Uses same sidebar navigation as other FairWins features
  3. Role-Based Access Control: Only users with appropriate permissions see ClearPath
  4. Maintainability: Existing ClearPath Dashboard component reused without modification
  5. Scalability: Pattern established for adding other role-gated features

Testing

Build Verification

  • ✅ npm run build completes successfully
  • ✅ No TypeScript/JavaScript compilation errors
  • ✅ Bundle size within acceptable limits

Lint Verification

  • ✅ New ClearPathTab.jsx passes all ESLint checks
  • ✅ No new linting errors introduced in modified files

Unit Tests

  • ✅ 153 tests passing
  • ✅ No new test failures introduced
  • ℹī¸ 2 pre-existing test failures (unrelated to changes)

Manual Testing Performed

  • ✅ FairWins dashboard loads correctly
  • ✅ Sidebar navigation works as expected
  • ✅ Role-based filtering logic is correct
  • ✅ ClearPath tab structure created successfully

Future Enhancements

  1. Dynamic Role Badges: Show "Premium" or "Pro" badges on role-gated nav items
  2. Role Purchase Prompt: Click on locked item could show purchase modal
  3. Role Expiration: Add expiration dates and renewal reminders for roles
  4. Analytics: Track usage of role-gated features for business insights
  5. Multi-tier Access: Different tiers of ClearPath access (Bronze, Silver, Gold, Platinum)

References

  • Role Context: frontend/src/contexts/RoleContext.jsx
  • Role Storage: frontend/src/utils/roleStorage.js
  • ClearPath Dashboard: frontend/src/components/Dashboard.jsx
  • Role Purchase UI: frontend/src/components/RolePurchaseScreen.jsx