Widget Integration

LI.FI Widget 是一个即插即用的 React 组件，提供完整的交换、桥接与 Composer UI。Composer 开箱即用。 当用户选择某个 vault 代币作为目标时，Widget 会自动使用 Composer 来执行存入。

Zero-Code Composer

如果你已经集成了 LI.FI Widget，Composer 就已经对你的用户可用了。无需额外配置。当用户：

选择某个 vault 代币（例如某个 Morpho vault）作为目标代币时
Widget 会自动检测到这是一条 Composer 路由
显示用户将收到的预估 vault 代币
在单笔交易中执行完整的 Composer flow（swap + deposit）

Basic Setup

如果你还没有集成 Widget，这里是一个最简设置：

import { LiFiWidget } from "@lifi/widget";
import type { WidgetConfig } from "@lifi/widget";

const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  variant: "default",
};

export function ComposerWidget() {
  return <LiFiWidget integrator="YourAppName" config={widgetConfig} />;
}

如需完整的 Widget 设置说明，参见 Install Widget。

Pre-select a Vault Token

你可以预先配置 Widget 以针对某个特定的 vault 代币，从而创建一个聚焦的存入体验：

const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  toChain: 8453, // Base
  toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A", // Morpho vault token
};

这会用该 Morpho vault 预填目标，因此用户只需选择其源代币与金额。

Lock the Destination

要创建一个专用的存入 widget（例如“存入 Morpho”），请锁定目标，使用户无法更改它：

const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  toChain: 8453,
  toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A",
  disabledUI: ["toToken", "toAddress"],
};

Filter Source Chains and Tokens

限制哪些源链或代币可用：

const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  toChain: 8453,
  toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A",
  chains: {
    allow: [1, 10, 42161, 8453], // Only Ethereum, Optimism, Arbitrum, Base
  },
};

Listening for Composer Events

Widget 在执行期间发出事件。用它们在你的应用中跟踪 Composer 交易：

import { LiFiWidget } from "@lifi/widget";
import type { Route } from "@lifi/sdk";

function ComposerWidget() {
  return (
    <LiFiWidget
      integrator="YourAppName"
      config={widgetConfig}
      onRouteExecutionStarted={(route: Route) => {
        console.log("Composer execution started:", route);
      }}
      onRouteExecutionUpdated={(route: Route) => {
        console.log("Composer execution updated:", route);
      }}
      onRouteExecutionCompleted={(route: Route) => {
        console.log("Composer execution completed:", route);
        // e.g., update user's vault position in your UI
      }}
      onRouteExecutionFailed={(route: Route) => {
        console.error("Composer execution failed:", route);
      }}
    />
  );
}

如需完整的事件参考，参见 Widget Events。

Widget 支持不同的视觉变体。对于 Composer 用例，可考虑：

Variant	Best For
`default`	通用的 swap/bridge/deposit widget
`compact`	空间受限的嵌入式存入 widget
`drawer`	用于存入 flow 的滑出面板

const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  variant: "compact",
  toChain: 8453,
  toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A",
};

如需了解所有变体，参见 Select Widget Variants。

Customizing Appearance

让 Widget 与你应用的设计系统相匹配：

const widgetConfig: WidgetConfig = {
  integrator: "YourAppName",
  appearance: "dark",
  theme: {
    palette: {
      primary: { main: "#5C67FF" },
      secondary: { main: "#fab6f4" },
    },
    shape: {
      borderRadius: 12,
      borderRadiusSecondary: 8,
    },
  },
};

如需完整的主题化选项，参见 Customize Widget。

Wallet Management

Widget 可以在内部管理钱包连接，或与你现有的钱包 provider 集成。有关连接外部钱包 provider 的详情，参见 Wallet Management。

Try It Live

在 Widget Playground 中测试 Composer：

Widget Playground

用于配合 LI.FI Widget 测试 Composer flow 的交互式 playground

Next Steps

Widget Configuration

完整的 Widget 配置参考

Widget Events

所有可用的 Widget 事件回调

API Integration

用于完全控制的直接 API 集成

SDK Integration

使用 TypeScript SDK 的托管式执行

简介

通过 Composer API 集成

通过 LI.FI API 集成

资源

Widget Integration

Zero-Code Composer

Basic Setup

Configuring Composer in the Widget

Pre-select a Vault Token

Lock the Destination

Filter Source Chains and Tokens

Listening for Composer Events

Widget Variants for Composer

Customizing Appearance

Wallet Management

Try It Live

Widget Playground

Next Steps

Widget Configuration

Widget Events

API Integration

SDK Integration

​Zero-Code Composer

​Basic Setup

​Configuring Composer in the Widget

​Pre-select a Vault Token

​Lock the Destination

​Filter Source Chains and Tokens

​Listening for Composer Events

​Widget Variants for Composer

​Customizing Appearance

​Wallet Management

​Try It Live

Widget Playground

​Next Steps

Widget Configuration

Widget Events

API Integration

SDK Integration

Zero-Code Composer

Basic Setup

Configuring Composer in the Widget

Pre-select a Vault Token

Lock the Destination

Filter Source Chains and Tokens

Listening for Composer Events

Widget Variants for Composer

Customizing Appearance

Wallet Management

Try It Live

Next Steps