Extract a reusable "Voting Power Preview" component for governance proposal forms

[thegreatfeez]

Frontend — Modal

Summary

The AddOwner, RemoveOwner, and weight-change proposal forms each need to show a before/after voting-power preview, and left unchecked each one will grow its own slightly different copy of that logic. This issue consolidates that into a single shared component so all three forms present the same preview consistently and any future fix or styling change only has to happen once.

Background

By the time this issue is picked up, the AddOwner, RemoveOwner, and "Propose Weight Change" forms in CreateProposalModal.tsx and OwnersPage.tsx each independently compute and render a "what will total weight and quorum look like after this proposal executes" preview, using the weight-percentage formatting helpers in soroban.ts. Each form's preview shows slightly different specifics (AddOwner shows a fixed +1 weight increase, RemoveOwner shows a decrease and a possible quorum-break warning, weight-change shows an owner's before/after share), but the underlying shape — a labeled before value, an after value, and a percentage — is the same across all three.

What Needs to Be Done

1. Create a new component (for example, frontend/src/components/VotingPowerPreview.tsx) that takes a before weight, an after weight, a total weight, and renders a consistent "before → after" summary with percentage shares, using the existing weight-percentage formatting helpers.
2. Support an optional warning state (a boolean plus a message) so the RemoveOwner form's quorum-break warning can use the same component instead of a separate ad hoc warning block.
3. Replace the bespoke preview markup in the AddOwner, RemoveOwner, and weight-change forms with this shared component, keeping each form's specific data-fetching logic in place — only the rendering is consolidated.
4. Confirm visually (or with a snapshot test) that each form's preview looks the same as it did before the refactor, since this issue is not meant to change behavior, only reduce duplication.

Acceptance Criteria

• A single VotingPowerPreview component exists and is used by all three governance proposal forms that need a weight preview.
• The component supports an optional warning state for the RemoveOwner form's quorum-break case.
• No duplicated before/after weight-percentage rendering logic remains across the three forms.
• Each form's preview renders the same information it did before this refactor.

Files to Look At

• frontend/src/components/CreateProposalModal.tsx — AddOwner and RemoveOwner forms with their own preview logic to consolidate
• frontend/src/pages/OwnersPage.tsx — weight-change proposal form with its own preview logic to consolidate
• frontend/src/lib/soroban.ts — shared weight-percentage formatting helpers the new component should build on

Difficulty: Medium

[Kappa16]

@Kappa16 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Please maintainer..I can handle this professionally and make sure this issue is closed ASAP WITHOUT ERRORS.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kappa16 to this issue.

[shinorh247]

@shinorh247 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @shinorh247 to this issue.

[Meet-hybrid]

@Meet-hybrid has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Can I work on this please?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Meet-hybrid to this issue.

[spartan124]

@spartan124 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer, I would love to work on this. I have implemeted similar solutions on several projects and I can do same here cleanly and efficiently. Allow me the opportunity to contribute to your project while following contribution guidelines for your project. Kindly assign.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @spartan124 to this issue.

[chidii]

@chidii has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Maintainer, I've reviewed this issue thoroughly and I'm well positioned to resolve it — experienced across the relevant stack and comfortable navigating the existing codebase. Ready to start right away.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @chidii to this issue.

[Bigdaddyobamo]

@Bigdaddyobamo has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi Senior Maintainer, please, I would like to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Bigdaddyobamo to this issue.

[cladiousdoff-glitch]

@cladiousdoff-glitch has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

hey i will like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @cladiousdoff-glitch to this issue.

[Toyinoje]

@Toyinoje has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello maintainer, I would love to work on this please assign it to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Toyinoje to this issue.

[drips-wave]

Congratulations, @Kappa16! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Kappa16: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊