Display human-readable token amount (XLM/USDC) alongside raw stroop value in ProposalCard

[thegreatfeez]

Summary

Stellar token amounts are stored on-chain as whole-number stroops (1 unit = 10,000,000 stroops). ProposalCard currently shows only the formatted decimal amount with no indication of the underlying raw value, which makes it harder for technically-minded owners to verify a proposal before signing.

Background

contract.ts already contains a formatAmount(raw: bigint): string helper that converts a stroop bigint to a readable decimal string (e.g., 50000000000n → "5,000"). This formatted string is stored in proposal.amount by mapProposal(), but the original raw stroop value is discarded. ProposalCard renders Send {proposal.amount} {proposal.token} with no secondary display. The Proposal type in accord.ts has a single amount: string field that holds only the formatted value.

What Needs to Be Done

1. In frontend/src/types/accord.ts, add a rawAmount: string field to the Proposal type. Storing it as a string avoids BigInt serialisation issues while preserving the exact value.

2. In frontend/src/lib/contract.ts, update mapProposal() to set rawAmount to String(raw.amount) — the original stroop integer as returned by the contract — alongside the existing formatted amount field.

3. In frontend/src/data/mockData.ts, add a rawAmount field to each mock proposal that matches its amount. Use 7 decimal places (e.g., "50000000000" for 5,000 USDC; "125000000000" for 12,500 XLM).

4. In frontend/src/components/ProposalCard.tsx, below the existing Send {proposal.amount} {proposal.token} line, add a secondary line that renders the raw stroop value in muted small text, formatted with a thousands separator and labelled "stroops".

Acceptance Criteria

• Each ProposalCard shows two amount lines: the formatted decimal amount on top and the raw stroop count below it
• The raw stroop line is visually subordinate (smaller, muted colour) so it does not compete with the primary amount
• Mock proposals in mockData.ts include a rawAmount field consistent with each amount
• The project builds with no TypeScript errors after adding the new rawAmount field

Files to Look At

• frontend/src/types/accord.ts — add rawAmount: string to the Proposal type
• frontend/src/lib/contract.ts — mapProposal() is where rawAmount should be populated; formatAmount() is the existing conversion helper
• frontend/src/components/ProposalCard.tsx — the amount is rendered on line 28; add the secondary stroop display beneath it
• frontend/src/data/mockData.ts — add matching rawAmount values to all four mock proposals

Difficulty: Easy

[igris-nuel]

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

Hi maintainer, Can I work on this . Kindly assign

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

[larryjay007]

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

I would love to take on this issue. I can update the Proposal type to store the stringified rawAmount, populate it inside mapProposal(), sync the mock data values, and style the secondary raw stroop display line in ProposalCard.tsx with proper thousands formatting using small, muted text.

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

[6akola]

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

I would like to work on this issue. I can handle it.
Thank you.

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

[drips-wave]

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

🧑‍💻 @takicode: 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 🌊