Convert Flow Redesign

[benedictfred]

📌 Convert Flow Redesign

📋 Description

• This pull request refactors and enhances the currency conversion UI, focusing on improving user experience, accessibility, and code maintainability. The most significant changes include a major redesign of the CurrencySelector dropdown, updates to the conversion form layout and styling, improved transaction fee display, and validation logic for the confirmation modal. These changes collectively make the interface more intuitive, visually appealing, and responsive across devices.

🛠 Changes Implemented

UI/UX Improvements:

• Redesigned the CurrencySelector component to use a custom dropdown instead of the previous UI library, added currency images, improved mobile responsiveness, introduced "Show more" functionality, and enhanced accessibility by handling outside clicks to close the dropdown.
• Updated the conversion form layout and styling for better responsiveness, including padding adjustments, font size changes for inputs, and improved color schemes for sections and swap icon.

Transaction Fee Display:

• Enhanced the exchange rate display by replacing the old tooltip with a clearer transaction fee breakdown, new icons, and improved layout for readability.
• Updated the confirmation modal to show transaction fees more clearly, improved button accessibility, and added mobile-specific UI tweaks.

Validation and Accessibility:

• Added validation logic to the confirmation modal's "Convert" button to disable it when the input is invalid, preventing accidental submissions.
• Improved accessibility for modal controls, including hiding certain buttons on mobile and ensuring proper focus management.

These changes collectively enhance the usability and visual consistency of the currency conversion UI, making it easier and safer for users to interact with the platform.

✅ How to Test

1. Setup: Clone the branch chore/convert-flow.
2. Run Tests: Run npm install and npm run dev to start the local dev environment
3. Expected Output: Navigate to /dashboard/convert to see the changes.

🔍 Screenshots (if applicable)

Desktop Screen
Screencast from 2025-09-01 21-53-38.webm

Mobile Screen
Screencast from 2025-09-01 21-55-39.webm

🚀 Checklist

• Code follows project style guidelines.
• Changes are tested and verified.
• Documentation is updated (if needed).

🔗 Related Issues

• Closes Redesign Convert Flow (No API Yet) #51

@portableDD
Please review. Thanks 🙏.