Yield on Morpho
Overview
This sample pairs an Openfort embedded wallet frontend with a minimal Express backend to interact with a Morpho Blue USDC vault on Base.
Project Structure
morpho/
├── backend/ # Express.js server
│ ├── .env.example # Environment template
│ ├── package.json # Backend dependencies
│ └── server.js # Express server with Shield proxy
├── frontend/ # Vite + React application
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # React components
│ │ │ └── env_validation/ # Environment validation
│ │ ├── contracts/ # Contract ABIs and addresses
│ │ ├── hooks/ # Custom React hooks
│ │ ├── lib/ # Utility libraries
│ │ ├── utils/ # Helper functions
│ │ ├── App.tsx # Main App component
│ │ ├── main.tsx # React entry point
│ │ └── Providers.tsx # Context providers
│ ├── .env.example # Frontend environment template
│ ├── package.json # Frontend dependencies
│ └── vite.config.ts # Vite configuration
└── README.md # This fileBackend – Express server that proxies create-encryption-session requests to shield.openfort.io and exposes a health check. Uses dotenv, enables CORS, and is ready to deploy as-is.
Frontend – Vite + React + Wagmi app that embeds Openfort, queries vault state via the Morpho GraphQL API, and performs USDC approvals/deposits or share redemptions with viem.
Key Features
- Embedded wallet authentication via Openfort Shield
- Morpho Blue vault supply and withdrawal flows
- Vault APY fetching through GraphQL API
- Environment configuration validation
| Component | Technology |
|---|---|
| Frontend | Vite + React + Wagmi |
| Backend | Express.js |
| Blockchain | Base Mainnet |
| Key Libraries | wagmi, viem, graphql-request |
| Styling | Tailwind CSS |
Setup Requirements
- Configure backend
.env - Configure frontend
.env - Install dependencies
- Run backend and frontend services
Prerequisites
- Node.js 18+
- npm ≥ 9
- Openfort dashboard project credentials
- Morpho Blue vault address
- Base RPC endpoint