Introduction:

• Objective: Test the candidate web3 frontend skills for the position of Senior Front-end Engineer at Morpho Labs.
• Case study Scope: Development a small deFi interface that allows to read and withdraw all of user shares deposited in a MetaMorpho vault (erc4626 compliant contract) on Ethereum Mainnet.
• Technology Stack: React + TypeScript + viem/wagmi or ethers 6

Deliverables:

• Functional Interface: A simple web interface following the design & the specifications, deployed on a service like netlify or vercel.
• Code Repository: Organized and commented code in a GitHub repository. Do not hesitate to prove that you are used to work in team (PR, description etc)
• Basic Documentation: A brief document (README) explaining the functionality and the code structure.

Evaluation Criteria:

• Functionality: Accuracy in displaying the correct values in the correct format.
• Design Implementation: Pixel perfect design implementation.
• Code Quality: Clean code, effective use of TS and React best practices, good development practices (git, Github etc)
• User Experience: Proper state management (e.g. loadings, errors)

Time Allocation:

Do not spend more than 5 hours on this case study.

Task Description:

https://www.figma.com/design/Oc9VeP7z8YB1GDlBQyZl3h/Morpho---Interface---Case-Study?node-id=0-1&t=n1iT3LhgWTUoBPVP-0

1. User Wallet Connection
   • Connection frame: stale, loading, switch network states
   • Wallet connection: feel free to use the web3 wallet connection library of your choice.