Merge branch 'main' into enable-provenance

package.json

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

packages/wallet-management/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/wallet-management",
-  "version": "3.0.7-alpha.0",
+  "version": "3.0.7-beta.0",
   "description": "LI.FI Wallet Management solution.",
   "type": "module",
   "main": "./src/index.ts",

packages/widget-embedded/package.json

@@ -20,8 +20,8 @@
   "author": "Eugene Chybisov <[email protected]>",
   "dependencies": {
     "@lifi/sdk": "^3.1.3",
-    "@lifi/wallet-management": "^3.0.7-alpha.0",
-    "@lifi/widget": "^3.3.1-alpha.0",
+    "@lifi/wallet-management": "^3.0.7-beta.0",
+    "@lifi/widget": "^3.4.0-beta.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.5",

packages/widget-playground-next/package.json

@@ -17,8 +17,8 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@lifi/sdk": "^3.1.3",
-    "@lifi/wallet-management": "^3.0.7-alpha.0",
-    "@lifi/widget": "^3.3.1-alpha.0",
+    "@lifi/wallet-management": "^3.0.7-beta.0",
+    "@lifi/widget": "^3.4.0-beta.0",
     "@lifi/widget-playground": "^1.0.207",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.16.5",

packages/widget-playground-vite/package.json

@@ -19,8 +19,8 @@
   "author": "Eugene Chybisov <[email protected]>",
   "dependencies": {
     "@lifi/sdk": "^3.1.3",
-    "@lifi/wallet-management": "^3.0.7-alpha.0",
-    "@lifi/widget": "^3.3.1-alpha.0",
+    "@lifi/wallet-management": "^3.0.7-beta.0",
+    "@lifi/widget": "^3.4.0-beta.0",
     "@lifi/widget-playground": "^1.0.207",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.16.5",

packages/widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.3.1-alpha.0",
+  "version": "3.4.0-beta.0",
   "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",
@@ -51,7 +51,7 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@lifi/sdk": "^3.1.3",
-    "@lifi/wallet-management": "^3.0.7-alpha.0",
+    "@lifi/wallet-management": "^3.0.7-beta.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.5",

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

@@ -16,6 +16,7 @@ import { formatUnits } from 'viem';
 import { useAvailableChains } from '../../hooks/useAvailableChains.js';
 import { LiFiToolLogo } from '../../icons/lifi.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { HiddenUI } from '../../types/widget.js';
 import { formatTokenAmount } from '../../utils/format.js';
 import { CardIconButton } from '../Card/CardIconButton.js';
 import { SmallAvatar } from '../SmallAvatar.js';
@@ -39,7 +40,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
   ...other
 }) => {
   const { t } = useTranslation();
-  const { subvariant, subvariantOptions } = useWidgetConfig();
+  const { subvariant } = useWidgetConfig();
   const [cardExpanded, setCardExpanded] = useState(false);
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -93,49 +94,61 @@ export const StepActions: React.FC<StepActionsProps> = ({
       </Box>
       {dense ? (
         <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
-          <IncludedSteps
-            step={step}
-            subvariant={subvariant}
-            subvariantOptions={subvariantOptions}
-          />
+          <IncludedSteps step={step} />
         </Collapse>
       ) : (
-        <IncludedSteps
-          step={step}
-          subvariant={subvariant}
-          subvariantOptions={subvariantOptions}
-        />
+        <IncludedSteps step={step} />
       )}
     </Box>
   );
 };
 
-export const IncludedSteps: React.FC<IncludedStepsProps> = ({
-  step,
-  subvariant,
-  subvariantOptions,
-}) => {
+export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
+  const { subvariant, subvariantOptions, feeTool, hiddenUI } =
+    useWidgetConfig();
+
+  let includedSteps = step.includedSteps;
+  if (hiddenUI?.includes(HiddenUI.FeeCollectionStepDetails)) {
+    const feeCollectionStep = includedSteps.find(
+      (step) => step.tool === 'feeCollection',
+    );
+    if (feeCollectionStep) {
+      includedSteps = structuredClone(
+        includedSteps.filter((step) => step.tool !== 'feeCollection'),
+      );
+      includedSteps[0].estimate.fromAmount =
+        feeCollectionStep.estimate.fromAmount;
+    }
+  }
+
   // eslint-disable-next-line react/no-unstable-nested-components
   const StepIconComponent = ({ icon }: StepIconProps) => {
-    const tool = step.includedSteps?.[Number(icon) - 1];
+    const includedStep = includedSteps?.[Number(icon) - 1];
+    const tool =
+      includedStep?.type === 'protocol' &&
+      includedStep?.tool === 'feeCollection' &&
+      feeTool
+        ? feeTool
+        : includedStep?.toolDetails;
     return tool ? (
       <SmallAvatar
-        src={tool.toolDetails.logoURI}
-        alt={tool.toolDetails.name}
+        src={tool.logoURI}
+        alt={tool.name}
         sx={{ width: 20, height: 20 }}
       >
-        {tool.toolDetails.name[0]}
+        {tool.name?.[0]}
       </SmallAvatar>
     ) : null;
   };
+
   return (
     <Box mt={1}>
       <Stepper
         orientation="vertical"
         connector={<StepConnector />}
         activeStep={-1}
       >
-        {step.includedSteps.map((step, i, includedSteps) => (
+        {includedSteps.map((step, i, includedSteps) => (
           <MuiStep key={step.id} expanded>
             <StepLabel StepIconComponent={StepIconComponent}>
               {step.type === 'custom' && subvariant === 'custom' ? (
@@ -147,7 +160,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({
               ) : step.type === 'cross' ? (
                 <BridgeStepDetailsLabel step={step} />
               ) : step.type === 'protocol' ? (
-                <ProtocolStepDetailsLabel step={step} />
+                <ProtocolStepDetailsLabel step={step} feeTool={feeTool} />
               ) : (
                 <SwapStepDetailsLabel step={step} />
               )}
@@ -302,15 +315,19 @@ export const SwapStepDetailsLabel: React.FC<
 
 export const ProtocolStepDetailsLabel: React.FC<
   Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step }) => {
+> = ({ step, feeTool }) => {
   const { t } = useTranslation();
   return (
     <StepLabelTypography>
-      {step.toolDetails.key === 'lifuelProtocol'
-        ? t('main.refuelStepDetails', {
-            tool: step.toolDetails.name,
-          })
-        : step.toolDetails.name}
+      {step.toolDetails.key === 'feeCollection'
+        ? feeTool?.name
+          ? t('main.fees.integrator', { tool: feeTool.name })
+          : t('main.fees.defaultIntegrator')
+        : step.toolDetails.key === 'lifuelProtocol'
+          ? t('main.refuelStepDetails', {
+              tool: step.toolDetails.name,
+            })
+          : step.toolDetails.name}
     </StepLabelTypography>
   );
 };

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

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

packages/widget/src/components/TransactionDetails.tsx

@@ -8,6 +8,8 @@ import type { CardProps } from '@mui/material';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import { isRouteDone } from '../stores/routes/utils.js';
 import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js';
 import {
@@ -30,6 +32,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   ...props
 }) => {
   const { t } = useTranslation();
+  const { feeTool } = useWidgetConfig();
   const [cardExpanded, setCardExpanded] = useState(false);
 
   const toggleCard = () => {
@@ -64,35 +67,58 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
     roundingMode: 'trunc',
   });
 
+  const feeCollectionStep = route.steps[0].includedSteps.find(
+    (includedStep) => includedStep.tool === 'feeCollection',
+  );
+
+  let feeAmountUSD: number = 0;
+
+  if (feeCollectionStep) {
+    const estimatedFromAmount =
+      BigInt(feeCollectionStep.estimate.fromAmount) -
+      BigInt(feeCollectionStep.estimate.toAmount);
+
+    const feeAmount = formatUnits(
+      estimatedFromAmount,
+      feeCollectionStep.action.fromToken.decimals,
+    );
+
+    feeAmountUSD =
+      parseFloat(feeAmount) *
+      parseFloat(feeCollectionStep.action.fromToken.priceUSD);
+  }
+
   return (
     <Card selectionColor="secondary" {...props}>
       <Box display="flex" alignItems="center" px={2} py={1.75}>
         <Box display="flex" flex={1} alignItems="center" justifyContent="left">
           <TokenRate route={route} />
         </Box>
-        <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
-          <Box
-            display="flex"
-            alignItems="center"
-            onClick={toggleCard}
-            role="button"
-            sx={{ cursor: 'pointer' }}
-            px={1}
-          >
-            <IconTypography mr={0.5} fontSize={16}>
-              <LocalGasStationRounded fontSize="inherit" />
-            </IconTypography>
-            <Typography
-              fontSize={14}
-              color="text.primary"
-              fontWeight="600"
-              lineHeight={1.429}
-              data-value={combinedFeesUSD}
+        <Collapse timeout={100} in={!cardExpanded} mountOnEnter>
+          <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
+            <Box
+              display="flex"
+              alignItems="center"
+              onClick={toggleCard}
+              role="button"
+              sx={{ cursor: 'pointer' }}
+              px={1}
             >
-              {t(`format.currency`, { value: combinedFeesUSD })}
-            </Typography>
-          </Box>
-        </FeeBreakdownTooltip>
+              <IconTypography mr={0.5} fontSize={16}>
+                <LocalGasStationRounded fontSize="inherit" />
+              </IconTypography>
+              <Typography
+                fontSize={14}
+                color="text.primary"
+                fontWeight="600"
+                lineHeight={1.429}
+                data-value={combinedFeesUSD}
+              >
+                {t(`format.currency`, { value: combinedFeesUSD })}
+              </Typography>
+            </Box>
+          </FeeBreakdownTooltip>
+        </Collapse>
         <CardIconButton onClick={toggleCard} size="small">
           {cardExpanded ? (
             <ExpandLess fontSize="inherit" />
@@ -125,6 +151,33 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               </FeeBreakdownTooltip>
             </Box>
           ) : null}
+          {feeAmountUSD ? (
+            <Box display="flex" justifyContent="space-between" mb={0.5}>
+              <Typography variant="body2">
+                {feeTool?.name
+                  ? t('main.fees.integrator', { tool: feeTool.name })
+                  : t('main.fees.defaultIntegrator')}
+              </Typography>
+              {feeTool?.name ? (
+                <Tooltip
+                  title={t('tooltip.feeCollection', { tool: feeTool.name })}
+                  sx={{ cursor: 'help' }}
+                >
+                  <Typography variant="body2">
+                    {t(`format.currency`, {
+                      value: feeAmountUSD,
+                    })}
+                  </Typography>
+                </Tooltip>
+              ) : (
+                <Typography variant="body2">
+                  {t(`format.currency`, {
+                    value: feeAmountUSD,
+                  })}
+                </Typography>
+              )}
+            </Box>
+          ) : null}
           <Box display="flex" justifyContent="space-between" mb={0.5}>
             <Typography variant="body2">{t('main.priceImpact')}</Typography>
             <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>

packages/widget/src/config/version.ts

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

packages/widget/src/i18n/en.json

@@ -170,6 +170,7 @@
   "tooltip": {
     "deselectAll": "Deselect all",
     "estimatedTime": "Estimated time to complete the swap or bridge transaction, excluding chain switching and token approval.",
+    "feeCollection": "The fee is applied to selected token pairs and ensures the best experience with {{tool}}.",
     "minReceived": "The estimated minimum amount may change until the swapping/bridging transaction is signed. For 2-step transfers, this applies until the second step transaction is signed.",
     "notFound": {
       "text": "We couldn't find this page.",
@@ -190,7 +191,9 @@
     "depositStepDetails": "Deposit via {{tool}}",
     "featuredTokens": "Featured tokens",
     "fees": {
+      "defaultIntegrator": "Integrator fee",
       "estimated": "estimated costs",
+      "integrator": "{{tool}} fee",
       "network": "Network cost",
       "paid": "paid costs",
       "provider": "Provider fee"