YaniPay Mobile Documentation
Documentation complète de l'application mobile YaniPay. 67 écrans, 14 services, DeFi intégré, programme de fidélité 5 tiers, paiements NFC et architecture offline-first.
Overview
L'application mobile YaniPay est une super-app fintech complète construite avec React Native 0.81.5 et Expo SDK 54. Elle offre une expérience utilisateur native sur iOS et Android avec des fonctionnalités de paiement, gestion de cartes, KYC, programme de fidélité 5 tiers, DeFi natif et paiements NFC.
Conçue pour être performante, sécurisée et fonctionnelle hors-ligne, l'app mobile synchronise en temps réel avec le backend YaniPay via 14 services dédiés. Les utilisateurs peuvent gérer leur argent, investir en DeFi, et cumuler des récompenses de manière fluide entre tous leurs appareils.
67
Écrans natifs
14
Services API
9
Groupes de routes
16+
Langues supportées
Technologies
L'app mobile YaniPay intègre nativement les deux technologies fondamentales de l'écosystème :
Y.A.N.I. Mobile
Assistant IA intégré pour des conseils financiers personnalisés, détection de fraude et notifications intelligentes directement dans votre poche.
Découvrir Y.A.N.I. →YaniChain Mobile
Accès DeFi natif avec staking YANI, swap de tokens et suivi de rewards en temps réel depuis l'app mobile.
Découvrir YaniChain →IA + Blockchain dans votre poche
Why Mobile-First?
YaniPay adopte une approche mobile-firstpour plusieurs raisons stratégiques :
- Accessibilité - 80% des utilisateurs fintech consultent leurs finances sur mobile
- Sécurité- Authentification biométrique native (Face ID, Touch ID)
- Notifications- Alertes push instantanées pour les transactions
- Paiements - QR code, NFC, et paiement sans contact
- DeFi - Staking, swap et yield farming dans votre poche
- Fidélité- Cashback, challenges et rewards en temps réel
- Offline - Architecture offline-first avec sync queue
Synchronisation Multi-Plateforme
User Cases
Découvrez comment nos utilisateurs utilisent l'application mobile au quotidien :
Thomas, 24 ans - Paris
Scénario : Paiement entre amis au restaurant
- 1. Ouvre l'app et scanne le QR de son ami
- 2. Entre le montant de sa part (32,50€)
- 3. Confirme avec Face ID
- 4. Paiement instantané + notification push reçue
Marie, 35 ans - Lyon
Scénario :Vérification KYC pour augmenter ses limites
- 1. Reçoit notification pour compléter le KYC
- 2. Scanne sa carte d'identité via la caméra
- 3. Prend un selfie vidéo pour vérification
- 4. Validation automatique en 2 minutes
Lucas, 28 ans - Marseille
Scénario : Staking de YANICoin + swap sur le DEX mobile
- 1. Va dans l'onglet DeFi > Staking
- 2. Sélectionne le pool 12% APY (90 jours)
- 3. Stake 500 YANI avec validation biométrique
- 4. Suit ses rewards en temps réel sur le dashboard
Sophie, 42 ans - Bordeaux
Scénario :Cashback fidélité et challenge hebdomadaire
- 1. Paye son café avec NFC tap-to-pay
- 2. Reçoit 3% cashback automatique (tier Gold)
- 3. Complète le challenge "5 paiements cette semaine"
- 4. Débloque 50 points bonus dans le rewards store
Architecture
L'application mobile s'intègre dans l'écosystème YaniPay avec une architecture moderne basée sur 14 services modulaires, une synchronisation temps réel et un mode offline-first.
Mode Hors-Ligne
14 Mobile Services NEW
L'application mobile repose sur 14 services modulairesqui gèrent l'ensemble des interactions avec le backend YaniPay :
| # | Service | Fichier | Description |
|---|---|---|---|
| 1 | API Client | api.ts | Client HTTP de base, interceptors Axios, refresh token automatique |
| 2 | User Service | userService.ts | Profil utilisateur, preferences, parametres du compte |
| 3 | Wallet Service | walletService.ts | Soldes, historique de transactions, multi-devises |
| 4 | Card Service | cardService.ts | Gestion des cartes virtuelles/physiques, freeze/unfreeze, limites |
| 5 | Payment Service | paymentService.ts | Traitement des paiements, QR code, NFC, P2P |
| 6 | Transaction Service | transactionService.ts | Historique detaille, filtres, export, recherche |
| 7 | KYC Service | kycService.ts | Verification d'identite, documents, selfie video |
| 8 | Loyalty Service | loyaltyService.ts | Programmes de fidelite, cashback, challenges, rewards |
| 9 | Staking Service | stakingService.ts | Staking YANI multi-pools, rewards, lock periods |
| 10 | DEX Service | dexService.ts | Swap de tokens AMM, pools de liquidite, prix temps reel |
| 11 | Identity Service | identityService.ts | Gestion de documents, pieces d'identite, preuves |
| 12 | Notification Service | notificationService.ts | Push notifications, alertes in-app, preferences |
| 13 | Offline Queue | offlineQueue.ts | File d'attente offline, sync automatique, retry exponentiel |
| 14 | Support Service | supportService.ts | FAQ, tickets, centre d'aide, chat support |
Architecture Modulaire
Key Features
Paiements
- QR code scan & pay
- NFC tap-to-pay
- Transferts P2P instantanés
- Top-up via Stripe
- Multi-devises
Fidélité
- 5 tiers (Bronze → Diamond)
- Cashback automatique
- Challenges hebdomadaires
- Rewards store
- Parrainage
DeFi
- Staking YANI (multi-pools)
- DEX swap AMM
- Yield farming
- Pool de liquidité
- Governance DAO
Sécurité
- Face ID / Touch ID
- Expo SecureStore
- KYC Onfido SDK
- JWT + refresh tokens
- Device management
Offline
- Architecture offline-first
- Sync queue avec retry
- Cache local sécurisé
- Résolution de conflits
- Exponential backoff
Cartes
- Cartes virtuelles
- Cartes physiques
- Freeze / unfreeze
- Limites personnalisées
- NFC contactless
New API Endpoints NEW
Nouveaux endpoints mobile ajoutes pour enrichir les fonctionnalites de paiement et de gestion de portefeuille :
/api/v1/mobile/wallet/transferTransfert P2P entre utilisateurs YaniPay
Envoi instantane vers un autre wallet YaniPay par adresse, email ou QR code. Supporte EUR et YANI.
/api/v1/mobile/payments/scheduledListe des paiements programmes
Recupere tous les paiements recurrents et programmes de l'utilisateur avec statut et prochaine execution.
/api/v1/mobile/payments/scheduledCreer un paiement programme
Planifie un paiement recurrent (quotidien, hebdomadaire, mensuel) vers un beneficiaire avec montant fixe.
/api/v1/mobile/wallet/statsStatistiques du portefeuille
Retourne les statistiques agregees : total depenses/revenus par periode, evolution du solde, top categories.
/api/v1/mobile/wallet/sepa-transferVirement SEPA depuis le mobile
Initie un virement SEPA vers un IBAN externe. Requiert KYC valide (niveau 2+). Delai 1-2 jours ouvrables.
// P2P Transfer
const transfer = await walletService.transfer({
recipientId: 'usr_abc123',
amount: '50.00',
currency: 'EUR',
memo: 'Remboursement restaurant',
});
// Create scheduled payment
const scheduled = await paymentService.createScheduled({
recipientId: 'usr_xyz789',
amount: '100.00',
currency: 'EUR',
frequency: 'monthly', // 'daily' | 'weekly' | 'monthly'
startDate: '2026-04-01',
label: 'Loyer colocation',
});
// Wallet statistics
const stats = await walletService.getStats({
period: '30d', // '7d' | '30d' | '90d' | '1y'
currency: 'EUR',
});
// => { totalSpent, totalReceived, balanceEvolution[], topCategories[] }
// SEPA transfer
const sepa = await walletService.sepaTransfer({
iban: 'FR76 3000 6000 0112 3456 7890 189',
beneficiaryName: 'Jean Dupont',
amount: '250.00',
label: 'Virement mensuel',
});Authentification Requise
Authorization: Bearer <token>. Le refresh token est gere automatiquement par les interceptors Axios du service API de base.Configuration API
L'application mobile gère automatiquement l'URL de base de l'API selon l'environnement. La logique est définie dans mobile/src/config/constants.ts.
Dev Local
http://[EXPO_LOCAL_IP]:3000Auto-détecté via Constants.expoConfig?.hostUri. Évite le problème "localhost injoignable depuis l'appareil".
Dev VPS
http://51.77.222.1:3000Serveur OVH VPS-2 (6 vCores / 12 Go RAM). Configuré via EXPO_PUBLIC_API_URL dans le fichier .env. Actif depuis le commit 3d0b3d0d.
Production
https://yanipay.com/apiFallback automatique quand __DEV__ est false. Aucune configuration manuelle requise.
// Logique de sélection automatique de l'URL API
function getDefaultApiUrl(): string {
if (__DEV__) {
// expo-constants expose l'IP du dev server (ex: "192.168.1.28:8081")
const debuggerHost =
Constants.expoConfig?.hostUri ??
Constants.manifest2?.extra?.expoGo?.debuggerHost;
if (debuggerHost) {
const host = debuggerHost.split(':')[0]; // on retire le port Expo
return `http://${host}:3000/api`;
}
}
return 'https://yanipay.com/api';
}
// Priorité à la variable d'environnement si définie
export const API_BASE_URL =
process.env.EXPO_PUBLIC_API_URL || getDefaultApiUrl();# Pour pointer vers le serveur VPS de développement
EXPO_PUBLIC_API_URL=http://51.77.222.1:3000/apiPriorité de Configuration
EXPO_PUBLIC_API_URLprend toujours le dessus. En développement local sans variable d'environnement, l'IP est auto-détectée depuis le serveur Expo. En production, https://yanipay.com/apiest utilisé automatiquement.Loyalty API Mobile NEW
10 endpoints dédiés au programme de fidélité mobile, documentés dans /docs/api/mobile/loyalty.
/api/mobile/loyalty/catalogCatalogue des programmes de fidélité disponibles
/api/mobile/loyalty/enroll/{id}Adhérer à un programme de fidélité
/api/mobile/loyalty/cardsCartes de fidélité de l'utilisateur
/api/mobile/loyalty/cards/{id}Détail d'une carte de fidélité
/api/mobile/loyalty/cards/{id}/redeemUtiliser des points (récompense)
/api/mobile/loyalty/transactionsHistorique des transactions de points
/api/mobile/loyalty/statsStatistiques globales de fidélité
/api/mobile/loyalty/awardAttribuer des points manuellement (usage interne)
/api/mobile/loyalty/recommendationsRecommandations IA de programmes
/api/mobile/loyalty/wallet-passGénérer un Apple/Google Wallet pass
Technology Stack
// Core Framework
React Native: 0.81.5
Expo SDK: 54
TypeScript: 5.9.3
Expo Router: v6 (file-based routing)
// State Management
Zustand: Lightweight store (auth, preferences)
TanStack React Query: v5.17 (server state + cache)
// UI & Animations
React Native Reanimated: v4.1.1
Expo Linear Gradient
Expo Blur
Custom theme system (dark/light)
// Payments & Identity
Stripe React Native: v0.50.3 (cards, NFC, top-up)
Onfido SDK: v10.6.0 (KYC documents + selfie)
// DeFi
Custom staking service (multi-pool)
DEX service (AMM swap)
Yield farming integration
// Security
Expo SecureStore (encrypted storage)
Expo Local Authentication (Face ID / Touch ID)
JWT + refresh token rotation
Device fingerprinting
// Networking
Axios with custom interceptors
Automatic retry (exponential backoff)
Offline queue with conflict resolution
Push notifications (FCM + APNs)
// i18n
16+ languages supported
RTL layout supportVersions Minimales Requises
- iOS 13.0+ (pour Face ID et certaines fonctionnalités)
- Android 6.0+ (API level 23, pour biométrie)
- Expo SDK 54 est obligatoire pour les nouvelles fonctionnalités
Project Structure
mobile/
├── app/ # Expo Router screens (67 screens)
│ ├── _layout.tsx # Root layout with providers
│ ├── index.tsx # Splash screen
│ ├── (auth)/ # Auth: login, register, welcome, forgot-password
│ ├── (tabs)/ # Main: home, cards, scan, wallet, profile
│ ├── identity/ # KYC: documents, selfie, address, proof
│ ├── payment/ # Payments: send, receive, topup, qr-pay, scheduled
│ ├── defi/ # DeFi: staking, swap, pools, rewards, governance
│ ├── loyalty/ # Loyalty: cashback, challenges, tiers, rewards, referrals
│ ├── settings/ # Settings: profile, security, notifications, appearance, language
│ ├── support/ # Support: FAQ, contact, help center, tickets
│ └── legal/ # Legal: terms, privacy, licenses
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # Base UI elements
│ │ ├── cards/ # Card components
│ │ ├── loyalty/ # Loyalty UI
│ │ └── defi/ # DeFi UI
│ ├── services/ # API service layer (14 services)
│ │ ├── api.ts # Base API client + interceptors
│ │ ├── userService.ts # User profile & preferences
│ │ ├── walletService.ts # Wallet & transactions
│ │ ├── cardService.ts # Card management
│ │ ├── paymentService.ts # Payment processing
│ │ ├── transactionService.ts # Transaction history
│ │ ├── kycService.ts # Identity verification
│ │ ├── loyaltyService.ts # Loyalty programs & rewards
│ │ ├── stakingService.ts # DeFi staking
│ │ ├── dexService.ts # Token swap (DEX)
│ │ ├── identityService.ts # Document management
│ │ ├── notificationService.ts # Push & in-app
│ │ ├── offlineQueue.ts # Offline sync queue
│ │ └── supportService.ts # Help & tickets
│ ├── store/ # Zustand stores
│ │ ├── authStore.ts # Auth state + biometric
│ │ └── preferencesStore.ts # User preferences
│ ├── hooks/ # Custom React hooks
│ ├── config/ # Constants & configuration
│ ├── types/ # TypeScript interfaces
│ ├── i18n/ # Internationalization (16+ languages)
│ └── utils/ # Helper functions
├── assets/ # Images, icons, fonts
└── app.json # Expo configurationQuick Start
- Navigate to mobile directory:
cd mobile - Install dependencies:
pnpm install - Start development server:
# iOS Simulator pnpm ios # Android Emulator pnpm android # Expo Go (scan QR code) pnpm start - Use Demo Mode:
L'application inclut un mode démo pour tester sans backend. Sur l'écran de login, utilisez le bouton "Mode Démo" pour accéder à l'application avec des données fictives.
Hot Reload
r dans le terminal pour recharger.Next Steps
Installation Guide
Configuration de l'environnement de développement
Screens & Navigation
67 écrans et 9 groupes de navigation
14 API Services
Architecture modulaire complète
DeFi Mobile
Staking, DEX swap et yield farming
Fidélité
5 tiers, cashback, challenges, rewards
Offline & Sync
Architecture offline-first et sync queue
Sécurité
Biométrie, NFC, SecureStore, KYC
State Management
Zustand + React Query
Loyalty API Mobile
10 endpoints fidélité documentés
Configuration API
Local, VPS dev (51.77.222.1), Production
References
Ressources officielles et documentation de référence pour le développement mobile :
SDK 54, Router v6, Build services, EAS
Components, APIs, Architecture guide
State management, Persist middleware, DevTools
Security best practices pour apps mobiles
Payment integration pour React Native
Identity verification and KYC
Last updated: 2026-04-09