Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 199 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,51 +16,154 @@

[**LI.FI Widget**](https://docs.li.fi/widget/overview) features include:

- **Provider-based architecture** - Modular blockchain support with separate packages for Ethereum, Bitcoin, Solana, Sui, and Tron
- All ecosystems, chains, bridges, exchanges, and solvers that [LI.FI](https://docs.li.fi/introduction/chains) 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](https://wagmi.sh/), [Bigmi](https://github.com/lifinance/bigmi) and [Wallet Standard](https://github.com/wallet-standard/wallet-standard) support)
- Pre-configured themes and lots of customization options with dark mode support so you can match the look and feel of your web app
- Built-in wallet management UI with support for external wallet providers ([Wagmi](https://wagmi.sh/), [Bigmi](https://github.com/lifinance/bigmi), [Wallet Standard](https://github.com/wallet-standard/wallet-standard), [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit), and [TronWallet Adapters](https://github.com/tronweb3/tronwallet-adapter))
- Supports widely adopted industry standards, including [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792), [ERC-2612](https://eips.ethereum.org/EIPS/eip-2612), [EIP-712](https://eips.ethereum.org/EIPS/eip-712), [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), and [Permit2](https://github.com/Uniswap/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 customers preferred language
- Compatibility tested with React, Next.js, Vue, Nuxt.js, Svelte, Remix, Gatsby, Vite, RainbowKit, Reown AppKit, Privy, Dynamic
- Complete UI translations to match your customer's preferred language
- Compatibility tested with React, Next.js, Vue, Nuxt.js, Svelte, Remix, Vite, RainbowKit, Reown AppKit, Privy, Dynamic

## Installation

### LI.FI Widget

LI.FI Widget is available as an [npm package](https://www.npmjs.com/package/@lifi/widget).
LI.FI Widget is available as an [npm package](https://www.npmjs.com/package/@lifi/widget). The widget uses a provider-based architecture, allowing you to choose which blockchains to support.

**Core package:**

**pnpm:**

```sh
pnpm add @lifi/widget @tanstack/react-query
```

**npm:**

```sh
npm install @lifi/widget @tanstack/react-query
```

**yarn:**

```sh
yarn add @lifi/widget @tanstack/react-query
```

### Blockchain Providers

Install the provider packages for the blockchains you want to support:

**Ethereum/EVM chains:**

**pnpm:**

```sh
pnpm add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query @mysten/dapp-kit
pnpm add @lifi/widget-provider-ethereum wagmi @wagmi/core
```

**npm:**

```sh
npm install @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query @mysten/dapp-kit
npm install @lifi/widget-provider-ethereum wagmi @wagmi/core
```

**yarn:**

```sh
yarn add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query @mysten/dapp-kit
yarn add @lifi/widget-provider-ethereum wagmi @wagmi/core
```

**Bitcoin:**

**pnpm:**

```sh
pnpm add @lifi/widget-provider-bitcoin @bigmi/react
```

**npm:**

```sh
npm install @lifi/widget-provider-bitcoin @bigmi/react
```

- [Wagmi](https://wagmi.sh/) is type safe, extensible, and modular library for building Ethereum apps.
- [Bigmi](https://github.com/lifinance/bigmi) is modular TypeScript library that provides reactive primitives for building Bitcoin applications.
- [@solana/wallet-adapter-react](https://github.com/anza-xyz/wallet-adapter) is modular TypeScript wallet adapters and components for Solana applications.
- [TanStack Query](https://tanstack.com/query/v5) is an async state manager that handles requests, caching, and more.
- [@mysten/dapp-kit](https://sdk.mystenlabs.com/dapp-kit) provides React tools for wallet integration and data access in Sui blockchain dApps.
**yarn:**

```sh
yarn add @lifi/widget-provider-bitcoin @bigmi/react
```

**Solana:**

**pnpm:**

```sh
pnpm add @lifi/widget-provider-solana bs58
```

**npm:**

```sh
npm install @lifi/widget-provider-solana bs58
```

**yarn:**

```sh
yarn add @lifi/widget-provider-solana bs58
```

**Sui:**

**pnpm:**

```sh
pnpm add @lifi/widget-provider-sui @mysten/dapp-kit-react
```

**npm:**

```sh
npm install @lifi/widget-provider-sui @mysten/dapp-kit-react
```

**yarn:**

```sh
yarn add @lifi/widget-provider-sui @mysten/dapp-kit-react
```

**Tron:**

**pnpm:**

```sh
pnpm add @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooks
```

**npm:**

```sh
npm install @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooks
```

**yarn:**

```sh
yarn add @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooks
```

**Note:** You only need to install the provider packages for the blockchains you want to support. Each provider package includes its required peer dependencies.

### LI.FI Wallet Management

LI.FI Wallet Management is available as an [npm package](https://www.npmjs.com/package/@lifi/wallet-management).
LI.FI Wallet Management is available as an [npm package](https://www.npmjs.com/package/@lifi/wallet-management) and provides wallet management UI components.

**pnpm:**

Expand All @@ -80,14 +183,95 @@ npm install @lifi/wallet-management
yarn add @lifi/wallet-management
```

### LI.FI Widget Light

LI.FI Widget Light is available as an [npm package](https://www.npmjs.com/package/@lifi/widget-light) and provides a lightweight, iframe-based integration. Your app manages wallets while the widget runs in a sandboxed iframe.

**pnpm:**

```sh
pnpm add @lifi/widget-light
```

**npm:**

```sh
npm install @lifi/widget-light
```

**yarn:**

```sh
yarn add @lifi/widget-light
```

Ecosystem handlers are available as subpath imports (`@lifi/widget-light/ethereum`, `@lifi/widget-light/solana`, `@lifi/widget-light/bitcoin`, `@lifi/widget-light/sui`, `@lifi/widget-light/tron`) — install the corresponding peer dependencies only for the chains you need. See the [widget-light integration guide](/packages/widget-embedded/README.md) for full setup instructions.

## Architecture

The LI.FI Widget uses a **provider-based architecture** that allows you to selectively enable support for different blockchains:

- **`@lifi/widget`** - Core widget package with UI components and functionality
- **`@lifi/widget-provider`** - Base provider package with shared types and utilities
- **`@lifi/widget-provider-ethereum`** - Ethereum/EVM chains support (requires [Wagmi](https://wagmi.sh/))
- **`@lifi/widget-provider-bitcoin`** - Bitcoin support (requires [Bigmi](https://github.com/lifinance/bigmi))
- **`@lifi/widget-provider-solana`** - Solana support (requires [bs58](https://www.npmjs.com/package/bs58))
- **`@lifi/widget-provider-sui`** - Sui support (requires [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit))
- **`@lifi/widget-provider-tron`** - Tron support (requires [@tronweb3/tronwallet-adapter-react-hooks](https://github.com/tronweb3/tronwallet-adapter))
- **`@lifi/wallet-management`** - Wallet management UI components
- **`@lifi/widget-light`** - Lightweight iframe-based integration ([docs](https://docs.li.fi/widget/widget-light-overview))

This architecture provides:
- **Modularity**: Only install and bundle what you need
- **Flexibility**: Mix and match blockchain support
- **Extensibility**: Easy to add support for new blockchains
- **Tree-shaking**: Unused providers are automatically excluded from your bundle

## Getting started with LI.FI Widget

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

```tsx
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { EthereumProvider } from '@lifi/widget-provider-ethereum';

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

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

**Multi-chain example** (Ethereum, Solana, Bitcoin, Sui, and Tron):

```tsx
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { BitcoinProvider } from '@lifi/widget-provider-bitcoin';
import { EthereumProvider } from '@lifi/widget-provider-ethereum';
import { SolanaProvider } from '@lifi/widget-provider-solana';
import { SuiProvider } from '@lifi/widget-provider-sui';
import { TronProvider } from '@lifi/widget-provider-tron';

const widgetConfig: WidgetConfig = {
providers: [
EthereumProvider(),
SolanaProvider(),
BitcoinProvider(),
SuiProvider(),
TronProvider(),
],
theme: {
container: {
border: '1px solid rgb(234, 234, 234)',
Expand Down