Skip to content

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

GitHub Icon

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

View Sample Code

GitHub Repository

Project Structure

aave/
├── backend/                   # Express API for Shield helpers and server routes
│   ├── server.js              # Entry point with Shield proxy endpoints
│   ├── package.json           # Backend dependencies and scripts
│   └── .env.example           # Environment template for backend configuration
├── frontend/                  # React + Vite application for the user interface
│   ├── public/                # Static assets served by Vite
│   └── src/                   # Frontend application source code
│       ├── components/        # UI components for lending flows
│       ├── hooks/             # Wagmi/Viem hooks and data fetching
│       ├── contracts/         # ABIs, addresses, and protocol helpers
│       ├── utils/             # Shared utilities and formatting
│       └── lib/               # Providers and application scaffolding
└── README.md                  # Project documentation

Key Features

  • Openfort Shield authentication
  • Aave lending and borrowing flows
  • Gas-sponsored transactions
  • Separate frontend and backend services
ComponentTechnology
FrontendReact + Vite
BackendExpress.js
BlockchainEthereum
Key Libraries@aave/react, wagmi, viem
StylingTailwind CSS

Setup Steps

  1. Configure backend and frontend .env files
  2. Install dependencies
  3. Run servers:
    • Backend: npm run dev (localhost:3001)
    • Frontend: npm run dev (localhost:5173)

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Openfort dashboard project credentials