feat(wallet): create wallet account dropdown menu

[BigNathan1]

Summary

Implements the wallet account header dropdown menu as specified in issue #31.

What was built

• hooks/useAccountMenu.ts — hook layer that wraps useWallet and exposes:

  • truncatedAddress — first-6 … last-6 characters of the Stellar public key
  • copyAddress() — writes the full address to the clipboard, sets isCopied for 2 s
  • disconnect() — delegates to useWallet.disconnect() (calls walletService.disconnect → backend API) with local isDisconnecting loading flag

• components/wallet/AccountMenu.tsx — Headless UI Menu dropdown that:

  • Renders null when no wallet is connected (no-op when unauthenticated)
  • Shows a green dot + truncated public key in the trigger button
  • Exposes the full address in a non-interactive dropdown header
  • Copy Address item: clipboard write with a Check icon confirmation flash
  • Disconnect Wallet item: spinner while in-flight, disabled during request
  • Keyboard accessible out-of-the-box (arrow keys, Enter, Escape) via Headless UI
  • Closes on outside click via Headless UI Menu behaviour
  • Full dark mode support via Tailwind dark: variants

• hooks/__tests__/useAccountMenu.test.ts — 11 unit tests covering:

  • Connected state and address reflection from useWallet
  • Correct truncation (GABC12…TELLAR pattern)
  • Clipboard write on copyAddress()
  • isCopied flag lifecycle (true immediately, resets after 2 s)
  • No-op when address is null
  • isDisconnecting flag lifecycle (resets on resolve and on throw)
  • Empty truncatedAddress when disconnected

Architecture

Follows the strict Component → Hook → Service layered pattern:

AccountMenu (Component)
↓
useAccountMenu (Hook)
↓
useWallet (Hook)
↓
walletService / freighterService (Service)
↓
Backend API (/api/wallet/connect, /api/wallet/disconnect)

The wallet address displayed in the dropdown is sourced from the backend API response (walletService.connect) stored in Zustand — no inline mock objects.

Tech

• Tailwind CSS (dark mode, data-[focus] variants)
• @headlessui/react v2 Menu (keyboard navigation + outside-click close)
• lucide-react icons (ChevronDown, Copy, Check, LogOut)

Closes #31

[drips-wave]

@BigNathan1 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