Replace the hardcoded mock wallet address in WalletButton with a real stellar-wallet-kit connection

[Baskarayelu]

📋 Description

components/WalletButton.tsx is the primary wallet entry point in the header, but it currently fakes the connected state with a hardcoded address constant ('GDEMOXQ3D5AFX4K7IQ3XR5ZYQ2H7F4QO2N7F4R6STJHK2QMZ7CNC3') and a handleConnect that simply flips setIsConnected(true). No real wallet is ever opened, and the displayed network ("Testnet") is a static string in component state.

This issue wires the button to the stellar-wallet-kit dependency already in package.json, so that clicking "Connect" opens the wallet-kit modal, returns the real public key, and reflects the actual selected network.

Why this matters: every authenticated flow (send, split, goals, bills) ultimately depends on a real connected address. A hardcoded demo key silently masks integration bugs and makes the auth nonce/verify flow untestable end to end.

🎯 Requirements & Context

Functional requirements

• Replace the hardcoded walletAddress / isConnected defaults in WalletButton.tsx with state derived from a real wallet-kit connection.
• On handleConnect, open the stellar-wallet-kit modal and store the returned public key + network.
• Wire handleDisconnect to the existing logout helper and clear local wallet state.
• Show the truncated address via the existing truncateAddress helper and the live network in WalletDropdown.

Context & constraints

• Use the stellar-wallet-kit API; do not add a new wallet library.
• Keep the existing focus-return behaviour (buttonRef.current?.focus() on close).
• Network display must come from the kit, not a literal 'Testnet' string.

🛠️ Suggested Execution

1. Branch

git checkout -b feature/wallet-button-real-connection

2. Implement

• Introduce a small client hook (e.g. lib/client/useWallet.ts) wrapping the kit so the button stays presentational.
• Add TSDoc on the hook describing connect/disconnect/network lifecycle.
• Handle loading (connecting…) and error (user-rejected / no-wallet) states; surface errors via the existing Toast region.
• Respect i18n: route user-facing labels through i18next (en/es) per lib/i18n/index.ts.
• a11y: keep aria-expanded on the trigger, ensure the connecting spinner has an accessible name; responsive: verify on 360px.

3. Test & commit

npx tsc --noEmit
npm run lint
npm run build

feat(wallet): connect WalletButton to stellar-wallet-kit and drop the mock address

✅ Acceptance Criteria & Guidelines

Requirement	Target
Hardcoded mock address removed	Required
Real connect/disconnect via wallet-kit	Required
Loading + error states with toast feedback	Required
a11y (aria-expanded, focus return) preserved	Required
i18n keys for all new strings	Required
tsc --noEmit, lint, build clean	Required
Timeframe	96 hours from assignment

💬 Community & Support

Join the RemitWise contributor community on Discord: https://discord.gg/CtQuPZFMA

Please comment to pick this up so we avoid duplicate work, and ask any questions in the channel. 🚀