feat(wallet): integrate @stellar/freighter-api with network switching & connection management

[Topmatrixmor2014]

Summary

This PR completes the Freighter wallet integration by implementing a robust connection lifecycle, network detection, and reusable shared UI components. The core objective — "Add a Connect Wallet button in the navbar that handles network switching and connection" — is now fully addressed.

---

Changes Made

1. New useWallet Hook (hooks/useWallet.ts) 📦

A comprehensive hook that manages the full Freighter connection lifecycle:

Feature	Details
Connection detection	Polls isConnected() + getUserInfo() + isAllowed() every 2s
Network detection	Calls getNetworkDetails() to display testnet/mainnet/futurenet
connect()	Resets disconnect flag and syncs state (the ConnectButton calls setAllowed() directly)
disconnect()	Sets a ref-based flag so polling yields to the UI while avoiding spurious reconnects
Error resilience	Each API call is wrapped in its own try/catch so a single failure doesn't cascade
Loading/error state	isBusy and error fields for UI feedback

2. Backward Compatible useAccount (hooks/useAccount.ts) 🔄

• Now delegates to useWallet() internally and returns account only
• No breaking changes to 5+ existing consumers

3. Enhanced ConnectButton 🎯

• Loading spinner while connecting
• Inline error text if the connection fails
• onConnect callback for parent sync
• Disabled state to prevent double-clicks

4. Enhanced WalletButton 💳

• Network badge in dropdown (Testnet/Mainnet/Futurenet)
• Chevron icon that rotates on open
• i18n support via props

5. Updated Navbar 🧭

• Removed local disconnected state — managed by useWallet
• Passes network info to WalletButton
• Uses i18n for wallet strings

6. Shared DashboardSidebar Component 📊

• Extracted from 4 duplicated pages
• Bottom card shows actual connected account via useAccount()

7. i18n Updates 🌐

New Wallet section with 8 localized keys in both en/es.

---

CI Verification ✅

npm run lint       ✅ No errors
npm run typecheck  ✅ No TypeScript errors
npm run build      ✅ 30 pages built (production)

---

Files Changed (16 files, +310 / -230)

File	Description
hooks/useWallet.ts	New — Full Freighter wallet state hook
hooks/useAccount.ts	Refactored to delegate to useWallet
hooks/index.ts	Added useWallet barrel export
components/atoms/connect-button/index.tsx	Loading/error states, onConnect callback
components/atoms/connect-button/style.module.css	Spinner animation, error text, disabled states
components/atoms/wallet-button/index.tsx	Network display, chevron, i18n props
components/molecules/dashboard-sidebar/index.tsx	New — Shared sidebar with live wallet info
components/molecules/index.tsx	Added dashboard-sidebar export
components/molecules/wallet-data/index.tsx	Now uses useWallet
components/organisms/navbar/index.tsx	Uses useWallet, removes local state, i18n
pages/dashboard.tsx	Uses shared DashboardSidebar
pages/dashboard/profile.tsx	Uses shared DashboardSidebar
pages/dashboard/disputes.tsx	Uses shared DashboardSidebar
pages/dashboard/settings.tsx	Uses shared DashboardSidebar
messages/en.json	Added Wallet i18n section
messages/es.json	Added Wallet i18n section

---

How to Test

1. Ensure the Freighter browser extension is installed
2. Run npm run dev and navigate to http://localhost:3000
3. Click "Connect Wallet" → approve in Freighter popup
4. Verify address appears with green dot in navbar
5. Click address → dropdown shows network and options
6. Test "Switch account" and "Disconnect"
7. Verify dashboard sidebar card shows connected address

---

Closes #21

[vercel]

@Topmatrixmor2014 is attempting to deploy a commit to the Meshack Yaro 's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
trustflow-frontend	Ready	Preview, Comment	Jul 21, 2026 2:05pm

[meshackyaro]

Well done and thanks for your contribution