Mkungusiops/rwanda-dpi-citizen-wallet

rwanda-dpi-citizen-wallet # Rwanda DPI 2.0 — Citizen Wallet (React) A React + Vite port of the **Rwanda DPI 2.0 Citizen Wallet** mobile prototype. Africa's first AI-Native DPI 2.0 concept: Identity · BISE · Finance · Services. ## Pages & visualizations included | # | Page | What's inside | |---|------|---------------| | 1 | **Splash** | Animated logo + loading bar | | 2 | **Login** | Biometric tap-auth + 6-digit PIN keypad | | 3 | **Home** | Parallax hero, BISE gauge, sub-scores, balance, quick actions, AI insight, transactions, live feed | | 4 | **Identity** | NID card, 3-tier identity architecture, persona switcher | | 5 | **BISE Scores** | Score hero, persona chips, 6 score cards, **radar chart**, **history chart** | | 6 | **Wallet** | Account row, rSWITCH mini, tabs + panels | | 7 | **Marketplace** | Score-gated offers | | 8 | **Credentials** | Verifiable credentials list | | 9 | **AI Advisor** | Sovereign-AI chat | | 10 | **Gov Dashboard** | KPIs and national-level metrics | | 11 | **rSWITCH** | Animated network SVG, node chips, live feed | Plus: status bar, app header with back/avatar/notifications, bottom nav, modals. ## Run it ```bash npm install npm run dev ``` Then open the URL Vite prints (defaults to localhost). ## Build for production ```bash npm run build npm run preview ``` ## Project layout ``` rwanda-dpi-citizen-wallet/ ├── index.html # Vite entry, loads fonts ├── package.json ├── vite.config.js ├── public/ │ └── app.js # Original imperative UI logic (personas, nav, charts) └── src/ ├── main.jsx # React entry ├── App.jsx # Mounts markup + injects app.js ├── styles.css # All design tokens, components, animations └── body.html # The mobile UI markup (imported as raw text) ``` ## Notes on the architecture The original prototype is a single self-contained HTML file. To preserve every pixel, animation, and chart exactly as designed, this React app: 1. Imports `body.html` as a raw string and renders it i …