Frontend Overview

CredDAO provides a comprehensive set of React components and hooks for building governance interfaces.

Architecture

frontend/
├── app/                    # Next.js 14 app router pages
│   ├── page.tsx           # Dashboard
│   ├── proposals/         # Proposals pages
│   ├── delegates/         # Delegate discovery
│   ├── score/             # Score explorer
│   ├── analytics/         # Analytics dashboard
│   └── admin/             # Admin panel
├── components/
│   ├── providers/         # Context providers
│   ├── proposals/         # Proposal components
│   ├── dashboard/         # Dashboard widgets
│   ├── admin/             # Admin components
│   ├── notifications/     # Toast notifications
│   ├── onboarding/        # Onboarding wizard
│   ├── score/             # Score visualization
│   └── ErrorBoundary.tsx  # Error handling
├── hooks/
│   ├── useCredDAO.tsx     # Core hooks library
│   ├── useAdminAuth.ts    # Admin authentication
│   └── useInfiniteScroll.ts # Pagination
└── lib/
    └── proposalTemplates.ts # Governance templates

Key Features

1. Wallet Integration

Built on @solana/wallet-adapter-react with automatic context providers:

import { WalletProvider } from '@/components/providers/WalletProvider'
 
// Wraps app with ConnectionProvider, WalletProvider, OptimisticProvider
<WalletProvider>
  <App />
</WalletProvider>

2. Optimistic Updates

Instant UI feedback with automatic rollback on failure:

const { vote, status } = useOptimisticVote()
// Status: 'pending' | 'confirmed' | 'failed'

3. Error Boundaries

Graceful error handling with specialized boundaries:

import { ErrorBoundary, WalletErrorBoundary } from '@/components/ErrorBoundary'
 
<ErrorBoundary fallback={<CustomError />}>
  <RiskyComponent />
</ErrorBoundary>

4. Toast Notifications

Context-based notification system:

import { useToast } from '@/components/notifications/Toast'
 
const { success, error } = useToast()
success('Vote cast successfully!')
error('Transaction failed', 'Insufficient balance')

5. Onboarding Flow

Guided setup for new users:

import { OnboardingWizard, useOnboarding } from '@/components/onboarding/OnboardingWizard'
 
const { showOnboarding, completeOnboarding } = useOnboarding()
 
{showOnboarding && (
  <OnboardingWizard 
    onComplete={completeOnboarding} 
    onSkip={skipOnboarding} 
  />
)}

Component Library

Proposal Components

Component	Description
`ProposalForm`	Create proposal with validation
`VoteModal`	Cast votes with preview
`VotePreviewModal`	Detailed voting power breakdown
`TemplateSelector`	Proposal templates
`DiscussionThread`	IPFS-based comments

Dashboard Components

Component	Description
`ReputationCard`	User’s tier and score
`VotingPowerChart`	Power visualization
`ActiveProposals`	Recent proposals list
`TierDistribution`	Member tier breakdown

Admin Components

Component	Description
`AdminDashboard`	Stats overview
`ProposalModeration`	Pause/veto proposals
`MemberManagement`	Score overrides
`AuditLog`	Action history

Styling

Uses Tailwind CSS with custom utilities:

/* Custom component classes */
.card        /* White card with shadow */
.btn-primary /* Indigo gradient button */
.tier-gold   /* Gold tier badge */
 
/* Animations */
.animate-slide-in  /* Toast slide-in */
.shimmer           /* Loading shimmer */

Pages

Route	Description
`/`	Dashboard with stats and active proposals
`/proposals`	Browse and create proposals
`/delegates`	Discover and compare delegates
`/score`	FairScore breakdown explorer
`/analytics`	Governance metrics
`/admin`	Admin panel (requires auth)

Next Steps

React Hooks

useProposal, useVotingPower, and more.

Proposal Templates

Pre-built governance templates.

Notifications

Toast notification system.

Error Handling

Error boundaries and recovery.

Notifications Proposal Templates