Swap on LI.FI

Overview

This sample demonstrates how to pair Openfort's embedded wallet infrastructure with LiFi's cross-chain routing engine to build a full-stack bridge and swap experience.

Complete source code for the LiFi cross-chain swap application with Next.js frontend and LiFi SDK integration.

View Sample Code

GitHub Repository

Project Structure

lifi/
├── src/                        # Next.js application source code
│   ├── app/                    # App Router pages, layout, and providers
│   │   ├── layout.tsx          # Root layout with theme and navigation
│   │   ├── page.tsx            # Main swap interface page
│   │   └── providers.tsx       # Openfort, wagmi, React Query, and LiFi context setup
│   ├── features/               # Feature-based modules
│   │   ├── lifi/               # LiFi swap and bridge functionality
│   │   │   ├── components/     # Swap UI components
│   │   │   ├── hooks/          # Swap controller and state management
│   │   │   ├── providers/      # LiFi provider configuration
│   │   │   ├── services/       # LiFi SDK config and route services
│   │   │   └── utils/          # Token helpers and utilities
│   │   └── openfort/           # Openfort wallet integration
│   │       ├── components/     # Connect button and logo
│   │       ├── config/         # Wagmi configuration
│   │       ├── hooks/          # Openfort wallet hooks
│   │       └── providers/      # Openfort provider boundary
│   ├── components/             # Shared UI components
│   │   ├── ui/                 # Reusable UI primitives
│   │   └── header.tsx          # Navigation and theme components
│   └── lib/                    # Shared utilities
└── README.md                   # Project documentation

Key Features

Openfort embedded wallet authentication via Shield
LiFi cross-chain routing with cheapest-route discovery
Multi-chain swap support across Ethereum, Polygon, Arbitrum, Optimism, Base, and Avalanche
Execution progress tracking with resume/stop controls
Gas-sponsored transactions
Explorer deep-links for every transaction

Component	Technology
Frontend	Next.js 15 + App Router
Blockchain	Multi-chain (Ethereum, Polygon, Arbitrum, Optimism, Base, Avalanche)
Key Libraries	`@openfort/openfort-js`, `@lifi/sdk`, `wagmi`, `viem`
Styling	Tailwind CSS

Setup

Copy .env.example to .env.local
Add Openfort and LiFi credentials
Install dependencies: npm install
Run: npm run dev

Prerequisites

Node.js 18+
npm, yarn, or bun
Openfort dashboard project with Shield credentials
Optional LiFi API key from developer portal