Write tests for BalanceList loading skeleton empty state and balance row rendering

[k-deejah]

Problem

src/components/BalanceList.tsx renders three states: a loading skeleton (3 SkeletonRow placeholders), an empty message when no balances exist, and the list of AssetRow components. None of these states have automated tests.

The duplicate key bug (key={b.asset} — tracked separately) also has no regression test, meaning it could silently re-appear after any fix. Two more specific untested behaviors: (1) the skeleton renders exactly 3 placeholder rows — not 2, not 4; (2) each AssetRow displays the correct assetCode and formatted balance string from the mock data.

Solution

Write React Testing Library tests for BalanceList using a mock SorokitProvider. Test:

• Disconnected state: connect prompt is rendered, no balance rows visible
• Loading state: exactly 3 skeleton rows render while isLoadingAccount is true
• Empty state: empty-balances message renders when balances is an empty array
• Loaded state: an AssetRow renders for each balance with the correct asset code and amount
• No React duplicate-key warnings appear in the console during any test

Acceptance Criteria

• Disconnected state shows connect prompt
• Loading state renders exactly 3 skeleton placeholder rows
• Empty state renders the empty message
• Loaded state renders one row per balance with correct data
• No duplicate-key React warnings during test run
• All tests pass with npm test

---

Note for Contributors: If you're assigned to this issue, write a clear and detailed description for your pull request. Explain what was changed, why it was needed, how it was implemented, and include any relevant testing or screenshots where applicable.

[Praiz089017]

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

I would love to resolve this issue and give it a high quality PR

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

[aliyuHabibu]

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

Hi maintainer please assign this issue to me.

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

[Nathanpvd]

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

Hello, I'd really like to contribute to this issue and would appreciate the opportunity. Thank you for your consideration.

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

[doncross03]

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

Hi Maintainer, reviewed the issue in detail. Full stack background with solid experience relevant to this task. No blockers on my end — I'm ready to submit a PR shortly. Please assign.

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

[chriseffects01]

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

Hello maintainer,
Please assign this issue to me

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

[stayzappy]

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

Good Day, Please Kindly Assign this issue to me, As i have the expertise to complete it within the given timeframe

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

[drips-wave]

Congratulations, @stayzappy! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

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

[drips-wave]

This issue has been completed by @stayzappy as part of the Stellar Wave Program's 8th Wave 🥳

😎 @stayzappy: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.