OpenViSTAI · Agents · Blockchain · Crypto
Submit a project
Menu
DeFi

LI.FI Widget

An open-source TypeScript and React widget library providing prebuilt UI components for cross-chain bridging and swapping.

Explore the practical guide ↓

Independent OpenViST project profile, based on linked sources.

LI.FI Widget — OpenViST project profile in DeFi.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use it when a web application needs an embeddable, customizable interface for cross-chain transfers and swaps, with blockchain support selected through provider packages.

Who it is for

  • DeFi developers
  • Teams building decentralized web applications
  • Developers integrating multi-chain asset transfers into React or other documented web frameworks

Documented uses

  • Add cross-chain bridging to a decentralized application.
  • Embed cross-chain swap functionality in a React interface.
  • Create a multi-chain asset-transfer interface using bridge aggregation.
  • Offer wallet, route and transaction status interfaces within a web application.
Before you choose

Requirements & limits

The project is available through a public GitHub repository and npm packages. It is licensed under Apache-2.0.

  • Provider-based architecture allows selective blockchain support.
  • Separate provider packages and peer dependencies affect installation choices.
  • The widget offers configurable UI variants, themes, dark mode and restrictions on supported chains, tokens, bridges and exchanges.
  • Wallet integration depends on the documented external wallet-provider ecosystems.
  • The README documents compatibility testing across several web frameworks and application integration tools.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Install the widget and selected blockchain providers

Set up the LI.FI Widget package with provider packages for the blockchains an application intends to support.

Before you start

  • A web application using the LI.FI Widget package.
  • The required package manager: pnpm, npm or yarn.
  • A decision about which blockchain providers to support.

Steps

  1. Install @lifi/widget and @tanstack/react-query.

  2. Install the provider package for each required blockchain, such as @lifi/widget-provider-ethereum with wagmi and @wagmi/core for Ethereum or EVM chains.

  3. Add additional provider packages only for the other blockchains the application intends to support.

  4. Use the documented widget integration guidance to continue configuration.

Expected outcome

The project dependencies include the core widget and the selected blockchain provider packages.

Guide limitations

  • Each provider can require its listed wallet or ecosystem dependencies.
Documentation 1 ↗
Evidence and transparency

Sources & review

Official repository ↗
Source record details
Source availability
Active
Sources checked
1 October 2026
Original website title
lifinance/widget · Official homepage title · retained in its source language
How we review sourcesSuggest a correction