@lifi/widget

LI.FI Widget

LI.FI Widget is a set of prebuilt UI components for secure cross-chain bridging and swapping. The widget can be customized to match your web app's design and helps drive your multi-chain strategy by attracting users from all ecosystems.

LI.FI Widget features include:

• All ecosystems, chains, bridges, exchanges, and solvers that LI.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 and Wallet Standard support)
• Supports widely adopted industry standards, including EIP-5792, ERC-2612, EIP-712, EIP-6963, and Permit2
• 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, Reown AppKit, Privy, Dynamic

Installation

LI.FI Widget

LI.FI Widget is available as an npm package.

pnpm:

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

npm:

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

yarn:

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

• 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.
• @mysten/dapp-kit provides React tools for wallet integration and data access in Sui blockchain dApps.

LI.FI Wallet Management

LI.FI Wallet Management is available as an npm package.

pnpm:

pnpm add @lifi/wallet-management

npm:

npm install @lifi/wallet-management

yarn:

yarn add @lifi/wallet-management

Getting started with LI.FI Widget

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

import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  theme: {
    container: {
      border: '1px solid rgb(234, 234, 234)',
      borderRadius: '16px',
    },
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

Please refer to our documentation if you encounter any issues with importing.

You can also refer to the examples folder in this repository to see how to import the widget in your specific context.

Examples

Visit our playground to see how you can customize your LI.FI Widget experience. Additionally, see examples folder in this repository.

Documentation

Please visit LI.FI Widget Documentation.

Contributing Translations

We appreciate your interest in helping translate our project!

If you'd like to contribute translations, please visit our Crowdin project page at Crowdin 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!

Changelog

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