Connected Wallet Balance Display with Manual Refresh

[Kingsman-99]

Description

Users must open Freighter or an external explorer to check their current XLM and USDC balances while using the dApp, breaking their workflow when deciding whether they have enough funds to pay an invoice. A balance display in the wallet area with a manual refresh button should surface this information in-app.

Technical Context

src/components/wallet/WalletBalanceDisplay.tsx (new) calls src/app/api/wallet/balance/route.ts (new), which queries Horizon /accounts/<publicKey> for native and USDC balances. The balance is rendered in src/components/wallet/WalletMenu.tsx below the address display. A refresh icon button triggers a refetch via src/hooks/useWalletBalance.ts invalidating the swr key. Balances auto-refresh every 30 seconds when the menu is open.

Acceptance Criteria

• The wallet menu shows the connected account's XLM and USDC balances fetched from Horizon
• A refresh button in the wallet menu triggers an immediate balance refetch
• Balances are formatted to 2 decimal places for USDC and 7 for XLM
• While balances are loading, skeleton text placeholders appear
• Balances auto-refresh every 30 seconds while the wallet menu is open, stopping when it closes
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[Tobi-8]

Please maintainer assign me to this issue
I have the knowledge and skill to complete this task

[Tobi-8]

Please maintainer assign me to this issue
I have the knowledge and skill to complete this task

[GazzyLee]

gm gm boss, I'd love to take this on, please assign

[Peaostrel]

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

i can handle this quickly

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

[corneliusmfon-netizen]

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

I would like to work on this issue please!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @corneliusmfon-netizen 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.

[favourawaku]

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

i would like to work on this issue

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

[drips-wave]

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

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