安装 Widget

要开始使用，请安装最新版本的 LI.FI Widget 以及所需的对等依赖。

安装

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

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

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

bun add @lifi/widget @tanstack/react-query

带区块链提供者

若要获得包括 Ethereum、Solana、Bitcoin、Sui 和 Tron 在内的完整多链支持，请安装 widget 以及所有提供者包及其对等依赖：

yarn add @lifi/widget @lifi/widget-provider-ethereum @lifi/widget-provider-solana @lifi/widget-provider-bitcoin @lifi/widget-provider-sui @lifi/widget-provider-tron wagmi @wagmi/core @bigmi/react bs58 @mysten/dapp-kit-react @tronweb3/tronwallet-adapter-react-hooks @tanstack/react-query

pnpm add @lifi/widget @lifi/widget-provider-ethereum @lifi/widget-provider-solana @lifi/widget-provider-bitcoin @lifi/widget-provider-sui @lifi/widget-provider-tron wagmi @wagmi/core @bigmi/react bs58 @mysten/dapp-kit-react @tronweb3/tronwallet-adapter-react-hooks @tanstack/react-query

npm install @lifi/widget @lifi/widget-provider-ethereum @lifi/widget-provider-solana @lifi/widget-provider-bitcoin @lifi/widget-provider-sui @lifi/widget-provider-tron wagmi @wagmi/core @bigmi/react bs58 @mysten/dapp-kit-react @tronweb3/tronwallet-adapter-react-hooks @tanstack/react-query

bun add @lifi/widget @lifi/widget-provider-ethereum @lifi/widget-provider-solana @lifi/widget-provider-bitcoin @lifi/widget-provider-sui @lifi/widget-provider-tron wagmi @wagmi/core @bigmi/react bs58 @mysten/dapp-kit-react @tronweb3/tronwallet-adapter-react-hooks @tanstack/react-query

依赖说明

核心依赖

TanStack Query - 处理请求、缓存等的异步状态管理器。必需的对等依赖。

区块链提供者包

这些是启用不同区块链生态系统支持的可选包：

@lifi/widget-provider-ethereum - Ethereum/EVM 链支持
- 对等依赖：wagmi ^3 和 @wagmi/core ^3
@lifi/widget-provider-solana - Solana 链支持
- 对等依赖：bs58 >=4.0.1
@lifi/widget-provider-bitcoin - Bitcoin 链支持
- 对等依赖：@bigmi/react ^0.8.0
@lifi/widget-provider-sui - Sui 链支持
- 对等依赖：@mysten/dapp-kit-react ^2.0.0
@lifi/widget-provider-tron - Tron 链支持
- 对等依赖：@tronweb3/tronwallet-adapter-react-hooks ^1.1.11

Polyfill 要求： 如果你需要支持较旧的浏览器，则需要安装并配置 polyfill。详情请参阅 Polyfill 要求文档。

兼容性

widget 与 React 19+ 兼容，并可与各种框架和钱包库配合使用，包括 Next.js、Remix、Vue、Nuxt.js、Svelte、RainbowKit、ConnectKit、Privy 等。有关框架特定的设置指南和代码示例，请参阅兼容性页面。请在 widget 仓库中查看我们的完整示例，如果你遇到任何不兼容问题，请提交 issue。

基本示例

widget 采用 TypeScript 编写，所有配置选项都完全类型化。

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} />;
};

带区块链提供者的示例

若要获得多链支持，请使用区块链提供者配置 widget：

import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { EthereumProvider } from '@lifi/widget-provider-ethereum';
import { SolanaProvider } from '@lifi/widget-provider-solana';
import { BitcoinProvider } from '@lifi/widget-provider-bitcoin';
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)',
      borderRadius: '16px',
    },
  },
};

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

入门

基本设置

高级

Widget Light (iframe)

其他

安装 Widget

安装

核心 Widget 包

带区块链提供者

依赖说明

核心依赖

区块链提供者包

兼容性

基本示例

带区块链提供者的示例

​安装

​核心 Widget 包

​带区块链提供者

​依赖说明

​核心依赖

​区块链提供者包

​兼容性

​基本示例

​带区块链提供者的示例

安装

核心 Widget 包

带区块链提供者

依赖说明

核心依赖

区块链提供者包

兼容性

基本示例

带区块链提供者的示例