Monetize Widget

import { LiFiWidget, WidgetConfig, WidgetFeeConfig } from '@lifi/widget';

// Basic advanced configuration
const basicFeeConfig: WidgetFeeConfig = {
  name: "DApp fee",
  logoURI: "https://yourdapp.com/logo.png",
  fee: 0.01, // 1% fee
  showFeePercentage: true,
  showFeeTooltip: true
};

// Dynamic fee calculation
const dynamicFeeConfig: WidgetFeeConfig = {
  name: "DApp fee",
  logoURI: "https://yourdapp.com/logo.png",
  showFeePercentage: true,
  showFeeTooltip: true,
  calculateFee: async (params) => {
    // params: { fromChain, toChain, fromToken, toToken,
    //           fromAddress, toAddress, fromAmount, toAmount, slippage }
    const { fromChain, toChain, fromToken, toToken, fromAmount } = params;

    // Example: Different fees for same-chain vs cross-chain
    if (fromChain.id === toChain.id) {
      return 0.01; // 1% for same-chain swaps
    }

    // Example: Volume-based fee structure (fromAmount is bigint)
    if (fromAmount && fromAmount > 1000000000000000000n) {
      return 0.015; // 1.5% for large volumes
    }

    return 0.03; // Default 3% fee
  }
};

const widgetConfig: WidgetConfig = {
  feeConfig: basicFeeConfig, // or dynamicFeeConfig
  // Other options...
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="fee-demo" config={widgetConfig} />
  );
};