> ## Documentation Index
> Fetch the complete documentation index at: https://docs.li.fi/llms.txt
> Use this file to discover all available pages before exploring further.
# Widget Integration
> Composer works automatically in the LI.FI Widget. Learn how to configure, customize, and listen for Composer-specific events.
LI.FI Widget 是一个即插即用的 React 组件，提供完整的交换、桥接与 Composer UI。**Composer 开箱即用。** 当用户选择某个 vault 代币作为目标时，Widget 会自动使用 Composer 来执行存入。
***
## Zero-Code Composer
如果你已经集成了 LI.FI Widget，Composer 就已经对你的用户可用了。无需额外配置。
当用户：
1. 选择某个 vault 代币（例如某个 Morpho vault）作为目标代币时
2. Widget 会自动检测到这是一条 Composer 路由
3. 显示用户将收到的预估 vault 代币
4. 在单笔交易中执行完整的 Composer flow（swap + deposit）
***
## Basic Setup
如果你还没有集成 Widget，这里是一个最简设置：
```tsx theme={"system"}
import { LiFiWidget } from "@lifi/widget";
import type { WidgetConfig } from "@lifi/widget";
const widgetConfig: WidgetConfig = {
integrator: "YourAppName",
variant: "default",
};
export function ComposerWidget() {
return ;
}
```
如需完整的 Widget 设置说明，参见 [Install Widget](/widget/install-widget)。
***
## Configuring Composer in the Widget
### Pre-select a Vault Token
你可以预先配置 Widget 以针对某个特定的 vault 代币，从而创建一个聚焦的存入体验：
```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
integrator: "YourAppName",
toChain: 8453, // Base
toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A", // Morpho vault token
};
```
这会用该 Morpho vault 预填目标，因此用户只需选择其源代币与金额。
### Lock the Destination
要创建一个专用的存入 widget（例如“存入 Morpho”），请锁定目标，使用户无法更改它：
```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
integrator: "YourAppName",
toChain: 8453,
toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A",
disabledUI: ["toToken", "toAddress"],
};
```
### Filter Source Chains and Tokens
限制哪些源链或代币可用：
```tsx theme={"system"}
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 交易：
```tsx theme={"system"}
import { LiFiWidget } from "@lifi/widget";
import type { Route } from "@lifi/sdk";
function ComposerWidget() {
return (
{
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/widget-events)。
***
## Widget Variants for Composer
Widget 支持不同的视觉变体。对于 Composer 用例，可考虑：
| Variant | Best For |
| --------- | ------------------------------ |
| `default` | 通用的 swap/bridge/deposit widget |
| `compact` | 空间受限的嵌入式存入 widget |
| `drawer` | 用于存入 flow 的滑出面板 |
```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
integrator: "YourAppName",
variant: "compact",
toChain: 8453,
toToken: "0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A",
};
```
如需了解所有变体，参见 [Select Widget Variants](/widget/select-widget-layout#variant)。
***
## Customizing Appearance
让 Widget 与你应用的设计系统相匹配：
```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
integrator: "YourAppName",
appearance: "dark",
theme: {
palette: {
primary: { main: "#5C67FF" },
secondary: { main: "#fab6f4" },
},
shape: {
borderRadius: 12,
borderRadiusSecondary: 8,
},
},
};
```
如需完整的主题化选项，参见 [Customize Widget](/widget/customize-widget)。
***
## Wallet Management
Widget 可以在内部管理钱包连接，或与你现有的钱包 provider 集成。有关连接外部钱包 provider 的详情，参见 [Wallet Management](/widget/wallet-management)。
***
## Try It Live
在 Widget Playground 中测试 Composer：
用于配合 LI.FI Widget 测试 Composer flow 的交互式 playground
***
## Next Steps
完整的 Widget 配置参考
所有可用的 Widget 事件回调
用于完全控制的直接 API 集成
使用 TypeScript SDK 的托管式执行