DAO Governance Proposals

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/finance/finance24.tsx instead.

Usage

The file also exports finance24Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Finance24, finance24Demo } from "@/components/blocks/finance/finance24";

export default function Page() {
  return <Finance24 {...finance24Demo} />;
}

Props

Types

export type ProposalStatus = "active" | "passed" | "rejected";

export interface GovernanceProposal {
  id: string;
  title: string;
  description: string;
  status: ProposalStatus;
  forVotes: number;
  againstVotes: number;
  quorum: number;
  proposer: string;
  /** ISO date string; only read when status is "active". */
  votingEndsAt?: string;
}

Behavior notes

• The for/against split and quorum progress bars are computed at render time from forVotes/againstVotes/quorum, no live vote submission happens anywhere.
• The countdown on active proposals is real client-side state: a useEffect ticks every second off votingEndsAt, starting from a null placeholder so the server-rendered and first client render stay in sync before the timer takes over.
• There is no wallet connection or on-chain voting, this is a read-only display block.