Build a params builder UX (form-based + raw-JSON) for ApiUsage test calls

[greatest0fallt1me]

Description

This is a UI/UX issue. The current ApiUsage parameters input is a single freeform JSON textarea that punishes mistakes. Build a form-based params builder that lets users add typed key/value rows with a one-click "Switch to raw JSON" escape hatch, and keep both modes synchronized.

Requirements and Context

• Reference: src/ApiUsage.tsx parameters block
• Each row exposes: key input, type selector (string/number/boolean), value input, remove button
• "Add parameter" button below the rows; live count of params shown next to the heading
• Switching from form -> raw should serialize current rows; raw -> form should attempt to parse and surface errors inline
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/api-usage-params-builder

2. Implement changes
   • src/components/ParamsBuilder.tsx — new component owning rows state
   • src/ApiUsage.tsx — host the builder, lifted state for current params
   • src/index.css — .params-builder__row grid styles with token-driven borders
3. Test and commit
   • Manually add/remove/edit rows and verify the serialized JSON matches
   • Toggle to raw, mutate, toggle back — assert errors are surfaced inline
   • npm test

Example commit message

feat: add form-based params builder to ApiUsage

Acceptance Criteria

• Form and raw modes round-trip without data loss
• Invalid raw JSON surfaces a non-blocking inline error
• Tab order flows key -> type -> value -> remove per row
• Empty state shows "No parameters yet" with an Add CTA

Guidelines

• Follow WCAG 2.1 AA on row inputs (visible labels, error association)
• Use design tokens, no inline hex
• Clear documentation and inline comments
• Timeframe: 96 hours

[gloskull]

Hi, I’d love to work on this issue. I have 4 years of experience across backend, frontend, full-stack, and smart contract development. I understand the task clearly and can deliver a clean, efficient, well-tested solution on time, with strong focus on code quality and maintainability. My PR will be submitted in under 10 hours.

[IfyJustin91]

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

Hi Maintainers,

I'd like to work on this issue. I understand the goal is to improve the API Usage experience by replacing the freeform JSON input with a typed parameters builder while keeping a synchronized raw JSON mode. I can implement the reusable builder, ensure seamless round-tripping between both modes with inline validation, and deliver a responsive, accessible solution with the required tests and documentation.

I'd appreciate being assigned to this issue. Thank you!

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

[grantfox-oss]

🦊 GrantFox — @IfyJustin91 has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #150)
2. Your PR will be reviewed by the CalloraOrg maintainers

Good luck! Track your progress on GrantFox.

[drips-wave]

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

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