chore(code-quality): magic numbers not named, TODO comments in source instead of issue refs, raw template literals not using cn()

[k-deejah]

Problem

Three issues affect the overall code quality, maintainability, and consistency of the component library.

1. Multiple components have inline magic numbers with no named constants

truncateAddress default values start=6, end=4, PAGE_SIZE=10 in TransactionHistory, pollInterval defaults, and pixel sizes like size * dpr in QRCode are magic numbers scattered through the codebase. Extracting them to named constants (e.g. const DEFAULT_TRUNCATE_START = 6) would make the intent clearer and changes easier.

2. TODO comments in SorobanInvokeButton and main.tsx are tracked as code comments not issues

// TODO: Implement contract invocation and similar comments should not live in source code — they are tracked as GitHub issues. Dead TODO comments that have corresponding open issues should be replaced with // See issue #22 references.

3. Components inconsistently use cn() from @/lib/utils vs raw template literals

Some className concatenations use cn(...) correctly, others use raw template literals like `... ${condition ? 'class-a' : 'class-b'}`. This inconsistency makes it harder to search for class usage and defeats tailwind-merge's deduplication. All conditional class logic should use cn().

Solution

1. Extract magic numbers to named constants in their respective files.
2. Replace TODO comments with // See issue #N references to the tracking issue.
3. Audit all components and replace raw template literal class concatenation with cn().

Acceptance Criteria

• No magic numbers in component logic — all extracted to named constants
• No TODO comments — replaced with issue references
• All conditional classNames use cn() from @/lib/utils
• npm run lint passes with no warnings
• npm run build passes

---

Note for Contributors: Write a clear PR description. List every file modified and the magic numbers or TODOs replaced. Run grep -r "TODO" src/ before and after to confirm zero remaining TODOs.

[Glam26]

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

I'd like to take this issue.

I'm a returning contributor and have worked on several code quality and frontend refactoring tasks focused on maintainability, consistency, and long-term readability. I'm familiar with the project's component patterns, utility helpers like cn(), and keeping changes aligned with existing conventions while avoiding unnecessary behavioral changes.

For this issue, I'll perform a focused cleanup by extracting component magic numbers into well-named constants, replacing tracked TODO comments with references to their corresponding GitHub issues, and standardizing conditional className composition through cn() across the affected components. I'll verify the refactor doesn't alter runtime behavior, ensure linting and builds pass cleanly, and include a detailed PR summary listing every modified file along with the constants and TODOs that were replaced.

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

[caxtonacollins]

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

Hi 👋 am a full-stack developer

I’ve been building games and DeFi dapps with Soroban, and I love tackling technical challenges with fast-moving teams. Super excited to jump in and help with this one!

I will love to work on this issue please assign

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

[extolkom]

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

Please assign me

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

[drips-wave]

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

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