Nouns DAO Dashboard

A React + TypeScript based Nouns DAO governance dashboard for viewing and browsing Nouns DAO proposal information.

📋 Project Overview

Nouns DAO Dashboard is a modern web application specifically designed to display Nouns DAO governance proposals. The project reads data directly from the Ethereum blockchain, ensuring real-time and accurate information.

✨ Key Features

• Proposal List: Display the latest 5 Nouns DAO proposals
• Proposal Details: View complete proposal information including descriptions, voting statistics, timelines, etc.
• Real-time Data: Fetch latest data directly from Ethereum mainnet
• Responsive Design: Support for desktop and mobile access
• Markdown Support: Support for Markdown format rendering in proposal descriptions

🎯 Core Features

• 🔗 On-chain Data: Read data directly from Nouns DAO contracts
• 📊 Voting Statistics: Real-time display of for votes, against votes, and abstain votes
• ⏰ Timeline: Display proposal creation, start, and end block times
• 🎨 Modern UI: Modern interface design based on Tailwind CSS
• 📱 Responsive: Perfect adaptation to various device sizes

🛠️ Tech Stack

• Frontend Framework: React 18 + TypeScript
• Build Tool: Vite
• Styling Framework: Tailwind CSS
• Blockchain Interaction: Wagmi + Viem
• Routing: React Router
• State Management: TanStack Query
• Markdown Rendering: react-markdown + remark-gfm

🚀 Quick Start

Prerequisites

• Node.js >= 18.0.0
• pnpm >= 8.0.0

Install Dependencies

# Install dependencies using pnpm
pnpm install

Start Development Server

# Start development server
pnpm dev

The project will start at http://localhost:3000.

Build Production Version

# Build production version
pnpm build

# Preview production build
pnpm preview

📁 Project Structure

nouns-dashbord/
├── src/
│   ├── components/          # React components
│   │   ├── Header.tsx      # Page header
│   │   ├── ProposalHeader/ # Proposal header component
│   │   ├── Proposals/      # Proposal list component
│   │   └── ProposalStatus/ # Proposal status component
│   ├── pages/              # Page components
│   │   ├── Dashboard.tsx   # Dashboard page
│   │   └── Detail/          # Detail page
│   ├── hooks/              # Custom Hooks
│   │   ├── useOnChainProposals.ts  # On-chain proposal data
│   │   └── useProposal.ts          # Single proposal data
│   ├── contracts/          # Smart contract related
│   │   └── nounsDAO.ts     # Nouns DAO contract ABI
│   ├── config/             # Configuration files
│   │   ├── constants.ts    # Constants configuration
│   │   └── wagmi.ts        # Wagmi configuration
│   ├── types/              # TypeScript type definitions
│   │   └── index.ts        # Type definitions
│   └── utils/              # Utility functions
│       └── constants.ts    # Utility constants
├── public/                 # Static assets
├── package.json           # Project configuration
├── vite.config.ts         # Vite configuration
├── tailwind.config.js     # Tailwind configuration
└── tsconfig.json          # TypeScript configuration

🔧 Configuration

Blockchain Network

The project connects to Ethereum mainnet by default with the following configuration:

• RPC Endpoint: Through Vite proxy to https://eth.llamarpc.com
• Contract Address: 0x6f3e6272a167e8accb32072d08e0957f9c79223d (Nouns DAO)

Proxy Configuration

The project uses Vite proxy to resolve CORS issues:

// vite.config.ts
server: {
  proxy: {
    '/api/eth': {
      target: 'https://eth.llamarpc.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api\/eth/, ''),
    }
  }
}

📊 Data Flow

1. Get Proposal Count: Call proposalCount() function
2. Calculate Latest Proposals: Calculate the latest 5 proposal IDs based on total count
3. Query Proposal Details: Query detailed information for 5 proposals in parallel
4. Get Proposal State: Call state() function to get accurate state
5. Query Proposal Description: Get complete description through historical event logs

🎨 Interface Display

Dashboard Page

• Display the latest 5 proposals
• Each proposal shows title, status, countdown
• Support clicking to jump to detail page

Detail Page

• Complete proposal information display
• Voting statistics and timeline
• Markdown format proposal description
• Responsive layout design

🔍 Development Guide

Adding New Features

1. Create new components in src/components/
2. Add custom Hooks in src/hooks/
3. Define related types in src/types/
4. Update routing configuration (if needed)

Debugging Tips

• Use browser developer tools to view network requests
• Check console logs to understand data flow
• Use React DevTools to debug component state

📝 Script Commands

# Development
pnpm dev          # Start development server

# Build
pnpm build         # Build production version
pnpm preview       # Preview production build

# Code Quality
pnpm lint          # Run ESLint check
pnpm lint:fix      # Auto-fix ESLint issues

# Type Check
pnpm type-check    # Run TypeScript type check

🔗 Related Links

• Nouns DAO Official Website
• Nouns DAO Contract
• Wagmi Documentation
• Vite Documentation
• Tailwind CSS Documentation