# anonroom0/anonroom architecture

> Architecture diagram of the GitHub repository anonroom0/anonroom, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-05). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/anonroom0/anonroom
- Repository: https://github.com/anonroom0/anonroom

## Overview

#### Purpose and entry points
This is a client-side raffle/rewards application with wallet, profile, ticket, redemption, and deposit-related flows. The frontend starts at `src/main.jsx`, renders the application shell in `src/App.jsx`, and is built for static hosting (`index.html`, `vercel.json`).

#### Application shell and navigation
`src/App.jsx` is the primary UI composition and routing/control boundary. It selects major screens for landing, home, raffle participation, tickets, redemption, profile, and banned-user states:
- `src/views/LandingView.jsx`
- `src/views/HomeView.jsx`
- `src/views/RaffleView.jsx`
- `src/views/ProfileView.jsx`
- `src/views/BannedView.jsx`

#### Identity and wallet boundary
Authentication/session state is centralized in `src/context/AuthContext.jsx`. Wallet connection or account interaction is isolated in `src/components/WalletModal.jsx`, allowing views to depend on shared identity state rather than directly managing wallet UI. Branding is encapsulated by `src/components/BrandLogo.jsx`.

#### User journey modules
The profile area is a feature hub for operational user workflows: KYC, rewards, referrals, tasks, notifications, winnings, shipping, documents, and help. These screens form the account-management boundary:
- `src/views/Profile/KycPage.jsx`
- `src/views/Profile/RewardCenter.jsx`
- `src/views/Profile/WinningsManager.jsx`
- `src/views/Profile/ShipmentTracker.jsx`

Ticket ownership and redemption are separate top-level journeys in `src/views/MyTicketView.jsx` and `src/views/ReedemView.jsx`.

#### Client service layer
External and device-facing behavior is separated from views through services:
- `src/services/supabase.js` and `src/services/SupabaseService.js` provide the Supabase integration boundary.
- `src/services/MockApi.js` supports mock or fallback API behavior.
- `src/services/deviceTracker.js` handles device-related tracking.
- `src/services/AudioEngine.js` provides application audio behavior.

Views should consume these services rather than directly coupling UI logic to backend or browser APIs.

#### Deposits, custody, and blockchain processing
The repository includes an Ethereum-compatible deposit contract at `contracts/AnonroomDeposit.sol`. Deposit processing is handled server-side by Supabase Edge Functions:
- `supabase/functions/scan-deposits/index.ts` scans or ingests deposits.
- `supabase/functions/custodial-vault/index.ts` implements custodial-vault operations.

This creates a critical trust boundary: browser UI initiates user actions; blockchain and sensitive custody/deposit processing belong in the contract and Edge Functions rather than the React client.

#### Runtime and delivery
The application is a JavaScript/React frontend with checked-in production output under `dist/`, including `dist/index.html`. Supabase is the backend/serverless runtime, while Vercel is the declared deployment target via `vercel.json`. Static public documents are served from `public/whitepaper.docx` and `public/T&Cs.docx`.

Main entry points: [`src/App.jsx`](https://github.com/anonroom0/anonroom/blob/main/src/App.jsx) (App shell), [`src/views/ProfileView.jsx`](https://github.com/anonroom0/anonroom/blob/main/src/views/ProfileView.jsx) (Profile hub), [`src/services/supabase.js`](https://github.com/anonroom0/anonroom/blob/main/src/services/supabase.js) (Supabase client), [`supabase/functions/scan-deposits/index.ts`](https://github.com/anonroom0/anonroom/blob/main/supabase/functions/scan-deposits/index.ts) (Deposit scanner)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React client"]
  node_main["Frontend entry<br/>React entry<br/>[main.jsx]"]
  node_app["App shell<br/>routing shell<br/>[App.jsx]"]
  node_auth["Auth session<br/>context<br/>[AuthContext.jsx]"]
  node_wallet["Wallet modal<br/>wallet UI<br/>[WalletModal.jsx]"]
  node_landing["Landing<br/>view<br/>[LandingView.jsx]"]
  node_home["Home<br/>view<br/>[HomeView.jsx]"]
  node_raffle["Raffle participation<br/>view<br/>[RaffleView.jsx]"]
end

subgraph group_account["Account workflows"]
  node_profile["Profile hub<br/>view<br/>[ProfileView.jsx]"]
  node_tickets["My tickets<br/>view<br/>[MyTicketView.jsx]"]
  node_redeem["Redemption<br/>view<br/>[ReedemView.jsx]"]
  node_kyc["KYC<br/>profile page<br/>[KycPage.jsx]"]
  node_rewards["Reward center<br/>profile page<br/>[RewardCenter.jsx]"]
  node_winnings["Winnings manager<br/>profile page"]
  node_shipments["Shipment tracker<br/>profile page"]
end

subgraph group_services["Client services"]
  node_supabase["Supabase client<br/>backend integration<br/>[supabase.js]"]
  node_mockapi["Mock API<br/>fallback API<br/>[MockApi.js]"]
  node_device["Device tracking<br/>device service<br/>[deviceTracker.js]"]
  node_audio["Audio engine<br/>audio service<br/>[AudioEngine.js]"]
end

subgraph group_backend["Custody &amp; deposits"]
  node_contract{{"Deposit contract<br/>Solidity contract"}}
  node_scanner{{"Deposit scanner<br/>Edge Function<br/>[index.ts]"}}
  node_vault{{"Custodial vault<br/>Edge Function<br/>[index.ts]"}}
end

subgraph group_delivery["Delivery"]
  node_vercel["Vercel deployment<br/>static hosting<br/>[vercel.json]"]
end

node_main -->|"renders"| node_app
node_app -->|"uses session"| node_auth
node_app -->|"opens"| node_wallet
node_app -->|"selects"| node_landing
node_app -->|"selects"| node_home
node_app -->|"selects"| node_raffle
node_app -->|"selects"| node_profile
node_app -->|"selects"| node_tickets
node_app -->|"selects"| node_redeem
node_profile -->|"account flow"| node_kyc
node_profile -->|"account flow"| node_rewards
node_profile -->|"account flow"| node_winnings
node_profile -->|"account flow"| node_shipments
node_app -->|"backend access"| node_supabase
node_app -.->|"fallback data"| node_mockapi
node_app -->|"tracks device"| node_device
node_app -->|"plays audio"| node_audio
node_supabase -->|"invokes"| node_scanner
node_supabase -->|"invokes"| node_vault
node_contract -->|"deposit events"| node_scanner
node_scanner -->|"processed deposits"| node_vault
node_main -->|"built and deployed"| node_vercel

click node_main "https://github.com/anonroom0/anonroom/blob/main/src/main.jsx"
click node_app "https://github.com/anonroom0/anonroom/blob/main/src/App.jsx"
click node_auth "https://github.com/anonroom0/anonroom/blob/main/src/context/AuthContext.jsx"
click node_wallet "https://github.com/anonroom0/anonroom/blob/main/src/components/WalletModal.jsx"
click node_landing "https://github.com/anonroom0/anonroom/blob/main/src/views/LandingView.jsx"
click node_home "https://github.com/anonroom0/anonroom/blob/main/src/views/HomeView.jsx"
click node_raffle "https://github.com/anonroom0/anonroom/blob/main/src/views/RaffleView.jsx"
click node_profile "https://github.com/anonroom0/anonroom/blob/main/src/views/ProfileView.jsx"
click node_tickets "https://github.com/anonroom0/anonroom/blob/main/src/views/MyTicketView.jsx"
click node_redeem "https://github.com/anonroom0/anonroom/blob/main/src/views/ReedemView.jsx"
click node_kyc "https://github.com/anonroom0/anonroom/blob/main/src/views/Profile/KycPage.jsx"
click node_rewards "https://github.com/anonroom0/anonroom/blob/main/src/views/Profile/RewardCenter.jsx"
click node_winnings "https://github.com/anonroom0/anonroom/blob/main/src/views/Profile/WinningsManager.jsx"
click node_shipments "https://github.com/anonroom0/anonroom/blob/main/src/views/Profile/ShipmentTracker.jsx"
click node_supabase "https://github.com/anonroom0/anonroom/blob/main/src/services/supabase.js"
click node_mockapi "https://github.com/anonroom0/anonroom/blob/main/src/services/MockApi.js"
click node_device "https://github.com/anonroom0/anonroom/blob/main/src/services/deviceTracker.js"
click node_audio "https://github.com/anonroom0/anonroom/blob/main/src/services/AudioEngine.js"
click node_contract "https://github.com/anonroom0/anonroom/blob/main/contracts/AnonroomDeposit.sol"
click node_scanner "https://github.com/anonroom0/anonroom/blob/main/supabase/functions/scan-deposits/index.ts"
click node_vault "https://github.com/anonroom0/anonroom/blob/main/supabase/functions/custodial-vault/index.ts"
click node_vercel "https://github.com/anonroom0/anonroom/blob/main/vercel.json"

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_main,node_app,node_auth,node_wallet,node_landing,node_home,node_raffle toneBlue
class node_profile,node_tickets,node_redeem,node_kyc,node_rewards,node_winnings,node_shipments toneAmber
class node_supabase,node_mockapi,node_device,node_audio toneMint
class node_contract,node_scanner,node_vault toneRose
class node_vercel toneIndigo
```

## Components

### React client

- [Frontend entry](https://github.com/anonroom0/anonroom/blob/main/src/main.jsx): React entry · `src/main.jsx`
- [App shell](https://github.com/anonroom0/anonroom/blob/main/src/App.jsx): routing shell · Composes major screens and application state boundaries. · `src/App.jsx`
- [Auth session](https://github.com/anonroom0/anonroom/blob/main/src/context/AuthContext.jsx): context · `src/context/AuthContext.jsx`
- [Wallet modal](https://github.com/anonroom0/anonroom/blob/main/src/components/WalletModal.jsx): wallet UI · `src/components/WalletModal.jsx`
- [Landing](https://github.com/anonroom0/anonroom/blob/main/src/views/LandingView.jsx): view · `src/views/LandingView.jsx`
- [Home](https://github.com/anonroom0/anonroom/blob/main/src/views/HomeView.jsx): view · `src/views/HomeView.jsx`
- [Raffle participation](https://github.com/anonroom0/anonroom/blob/main/src/views/RaffleView.jsx): view · `src/views/RaffleView.jsx`

### Account workflows

- [Profile hub](https://github.com/anonroom0/anonroom/blob/main/src/views/ProfileView.jsx): view · `src/views/ProfileView.jsx`
- [My tickets](https://github.com/anonroom0/anonroom/blob/main/src/views/MyTicketView.jsx): view · `src/views/MyTicketView.jsx`
- [Redemption](https://github.com/anonroom0/anonroom/blob/main/src/views/ReedemView.jsx): view · `src/views/ReedemView.jsx`
- [KYC](https://github.com/anonroom0/anonroom/blob/main/src/views/Profile/KycPage.jsx): profile page · `src/views/Profile/KycPage.jsx`
- [Reward center](https://github.com/anonroom0/anonroom/blob/main/src/views/Profile/RewardCenter.jsx): profile page · `src/views/Profile/RewardCenter.jsx`
- [Winnings manager](https://github.com/anonroom0/anonroom/blob/main/src/views/Profile/WinningsManager.jsx): profile page · `src/views/Profile/WinningsManager.jsx`
- [Shipment tracker](https://github.com/anonroom0/anonroom/blob/main/src/views/Profile/ShipmentTracker.jsx): profile page · `src/views/Profile/ShipmentTracker.jsx`

### Client services

- [Supabase client](https://github.com/anonroom0/anonroom/blob/main/src/services/supabase.js): backend integration · `src/services/supabase.js`
- [Mock API](https://github.com/anonroom0/anonroom/blob/main/src/services/MockApi.js): fallback API · `src/services/MockApi.js`
- [Device tracking](https://github.com/anonroom0/anonroom/blob/main/src/services/deviceTracker.js): device service · `src/services/deviceTracker.js`
- [Audio engine](https://github.com/anonroom0/anonroom/blob/main/src/services/AudioEngine.js): audio service · `src/services/AudioEngine.js`

### Custody & deposits

Sensitive processing stays outside the browser.

- [Deposit contract](https://github.com/anonroom0/anonroom/blob/main/contracts/AnonroomDeposit.sol): Solidity contract · Ethereum-compatible on-chain deposit boundary. · `contracts/AnonroomDeposit.sol`
- [Deposit scanner](https://github.com/anonroom0/anonroom/blob/main/supabase/functions/scan-deposits/index.ts): Edge Function · Ingests or scans deposits server-side. · `supabase/functions/scan-deposits/index.ts`
- [Custodial vault](https://github.com/anonroom0/anonroom/blob/main/supabase/functions/custodial-vault/index.ts): Edge Function · Performs sensitive custodial operations. · `supabase/functions/custodial-vault/index.ts`

### Delivery

- [Vercel deployment](https://github.com/anonroom0/anonroom/blob/main/vercel.json): static hosting · `vercel.json`

## Connections

- Frontend entry → App shell: renders
- App shell → Auth session: uses session
- App shell → Wallet modal: opens
- App shell → Landing: selects
- App shell → Home: selects
- App shell → Raffle participation: selects
- App shell → Profile hub: selects
- App shell → My tickets: selects
- App shell → Redemption: selects
- Profile hub → KYC: account flow
- Profile hub → Reward center: account flow
- Profile hub → Winnings manager: account flow
- Profile hub → Shipment tracker: account flow
- App shell → Supabase client: backend access
- App shell → Mock API: fallback data
- App shell → Device tracking: tracks device
- App shell → Audio engine: plays audio
- Supabase client → Deposit scanner: invokes
- Supabase client → Custodial vault: invokes
- Deposit contract → Deposit scanner: deposit events
- Deposit scanner → Custodial vault: processed deposits
- Frontend entry → Vercel deployment: built and deployed