> ## 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 集成

> Composer 在 LI.FI Widget 中自动工作。了解如何配置、自定义和监听 Composer 特定事件。

LI.FI Widget 是一个即插即用的 React 组件，提供完整的兑换、跨链和 Composer UI。**Composer 开箱即用。** 当用户选择金库代币作为目标时，Widget 自动使用 Composer 执行存款。

***

## 零代码 Composer

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

当用户：

1. 选择金库代币（例如 Morpho 金库）作为目标代币
2. Widget 自动检测这是 Composer 路由
3. 显示用户将收到的估计金库代币
4. 在单笔交易中执行完整的 Composer 流程（兑换 + 存款）

***

## 基本设置

如果您还没有集成 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 <LiFiWidget integrator="YourAppName" config={widgetConfig} />;
}
```

完整的 Widget 设置说明，请参见 [安装 Widget](/widget/install-widget)。

***

## 在 Widget 中配置 Composer

### 预选金库代币

您可以预配置 Widget 以定位特定的金库代币，创建专注的存款体验：

```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,                                                // Base
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',       // Morpho 金库代币
};
```

这会用 Morpho 金库预填充目标，所以用户只需要选择他们的源代币和金额。

### 锁定目标

要创建专门的存款 Widget（例如，"存入 Morpho"），锁定目标以便用户无法更改：

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

### 过滤源链和代币

限制可用的源链或代币：

```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',
  chains: {
    allow: [1, 10, 42161, 8453], // 仅 Ethereum、Optimism、Arbitrum、Base
  },
};
```

***

## 监听 Composer 事件

Widget 在执行期间发出事件。使用这些事件在您的应用中跟踪 Composer 交易：

```tsx theme={"system"}
import { LiFiWidget } from '@lifi/widget';
import type { Route } from '@lifi/sdk';

function ComposerWidget() {
  return (
    <LiFiWidget
      integrator="YourAppName"
      config={widgetConfig}
      onRouteExecutionStarted={(route: Route) => {
        console.log('执行开始：', route);
        
        // 检查是否是 Composer 路由
        if (route.steps.some(step => step.tool === 'composer')) {
          console.log('Composer 执行已开始');
        }
      }}
      onRouteExecutionUpdated={(route: Route) => {
        console.log('执行更新：', route);
        
        // 跟踪进度
        const currentStep = route.steps.find(step => step.execution?.status === 'PENDING');
        if (currentStep) {
          console.log('当前步骤：', currentStep.tool);
        }
      }}
      onRouteExecutionCompleted={(route: Route) => {
        console.log('执行完成：', route);
        
        if (route.steps.some(step => step.tool === 'composer')) {
          console.log('Composer 存款完成！');
        }
      }}
      onRouteExecutionFailed={(route: Route, error: Error) => {
        console.error('执行失败：', error);
        
        if (route.steps.some(step => step.tool === 'composer')) {
          console.error('Composer 执行失败');
        }
      }}
    />
  );
}
```

***

## Composer 特定配置

### 显示金库信息

为金库代币添加自定义显示：

```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  tokenMap: {
    '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A': {
      name: 'Morpho Vault',
      symbol: 'mvUSDC',
      logoURI: 'https://example.com/morpho-logo.png',
      chainId: 8453,
      priceUSD: '1.00',
      decimals: 6,
    },
  },
};
```

### 自定义主题

为 Composer 交易自定义外观：

```tsx theme={"system"}
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  theme: {
    container: {
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      borderRadius: '16px',
    },
    card: {
      background: 'rgba(255, 255, 255, 0.1)',
      backdropFilter: 'blur(10px)',
    },
  },
};
```

***

## 跨链 Composer Widget

为跨链 Composer 流程配置 Widget：

```tsx theme={"system"}
const crossChainWidgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,                                                // Base
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',       // Morpho 金库
  chains: {
    allow: [1, 10, 42161, 8453], // 允许多个源链
  },
  feeClaim: {
    claimTo: '0xYOUR_ADDRESS', // 可选：收取费用
  },
};
```

***

## 完整示例

这是一个完整的 Composer Widget 集成：

```tsx theme={"system"}
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import type { Route } from '@lifi/sdk';
import { useState } from 'react';

const composerWidgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',
  disabledUI: ['toToken'],
  chains: {
    allow: [1, 10, 42161, 8453],
  },
  theme: {
    container: {
      borderRadius: '12px',
      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
    },
  },
};

export function ComposerDepositWidget() {
  const [status, setStatus] = useState<string>('等待用户输入');

  const handleRouteStarted = (route: Route) => {
    const isComposer = route.steps.some(step => step.tool === 'composer');
    setStatus(isComposer ? 'Composer 执行已开始' : '执行已开始');
  };

  const handleRouteUpdated = (route: Route) => {
    const currentStep = route.steps.find(step => 
      step.execution?.status === 'PENDING'
    );
    if (currentStep) {
      setStatus(`执行中：${currentStep.tool}`);
    }
  };

  const handleRouteCompleted = (route: Route) => {
    const isComposer = route.steps.some(step => step.tool === 'composer');
    setStatus(isComposer ? 'Composer 存款完成！' : '执行完成！');
  };

  const handleRouteFailed = (route: Route, error: Error) => {
    setStatus(`执行失败：${error.message}`);
  };

  return (
    <div>
      <div className="status-bar">
        状态：{status}
      </div>
      
      <LiFiWidget
        integrator="YourAppName"
        config={composerWidgetConfig}
        onRouteExecutionStarted={handleRouteStarted}
        onRouteExecutionUpdated={handleRouteUpdated}
        onRouteExecutionCompleted={handleRouteCompleted}
        onRouteExecutionFailed={handleRouteFailed}
      />
    </div>
  );
}
```

***

## 测试 Composer Widget

要测试 Composer 功能：

1. **设置测试环境**：在测试网上配置 Widget
2. **使用测试代币**：获取测试网代币
3. **选择金库代币**：确保目标代币是支持的金库代币
4. **验证执行**：检查交易是否正确执行

```tsx theme={"system"}
// 测试网配置
const testWidgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 84532, // Base Sepolia
  toToken: 'TEST_VAULT_TOKEN_ADDRESS',
  chains: {
    allow: [11155111, 84532], // Sepolia + Base Sepolia
  },
};
```

***

## 下一步

<CardGroup cols={2}>
  <Card title="Widget 文档" icon="window" href="/widget/overview">
    完整 Widget 参考
  </Card>

  <Card title="API 集成" icon="code" href="/composer/guides/api-integration">
    直接 API 集成
  </Card>

  <Card title="SDK 集成" icon="cube" href="/composer/guides/sdk-integration">
    使用 LI.FI SDK
  </Card>

  <Card title="支持的协议" icon="list" href="/composer/reference/supported-protocols">
    查看所有支持的金库
  </Card>
</CardGroup>