Yield on Aave

Overview

This sample showcases how to pair Openfort's embedded wallet infrastructure with the Aave protocol to build a full-stack DeFi experience.

Aave recipe interface

Complete source code for the Aave DeFi application with frontend, backend, and smart contract integrations.

View Sample Code

GitHub Repository

Project Structure

aave/
├── src/
│   ├── App.tsx                # Main application component
│   ├── main.tsx               # React entry point
│   ├── components/            # UI components for lending flows
│   │   └── env_validation/    # Environment validation components
│   ├── assets/                # Images, icons, and static assets
│   ├── contracts/             # Contract ABIs, addresses, and protocol helpers
│   ├── hooks/                 # Custom React hooks for Wagmi/Viem
│   ├── lib/                   # Configuration and providers
│   └── utils/                 # Shared utilities and formatting
├── public/                    # Static assets served by Vite
├── .env.example               # Environment template
├── package.json               # Dependencies and scripts
├── vite.config.ts             # Vite configuration
└── README.md                  # Project documentation

Key Features

Openfort Shield authentication
Aave lending and borrowing flows
Gas-sponsored transactions (optional)
APY tracking and balance monitoring

Component	Technology
Frontend	React + Vite
Backend	Express.js
Blockchain	Ethereum
Key Libraries	`@aave/react`, `wagmi`, `viem`
Styling	Tailwind CSS

Quick Start

Clone the repository using gitpick:

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

Prerequisites

Node.js 18+
pnpm
Openfort dashboard project credentials

Get Openfort Credentials

Create an Openfort Account

Go to Openfort Dashboard
Sign up or log in
Create a new project

Get Your API Keys

Navigate to Developers → API Keys
Copy your Publishable Key (starts with pk_)
Navigate to Shield section
Copy your Shield Public Key

Create a Policy (Optional)

Navigate to Gas Policies
Create a new policy to sponsor user transactions
Copy the Policy ID

Setup Backend

This app requires a backend server for Shield authentication sessions.

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

Add your Openfort Secret Key to the backend .env:

OPENFORT_SECRET_KEY=sk_...

Start the backend:

pnpm i
pnpm dev  # Runs on http://localhost:3001

Configure Environment

Return to the aave project directory and configure the frontend:

cp .env.example .env

Add your credentials to .env:

VITE_OPENFORT_PUBLISHABLE_KEY=pk_...
VITE_OPENFORT_SHIELD_PUBLIC_KEY=...
VITE_OPENFORT_POLICY_ID=pol_...     # Optional
VITE_BACKEND_URL=http://localhost:3001

Install & Run

pnpm i
pnpm dev  # http://localhost:5173