+ referendumVote ? (
+ "Referendum quorum (%)"
+ ) : (
+
+ )
}
value={
<>
- {quorumPercent}% / {quorumNeededPercent}%
+ {quorumPercent}% /{" "}
+ {referendumVote
+ ? referendumQuorumRuleLabel
+ : `${quorumNeededPercent}%`}
- {engaged} / {quorumNeeded}
+ {engaged} / {quorumNeeded} {proposal.voterLabel.toLowerCase()}
}
@@ -312,7 +331,9 @@ const ProposalChamber: React.FC = () => {
{yesPercentOfQuorum}% / {passingNeededPercent}%
- Yes within quorum
+ {referendumVote
+ ? `${Math.ceil(engaged * 0.666)} yes votes needed at current participation`
+ : "Yes within quorum"}
}
diff --git a/src/pages/proposals/ProposalReferendum.tsx b/src/pages/proposals/ProposalReferendum.tsx
new file mode 100644
index 0000000..83d9f6c
--- /dev/null
+++ b/src/pages/proposals/ProposalReferendum.tsx
@@ -0,0 +1,336 @@
+import { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router";
+
+import { PageHint } from "@/components/PageHint";
+import { ProposalPageHeader } from "@/components/ProposalPageHeader";
+import { VoteButton } from "@/components/VoteButton";
+import {
+ ProposalInvisionInsightCard,
+ ProposalSummaryCard,
+ ProposalTeamMilestonesCard,
+ ProposalTimelineCard,
+} from "@/components/ProposalSections";
+import { StatTile } from "@/components/StatTile";
+import { Surface } from "@/components/Surface";
+import {
+ apiProposalReferendumPage,
+ apiProposalTimeline,
+ apiReferendumVote,
+} from "@/lib/apiClient";
+import { formatLoadError } from "@/lib/errorFormatting";
+import type {
+ ChamberProposalPageDto,
+ ProposalTimelineItemDto,
+} from "@/types/api";
+import {
+ useProposalStageSync,
+ useProposalTransitionNotice,
+} from "./useProposalStageSync";
+
+const ProposalReferendum: React.FC = () => {
+ const { id } = useParams();
+ const [proposal, setProposal] = useState
(null);
+ const [loadError, setLoadError] = useState(null);
+ const [submitError, setSubmitError] = useState(null);
+ const [submitting, setSubmitting] = useState(false);
+ const [timeline, setTimeline] = useState([]);
+ const [timelineError, setTimelineError] = useState(null);
+ const syncProposalStage = useProposalStageSync(id);
+ const transitionNotice = useProposalTransitionNotice();
+
+ const loadPage = useCallback(async () => {
+ if (!id) return;
+ const page = await apiProposalReferendumPage(id);
+ setProposal(page);
+ setLoadError(null);
+ }, [id]);
+
+ useEffect(() => {
+ if (!id) return;
+ let active = true;
+ (async () => {
+ try {
+ const [pageResult, timelineResult] = await Promise.allSettled([
+ apiProposalReferendumPage(id),
+ apiProposalTimeline(id),
+ ]);
+ if (!active) return;
+ if (pageResult.status === "fulfilled") {
+ setProposal(pageResult.value);
+ setLoadError(null);
+ } else {
+ setProposal(null);
+ setLoadError(
+ pageResult.reason?.message ?? "Failed to load referendum",
+ );
+ }
+ if (timelineResult.status === "fulfilled") {
+ setTimeline(timelineResult.value.items);
+ setTimelineError(null);
+ } else {
+ setTimeline([]);
+ setTimelineError(
+ timelineResult.reason?.message ?? "Failed to load timeline",
+ );
+ }
+ } catch (error) {
+ if (!active) return;
+ setProposal(null);
+ setLoadError((error as Error).message);
+ }
+ })();
+ return () => {
+ active = false;
+ };
+ }, [id]);
+
+ if (!proposal) {
+ return (
+
+
+ {transitionNotice ? (
+
+ {transitionNotice}
+
+ ) : null}
+
+ {loadError
+ ? `Referendum unavailable: ${formatLoadError(loadError, "Failed to load referendum.")}`
+ : "Loading referendum…"}
+
+
+
+ {transitionNotice ? (
+
+ {transitionNotice}
+
+ ) : null}
+
+
+ All active human nodes can vote
+
+
+ handleVote("yes")}
+ />
+ handleVote("no")}
+ />
+ handleVote("abstain")}
+ />
+
+ {submitError ? (
+
+ {formatLoadError(submitError)}
+
+ ) : null}
+
+
+
+ Referendum quorum
+
+
+
+ {quorumPercent}% / {quorumRuleLabel}
+
+
+ {engaged} / {proposal.quorumNeeded} human nodes
+
+
+ }
+ variant="panel"
+ className="flex min-h-24 flex-col items-center justify-center gap-1 py-4"
+ valueClassName="flex flex-col items-center gap-1 text-2xl font-semibold"
+ />
+
+
+ {yesPercentOfTotal}% /{" "}
+ {noPercentOfTotal}%{" "}
+ / {abstainPercentOfTotal}%
+
+
+ {yesTotal} / {noTotal} / {abstainTotal}
+
+
+ }
+ variant="panel"
+ className="flex min-h-24 flex-col items-center justify-center gap-1 py-4"
+ valueClassName="flex flex-col items-center gap-1 text-2xl font-semibold"
+ />
+
+
+
+ {yesPercentOfQuorum}% / {passingNeededPercent}%
+
+
+ {Math.ceil(engaged * 0.666)} yes votes needed at current
+ participation
+
+
+ }
+ variant="panel"
+ className="flex min-h-24 flex-col items-center justify-center gap-1 py-4"
+ valueClassName="flex flex-col items-center gap-1 text-2xl font-semibold"
+ />
+
+
+
+
+
+
+
+
+
+ {timelineError ? (
+
+ Timeline unavailable: {formatLoadError(timelineError)}
+
+ ) : (
+
+ )}
+