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

​
零代码 Composer

如果您已经集成了 LI.FI Widget，Composer 已经对您的用户可用。无需额外配置。 当用户：
  1. 选择金库代币（例如 Morpho 金库）作为目标代币
  2. Widget 自动检测这是 Composer 路由
  3. 显示用户将收到的估计金库代币
  4. 在单笔交易中执行完整的 Composer 流程（兑换 + 存款）

​
基本设置

如果您还没有集成 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 设置说明，请参见 安装 Widget。

​
在 Widget 中配置 Composer

​
预选金库代币

您可以预配置 Widget 以定位特定的金库代币，创建专注的存款体验： 
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,                                                // Base
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',       // Morpho 金库代币
};
这会用 Morpho 金库预填充目标，所以用户只需要选择他们的源代币和金额。

​
锁定目标

要创建专门的存款 Widget（例如，“存入 Morpho”），锁定目标以便用户无法更改： 
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',
  disabledUI: ['toToken', 'toAddress'],
};

​
过滤源链和代币

限制可用的源链或代币： 
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',
  chains: {
    allow: [1, 10, 42161, 8453], // 仅 Ethereum、Optimism、Arbitrum、Base
  },
};

​
监听 Composer 事件

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('执行开始：', 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 特定配置

​
显示金库信息

为金库代币添加自定义显示： 
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 交易自定义外观： 
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： 
const crossChainWidgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,                                                // Base
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',       // Morpho 金库
  chains: {
    allow: [1, 10, 42161, 8453], // 允许多个源链
  },
  feeClaim: {
    claimTo: '0xYOUR_ADDRESS', // 可选：收取费用
  },
};

​
完整示例

这是一个完整的 Composer Widget 集成： 
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. 验证执行：检查交易是否正确执行
// 测试网配置
const testWidgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 84532, // Base Sepolia
  toToken: 'TEST_VAULT_TOKEN_ADDRESS',
  chains: {
    allow: [11155111, 84532], // Sepolia + Base Sepolia
  },
};

​
下一步

Widget 文档

完整 Widget 参考

API 集成

直接 API 集成

SDK 集成

使用 LI.FI SDK

支持的协议

查看所有支持的金库