A modern, secure cryptocurrency wallet application built with React Native and Expo, featuring multi-chain support, elegant UI design, and a clean modular architecture.
- 🪙 Multi-Chain Support: Bitcoin (BTC), Ethereum (ETH), Kaspa (KAS), Solana (SOL)
- 💰 Real-time Balance Tracking: Live fiat and crypto balance updates
- 📊 Portfolio Overview: Total portfolio value with 24h change indicators
- 🔒 Privacy Controls: Hide/show balance functionality
- 🎨 Modern UI: Glassmorphic design with smooth animations
- 📱 Cross-Platform: iOS, Android, and Web support
- 🔄 Auto-Refresh: Silent background balance updates every minute
- Node.js (v18 or higher)
- Yarn package manager
- Expo CLI
- iOS Simulator (macOS) or Android Studio (for emulators)
Clone the repository
git clone <repository-url>cd wallet
Install dependencies
yarn install
Start the development server
yarn start
Run on specific platforms
# iOS Simulator yarn ios # Android Emulator yarn android # Web Browser yarn web # Development Client npx expo start --dev-client
wallet/
├── app/ # Expo Router pages
│ ├── (tabs)/ # Tab-based navigation
│ │ └── index.tsx # Home screen (refactored)
│ ├── _layout.tsx # Root layout
│ └── +not-found.tsx # 404 page
├── components/ # Reusable UI components
│ ├── common/ # Shared common components
│ │ └── SkeletonLoader.tsx # Loading skeletons
│ ├── CoinCard.tsx # Individual coin display (refactored)
│ ├── TotalBalance.tsx # Portfolio overview (refactored)
│ ├── TransactionModal.tsx
│ └── ThemedText.tsx # Themed text component
├── constants/ # App constants
│ ├── Colors.ts # Color theme definitions
│ └── CoinMeta.ts # Cryptocurrency metadata & API config
├── contexts/ # React Context providers
│ ├── AccountsContext.tsx # Account management
│ └── FiatContext.tsx # Currency settings
├── hooks/ # Custom React hooks
│ ├── useColorScheme.ts
│ └── useThemeColor.ts
├── styles/ # Extracted StyleSheet definitions
│ ├── coinCard.styles.ts
│ ├── homeScreen.styles.ts
│ └── totalBalance.styles.ts
├── theme/ # Centralized design system
│ └── index.ts # Theme configuration
├── types/ # TypeScript type definitions
│ └── index.ts # All app types
├── utils/ # Utility functions
│ ├── animations.ts # Animation utilities & hooks
│ └── formatters.ts # Formatting & validation utilities
├── assets/ # Static assets
│ ├── coins/ # Cryptocurrency icons
│ └── images/ # App images
└── src/ # Additional source files
- React Native 0.81.4: Core framework
- Expo SDK 54: Development platform
- TypeScript 5.9: Type safety with strict mode
- React Navigation: Screen navigation
- Async Storage: Local data persistence
- React Native Reanimated: Smooth animations
- Expo Linear Gradient: UI gradients
- Crypto APIs: Real-time balance and price data with optimized batch requests
This project follows modern React Native architecture principles:
- Separation of Concerns: Clear separation between UI, logic, and data
- Component Composition: Small, focused, reusable components
- Custom Hooks: Shared logic extracted into reusable hooks
- Type Safety: Comprehensive TypeScript coverage with strict mode
- Centralized Theme: All colors, spacing, typography in one place
- Extracted Styles: StyleSheets moved to dedicated files
- Consistent Patterns: Reusable design tokens and components
- Animation Library: Shared animation utilities and configurations
- TypeScript: Strict type checking with comprehensive interfaces
- ESLint: Expo configuration with React hooks rules
- Utility Functions: Shared formatters, validators, and helpers
- Constants: Centralized configuration and metadata
- Error Handling: Comprehensive error boundaries and validation
The app integrates with cryptocurrency APIs for real-time data:
- Balance API:
@airgap-solution/crypto-balance-rest-client - Wallet API:
@airgap-solution/crypto-wallet-rest - Base URL:
https://api.cwr.restartfu.com - Configuration: Centralized in
constants/CoinMeta.ts - Error Handling: Robust retry logic and fallback states
# Development
yarn start # Start Expo development server
yarn android # Run on Android
yarn ios # Run on iOS
yarn web # Run on web# Code Quality
yarn lint # Run ESLint
yarn typecheck # Run TypeScript compiler# Project Management
yarn reset-project # Reset to blank project- AccountsContext: Manages cryptocurrency accounts and wallets
- FiatContext: Handles fiat currency preferences
- Local Storage: AsyncStorage for data persistence
App
├── RootLayout
│ ├── TabLayout
│ │ └── HomeScreen
│ │ ├── TotalBalance
│ │ ├── CoinCard[]
│ │ └── TransactionModal
│ └── NotFoundScreen
- Account Management: Add/remove cryptocurrency accounts with validation
- Balance Fetching: Optimized batch API calls with automatic fallback and retry logic
- UI Updates: Reactive updates with skeleton loading and error states
- API Optimization: Single batch request for all account balances instead of individual calls
- Persistence: Automatic saving to AsyncStorage with error handling
- State Management: Context API with optimized re-renders
- Code Splitting: Modular imports and lazy loading
- Animation Performance: Native driver usage where possible
- Memory Management: Proper cleanup of intervals and listeners
- Bundle Size: Extracted utilities reduce component file sizes
- Type Safety: Compile-time error detection reduces runtime issues
The app uses Expo's managed workflow with the following key configurations:
- TypeScript: Strict mode enabled with path mapping
- Metro: Custom resolver for React Native modules
- ESLint: Expo configuration with React hooks rules
- Expo: SDK 54 with development client support
- Add coin metadata to
COIN_METAinconstants/CoinMeta.ts - Add coin icon to
assets/coins/ - Update TypeScript types in
types/index.tsif needed - Ensure API supports the new cryptocurrency
- Add validation rules in
utils/formatters.ts
The project includes comprehensive health checks:
# Run all diagnostics
npx expo-doctor
# TypeScript compilation
npx tsc --noEmit
# Linting
yarn lintAll checks should pass before deployment.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes following the code style guidelines
- Ensure all tests pass:
yarn lint && npx tsc --noEmit - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Expo for the excellent development platform
- React Navigation for navigation solutions
- AirGap Solutions for cryptocurrency APIs
- The React Native community for continuous improvements
- Large monolithic components (400+ lines)
- Inline styles throughout components
- Duplicated utility functions
- Mixed concerns in single files
- 67% reduction in component file sizes
- Extracted styles to dedicated files (150+ lines moved)
- Shared utilities eliminate code duplication
- Type safety with comprehensive interfaces
- Modular architecture for better maintainability
- Components: Average 100 lines (down from 300+)
- Styles: Centralized in 3 style files
- Types: 299 lines of comprehensive type definitions
- Utils: 186 lines of shared utility functions
- Theme: 173 lines of design system configuration
Built with ❤️ using React Native, Expo, and Modern Architecture Principles