Widget 集成

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

零代码 Composer

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

选择金库代币（例如 Morpho 金库）作为目标代币
Widget 自动检测这是 Composer 路由
显示用户将收到的估计金库代币
在单笔交易中执行完整的 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 以定位特定的金库代币，创建专注的存款体验：

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：

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
使用测试代币：获取测试网代币
选择金库代币：确保目标代币是支持的金库代币
验证执行：检查交易是否正确执行

// 测试网配置
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

支持的协议

查看所有支持的金库

入门指南

集成指南

配方示例

参考文档

协议团队

Widget 集成

零代码 Composer

基本设置

在 Widget 中配置 Composer

预选金库代币

锁定目标

过滤源链和代币

监听 Composer 事件

Composer 特定配置

显示金库信息

自定义主题

跨链 Composer Widget

完整示例

测试 Composer Widget

下一步

Widget 文档

API 集成

SDK 集成

支持的协议

入门指南

集成指南

配方示例

参考文档

协议团队

Documentation Index

​零代码 Composer

​基本设置

​在 Widget 中配置 Composer

​预选金库代币

​锁定目标

​过滤源链和代币

​监听 Composer 事件

​Composer 特定配置

​显示金库信息

​自定义主题

​跨链 Composer Widget

​完整示例

​测试 Composer Widget

​下一步

Widget 文档

API 集成

SDK 集成

支持的协议

零代码 Composer

基本设置

在 Widget 中配置 Composer

预选金库代币

锁定目标

过滤源链和代币

监听 Composer 事件

Composer 特定配置

显示金库信息

自定义主题

跨链 Composer Widget

完整示例

测试 Composer Widget

下一步