### Challenge: Decentralized Token Swap Interface

**Objective:**
Develop a frontend application enabling users to efficiently swap between two token pairs, specifically USDC and USDT, utilizing either Uniswap or Balancer protocols. This application will serve as a clone version of [DodoX](https://app.dodoex.io/swap/network/mainnet) platform.

**Detailed Requirements:**

1. **Interface Design:**
- Design a user-friendly and straightforward interface for token swapping. Your goal is to closely replicate the functionality and layout of the [DodoX](https://app.dodoex.io/swap/network/mainnet) app, focusing on ease of use and clear navigation

2. **Token Pair Selection and Swap:**
- Use the token pair: **USDC-USDT**
- Display current exchange rates for the selected token pair.

3. **Integration with Uniswap/Balancer:**
- Use [Wagmi](https://wagmi.sh) and [Viem](https://viem.sh) to integrate with Uniswap or Balancer smart contracts.
- Handle the token swap transaction on the Ethereum blockchain.
- Retrieve and display real-time data from the blockchain, such as liquidity pools, token prices, and slippage.

4. **Wallet Connection:**
- Implement a nifty feature for users to connect their Ethereum wallet using [RabbyKit](https://rabbykit.rabby.io/). Think MetaMask, but cooler.
- The wallet should be used for executing swap transactions.

5. **Transaction Handling:**
- Implement error handling and user feedback for transactions. This includes pending status, confirmations, and transaction receipts or failures.

6. **Unit Testing:**

- Show off your testing skills with Jest or Mocha, covering everything from those sleek UI components to the nitty-gritty of Web3 integration.

7. **💡 Bonus (If you dare) ⭐️:**
- Go wild with features like swap history, gas fee estimations, or a leap into other DeFi protocols.
- Let users to use the swapped tokens to supply liquidity in a DODOX pool.
- Add feature to select token pairs instead of predefined token pairs to swap.
- Test if all the app components play nice with each other through integration tests.

## Evaluation Criteria
- **Functionality:** Application's operational effectiveness.
- **Code Quality:** Cleanliness, organization, and commenting of code.
- **Design and UX:** Aesthetic appeal and intuitiveness of the UI.
- **Web3 Integration:** How well the UI is integrated with Web3 and the coding standards with it.
- **Testing:** Thoroughness and effectiveness of tests, coverage, and reliability.
- **Creativity:** Innovative features or UI elements.

**Submission:**
- Throw us the GitHub repo link with all your magical code.
- Deploy this masterpiece on a web server, or use something fancy like Vercel or Netlify.