# ghanashyam06/monad-quick-play architecture

> Architecture diagram of the GitHub repository ghanashyam06/monad-quick-play, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ghanashyam06/monad-quick-play
- Repository: https://github.com/ghanashyam06/monad-quick-play

## Overview

Monad QuickPlay is a React gaming frontend for wallet-connected play, player statistics, profiles, and rankings. The documented user journey is: connect a wallet, choose a game, track balance and results, then review personal analytics or leaderboard standings. In the sampled implementation, wallet state and game records are held in a React context and persisted locally; the README describes Monad and Pyth-backed fairness and price feeds, but the sampled code does not verify those integrations. The graph shows those integrations as unverified.

Main entry points: [`src/pages/Index.tsx`](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/pages/Index.tsx) (Home Page), [`src/contexts/WalletContext.tsx`](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/contexts/WalletContext.tsx) (Wallet State), [`src/App.tsx`](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/App.tsx) (App and Routing), [`src/components/CoinFlip.tsx`](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/CoinFlip.tsx) (Coin Flip)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["App and Routing<br/>[App.tsx]"]
  node_home["Home Page<br/>[Index.tsx]"]
  node_hero["Landing Hero<br/>[HeroSection.tsx]"]
  node_how["How It Works<br/>[HowItWorks.tsx]"]
  node_nav["Navigation<br/>[Navbar.tsx]"]
end

subgraph group_play["Games and Rankings"]
  node_coin["Coin Flip<br/>[CoinFlip.tsx]"]
  node_prediction["Price Prediction"]
  node_dice["Dice Roll<br/>[DiceRoll.tsx]"]
  node_leaderboard["Leaderboard<br/>[Leaderboard.tsx]"]
end

subgraph group_identity["Wallet and Profiles"]
  node_walletdialog["Wallet Dialog<br/>[WalletDialog.tsx]"]
  node_wallet["Wallet State<br/>[WalletContext.tsx]"]
  node_profile["Player Profile<br/>[Profile.tsx]"]
end

subgraph group_shared["Shared UI"]
  node_ui["UI Primitives"]
  node_toaststate["Toast State<br/>[use-toast.ts]"]
end

node_player(("Player"))
node_browserstore[("Browser Local Storage")]
node_metamask["MetaMask Wallet"]
node_monad["Monad Testnet"]
node_pyth["Pyth VRF and Oracle"]

node_player -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_profile
node_home -->|"renders"| node_nav
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_how
node_home -->|"renders"| node_coin
node_home -->|"renders"| node_prediction
node_home -->|"renders"| node_dice
node_home -->|"renders"| node_leaderboard
node_nav -->|"opens"| node_walletdialog
node_nav -->|"reads and updates"| node_wallet
node_walletdialog -->|"uses"| node_wallet
node_coin -->|"updates game state"| node_wallet
node_prediction -->|"updates game state"| node_wallet
node_dice -->|"updates game state"| node_wallet
node_leaderboard -->|"reads rankings"| node_wallet
node_profile -->|"reads player data"| node_wallet
node_app -->|"configures notifications"| node_ui
node_walletdialog -->|"uses dialog controls"| node_ui
node_wallet -->|"persists data"| node_browserstore
node_wallet -->|"observes account changes"| node_metamask
node_app -->|"renders toast state"| node_toaststate
node_coin -.->|"plays on"| node_monad
node_dice -.->|"plays on"| node_monad
node_coin -.->|"uses VRF"| node_pyth
node_dice -.->|"uses VRF"| node_pyth
node_prediction -.->|"uses price feed"| node_pyth

click node_app "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/App.tsx"
click node_home "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/pages/Index.tsx"
click node_hero "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/HeroSection.tsx"
click node_how "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/HowItWorks.tsx"
click node_nav "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/Navbar.tsx"
click node_walletdialog "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/WalletDialog.tsx"
click node_wallet "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/contexts/WalletContext.tsx"
click node_profile "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/pages/Profile.tsx"
click node_coin "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/CoinFlip.tsx"
click node_prediction "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/PricePrediction.tsx"
click node_dice "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/DiceRoll.tsx"
click node_leaderboard "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/Leaderboard.tsx"
click node_ui "https://github.com/ghanashyam06/monad-quick-play/tree/main/src/components/ui"
click node_toaststate "https://github.com/ghanashyam06/monad-quick-play/blob/main/src/hooks/use-toast.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_home,node_hero,node_how,node_nav toneBlue
class node_coin,node_prediction,node_dice,node_leaderboard,node_browserstore toneAmber
class node_walletdialog,node_wallet,node_profile toneMint
class node_ui,node_toaststate toneRose
class node_player,node_metamask,node_monad,node_pyth toneIndigo
```

## Components

### Application

- [App and Routing](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/App.tsx): `src/App.tsx`
- [Home Page](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/pages/Index.tsx): `src/pages/Index.tsx`
- [Landing Hero](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/HeroSection.tsx): `src/components/HeroSection.tsx`
- [How It Works](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/HowItWorks.tsx): `src/components/HowItWorks.tsx`
- [Navigation](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`

### Games and Rankings

- [Coin Flip](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/CoinFlip.tsx): `src/components/CoinFlip.tsx`
- [Price Prediction](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/PricePrediction.tsx): `src/components/PricePrediction.tsx`
- [Dice Roll](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/DiceRoll.tsx): `src/components/DiceRoll.tsx`
- [Leaderboard](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/Leaderboard.tsx): `src/components/Leaderboard.tsx`

### Wallet and Profiles

- [Wallet Dialog](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/components/WalletDialog.tsx): `src/components/WalletDialog.tsx`
- [Wallet State](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/contexts/WalletContext.tsx): `src/contexts/WalletContext.tsx`
- [Player Profile](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/pages/Profile.tsx): `src/pages/Profile.tsx`

### Shared UI

- [UI Primitives](https://github.com/ghanashyam06/monad-quick-play/tree/main/src/components/ui): `src/components/ui`
- [Toast State](https://github.com/ghanashyam06/monad-quick-play/blob/main/src/hooks/use-toast.ts): `src/hooks/use-toast.ts`

### Other components

- **Player**
- **Browser Local Storage**
- **MetaMask Wallet**
- **Monad Testnet**
- **Pyth VRF and Oracle**

## Connections

- Player → App and Routing: opens
- App and Routing → Home Page: routes to (evidence: `src/App.tsx`)
- App and Routing → Player Profile: routes to (evidence: `src/App.tsx`)
- Home Page → Navigation: renders (evidence: `src/pages/Index.tsx`)
- Home Page → Landing Hero: renders (evidence: `src/pages/Index.tsx`)
- Home Page → How It Works: renders (evidence: `src/pages/Index.tsx`)
- Home Page → Coin Flip: renders (evidence: `src/pages/Index.tsx`)
- Home Page → Price Prediction: renders (evidence: `src/pages/Index.tsx`)
- Home Page → Dice Roll: renders (evidence: `src/pages/Index.tsx`)
- Home Page → Leaderboard: renders (evidence: `src/pages/Index.tsx`)
- Navigation → Wallet Dialog: opens (evidence: `src/components/Navbar.tsx`)
- Navigation → Wallet State: reads and updates (evidence: `src/components/Navbar.tsx`)
- Wallet Dialog → Wallet State: uses (evidence: `src/components/WalletDialog.tsx`)
- Coin Flip → Wallet State: updates game state (evidence: `src/components/CoinFlip.tsx`)
- Price Prediction → Wallet State: updates game state (evidence: `src/components/PricePrediction.tsx`)
- Dice Roll → Wallet State: updates game state (evidence: `src/components/DiceRoll.tsx`)
- Leaderboard → Wallet State: reads rankings (evidence: `src/components/Leaderboard.tsx`)
- Player Profile → Wallet State: reads player data (evidence: `src/pages/Profile.tsx`)
- App and Routing → UI Primitives: configures notifications (evidence: `src/App.tsx`)
- Wallet Dialog → UI Primitives: uses dialog controls (evidence: `src/components/WalletDialog.tsx`)
- Wallet State → Browser Local Storage: persists data (evidence: `src/contexts/WalletContext.tsx`)
- Wallet State → MetaMask Wallet: observes account changes (evidence: `src/contexts/WalletContext.tsx`)
- App and Routing → Toast State: renders toast state
- Coin Flip → Monad Testnet: plays on
- Dice Roll → Monad Testnet: plays on
- Coin Flip → Pyth VRF and Oracle: uses VRF
- Dice Roll → Pyth VRF and Oracle: uses VRF
- Price Prediction → Pyth VRF and Oracle: uses price feed