Paid24/7 – TON/USDT Integration & Country Selector Redesign
Design + Dev Handover

🚀 Quick Start (2 minutes)

1. Install dependencies

   npm install

2. Start the development server

   npm run dev

3. Open the Design Navigation

   http://localhost:3993/onboarding-flow.html

📋 What You'll Find in the Handover

• Research & UX rationale (expandable in the onboarding-flow doc)
• Multi-currency home, TON wallet flow, USDT send/receive drawers
• Country-selector redesign ( value cards, dynamic states )
• Future features roadmap & strategic direction

🆕 Changes Introduced in charlie/initial-setup

1. Country-Selector overhaul

• Value-card layout with icons, tick overlays, #FAF8F5 highlight for supported countries.
• Simplified crypto-only state (text rows only, no thumbnails).
• CTA logic: Continue vs Create Account vs disabled initial.
• Preserves Telegram query params when routing to private pages.

2. Asset additions

New SVGs in src/assets/img/country/ for the country selector.

3. Code quality & build

• Fixed TypeScript scope ordering error causing blank iframe.
• Removed duplicate export default declarations.
• Converted drawer pages to lazy() for smaller bundles.

4. Environment differences from original frontend

• DEV_MODE flags left true in useWindow.ts & usePrivateRoute.ts for browser testing.
• Node 18.20 works (warnings), target Node 20+ long-term.
• No backend required – all flows are stubbed / local-state.
• New build passes with npm run build producing zero TS errors.

5. Folder / File additions

src/public/handover.html          # this file
src/pages/public/countrySelect.tsx  # major rewrite
src/assets/img/country/*           # 6 new SVG icons

🛠 Setup & ENV Variables

See HANDOVER.md for full table; key points:

• Add .env.development with ENV_PUBLIC_API_BASE_URL if you want API mocks.
• Before production, set DEV_MODE = false and (optionally) remove onboarding-flow.html.

---

Questions? Reach out on the project Slack or open an issue on the repository.