For more details about how fees work, fee collection on different chains, and setting up fee wallets, see the Monetizing the integration guide.
There are two ways to configure fees in the Widget: a simple fee prop for basic use cases, or an advanced feeConfig configuration that provides more flexibility and customization options.

​
Simple fee configuration

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

const widgetConfig: WidgetConfig = {
  // Set fee parameter to 3%
  fee: 0.03,
  // Other options...
};

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

​
Advanced fee configuration

For more advanced use cases, you can use the feeConfig parameter which provides additional customization options: 
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) => {
    // Custom logic to calculate fees based on token, amount, etc.
    const { fromTokenAddress, toTokenAddress, fromAmount } = params;

    // Example: Different fees for different token pairs
    if (fromTokenAddress === "0x..." && toTokenAddress === "0x...") {
      return 0.02; // 2% for specific pair
    }

    // Example: Volume-based fee structure
    if (parseFloat(fromAmount) > 1000) {
      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} />
  );
};

Example of the advanced fee configuration

​
WidgetFeeConfig interface

The WidgetFeeConfig interface provides the following options:
  • name (optional): Display name for your integration shown in fee details
  • logoURI (optional): URL to your logo displayed alongside fee information
  • fee (optional): Fixed fee percentage (e.g., 0.03 for 3%)
  • showFeePercentage (default: false): Whether to display the fee percentage in the UI
  • showFeeTooltip (default: false): Whether to show a tooltip with fee details (requires name or feeTooltipComponent)
  • feeTooltipComponent (optional): Custom React component for the fee tooltip
  • calculateFee (optional): Function for dynamic fee calculation based on transaction parameters
Only use either fee or calculateFee - not both. The calculateFee function allows for dynamic fee calculation based on factors like token pairs, transaction amounts, user tiers, or any other custom logic.