Wallet Demo

[onmax]

Demo Mode for Nimiq Wallet

🎯 Purpose: Enable risk-free wallet exploration for the upcoming nimiq.com/wallet demo page

https://nimiq-wallet-demo.je-cf9.workers.dev/

Overview

This PR introduces a comprehensive demo environment that allows users to experience all major wallet features without connecting to real blockchain networks or risking actual funds. Users interact with realistic fake data while being clearly informed they're in a demo environment.

TODOs before merging

• Undo change in src/config/config.local.ts
• Undo change in src/config/config.testnet.ts
• Undo change in src/lib/Constants.ts

Quick Start

New Build Commands

# Development with demo mode
yarn serve:demo

# Production demo build  
yarn build:demo

Activation Methods

Development Mode:

• URL Parameter: Add ?demo to any wallet URL (development only)
• Configuration: Set config.demo.enabled = true

Production Demo:

• Dedicated Build: Use yarn build:demo for production demo deployment
• Domain-specific: Set config.demo.enabled = 'domain.com' for specific domains

Demo Features

🎭 Realistic Experience

• Fake Accounts: Pre-populated with demo balances across all currencies (NIM, BTC, USDC, USDT)
• Transaction History: Culturally diverse, realistic transaction descriptions with proper balance calculations
• Interactive Flows: Fully functional buy, stake, and swap demonstrations

🛡️ Safety First

• Address Obfuscation: All addresses displayed as "XXXX" to prevent accidental real-world usage
• Clipboard Protection: Copying addresses provides "This is a demo address - not for actual use"
• Clear Visual Indicators: Demo mode banner and highlight badges guide user interaction
• Fallback Modals: Unsupported actions redirect to educational explanations

🔄 Supported Demo Flows

• NIM Purchase: Custom demo buy flow with realistic UI
• NIM Staking: Full staking simulation with proper UI feedback
• NIM ↔ BTC Swaps: Complete swap experience with realistic progression
• Transaction Details: Explore detailed transaction information

Technical Implementation

🏗️ Architecture

• Centralized Logic: All demo code contained in src/lib/Demo.ts (~2000 lines)
• Clean Separation: Zero impact on production code paths
• Entry Point: Dedicated src/main-demo.ts for demo builds
• Mock Services: DemoHubApi replaces real Hub interactions

⚙️ Build System

• Environment Variables: build=demo (development) / build=demo-production (production)
• Release Tagging: Special demo-YYYY-MM-DD format for demo builds
• Configuration: Conditional config loading based on build environment

🎨 UI Enhancements

• Visual Cues: Animated highlight badges on interactive elements
• Demo Modals: Custom DemoModalBuy.vue and DemoModalFallback.vue
• DOM Manipulation: MutationObserver-based UI modifications for safety and guidance

📡 iframe Communication

Ready for nimiq.com integration with bidirectional messaging:

• Host → Wallet: Flow navigation (buy/stake/swap)
• Wallet → Host: Current flow state updates

Development Benefits

🧪 Enhanced QA

• No Dependencies: No need to run Hub or Keyguard in parallel
• Consistent Testing: Predictable fake data for reliable test scenarios
• UI Focus: Perfect for frontend testing without blockchain complexity

🔧 Developer Experience

• Faster Iteration: Immediate testing of UI changes without blockchain setup
• Isolated Environment: Test wallet features without network dependencies
• Safe Experimentation: Explore edge cases without real transaction costs

Files Changed

Core Implementation

• src/lib/Demo.ts - Main demo system (new)
• src/main-demo.ts - Demo entry point (new)
• src/hub.ts - Mock Hub API integration
• vue.config.js - Build system configuration

Demo Components

• src/components/modals/demos/DemoModalBuy.vue (new)
• src/components/modals/demos/DemoModalFallback.vue (new)

Configuration & Scripts

• package.json - New demo build scripts
• Build configurations for demo environment

---

🚀 Ready for Production: This feature enables the nimiq.com/wallet demo page, providing users with a safe, educational introduction to the Nimiq Wallet ecosystem.