From d44bb37d4aa36b1aec967c731a2eec42d5b0562b Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Wed, 3 Dec 2025 10:29:02 +0000 Subject: [PATCH 1/6] chore: update README for v4 --- README.md | 162 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 149 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 308576b71..8ade30b5b 100644 --- a/README.md +++ b/README.md @@ -16,51 +16,134 @@ [**LI.FI Widget**](https://docs.li.fi/widget/overview) features include: +- **Provider-based architecture** - Modular blockchain support with separate packages for Ethereum, Bitcoin, Solana, and Sui - 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) +- Built-in wallet management UI with support for external wallet providers ([Wagmi](https://wagmi.sh/), [Bigmi](https://github.com/lifinance/bigmi), [@solana/wallet-adapter-react](https://github.com/anza-xyz/wallet-adapter), and [@mysten/dapp-kit](https://sdk.mystenlabs.com/dapp-kit)) - 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 customer’s preferred language +- 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](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-provider-ethereum wagmi +``` + +**npm:** + +```sh +npm install @lifi/widget-provider-ethereum wagmi +``` + +**yarn:** + +```sh +yarn add @lifi/widget-provider-ethereum wagmi +``` + +**Bitcoin:** **pnpm:** ```sh -pnpm add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query @mysten/dapp-kit +pnpm add @lifi/widget-provider-bitcoin @bigmi/react ``` **npm:** ```sh -npm install @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query @mysten/dapp-kit +npm install @lifi/widget-provider-bitcoin @bigmi/react ``` **yarn:** ```sh -yarn add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query @mysten/dapp-kit +yarn add @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. +**Solana:** + +**pnpm:** + +```sh +pnpm add @lifi/widget-provider-solana @solana/wallet-adapter-react +``` + +**npm:** + +```sh +npm install @lifi/widget-provider-solana @solana/wallet-adapter-react +``` + +**yarn:** + +```sh +yarn add @lifi/widget-provider-solana @solana/wallet-adapter-react +``` + +**Sui:** + +**pnpm:** + +```sh +pnpm add @lifi/widget-provider-sui @mysten/dapp-kit +``` + +**npm:** + +```sh +npm install @lifi/widget-provider-sui @mysten/dapp-kit +``` + +**yarn:** + +```sh +yarn add @lifi/widget-provider-sui @mysten/dapp-kit +``` + +**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:** @@ -80,14 +163,67 @@ npm install @lifi/wallet-management yarn add @lifi/wallet-management ``` +## 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 [@solana/wallet-adapter-react](https://github.com/anza-xyz/wallet-adapter)) +- **`@lifi/widget-provider-sui`** - Sui support (requires [@mysten/dapp-kit](https://sdk.mystenlabs.com/dapp-kit)) +- **`@lifi/wallet-management`** - Wallet management UI components + +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 ( + + ); +}; +``` + +**Multi-chain example** (Ethereum, Solana, Bitcoin, and Sui): ```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'; const widgetConfig: WidgetConfig = { + providers: [ + EthereumProvider(), + SolanaProvider(), + BitcoinProvider(), + SuiProvider(), + ], theme: { container: { border: '1px solid rgb(234, 234, 234)', From ea17ae11d01a6fb126a447667d8b1c063cc8414b Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Fri, 17 Apr 2026 13:05:23 +0100 Subject: [PATCH 2/6] chore: fix README peer deps for v4 --- README.md | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 8ade30b5b..926d305cf 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ - 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 -- Built-in wallet management UI with support for external wallet providers ([Wagmi](https://wagmi.sh/), [Bigmi](https://github.com/lifinance/bigmi), [@solana/wallet-adapter-react](https://github.com/anza-xyz/wallet-adapter), and [@mysten/dapp-kit](https://sdk.mystenlabs.com/dapp-kit)) +- 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), and [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit)) - 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 @@ -64,19 +64,19 @@ Install the provider packages for the blockchains you want to support: **pnpm:** ```sh -pnpm add @lifi/widget-provider-ethereum wagmi +pnpm add @lifi/widget-provider-ethereum wagmi @wagmi/core ``` **npm:** ```sh -npm install @lifi/widget-provider-ethereum wagmi +npm install @lifi/widget-provider-ethereum wagmi @wagmi/core ``` **yarn:** ```sh -yarn add @lifi/widget-provider-ethereum wagmi +yarn add @lifi/widget-provider-ethereum wagmi @wagmi/core ``` **Bitcoin:** @@ -104,19 +104,19 @@ yarn add @lifi/widget-provider-bitcoin @bigmi/react **pnpm:** ```sh -pnpm add @lifi/widget-provider-solana @solana/wallet-adapter-react +pnpm add @lifi/widget-provider-solana bs58 ``` **npm:** ```sh -npm install @lifi/widget-provider-solana @solana/wallet-adapter-react +npm install @lifi/widget-provider-solana bs58 ``` **yarn:** ```sh -yarn add @lifi/widget-provider-solana @solana/wallet-adapter-react +yarn add @lifi/widget-provider-solana bs58 ``` **Sui:** @@ -124,19 +124,19 @@ yarn add @lifi/widget-provider-solana @solana/wallet-adapter-react **pnpm:** ```sh -pnpm add @lifi/widget-provider-sui @mysten/dapp-kit +pnpm add @lifi/widget-provider-sui @mysten/dapp-kit-react ``` **npm:** ```sh -npm install @lifi/widget-provider-sui @mysten/dapp-kit +npm install @lifi/widget-provider-sui @mysten/dapp-kit-react ``` **yarn:** ```sh -yarn add @lifi/widget-provider-sui @mysten/dapp-kit +yarn add @lifi/widget-provider-sui @mysten/dapp-kit-react ``` **Note:** You only need to install the provider packages for the blockchains you want to support. Each provider package includes its required peer dependencies. @@ -171,9 +171,10 @@ The LI.FI Widget uses a **provider-based architecture** that allows you to selec - **`@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 [@solana/wallet-adapter-react](https://github.com/anza-xyz/wallet-adapter)) -- **`@lifi/widget-provider-sui`** - Sui support (requires [@mysten/dapp-kit](https://sdk.mystenlabs.com/dapp-kit)) +- **`@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/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 From a239e76e287dbaea66f09b25a418476662a6695c Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Mon, 27 Apr 2026 11:51:32 +0300 Subject: [PATCH 3/6] feat: add Tron support to README and installation instructions --- README.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 926d305cf..258cee5f0 100644 --- a/README.md +++ b/README.md @@ -16,12 +16,12 @@ [**LI.FI Widget**](https://docs.li.fi/widget/overview) features include: -- **Provider-based architecture** - Modular blockchain support with separate packages for Ethereum, Bitcoin, Solana, and Sui +- **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 -- 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), and [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit)) +- 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 @@ -139,6 +139,26 @@ npm install @lifi/widget-provider-sui @mysten/dapp-kit-react 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 @@ -163,6 +183,30 @@ 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`) — 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: @@ -173,6 +217,7 @@ The LI.FI Widget uses a **provider-based architecture** that allows you to selec - **`@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)) @@ -209,7 +254,7 @@ export const WidgetPage = () => { }; ``` -**Multi-chain example** (Ethereum, Solana, Bitcoin, and Sui): +**Multi-chain example** (Ethereum, Solana, Bitcoin, Sui, and Tron): ```tsx import { LiFiWidget, WidgetConfig } from '@lifi/widget'; @@ -217,6 +262,7 @@ 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: [ @@ -224,6 +270,7 @@ const widgetConfig: WidgetConfig = { SolanaProvider(), BitcoinProvider(), SuiProvider(), + TronProvider(), ], theme: { container: { From 6a5b5db91b36dfd8b1ff553a75a39a82c33a1e1f Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Mon, 27 Apr 2026 11:58:20 +0300 Subject: [PATCH 4/6] chore: add Tron ecosystem handler to README installation instructions --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 258cee5f0..890ddb902 100644 --- a/README.md +++ b/README.md @@ -205,7 +205,7 @@ npm install @lifi/widget-light 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`) — 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. +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 From 2affc054b3c7ad254fd12041116ac33125e2657a Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Mon, 27 Apr 2026 12:02:23 +0300 Subject: [PATCH 5/6] chore: fix formatting in README customization options --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 890ddb902..5e0fdbbc4 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ - 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 +- 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 From f518be95dd3ee24feed32632e99863e0b330de0b Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Mon, 27 Apr 2026 16:45:58 +0300 Subject: [PATCH 6/6] chore: update compatibility list in README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5e0fdbbc4..ecf155bb3 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ - 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 +- Compatibility tested with React, Next.js, Vue, Nuxt.js, Svelte, Remix, Vite, RainbowKit, Reown AppKit, Privy, Dynamic ## Installation