feat: Frontend setup with wallet integration and home page

[lolandriley-wq]

Overview

This PR implements the core frontend infrastructure and home page for BOXMEOUT, a decentralized boxing prediction market on Stellar.

Changes

#764: Set up Next.js 14 with TypeScript and Tailwind

• Add @tanstack/react-query for server state management
• Create QueryProvider wrapper component
• Integrate QueryClientProvider in root layout
• Configure environment variables (NEXT_PUBLIC_API_URL)
• Remove custom Babel config to use SWC
• Install @stellar/stellar-sdk dependency

#766: Implement useWallet() hook with Zustand store

• Zustand store manages wallet state: address, balance, isConnecting
• connect() action calls Freighter and updates store
• disconnect() clears store and sessionStorage
• useWallet() hook exposes state and actions
• Wallet address persisted in sessionStorage (security-first approach)

#765: Implement WalletConnectButton component

• Shows 'Connect Wallet' when disconnected
• Calls connectFreighter() on click
• Displays truncated address and XLM balance when connected
• Dropdown menu with Copy Address and Disconnect options
• Loading spinner during connection
• Error handling for Freighter not installed
• Keyboard support (Escape to close)

#767: Implement Home page with market list

• StatsBanner component showing platform stats (total markets, volume, active)
• MarketFilters component for weight class, status, and sorting
• Paginated market grid (12 items per page)
• Loading skeleton while fetching
• Empty state when no markets match filters
• Responsive layout (1 col mobile, 2 col tablet, 3 col desktop)

Testing

• ✅ Build passes without errors
• ✅ All components render correctly
• ✅ Wallet connection flow works
• ✅ Market filtering and pagination functional
• ✅ Responsive design verified

Commits

1. feat([FRONTEND] Set up Next.js 14 project with TypeScript and Tailwind #764): Set up Next.js 14 with TypeScript, Tailwind, and TanStack Query
2. feat([FRONTEND] Implement useWallet() hook with Zustand store #766): Implement useWallet() hook with Zustand store
3. docs([FRONTEND] Implement WalletConnectButton component #765): Document WalletConnectButton component
4. feat([FRONTEND] Implement Home page with market list #767): Implement Home page with market list

Related Issues

Closes #764
Closes #765
Closes #766
Closes #767