# Crypto Payment Conversion App A modern React-based cryptocurrency payment conversion application that allows users to convert crypto to cash, cash to crypto, and manage recipient details. ## Features - 💱 **Multi-Mode Conversion**: Support for crypto-to-cash, cash-to-crypto, and crypto-to-fiat loan conversions - 🔄 **Real-time Currency Conversion**: Live exchange rates between cryptocurrencies and fiat currencies - 💳 **Multiple Payment Methods**: Integration with popular crypto wallets (Metamask, Rainbow, WalletConnect, etc.) - 🏦 **Bank Integration**: Support for Nigerian banks with account validation - 🎨 **Modern UI/UX**: Clean, responsive design with smooth animations and transitions - 📱 **Mobile Responsive**: Fully responsive design that works on all screen sizes ## Tech Stack - **Frontend Framework**: React 18 with TypeScript - **Build Tool**: Vite - **Styling**: Tailwind CSS - **State Management**: React Hooks (useState) - **Icons**: Custom SVG components ## Project Structure ``` src/ ├── components/ │ ├── ConversionModal.tsx # Main conversion interface │ ├── RecipientDetailsModal.tsx # Recipient bank details form │ ├── PaymentInput.tsx # Amount and currency input component │ ├── CurrencyDropdown.tsx # Currency selector dropdown │ ├── WalletSelector.tsx # Wallet selection dropdown │ ├── WalletField.tsx # Reusable wallet field with label │ ├── PrimaryButton.tsx # Reusable primary action button │ └── CryptoIcons.tsx # SVG icon library for crypto and wallets ├── App.tsx └── main.tsx ``` ## Setup Instructions ### Prerequisites - Node.js (v18 or higher) - npm or yarn package manager ### Installation 1. **Clone the repository** ```bash git clone cd TestProject ``` 2. **Install dependencies** ```bash npm install # or yarn install ``` 3. **Start the development server** ```bash npm run dev # or yarn dev ``` 4. **Open your browser** Navigate to `http://localhost:5173` (or the port shown in your terminal) ### Build for Production ```bash npm run build # or yarn build ``` The production-ready files will be in the `dist` directory. ### Preview Production Build ```bash npm run preview # or yarn preview ``` ## Component Usage Examples ### ConversionModal ```tsx import ConversionModal from './components/ConversionModal'; function App() { const [isOpen, setIsOpen] = useState(false); return ( setIsOpen(false)} /> ); } ``` ### RecipientDetailsModal ```tsx import RecipientDetailsModal from './components/RecipientDetailsModal'; function App() { const [isOpen, setIsOpen] = useState(false); const handleNext = (data) => { console.log('Recipient data:', data); // Process recipient details }; return ( setIsOpen(false)} onNext={handleNext} /> ); } ``` ### WalletField ```tsx import WalletField from './components/WalletField'; import { CryptoIcons } from './components/CryptoIcons'; function App() { const [wallet, setWallet] = useState(''); return ( ); } ``` ## Supported Cryptocurrencies - Ethereum (ETH) - Bitcoin (BTC) - USDT (Tether) - BNB (Binance Coin) - CELO - TON (Toncoin) ## Supported Fiat Currencies - Nigerian Naira (NGN) - US Dollar (USD) - Euro (EUR) ## Supported Wallets - Metamask - Rainbow - WalletConnect - Sharave - Other Crypto Wallets (Binance, Coinbase, Bybit, etc.) ## Design Decisions & Trade-offs ### Component Architecture **Decision**: Created reusable components (WalletField, PrimaryButton, CurrencyDropdown) - **Why**: Promotes code reusability and consistency across the application - **Trade-off**: Slightly more complex prop management, but easier maintenance ### State Management **Decision**: Used React's built-in useState hooks instead of external state management - **Why**: Application state is relatively simple and localized to modals - **Trade-off**: May need Redux/Context if app grows significantly ### Styling Approach **Decision**: Tailwind CSS with custom color scheme - **Why**: Rapid development, consistent design system, smaller bundle size - **Trade-off**: Longer className strings, requires Tailwind knowledge ### TypeScript **Decision**: Full TypeScript implementation - **Why**: Type safety, better IDE support, fewer runtime errors - **Trade-off**: Slightly slower initial development, but better long-term maintainability ### Modal Implementation **Decision**: Modal components with overlay and fixed positioning - **Why**: Better UX, accessibility, and mobile responsiveness - **Trade-off**: Slightly more complex than simple dropdowns ### Icon Library **Decision**: Custom SVG components instead of icon libraries - **Why**: Smaller bundle size, full customization control - **Trade-off**: Need to manually create/maintain SVG components ## Assumptions 1. **Exchange Rates**: Currently using static values; in production, these would be fetched from a real-time API 2. **Bank Validation**: Account name is hardcoded; production would validate via bank API 3. **Wallet Integration**: Wallet connections are simulated; production would use Web3 providers 4. **Authentication**: No user authentication implemented; would be required in production 5. **Transaction Processing**: No actual transaction processing; would integrate with payment gateway 6. **Currency Precision**: Using 2 decimal places; may need adjustment for different currencies ## Future Enhancements - [ ] Real-time exchange rate API integration - [ ] Bank account validation API - [ ] Actual wallet connection (Web3.js/Ethers.js) - [ ] Transaction history - [ ] User authentication and profiles - [ ] Multi-language support - [ ] Dark mode - [ ] Transaction notifications - [ ] Fee calculator - [ ] KYC/AML compliance ## Browser Support - Chrome (latest) - Firefox (latest) - Safari (latest) - Edge (latest) ## License MIT ## Contributing Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. # Novacrust