Repository files navigation

LI.FI Widget is a set of prebuilt UI components that will help you integrate a secure cross-chain bridging and swapping experience that can be styled to match your web app design perfectly and helps drive your multi-chain strategy and attract new users from everywhere.

LI.FI Widget features include:

• All ecosystems, chains, bridges, exchanges, and solvers thatLI.FI supports
• Embeddable variants - compact, wide, and drawer
• Options to allow or deny certain chains, tokens, bridges, and exchanges
• Pre-configured themes and lots of customization options with dark mode support so you can match the look and feel of your web app
• Wallet management UI with the option to opt-out and use your own (Wagmi,Bigmi andSolana Wallet Standard support)
• View of transactions in progress and transaction history
• Curated wallet lists and wallet bookmarks
• Route settings for advanced users (stored locally)
• Complete UI translations to match your customer’s preferred language
• Compatibility tested with React, Next.js, Vue, Nuxt.js, Svelte, Remix, Gatsby, Vite, RainbowKit, Privy, Dynamic

LI.FI Widget is available as annpm package.

pnpm:

pnpm add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

npm:

npm install @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

yarn:

yarn add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

• Wagmi is type safe, extensible, and modular library for building Ethereum apps.
• Bigmi is modular TypeScript library that provides reactive primitives for building Bitcoin applications.
• @solana/wallet-adapter-react is modular TypeScript wallet adapters and components for Solana applications.
• TanStack Query is an async state manager that handles requests, caching, and more.

LI.FI Wallet Management is available as annpm package.

pnpm:

pnpm add @lifi/wallet-management

npm:

npm install @lifi/wallet-management

yarn:

yarn add @lifi/wallet-management

Here is an example of a basic app using LI.FI Widget:

import{LiFiWidget,WidgetConfig}from'@lifi/widget';constwidgetConfig:WidgetConfig={theme:{container:{border:'1px solid rgb(234, 234, 234)',borderRadius:'16px',},},};exportconstWidgetPage=()=>{return(<LiFiWidgetintegrator="Your dApp/company name"config={widgetConfig}/>);};

Visit ourplayground to see how you can customize yourLI.FI Widget experience. Additionally, seeexamples folder in this repository.

Please visitLI.FI Widget Documentation.

We appreciate your interest in helping translate our project!

If you'd like to contribute translations, please visit our Crowdin project page atCrowdin LI.FI Widget. Register on Crowdin and you can start translating the project into your preferred language. Your contributions will help make our project accessible to a wider audience around the world.

Thank you for your support!

Thechangelog is regularly updated to reflect what's changed in each new release.

This project is licensed under the terms of theApache-2.0.