diff --git a/repositories/d-sports-engage-native.mdx b/repositories/d-sports-engage-native.mdx index f3a816f..17e3083 100644 --- a/repositories/d-sports-engage-native.mdx +++ b/repositories/d-sports-engage-native.mdx @@ -8,7 +8,19 @@ icon: "smartphone" **d-sports-engage-native** (package name: `engage-native`) is the native mobile app for D-Sports. It mirrors the core PWA experience on iOS and Android: wallet, shop, leaderboard, locker room, and profile. -- **Run:** `bunx expo start` or `bun run start` — then press `a` for Android or `i` for iOS, or scan the QR code with Expo Go. +## Getting started + +```bash +# Install dependencies +bun install + +# Start development server +bunx expo start +# Press 'a' for Android, 'i' for iOS, or scan QR with Expo Go + +# TypeScript check +bun tsc --noEmit +``` ## Tech stack @@ -21,7 +33,7 @@ icon: "smartphone" | State | Zustand | | Storage | MMKV | | UI | Lucide React Native | -| Navigation | Expo Router | +| Navigation | Expo Router 6 | | Package | Bun | ## Features @@ -29,18 +41,82 @@ icon: "smartphone" - **Wallet** — Tokens, holdings, pack opening, crypto checkout (via PWA backend) - **Shop** — Collectibles, cart, coin bundles, checkout - **Leaderboard** — Rankings and filters -- **Locker room** — Social feed and engagement +- **Locker room** — Social feed, games (Pick'Em, Spin Wheel, Guess the Player), quests - **Profile** — User profile and settings - **Theme** — Dark/light mode (default dark) +- **PWA-ready** — Responsive desktop layout, web hover states, keyboard nav -## Getting started +## Project structure + +```tree +app/ +├── (auth)/ # Login/signup screens +├── (onboarding)/ # New user onboarding flow +├── (tabs)/ # Main tab navigation +│ ├── wallet.tsx # Wallet screen (JSX only — logic in hook) +│ ├── shop.tsx # Shop screen (JSX only — logic in hook) +│ ├── leaderboard.tsx # Leaderboard screen +│ ├── locker-room.tsx # Social feed +│ └── profile.tsx # User profile +├── settings/ # Settings pages with nested modals/tabs +└── _layout.tsx # Root layout with providers + auth protection + +components/ +├── wallet/ # 9 extracted wallet sub-components +├── shop/ # 7 extracted shop sub-components +├── locker-room/ # Locker room components (games, feed, quests) +├── leaderboard/ # Leaderboard components +├── settings/ # Settings modals and tabs +├── layout/ # AppScreen wrapper (responsive web max-width) +├── ui/ # Reusable UI primitives +└── Icon/ # Icon wrapper using lucide-react-native + +hooks/ +├── use-wallet-screen.ts # All wallet state, effects, and handlers +├── use-shop-screen.ts # All shop state, effects, and handlers +└── use-feed-section.ts # Feed and social state + +lib/ +├── api/ # API client modules (wallet, shop, user, quests, etc.) +├── revenuecat/ # RevenueCat in-app purchases provider +├── crypto/ # Crypto transaction utilities +└── utils.ts # Shared utilities + +context/ +├── user-context.tsx # Authentication, user profile, team membership +├── collectibles-context.tsx # Owned packs and items +└── navbar-visibility-context.tsx +``` + +## Architecture patterns + +- **File-based routing** via Expo Router with route groups `(tabs)`, `(auth)`, `(onboarding)` +- **Modular screen architecture** — screen files contain only JSX; all state/effects/handlers live in dedicated hooks (`use-wallet-screen.ts`, `use-shop-screen.ts`) +- **Extracted sub-components** — wallet and shop screens decomposed into `components/wallet/` and `components/shop/` with barrel exports +- **Zustand + MMKV** for global state with synchronous persistence +- **React Context** for auth, collectibles, navbar visibility +- **API client layer** in `lib/api/` with MMKV cache fallback +- **Crypto checkout** via Thirdweb SDK calling PWA backend for on-chain payments +- **Path alias** `@/*` maps to project root + +## Checkout and payments + +The app supports multiple payment methods: + +- **RevenueCat** — fiat payments: Apple IAP (native), Google Play (native), Stripe (web) +- **Crypto checkout** — calls PWA backend `POST /api/checkout/crypto` + `POST /api/checkout/crypto/verify` +- **Thirdweb SDK** — on-chain transaction signing +- Supported chains: Arbitrum (default), Ethereum, Polygon + +## Branding -1. Clone the repository and run `bun install`. -2. Configure environment (Clerk, RevenueCat, Thirdweb, API base URL) per repo README. -3. Run `bunx expo start`. -4. For development builds: `bun run build:dev` (EAS) or run with Expo dev client. +| Color | Value | +| ----- | ----- | +| Base background (dark) | `#0a0e1a` | +| Accent gold | `#F5C842` | +| Primary blue | `#4169E1` | -The app targets both native and web (responsive) and uses the same backend (d-sports-api) as the PWA for API and checkout flows. +Default theme is dark mode. See how the native app fits with the PWA, site, and Mic'd Up.