feat: header wallet balance

[OG-wura]

Close #445

feat: header wallet balance

Summary

Adds a live wallet balance indicator to the app header that displays the connected Stellar account's native XLM balance with automatic polling.

Changes

New Files

• hooks/useStellarBalance.hook.ts — Custom hook that fetches the native XLM balance from the Stellar Horizon API. Polls every 15 seconds while a wallet is connected. Returns { balance, isLoading, error }. Handles 404 (unfunded accounts) gracefully by returning "0.0000000".

• components/navbar/WalletBalance.tsx — Presentational component that renders the balance as a pill in the header. Supports three states:

  • Loading: animated skeleton placeholder
  • Visible: formatted XLM amount with wallet icon (e.g. 1,250.50 XLM)
  • Hidden: masked •••• with eye-off icon (respects PrivacyContext.hideBalances)
  • Renders nothing if wallet is disconnected or balance is unavailable after loading

• components/navbar/__tests__/WalletBalance.test.tsx — 9 unit tests covering all states (disconnected, loading, formatted display, zero balance, hide balances, null balance, custom class, large numbers, tiny numbers).

Modified Files

• components/navbar/Navbar.tsx — Added WalletBalance to the desktop header (next to WalletMenu) and mobile header (next to the avatar, hidden on small screens via hidden sm:flex).

Testing

PASS components/navbar/__tests__/WalletBalance.test.tsx
  WalletBalance
    ✓ renders nothing when wallet is not connected
    ✓ renders loading skeleton when fetching initial balance
    ✓ renders formatted balance when data is available
    ✓ renders zero balance when account returns 0
    ✓ hides balance when hideBalances is true
    ✓ renders nothing when balance is null after loading completes
    ✓ applies custom className
    ✓ handles very large balance formatting
    ✓ handles tiny balance formatting

API / Visible Changes

• When a wallet is connected, the header shows the XLM balance in a pill beside the wallet menu button on desktop, and beside the avatar on mobile (screens ≥640px).
• The balance auto-updates every 15 seconds via Horizon polling.
• Error states degrade gracefully — stale data persists, and if no balance was ever fetched the component disappears.
• The existing "Hide balances" privacy toggle applies to the balance pill identically to other balance displays in the app.

[vercel]

@OG-wura is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@OG-wura Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits