feat: improved fee configuration (#284)

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.4.0-beta.3",
+  "version": "3.4.0-beta.5",
   "private": true,
   "sideEffects": false,
   "type": "module",

packages/widget-embedded/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget-embedded",
-  "version": "1.0.210",
+  "version": "1.0.212",
   "type": "module",
   "scripts": {
     "analyze": "source-map-explorer 'dist/assets/*.js' --no-border-checks",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@lifi/sdk": "^3.1.3",
     "@lifi/wallet-management": "^3.0.7-beta.2",
-    "@lifi/widget": "^3.4.0-beta.2",
+    "@lifi/widget": "^3.4.0-beta.5",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",

packages/widget-playground-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget-playground-next",
-  "version": "1.0.210",
+  "version": "1.0.212",
   "scripts": {
     "dev": "next dev -p 3001",
     "build": "next build",
@@ -18,8 +18,8 @@
     "@emotion/styled": "^11.13.0",
     "@lifi/sdk": "^3.1.3",
     "@lifi/wallet-management": "^3.0.7-beta.2",
-    "@lifi/widget": "^3.4.0-beta.2",
-    "@lifi/widget-playground": "^1.0.210",
+    "@lifi/widget": "^3.4.0-beta.5",
+    "@lifi/widget-playground": "^1.0.212",
     "@mui/icons-material": "^5.16.6",
     "@mui/material": "^5.16.6",
     "@mui/material-nextjs": "^5.16.6",

packages/widget-playground-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget-playground-vite",
-  "version": "1.0.210",
+  "version": "1.0.212",
   "type": "module",
   "scripts": {
     "analyze": "source-map-explorer 'dist/assets/*.js' --no-border-checks",
@@ -20,8 +20,8 @@
   "dependencies": {
     "@lifi/sdk": "^3.1.3",
     "@lifi/wallet-management": "^3.0.7-beta.2",
-    "@lifi/widget": "^3.4.0-beta.2",
-    "@lifi/widget-playground": "^1.0.210",
+    "@lifi/widget": "^3.4.0-beta.5",
+    "@lifi/widget-playground": "^1.0.212",
     "@mui/icons-material": "^5.16.6",
     "@mui/material": "^5.16.6",
     "@rainbow-me/rainbowkit": "^2.1.4",

packages/widget-playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget-playground",
-  "version": "1.0.210",
+  "version": "1.0.212",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",

packages/widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.4.0-beta.2",
+  "version": "3.4.0-beta.5",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./src/index.ts",

packages/widget/src/components/StepActions/StepActions.tsx

@@ -104,7 +104,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
 };
 
 export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
-  const { subvariant, subvariantOptions, feeTool, hiddenUI } =
+  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =
     useWidgetConfig();
 
   let includedSteps = step.includedSteps;
@@ -124,19 +124,24 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
   // eslint-disable-next-line react/no-unstable-nested-components
   const StepIconComponent = ({ icon }: StepIconProps) => {
     const includedStep = includedSteps?.[Number(icon) - 1];
-    const tool =
+    const feeCollectionStep =
       includedStep?.type === 'protocol' &&
-      includedStep?.tool === 'feeCollection' &&
-      feeTool
-        ? feeTool
-        : includedStep?.toolDetails;
-    return tool ? (
+      includedStep?.tool === 'feeCollection';
+    const toolName =
+      feeCollectionStep && feeConfig?.name
+        ? feeConfig?.name
+        : includedStep?.toolDetails.name;
+    const toolLogoURI =
+      feeCollectionStep && feeConfig?.logoURI
+        ? feeConfig?.logoURI
+        : includedStep?.toolDetails.logoURI;
+    return toolLogoURI ? (
       <SmallAvatar
-        src={tool.logoURI}
-        alt={tool.name}
+        src={toolLogoURI}
+        alt={toolName}
         sx={{ width: 20, height: 20 }}
       >
-        {tool.name?.[0]}
+        {toolName?.[0]}
       </SmallAvatar>
     ) : null;
   };
@@ -160,7 +165,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
               ) : step.type === 'cross' ? (
                 <BridgeStepDetailsLabel step={step} />
               ) : step.type === 'protocol' ? (
-                <ProtocolStepDetailsLabel step={step} feeTool={feeTool} />
+                <ProtocolStepDetailsLabel step={step} feeConfig={feeConfig} />
               ) : (
                 <SwapStepDetailsLabel step={step} />
               )}
@@ -315,13 +320,13 @@ export const SwapStepDetailsLabel: React.FC<
 
 export const ProtocolStepDetailsLabel: React.FC<
   Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step, feeTool }) => {
+> = ({ step, feeConfig }) => {
   const { t } = useTranslation();
   return (
     <StepLabelTypography>
       {step.toolDetails.key === 'feeCollection'
-        ? feeTool?.name
-          ? t('main.fees.integrator', { tool: feeTool.name })
+        ? feeConfig?.name
+          ? t('main.fees.integrator', { tool: feeConfig.name })
           : t('main.fees.defaultIntegrator')
         : step.toolDetails.key === 'lifuelProtocol'
           ? t('main.refuelStepDetails', {

packages/widget/src/components/StepActions/types.ts

@@ -2,7 +2,7 @@ import type { LiFiStep, Step } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import type {
   SubvariantOptions,
-  WidgetFeeTool,
+  WidgetFeeConfig,
   WidgetSubvariant,
 } from '../../types/widget.js';
 
@@ -15,7 +15,7 @@ export interface StepDetailsLabelProps {
   step: Step;
   subvariant?: Extract<WidgetSubvariant, 'custom'>;
   subvariantOptions?: SubvariantOptions;
-  feeTool?: WidgetFeeTool;
+  feeConfig?: WidgetFeeConfig;
 }
 
 export interface IncludedStepsProps {

packages/widget/src/components/TransactionDetails.tsx

@@ -32,7 +32,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   ...props
 }) => {
   const { t } = useTranslation();
-  const { feeTool } = useWidgetConfig();
+  const { feeConfig } = useWidgetConfig();
   const [cardExpanded, setCardExpanded] = useState(false);
 
   const toggleCard = () => {
@@ -154,13 +154,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           {feeAmountUSD ? (
             <Box display="flex" justifyContent="space-between" mb={0.5}>
               <Typography variant="body2">
-                {feeTool?.name
-                  ? t('main.fees.integrator', { tool: feeTool.name })
+                {feeConfig?.name
+                  ? t('main.fees.integrator', { tool: feeConfig.name })
                   : t('main.fees.defaultIntegrator')}
               </Typography>
-              {feeTool?.name ? (
+              {feeConfig?.name ? (
                 <Tooltip
-                  title={t('tooltip.feeCollection', { tool: feeTool.name })}
+                  title={t('tooltip.feeCollection', { tool: feeConfig.name })}
                   sx={{ cursor: 'help' }}
                 >
                   <Typography variant="body2">

packages/widget/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.4.0-beta.2';
+export const version = '3.4.0-beta.5';

packages/widget/src/hooks/useRoutes.ts

@@ -25,8 +25,15 @@ interface RoutesProps {
 }
 
 export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
-  const { subvariant, sdkConfig, contractTool, bridges, exchanges } =
-    useWidgetConfig();
+  const {
+    subvariant,
+    sdkConfig,
+    contractTool,
+    bridges,
+    exchanges,
+    fee,
+    feeConfig,
+  } = useWidgetConfig();
   const setExecutableRoute = useSetExecutableRoute();
   const queryClient = useQueryClient();
   const emitter = useWidgetEvents();
@@ -137,6 +144,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     sdkConfig?.routeOptions?.allowSwitchChain,
     enabledRefuel && enabledAutoRefuel,
     gasRecommendationFromAmount,
+    feeConfig?.fee || fee,
     observableRoute?.id,
   ] as const;
 
@@ -166,14 +174,12 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           allowSwitchChain,
           enabledRefuel,
           gasRecommendationFromAmount,
+          fee,
           observableRouteId,
         ],
         signal,
       }) => {
-        const fromAmount = parseUnits(
-          fromTokenAmount,
-          fromToken!.decimals,
-        ).toString();
+        const fromAmount = parseUnits(fromTokenAmount, fromToken!.decimals);
         const formattedSlippage = parseFloat(slippage) / 100;
 
         const allowBridges = swapOnly
@@ -199,6 +205,17 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             )
           : allowedExchanges;
 
+        const calculatedFee = await feeConfig?.calculateFee?.({
+          fromChainId,
+          toChainId,
+          fromTokenAddress,
+          toTokenAddress,
+          fromAddress,
+          toAddress,
+          fromAmount,
+          slippage: formattedSlippage,
+        });
+
         if (subvariant === 'custom' && contractCalls && toTokenAmount) {
           const contractCallQuote = await getContractCallsQuote(
             {
@@ -218,6 +235,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
               allowExchanges,
               toFallbackAddress: toAddress,
               slippage: formattedSlippage,
+              fee: calculatedFee || fee,
             },
             { signal },
           );
@@ -267,7 +285,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         const data = await getRoutes(
           {
             fromAddress,
-            fromAmount,
+            fromAmount: fromAmount.toString(),
             fromChainId,
             fromTokenAddress,
             toAddress,
@@ -300,6 +318,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                   : undefined,
               order: routePriority,
               slippage: formattedSlippage,
+              fee: calculatedFee || fee,
             },
           },
           { signal },

packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -80,7 +80,7 @@ export const WidgetProvider: React.FC<
         apiKey: widgetConfig.apiKey,
         integrator: widgetConfig.integrator ?? window?.location.hostname,
         routeOptions: {
-          fee: widgetConfig.fee,
+          fee: widgetConfig.feeConfig?.fee || widgetConfig.fee,
           referrer: widgetConfig.referrer,
           order: widgetConfig.routePriority,
           slippage: widgetConfig.slippage,

packages/widget/src/stores/routes/createRouteExecutionStore.ts

@@ -131,7 +131,7 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-routes`,
-        version: 1,
+        version: 2,
         partialize: (state) => ({ routes: state.routes }),
         merge: (persistedState: any, currentState: RouteExecutionState) => {
           const state = {

packages/widget/src/types/widget.ts

@@ -111,13 +111,34 @@ export interface WidgetSDKConfig
 }
 
 export interface WidgetContractTool {
-  logoURI: string;
   name: string;
+  logoURI: string;
 }
 
-export interface WidgetFeeTool {
-  logoURI: string;
-  name: string;
+export interface CalculateFeeParams {
+  fromChainId: number;
+  toChainId: number;
+  fromTokenAddress: string;
+  toTokenAddress: string;
+  fromAddress?: string;
+  toAddress?: string;
+  fromAmount: bigint;
+  slippage: number;
+}
+
+export interface WidgetFeeConfig {
+  name?: string;
+  logoURI?: string;
+  fee?: number;
+  /**
+   * Function to calculate fees before fetching quotes.
+   * If provided, this function will be used instead of the `fee` parameter.
+   * Only one of `fee` or `calculateFee` should be used.
+   *
+   * @param params Object containing the fee calculation parameters
+   * @returns A promise that resolves to the calculated fee as a number (e.g., 0.03 represents a 3% fee)
+   */
+  calculateFee?(params: CalculateFeeParams): Promise<number | undefined>;
 }
 
 export interface ToAddress {
@@ -150,8 +171,11 @@ export interface WidgetConfig {
 
   integrator: string;
   apiKey?: string;
+  /**
+   * @deprecated Use `feeConfig` instead.
+   */
   fee?: number;
-  feeTool?: WidgetFeeTool;
+  feeConfig?: WidgetFeeConfig;
   referrer?: string;
 
   routePriority?: Order;