Stack et structure

L'application mobile est l'interface citoyenne de BlockLucky sur iOS et Android. Elle couvre le parcours du citoyen : création de compte et connexion, vérification d'âge, achat et cadeau du ticket du grand tirage, salle d'attente et tirage en direct, tickets à gratter et boutique des commerçants, parrainage, profil, sécurité et RGPD. Elle n'a ni dashboard Mairie ni espace partenaire, qui n'existent que sur le frontend web. Comme le web, elle ne gère aucune clé : le portefeuille de chaque citoyen est créé et utilisé par le backend (voir Portefeuilles intégrés).

Le code se trouve dans mobile-app/. Il est écrit en TypeScript avec Expo et React Native. L'interface suit la maquette Figma de l'application : police Inter, palette jaune « soleil » et encre bleu nuit, cartes arrondies et icônes SVG (voir Thème et composants).

#Stack technique

Les versions viennent de mobile-app/package.json. Contrairement au web, la plupart sont des plages (^, ~) ; les versions exactes sont figées par package-lock.json.

Node.js 22.12 ou plus est requis. La CI utilise la version du fichier .nvmrc à la racine.

#Dépendances installées mais inutilisées

Plusieurs paquets figurent dans package.json sans être importés dans src/ :

Ces dépendances alourdissent le binaire sans rien apporter. Elles sont à retirer ou à brancher. Les fichiers assets/fonts/Inter-*.ttf ne sont plus lus non plus : la police vient du paquet @expo-google-fonts/inter.

#Arborescence

mobile-app/
├── __tests__/               tests Jest (sans exécuteur installé)
├── assets/
│   ├── animations/          confetti, loading-spinner, roulette-spin (Lottie, inutilisés)
│   ├── fonts/               Inter Regular, Medium, Bold (non lues)
│   ├── icons/               42 icônes SVG de la maquette
│   ├── images/              icon, adaptive-icon, splash, favicon
│   └── sounds/              roue-tirage.mp3 et chrono.mp3, fournis par l'équipe
├── src/
│   ├── App.tsx              point d'entrée, chargement de la police Inter
│   ├── navigation/          RootNavigator, AuthStack, MainTabs, hooks typés
│   ├── content/             legal.ts : textes des six documents légaux, copie du fichier du web
│   ├── screens/             32 écrans : auth, lottery, marketplace, settings, sponsors
│   ├── components/
│   │   ├── auth/            formulaires d'authentification, bouton Google
│   │   ├── draw/            roue, salle d'attente, discussion, résultats
│   │   ├── lottery/         carte d'échéance, paliers, offres à gratter, formats
│   │   ├── marketplace/     zone à gratter, cartes d'offres et de codes
│   │   ├── profile/         identité, parrainage, résumé, listes de réglages
│   │   ├── settings/        cartes de l'accueil des paramètres, nom affiché, enregistrement des préférences
│   │   ├── ui/              composants de base et icônes SVG
│   │   └── web3/            IntegratedWalletCard, IntegratedWalletButton, ExplorerLink (inutilisés)
│   ├── hooks/               useAuth, useCitizenWallet, useSocket, usePoints, usePushNotifications, useAppTheme, useSound
│   ├── services/            api.client, secureStorage, socket.client, sentry.client
│   ├── store/               store Redux, RTK Query (api/) et slices
│   ├── theme/               ThemeProvider, colors, spacing, typography
│   ├── types/               types de l'API, de la navigation et de l'utilisateur
│   └── utils/               date, formatters, validators
├── app.json                 configuration Expo
├── eas.json                 profils EAS Build
├── babel.config.js          preset babel-preset-expo
├── metro.config.js          configuration Metro par défaut d'Expo
└── .env.example

#Point d'entrée

package.json déclare "main": "src/App.tsx". mobile-app/src/App.tsx appelle registerRootComponent(App). Avant tout rendu, App charge cinq graisses d'Inter avec useFonts (Inter_400Regular, Inter_500Medium, Inter_600SemiBold, Inter_700Bold, Inter_700Bold_Italic). Tant qu'elles ne sont pas prêtes, il affiche une vue vide de couleur #F6F7FA. Il monte ensuite, dans cet ordre :

1. le Provider Redux avec le store unique de store/index.ts ;
2. SafeAreaProvider ;
3. ThemeProvider (thème, langue, dimensions d'écran) ;
4. AppShell, qui choisit le style de la barre d'état selon le thème et rend RootNavigator.

Au montage, App appelle sentryClient.init(). Ce « client Sentry » (sentry.client.ts) n'est pas le SDK Sentry : il garde en mémoire les 20 derniers rapports d'erreur et n'envoie rien à aucun serveur, même si EXPO_PUBLIC_SENTRY_DSN est renseigné.

flowchart TD
  A["App.tsx : useFonts Inter"] --> R["Provider Redux"]
  R --> S["SafeAreaProvider"]
  S --> T["ThemeProvider"]
  T --> SH["AppShell : StatusBar"]
  SH --> RN["RootNavigator"]
  RN -->|"non connecté"| AU["AuthStack"]
  RN -->|"connecté"| MT["MainTabs et écrans empilés"]
  RN --> BS["Fenêtres globales ResultDialog"]

#Organisation du code applicatif

Les imports sont relatifs (../../hooks/useAuth) : il n'y a pas d'alias @/ comme sur le web.

#Configuration

mobile-app/.env.example liste huit variables. Expo intègre au bundle toute variable préfixée EXPO_PUBLIC_ au moment du démarrage de Metro ou du build.

Trois autres variables, listées vides, sont lues par SocialAuthButtons.tsx :

Sans la variable de la plateforme courante, le bouton « Continuer avec Google » reste affiché mais désactivé, avec le message « Connexion Google non configurée sur cette application. ». Les identifiants doivent aussi figurer dans GOOGLE_CLIENT_IDS côté backend (voir Authentification et stockage sécurisé).

L'ancien README mentionne EXPO_PUBLIC_CHAIN_ID=11155111 : aucune ligne du code ne lit cette variable.

#Scripts npm

Il n'existe pas de script test et Jest n'est pas installé, bien que le dossier __tests__ contienne trois fichiers et que l'ancien README cite npm test (voir Builds et publication).

#Code mort à connaître

Le hook useGaslessWeb3.ts, qui présentait les achats comme sponsorisés par la plateforme, et le composant WalletConnectButton.tsx, qui invitait à « connecter » un portefeuille externe, ont été supprimés. La refonte de l'interface a aussi supprimé LoginScreen.tsx, SettingsStack.tsx et les composants ChatBox, CountdownTimer, LeaderboardList, POAPBadge, RouletteAnimation, TicketCard et WinnerClaimCard. Les citoyens ne connectent pas de portefeuille externe.

Il reste du code sans appelant :