React web app for Morpho Blue and MetaMorpho contracts that's designed to work using only public RPCs－no other infrastructure required.

To get started:

git clone https://github.com/morpho-org/morpho-lite-apps.git
cd morpho-lite-apps
# Install packages and run
pnpm install
pnpm run dev

After running the commands above, open http://localhost:5173/ in your browser to use the app.

• 🦋 View your deposits in MetaMorpho vaults
• 🌌 View your borrow positions
• 📤 Withdraw from MetaMorpho vaults
• ⚡️ Repay loans, add collateral, and remove collateral
• ⛓️ Support any chain with Morpho contracts
• 🏗️ Requires no additional infrastructure/services

This is a single page app built with React 19, Vite, shadcn, and wagmi.

Key Components

• src/App.tsx -- Defines a wagmiConfig and sets up various providers and contexts for data caching
• src/hooks/use-contract-events.ts -- React hook for calling eth_getLogs with retries and caching, respecting an optional constraint on the largest-fetchable block range
• src/app/dashboard/earn-subpage.tsx -- Main component for the Earn page. Fetches data as follows:
  1. CreateMetaMorpho events, so we know addresses of all MetaMorpho vault contracts
  2. The user's Deposit events for all ERC4626 vaults (even non-Morpho). We filter these down using results from (1)
  3. ERC20 symbols and decimals for each underlying asset
  4. Vault info, including name, curator, timelock, and totalAssets
• src/app/dashboard/borrow-subpage.tsx -- Main component for the Borrow page
  1. SupplyCollateral events on the Morpho Blue contract, so we know where the user has (or had) positions
  2. marketParams struct for each marketId referenced in events from (1)
  3. markets struct for each marketId referenced in events from (1)
  4. ERC20 symbols and decimals for each collateralToken and loanToken
• src/components/ui/... -- shadcn reusable component library

1. Update the wagmiConfig in App.tsx. You'll need at least 1 public RPC node that supports eth_getLogs.
2. Update the DEPLOYMENTS mapping in constants.ts. You should match the formatting of existing chains, and properly capitalize addresses.
3. [Optional] Add chain icon SVG to src/assets/chains, and update the ChainIcon component.
4. Test!