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.

Complete source code for the Morpho Blue integration with frontend, backend, and vault interaction logic.

View Sample Code

GitHub Repository

Project Structure

morpho/
├── src/
│   ├── App.tsx                # Main application component
│   ├── main.tsx               # React entry point
│   ├── Providers.tsx          # Context providers (Openfort, Wagmi, React Query)
│   ├── components/            # React components
│   │   └── env_validation/    # Environment validation components
│   ├── assets/                # Images, icons, and static assets
│   ├── contracts/             # Contract ABIs and addresses
│   ├── hooks/                 # Custom React hooks
│   ├── lib/                   # Configuration and utility libraries
│   └── utils/                 # Helper functions
├── public/                    # Static assets served by Vite
├── .env.example               # Environment template
├── package.json               # Dependencies and scripts
├── vite.config.ts             # Vite configuration
└── README.md                  # Project documentation

Vite + React + Wagmi application that integrates Openfort embedded wallets, queries Morpho Blue vault state via GraphQL API, and performs USDC approvals/deposits or share redemptions using 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

Quick Start

Clone the repository using gitpick:

pnpx gitpick openfort-xyz/recipes-hub/tree/main/morpho openfort-morpho
cd openfort-morpho

Prerequisites

• Node.js 18+
• pnpm
• Openfort dashboard project credentials
• WalletConnect Project ID
• Base RPC endpoint

Setup Backend

This sample requires a backend server for Openfort Shield authentication. Set up the Openfort Backend Quickstart:

git clone https://github.com/openfort-xyz/openfort-backend-quickstart.git
cd openfort-backend-quickstart
cp .env.example .env

Add your Openfort credentials to .env:

OPENFORT_API_KEY=sk_your_secret_key
OPENFORT_SHIELD_SECRET_KEY=your_shield_secret_key

Then start the backend:

pnpm install
pnpm dev

The backend will run on http://localhost:3000. For more details, see the Openfort Backend Quickstart repository.

Get Openfort Credentials

From your Openfort dashboard:

1. Publishable Key: Go to Developers → API Keys → copy your publishable key
2. Shield Public Key: Go to Developers → API Keys → copy your Shield public key
3. Policy ID (optional): Go to Policies → select or create a policy → copy the policy ID

Get WalletConnect Project ID

1. Go to WalletConnect Cloud
2. Create a new project or use an existing one
3. Copy the Project ID

Configure Environment

cp .env.example .env

Update .env with your credentials:

VITE_OPENFORT_PUBLISHABLE_KEY=pk_your_publishable_key
VITE_OPENFORT_SHIELD_PUBLIC_KEY=pk_your_shield_public_key
VITE_OPENFORT_POLICY_ID=pol_optional_policy
VITE_WALLET_CONNECT_PROJECT_ID=your_walletconnect_project_id
VITE_BACKEND_URL=http://localhost:3000

Install & Start

pnpm i
pnpm dev

Visit http://localhost:5173 to use the application.