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} />;
}

const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,                                                // Base
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',       // 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
  },
};

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 执行失败');
        }
      }}
    />
  );
}

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,
    },
  },
};

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)',
    },
  },
};

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

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>
  );
}

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