Governance Proposal
A proposal with its tally. Quorum is tracked separately from the majority because they are separate tests — a 92% "for" reads as passing right up until it fails for turnout.
src/components/ui/governance-proposal.tsxAbout
From the component's own source, where it was written.
A governance proposal with its tally.
Quorum is tracked separately from the majority, because they are separate tests and a proposal routinely passes one and fails the other. A bar showing 92% "for" reads as passing right up until it fails for turnout, so the quorum line is always rendered — never hidden once met.
Abstain counts toward quorum but not toward the majority. That is the whole point of an abstain vote, and a component that folds it into "against" gets the outcome wrong.
Install
npx astralyx-ui add governance-proposal
Usage
import { GovernanceProposal } from '@/components/ui/governance-proposal'
<GovernanceProposal id="AIP-42" title="…" state="active" forVotes={820000} againstVotes={64000} quorum={1200000} />Composer
Change the props and the source below follows.
Raise the treasury allocation for ecosystem grants to 5%
Without quorum this proposal fails regardless of the vote.
Proposed by stablelab.eth
<GovernanceProposal
id="AIP-42"
title="…"
state="active"
forVotes={820000}
againstVotes={64000}
quorum={1200000}
/>Examples
Proposal
<GovernanceProposal id="AIP-42" state="active" … />
API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
GovernanceProposal
A governance proposal with its tally.
Extends Omit<ComponentProps<'article'>, 'title' | 'id'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| id | ReactNode | required | — |
| title | ReactNode | required | — |
| state | ProposalState | required | Voting controls appear only while active. |
| forVotes | number | required | Abstain counts toward quorum but never toward the majority — folding it into "against" gets the outcome wrong. |
| againstVotes | number | required | Abstain counts toward quorum but never toward the majority — folding it into "against" gets the outcome wrong. |
| abstainVotes | number | 0 | Abstain counts toward quorum but never toward the majority — folding it into "against" gets the outcome wrong. |
| quorum | number | — | Always rendered, including once met. |
| endsAt | Date | — | — |
| now | Date | — | — |
| summary | ReactNode | — | — |
| proposer | ReactNode | — | — |
| onVote | (choice: 'for' | 'against' | 'abstain') => void | — | — |
| locale | string | 'en-GB' | — |
| endsLabel | ReactNode | 'ends' | Precedes the closing time. |
| forLabel | ReactNode | 'For' | — |
| againstLabel | ReactNode | 'Against' | — |
| abstainLabel | ReactNode | 'Abstain' | — |
| quorumNote | ReactNode | 'Without quorum this proposal fails regardless of the vote.' | Shown while the vote is short of quorum. |
| proposedByLabel | ReactNode | 'Proposed by' | Precedes the proposer. |
Types
| Type | Definition | Description |
|---|---|---|
ProposalState | 'pending' | 'active' | 'passed' | 'defeated' | 'executed' | 'cancelled' | — |