Governance: proposal progress visualization with lifecycle states

[devoclan]

Summary

Governance: proposal progress visualization with lifecycle states

What was solved

#472 — [High] Build quorum, threshold and timelock progress visualizations with accessible status semantics

Add governance proposal progress visualizations: a pure deriveProposalState(proposal, now) state machine plus a presentational ProposalProgress component (stacked for/against/abstain bar with quorum and threshold markers, textual status, accessible progressbar/meter semantics), wired into governance list cards and detail page, with localized copy and lifecycle states (active → succeeded/defeated → queued with timelock countdown → executed/expired).

Addressed:

• Changed: src/lib/governanceStore.ts
• Create ProposalProgress component with stacked bar (for/against/abstain), quorum marker, threshold marker, and textual status such as "Quorum met, approval 62% / 66% needed".
• Expose progress via role="progressbar"/meter with descriptive accessible labels.
• Implement lifecycle states active → succeeded/defeated → queued (timelock ends in …) → executed/expired, derived by a pure function from proposal data, and display next actions.

#473 — [High] Build a proposal creation wizard with templates, live preview, validation and deposit handling

Implement a guided, multi-step governance proposal creation wizard under src/app/governance/new with a template registry (parameter change, routing, solver policy), Markdown description editor with safe preview and sanitisation, typed parameter fields with current→proposed diffs, per-wallet draft persistence with TTL and resume banner, eligibility/deposit gating, and a transaction review/sign step. Scope is limited to the wizard UI, template registry, draft hook, and XDR review helper — contract-level proposal execution logic is explicitly out of scope.

Addressed:

• Changed: src/hooks/useLocalStorageDraft.ts
• Multi-step wizard flow: template → details → parameters → review → sign, with per-step validation summaries and keyboard/screen-reader accessibility
• Drafts persisted per wallet with TTL and a resume banner; handle wallet switching mid-draft
• Description editor using the safe Markdown renderer for preview (no raw HTML), with length limits and character/URL sanitisation

#474 — [High] Ship a safe Markdown renderer for proposals and comments with a strict sanitization policy

Add a safe, dependency-light Markdown renderer for governance proposals and comments that parses Markdown into an AST and renders React elements directly (no dangerouslySetInnerHTML), enforcing a strict URL/content policy, size/complexity limits, and text sanitization, with an XSS corpus test and a security-audit doc section.

Addressed:

• Changed: src/components/Markdown.tsx, src/lib/textSafety.ts
• Implement a minimal Markdown parser (headings, emphasis, lists, code, links, blockquotes) producing an AST that is rendered to React elements only — never raw HTML; raw HTML in input is rendered as literal text.
• Do not support images (or restrict to an app-proxied allowlist) and document the decision.
• Links: allow only https:/mailto: (configurable); set rel="noopener noreferrer nofollow ugc" and target="_blank"; show visible domain; handle punycode/IDN with a warning for mixed scripts; pass link text through sanitizeDisplayText (strip bidi/zero-width).

#475 — [High] Build the voting delegation flow: delegate, revoke and delegate directory

Implement the governance voting delegation flow: a delegation panel (current delegate, delegated power, history) with delegate/revoke forms running the review → simulate → sign pipeline, plus a searchable/sortable delegate directory with sanitised profiles. New-address delegation requires full-address confirmation (address-poisoning defence) and warns on self-delegation or non-existent accounts. Effective voting power updates on useVotingPower after confirmation, with pending state handling. Adapter + MSW mock behind a feature flag when endpoints are unavailable.

Addressed:

• Changed: src/app/governance/delegates/page.tsx, src/hooks/useDelegation.ts, src/lib/stellarAddress.ts
• Delegation panel showing current delegate, power delegated, and history
• Forms to delegate/revoke with full review → simulate → sign pipeline and clear language on scope and revocability
• Delegate directory with search and sort by voting power / participation rate / proposals voted

Changes

• src/lib/governanceStore.ts (modify)
• src/lib/textSafety.ts (modify)
• src/lib/stellarAddress.ts (modify)
• src/components/Markdown.tsx (create)
• src/hooks/useDelegation.ts (create)
• src/hooks/useLocalStorageDraft.ts (modify)
• src/app/governance/delegates/page.tsx (create)

Approach

1. [High] Build quorum, threshold and timelock progress visualizations with accessible status semantics #472 — [High] Build quorum, threshold and timelock progress visualizations with accessible status semantics (Changed: src/lib/governanceStore.ts)
2. [High] Build a proposal creation wizard with templates, live preview, validation and deposit handling #473 — [High] Build a proposal creation wizard with templates, live preview, validation and deposit handling (Changed: src/hooks/useLocalStorageDraft.ts)
3. [High] Ship a safe Markdown renderer for proposals and comments with a strict sanitization policy #474 — [High] Ship a safe Markdown renderer for proposals and comments with a strict sanitization policy (Changed: src/components/Markdown.tsx, src/lib/textSafety.ts)
4. [High] Build the voting delegation flow: delegate, revoke and delegate directory #475 — [High] Build the voting delegation flow: delegate, revoke and delegate directory (Changed: src/app/governance/delegates/page.tsx, src/hooks/useDelegation.ts, src/lib/stellarAddress.ts)

Issues

Closes #472
Closes #473
Closes #474
Closes #475

[drips-wave]

@devoclan Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits