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.

lifi recipe interface

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/
│   ├── app/                    # Next.js App Router
│   │   ├── layout.tsx          # Root layout with theme
│   │   ├── page.tsx            # Main swap interface
│   │   └── providers.tsx       # Openfort, wagmi, React Query, and LiFi context
│   ├── features/               # Feature-based modules
│   │   ├── lifi/               # LiFi swap and bridge functionality
│   │   │   ├── components/     # Swap UI components
│   │   │   ├── constants/      # LiFi constants and configuration
│   │   │   ├── 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 wallet UI
│   │       ├── config/         # Wagmi and Openfort configuration
│   │       ├── hooks/          # Openfort wallet hooks
│   │       └── providers/      # Openfort provider boundary
│   ├── components/
│   │   └── ui/                 # Reusable UI primitives
│   └── lib/                    # Shared utilities and helpers
├── public/
│   └── assets/                 # Static assets (images, icons)
├── .env.example                # Environment template
├── package.json                # Dependencies and scripts
├── next.config.ts              # Next.js configuration
└── 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

Quick Start

Clone the repository using gitpick:

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

Prerequisites

Node.js 18+
pnpm
Openfort dashboard project with Shield credentials
Optional LiFi API key from developer portal

Get Credentials

Openfort

Create an account at dashboard.openfort.io
Create a new project
Navigate to API Keys and copy your publishable key
Navigate to Shield settings and copy your Shield publishable key
(Optional) Create a Policy for gas sponsorship and copy the policy ID

LiFi

(Optional) Visit li.fi/developers
Create an account and generate an API key for higher rate limits
Or skip this step to use public endpoints

Configure Environment

cp .env.example .env.local

Edit .env.local with your credentials:

NEXT_PUBLIC_OPENFORT_PUBLISHABLE_KEY=pk_...
NEXT_PUBLIC_OPENFORT_SHIELD_PUBLISHABLE_KEY=...
NEXT_PUBLIC_OPENFORT_POLICY_ID=pol_...              # Optional
NEXT_PUBLIC_OPENFORT_DEFAULT_CHAIN_ID=11155111      # Sepolia testnet
 
NEXT_PUBLIC_LIFI_INTEGRATOR=YourAppName
NEXT_PUBLIC_LIFI_API_KEY=...                        # Optional

Install & Start

pnpm i
pnpm dev

Features

Cross-chain swaps across Ethereum, Polygon, Arbitrum, Optimism, Base, and Avalanche
Openfort embedded wallets with email/social authentication
Gas sponsorship with Openfort policies (optional)
Route optimization with LiFi's routing engine
Transaction tracking with progress monitoring and explorer links