Mobile App Screens

All screens are located in src/components/pages/.

Authentication Flow

Auth Screen

Path: src/components/pages/auth/

Email Input - User enters email
OTP Input - User enters 6-digit code
Profile Setup - First-time username setup (if needed)

Main Screens

Home

Path: src/components/pages/Home/

Dashboard screen showing:

User balance
Featured challenges
Quick action buttons
Active match indicator

Challenges

Path: src/components/pages/Challenges/

Browse available trading challenges:

Challenge cards
Entry fee and reward display
Join button

Challenge Detail

Path: src/components/pages/ChallengeDetail/

Single challenge information:

Full description
Rules and conditions
Entry fee
Prize pool
Join/Queue button

Make Match

Path: src/components/pages/MakeMatch/

Matchmaking lobby:

Queue status
Player slots
Cancel button
Countdown timer

Match Loading

Path: src/components/pages/MatchLoading/

Transition screen:

Loading animation
Match starting indicator

Trading Screens

Live Challenge

Path: src/components/pages/LiveChallenge/

The main trading interface:


┌─────────────────────────────────────┐
│          Timer / Status             │
├─────────────────────────────────────┤
│                                     │
│           Trading Chart             │
│      (TradingView/Lightweight)      │
│                                     │
├─────────────────────────────────────┤
│         Asset Selector              │
├─────────────────────────────────────┤
│         Order Panel                 │
│   ┌─────────┐   ┌─────────┐        │
│   │   BUY   │   │  SELL   │        │
│   └─────────┘   └─────────┘        │
│   Margin: [____]  Leverage: [__]   │
│   SL: [____]      TP: [____]       │
├─────────────────────────────────────┤
│         Open Positions              │
│   BTC +2.5% | $125 | [Close]       │
├─────────────────────────────────────┤
│     Virtual Balance: $100.00       │
└─────────────────────────────────────┘

Components:

Chart: Real-time price chart
Asset Selector: Choose trading pair
Order Panel: Buy/Sell with parameters
Position List: Active positions with PnL
Balance Bar: Virtual balance display

Challenge Facts

Path: src/components/pages/ChallengeFacts/

Post-match results screen:

Final ranking
PnL summary
Rewards earned
XP gained
Confetti animation (for winner)

Profile Screens

Profile

Path: src/components/pages/Profile/

User profile showing:

Avatar
Username
Cup points
XP / Level
Stats
Settings link
Logout button

User Details

Path: src/components/pages/UserDetails/

Other user’s public profile:

Avatar
Username
Public stats
Add friend option

Wallet Screens

Wallet

Path: src/components/pages/Wallet/

Wallet overview:

Balance display
Deposit button
Withdraw button
Transaction history

Deposit

Path: src/components/pages/Deposit/

Deposit flow:

QR code display
Wallet address
Copy button
Instructions

Deposit PayPal

Path: src/components/pages/DepositPayPal/

PayPal deposit integration:

Amount input
PayPal redirect

Withdraw

Path: src/components/pages/Withdraw/

Withdrawal flow:

Amount input
Destination address
Confirm button

Friends

Path: src/components/pages/Friends/

Friend management:

Friend list
Add friend
Friend requests

Referral

Path: src/components/pages/Referral/

Referral program:

Referral code
Share options
Referred users list
Rewards info

Leaderboard

Path: src/components/pages/Leaderboard/

Global rankings:

Top players list
Current user position
Cup/XP display

Other Screens

Store

Path: src/components/pages/Store/

In-app shop:

Item grid
Categories
Purchase flow

Achievements

Path: src/components/pages/Achievements/

Achievement system:

Achievement grid
Progress indicators
Locked/Unlocked states

Tab Bar

Bottom navigation with:

Home
Challenges
Wallet
Achievements
Profile

Routing


// Route definitions
const routes = [
  { path: '/', component: Home },
  { path: '/challenges', component: Challenges },
  { path: '/challenge/:id', component: ChallengeDetail },
  { path: '/match/make/:gameId', component: MakeMatch },
  { path: '/match/loading/:matchId', component: MatchLoading },
  { path: '/match/live/:matchId', component: LiveChallenge },
  { path: '/match/facts/:matchId', component: ChallengeFacts },
  { path: '/wallet', component: Wallet },
  { path: '/deposit', component: Deposit },
  { path: '/withdraw', component: Withdraw },
  { path: '/profile', component: Profile },
  { path: '/user/:id', component: UserDetails },
  { path: '/achievements', component: Achievements },
  { path: '/leaderboard', component: Leaderboard },
  { path: '/store', component: Store },
  { path: '/friends', component: Friends },
  { path: '/referral', component: Referral },
  { path: '/auth', component: Auth },
];