🎯 VERCEL FRONT-END PROMPT — "Skin Arena" UI (React + TailwindCSS) Objective: Build a responsive, production-ready front-end for "Skin Arena", a CS2 skin-crypto gambling platform. The front-end should integrate with a Steam OpenID backend and support crypto deposits via Phantom wallet (Solana).

⚙️ TECH STACK (Frontend Only) Framework: React (Next.js)

Styling: TailwindCSS

State: Zustand or Redux (optional, depending on complexity)

WebSockets: Socket.IO client

Wallet: Phantom wallet integration (Solana, @solana/wallet-adapter-react)

Steam Auth: Expect Steam OpenID token from backend

🧩 CORE STRUCTURE Responsive layout (desktop and mobile)

Dark theme with yellow/gold as primary, red/green for action/feedback

Persistent navigation bar:

Logo

Balance display (Coin)

Profile (Steam avatar, dropdown)

Buttons: Play (Roulette), Deposit, Marketplace, Chat

🔐 USER AUTH FLOW Steam OpenID login

User is redirected to backend for auth, returns with a token

After login, show:

Steam username + avatar

Coin balance (fetched from backend)

Access to deposit skins or crypto

🎰 ROULETTE GAME PAGE Roulette wheel UI with 15 slots (7 red, 7 black, 1 green)

Real-time:

Spin animation

Live bet placements (avatars, amounts)

Timer (10s countdown)

Bet buttons: Red / Black / Green

User's recent bets display

Provably Fair hash + round ID display

💰 DEPOSIT PAGE Two deposit methods:

Skins via Steam Inventory

Mock integration (load fake JSON items)

Selectable inventory with Coin value per item

Deposit selected items (simulate backend)

Crypto via Phantom Wallet

Solana wallet connect button (Phantom)

Show user’s wallet address

Generate deposit address/QR from backend

Poll confirmation status → credit Coins

🛒 MARKETPLACE PAGE Grid/list of skins listed by users

Filters: price range, type, rarity

Buy with Coin balance

"Withdraw Skin" → simulate trade bot popup

💬 LIVE CHAT + LIVE FEED Right-side chat drawer (expandable)

Live updates (Socket.IO):

Bets placed

Wins/losses

Skin purchases

Anti-spam (client-side debounce, caps lock filter)

🧪 MOCK DATA & DEV NOTES Mock Steam inventory using JSON file

Simulate trades, purchases, and deposits

Assume backend handles:

Auth (Steam)

Trade logic

Wallet deposit confirmation

Provably fair logic

Use .env for backend URLs

✅ PAGES TO INCLUDE pgsql Copy Edit / → Home / roulette /login → Steam login handler /deposit → Deposit crypto or skins /marketplace → View & buy listed skins /profile → Inventory, transaction history /admin → Placeholder for admin access 🛡️ SECURITY & UX Sanitize all inputs (chat, username)

Responsive with mobile-first design

Proper error handling (wallet connect, failed deposits)

Toast notifications for actions (deposits, purchases, etc.)