Morpho Earn

Our project is a decentralized frontend for Morpho, designed to simplify the user experience for newcomers to decentralized finance (DeFi). We aim to demystify complex DeFi interactions by providing an intuitive interface that guides users through the process of earning on the Morpho protocol. By focusing on user experience, we aim to lower the barrier to entry for new users, making DeFi more accessible to everyone.

Our project is built using a modern tech stack that emphasizes performance, scalability, and user experience:

1. Multicalls: To enhance user experience, we implement multicalls, allowing us to batch multiple blockchain calls into a single request. This reduces latency and improves the efficiency of interactions with the blockchain.

2. Multi-Chain Support: Our application supports both Ethereum Mainnet and Base, providing users with flexibility and access to a broader range of DeFi opportunities.

3. Next.js 14: We leverage Next.js for its powerful server-side rendering capabilities, which enhance performance and SEO. This allows us to deliver a fast and responsive user interface.

4. TypeScript: The entire codebase is written in TypeScript, ensuring type safety and reducing runtime errors. This helps maintain a robust and maintainable codebase.

5. Radix UI and Shadcn UI: We use Radix UI components for accessible and customizable UI elements, while Shadcn UI provides a consistent design language across the application. This combination allows us to create a visually appealing and user-friendly interface.

6. Tailwind CSS: Tailwind CSS is used for styling, enabling us to implement a responsive, mobile-first design efficiently. Its utility-first approach allows for rapid prototyping and consistent styling.

7. Viem and Wagmi: Instead of using ethers, we utilize viem and wagmi for blockchain interactions. Viem provides a lightweight and efficient way to interact with Ethereum, while wagmi offers a set of React hooks for managing wallet connections and blockchain state, enhancing the developer experience and simplifying complex interactions.

8. GraphQL and Apollo Client: We integrate with the Morpho API using GraphQL, facilitated by Apollo Client, to efficiently fetch and manage data. This allows us to provide real-time updates and a smooth user experience.