CrakeWallet

A Professional-Grade Cryptocurrency Wallet with Advanced Features

CrakeWallet is a modern, feature-rich cryptocurrency wallet application built with cutting-edge web technologies. It provides a secure and intuitive interface for managing digital assets, with professional-grade features including portfolio analytics, transaction management, and multi-network support.

✨ Features

🔐 Core Wallet Functions

• Secure Wallet Integration: Connect to popular wallets using Reown (formerly WalletConnect)
• Multi-Chain Support: Ethereum, Polygon, Base, Arbitrum, and Optimism networks
• Transaction Management: Send, receive, and track cryptocurrency transactions
• Real-time Balance Updates: Live portfolio tracking with automatic refresh

📊 Portfolio Analytics

• Portfolio Overview: Comprehensive dashboard with USD value tracking
• Live Price Integration: Real-time ETH prices via CoinGecko API
• Transaction Statistics: Track total transaction count and wallet activity
• Professional UI: Beautiful gradient-styled portfolio cards

📱 Advanced Transaction Features

• Gas Fee Estimation: Real-time gas cost calculation with customization options
• Transaction Confirmation: Security-focused confirmation dialogs
• QR Code Generation: Easy receiving with QR codes
• Transaction History: Complete transaction tracking with local storage

📇 Address Book Management

• Contact Management: Save and organize frequently used addresses
• Quick Selection: One-click address selection in send transactions
• CRUD Operations: Add, edit, delete, and search contacts
• Local Storage: Persistent contact storage across sessions

🎨 User Experience

• Responsive Design: Optimized for desktop and mobile devices
• Modern UI: Professional styling with smooth animations
• Loading States: Comprehensive loading and error handling
• Accessibility: User-friendly interface with clear visual feedback

🛠️ Technology Stack

Frontend Framework

• React 19: Latest version with modern hooks and concurrent features
• TypeScript: Full type safety and enhanced development experience
• Vite 7.1.7: Lightning-fast build tool and development server

Blockchain Integration

• Reown AppKit 1.8.9: Modern wallet connection infrastructure
• Ethers.js 6.15.0: Ethereum blockchain interaction library
• Multi-network Support: EVM-compatible chains

Additional Libraries

• QRCode 1.5.4: QR code generation for receive functionality
• CoinGecko API: Live cryptocurrency price data
• Local Storage: Client-side data persistence

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn package manager
• Modern web browser

Installation

1. Clone the repository:

   git clone https://github.com/akintun/crakewalllet.git
   cd crakewalllet

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.example .env

   Edit .env and add your configuration:

   VITE_REOWN_PROJECT_ID=your_project_id_here
   VITE_APP_NAME=CrakeWallet
   VITE_APP_DESCRIPTION=Professional Cryptocurrency Wallet
   VITE_APP_URL=https://crakewallet.app
   VITE_APP_ICON=https://crakewallet.app/icon.png

4. Start the development server:

   npm run dev

5. Open your browser and navigate to:

   http://localhost:5173
   

📖 Usage Guide

Connecting Your Wallet

1. Click "Connect Wallet" to open the Reown modal
2. Select your preferred wallet from the list
3. Scan the QR code with your mobile wallet or connect directly
4. Approve the connection in your wallet

Managing Your Portfolio

• View your portfolio overview with real-time USD values
• Check transaction history and statistics
• Monitor balances across supported networks
• Copy your wallet address with one click

Sending Transactions

1. Click the "Send" button from the main dashboard
2. Enter recipient address or select from address book
3. Specify the amount to send
4. Review gas fees and customize if needed
5. Confirm transaction details in the security dialog
6. Approve the transaction in your connected wallet

Using the Address Book

1. Click the address book icon (📇) in the send modal
2. Add new contacts with name, address, and notes
3. Edit or delete existing contacts
4. Select contacts for quick address input

Receiving Cryptocurrency

1. Click the "Receive" button
2. Copy your wallet address or scan the QR code
3. Share with the sender

🔧 Development

Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint
npm run type-check   # TypeScript type checking

# Dependencies
npm install          # Install dependencies
npm update           # Update dependencies

Project Structure

src/
├── components/           # React components
│   ├── AddressBook.tsx      # Address book management
│   ├── GasFeeEstimator.tsx  # Gas fee calculation
│   ├── NetworkSwitcher.tsx  # Network selection
│   ├── PortfolioStats.tsx   # Portfolio overview
│   ├── ReceiveModal.tsx     # Receive functionality
│   ├── SendModal.tsx        # Send transactions
│   ├── TokenList.tsx        # Token balance display
│   ├── TransactionConfirmation.tsx  # Security confirmation
│   └── TransactionHistory.tsx       # Transaction tracking
├── integrations/         # Third-party integrations
├── types/               # TypeScript type definitions
├── utils/               # Utility functions
│   ├── balance.ts          # Balance and transaction utilities
│   ├── tokens.ts           # Token interaction utilities
│   └── transactionHistory.ts  # Transaction storage
├── App.tsx              # Main application component
├── App.css              # Application styles
└── main.tsx             # Application entry point

Environment Configuration

Create a .env file with the following variables:

# Reown Configuration
VITE_REOWN_PROJECT_ID=your_project_id_here

# Application Metadata
VITE_APP_NAME=CrakeWallet
VITE_APP_DESCRIPTION=Professional Cryptocurrency Wallet
VITE_APP_URL=https://crakewallet.app
VITE_APP_ICON=https://crakewallet.app/icon.png

# API Configuration (Optional)
VITE_COINGECKO_API_KEY=your_api_key_here

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch:

   git checkout -b feature/amazing-feature

3. Commit your changes:

   git commit -m 'Add amazing feature'

4. Push to the branch:

   git push origin feature/amazing-feature

5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Maintain component modularity
• Write descriptive commit messages
• Test thoroughly before submitting
• Update documentation as needed

📋 Roadmap

• Enhanced Security

  • Hardware wallet support
  • Transaction simulation
  • Security audits

• DeFi Integration

  • DEX integration
  • Liquidity pool management
  • Yield farming tracking

• Advanced Analytics

  • Detailed charts and graphs
  • Performance tracking
  • Tax reporting features

• Mobile App

  • React Native implementation
  • Mobile-specific features
  • Push notifications

🐛 Known Issues

• Gas estimation may not work on all networks
• Some mobile wallets may require manual connection
• Portfolio values depend on CoinGecko API availability

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⚠️ Disclaimer

CrakeWallet is a development project and should be used at your own risk.

• Always verify transaction details before confirming
• Never share your private keys or seed phrases
• Start with small amounts when testing
• This software is provided "as is" without warranty

📞 Support

• Issues: GitHub Issues
• Documentation: Wiki
• Community: Discussions

---

Built with ❤️ by the CrakeWallet Team

⭐ Star this repository • 🐛 Report Bug • 💡 Request Feature