Integrate Freighter wallet to replace the mocked vault and wallet balances in the deposit flow

[greatest0fallt1me]

Description

The deposit experience is entirely mocked: vaultBalance and walletBalance are hard-coded in App.tsx (src/App.tsx:282-283), the transaction hash is fabricated by createMockHash() (src/App.tsx:123-128), and handleApproveTransaction simulates approval/pending/confirmed purely with setTimeout (src/App.tsx:399-441). The landing copy and consumer steps already promise "Connect wallet" and on-chain settlement (src/App.tsx:52-69), and the explorer link points at Stellar testnet (src/App.tsx:97), so the UI is ready for a real wallet.

This issue introduces a Freighter wallet connection that supplies the real account address and surfaces a genuine network/connection state, replacing the fabricated wallet balance and laying the groundwork for real signing.

Requirements and context

• Add @stellar/freighter-api and create src/hooks/useFreighter.ts exposing isConnected, publicKey, connect(), and isAvailable (whether the extension is installed).
• Add a "Connect wallet" control in the topbar (src/App.tsx:475-482) that reflects connection state and the truncated public key.
• When connected, source walletBalance from the account rather than the hard-coded 1260.5 (src/App.tsx:283); keep a clearly-labeled mock fallback when Freighter is unavailable so the demo still runs.
• Gate handleApproveTransaction (src/App.tsx:399) on a connected wallet, and replace createMockHash with the signed transaction hash when a real signing path is wired (a clearly-marked mock may remain behind a feature flag for now).
• Non-functional: handle the "Freighter not installed" and "user rejected" cases with the existing error-card / status-banner UI (src/App.tsx:894-902); never block the rest of the app when the wallet is absent.

Acceptance criteria

• useFreighter hook implemented and unit-tested with a mocked @stellar/freighter-api.
• Topbar shows Connect/Connected state and the truncated G... address.
• walletBalance reflects the connected account, with a labeled fallback when Freighter is missing.
• Deposit approval is disabled until a wallet is connected; rejection and "not installed" are surfaced in the UI.
• No regression to the existing confirmed/failed demo toggle on /billing (src/App.tsx:581-594).
• npm run build passes.

Suggested execution

1. Fork the repo and create a branch — git checkout -b feature/freighter-wallet-integration.

2. Implement changes — src/hooks/useFreighter.ts, src/App.tsx (topbar + deposit gating), and the deposit modal balance source.

3. Write/extend tests — this repo has no test runner configured. Add Vitest + @testing-library/react + jsdom and a "test": "vitest run" script, then test useFreighter against a mocked @stellar/freighter-api for connected, rejected, and not-installed states.

4. Test and commit —

npm install
npm run dev      # verify connect flow with and without the extension
npm run build
npm run test

Example commit message

feat(wallet): integrate Freighter and replace mock wallet balance in deposit flow

Guidelines

• The new hook must reach ≥90% line coverage.
• Document the wallet setup in the README, keep the connect button keyboard-accessible, and never crash when the extension is absent.
• Timeframe: 96 hours.

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!