@lifi/widget 3.2.2 → 3.4.0-beta.0

package/components/TransactionDetails.tsx

@@ -8,8 +8,10 @@ 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 { getFeeCostsBreakdown, getGasCostsBreakdown } from '../utils/fees.js';
+import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js';
 import {
   convertToSubscriptFormat,
   formatTokenAmount,
@@ -30,23 +32,14 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   ...props
 }) => {
   const { t } = useTranslation();
+  const { feeTool } = useWidgetConfig();
   const [cardExpanded, setCardExpanded] = useState(false);
 
   const toggleCard = () => {
     setCardExpanded((cardExpanded) => !cardExpanded);
   };
-
-  const gasCosts = getGasCostsBreakdown(route);
-  const feeCosts = getFeeCostsBreakdown(route, false);
-  const gasCostUSD = gasCosts.reduce(
-    (sum, gasCost) => sum + gasCost.amountUSD,
-    0,
-  );
-  const feeCostUSD = feeCosts.reduce(
-    (sum, feeCost) => sum + feeCost.amountUSD,
-    0,
-  );
-  const fees = gasCostUSD + feeCostUSD;
+  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD, combinedFeesUSD } =
+    getAccumulatedFeeCostsBreakdown(route);
 
   const fromTokenAmount = formatTokenAmount(
     BigInt(route.fromAmount),
@@ -74,38 +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
-          route={route}
-          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}
+        <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: fees })}
-            </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" />
@@ -118,7 +131,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         <Box px={2} pb={2}>
           <Box display="flex" justifyContent="space-between" mb={0.5}>
             <Typography variant="body2">{t('main.fees.network')}</Typography>
-            <FeeBreakdownTooltip route={route} feeCosts={[]}>
+            <FeeBreakdownTooltip gasCosts={gasCosts}>
               <Typography variant="body2">
                 {t(`format.currency`, {
                   value: gasCostUSD,
@@ -129,11 +142,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           {feeCosts.length ? (
             <Box display="flex" justifyContent="space-between" mb={0.5}>
               <Typography variant="body2">{t('main.fees.provider')}</Typography>
-              <FeeBreakdownTooltip
-                route={route}
-                gasCosts={[]}
-                feeCosts={feeCosts}
-              >
+              <FeeBreakdownTooltip feeCosts={feeCosts}>
                 <Typography variant="body2">
                   {t(`format.currency`, {
                     value: feeCostUSD,
@@ -142,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' }}>

package/config/version.ts

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

package/hooks/timer/useTimer.ts

@@ -23,10 +23,12 @@ export function useTimer({
   autoStart = true,
 }: UseTimerProps) {
   const [expiryTimestamp, setExpiryTimestamp] = useState(expiry);
-  const [seconds, setSeconds] = useState(getSecondsFromExpiry(expiryTimestamp));
+  const [seconds, setSeconds] = useState(() =>
+    getSecondsFromExpiry(expiryTimestamp),
+  );
   const [isRunning, setIsRunning] = useState(autoStart);
   const [didStart, setDidStart] = useState(autoStart);
-  const [delay, setDelay] = useState(
+  const [delay, setDelay] = useState(() =>
     getDelayFromExpiryTimestamp(expiryTimestamp, DEFAULT_DELAY),
   );
 

package/i18n/en.json

@@ -169,7 +169,8 @@
   },
   "tooltip": {
     "deselectAll": "Deselect all",
-    "estimatedTime": "Estimated execution time in minutes.",
+    "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,13 +191,14 @@
     "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"
     },
     "from": "From",
-    "gasCost": "Gas cost",
     "inProgress": "in progress",
     "maxSlippage": "Max. slippage",
     "minReceived": "Min. received",

package/i18n/index.ts

@@ -1,17 +1,17 @@
-import bn from './bn.json' assert { type: 'json' };
-import de from './de.json' assert { type: 'json' };
-import en from './en.json' assert { type: 'json' };
-import es from './es.json' assert { type: 'json' };
-import fr from './fr.json' assert { type: 'json' };
-import id from './id.json' assert { type: 'json' };
-import it from './it.json' assert { type: 'json' };
-import ja from './ja.json' assert { type: 'json' };
-import ko from './ko.json' assert { type: 'json' };
-import pt from './pt.json' assert { type: 'json' };
-import th from './th.json' assert { type: 'json' };
-import tr from './tr.json' assert { type: 'json' };
-import uk from './uk.json' assert { type: 'json' };
-import vi from './vi.json' assert { type: 'json' };
-import zh from './zh.json' assert { type: 'json' };
+import bn from './bn.json' with { type: 'json' };
+import de from './de.json' with { type: 'json' };
+import en from './en.json' with { type: 'json' };
+import es from './es.json' with { type: 'json' };
+import fr from './fr.json' with { type: 'json' };
+import id from './id.json' with { type: 'json' };
+import it from './it.json' with { type: 'json' };
+import ja from './ja.json' with { type: 'json' };
+import ko from './ko.json' with { type: 'json' };
+import pt from './pt.json' with { type: 'json' };
+import th from './th.json' with { type: 'json' };
+import tr from './tr.json' with { type: 'json' };
+import uk from './uk.json' with { type: 'json' };
+import vi from './vi.json' with { type: 'json' };
+import zh from './zh.json' with { type: 'json' };
 
 export { bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.2.2",
+  "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": "./_esm/index.js",
@@ -35,15 +35,15 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@lifi/sdk": "^3.1.3",
-    "@lifi/wallet-management": "^3.0.5",
-    "@mui/icons-material": "^5.16.4",
-    "@mui/lab": "^5.0.0-alpha.172",
-    "@mui/material": "^5.16.4",
+    "@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",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/web3.js": "^1.95.1",
-    "@tanstack/react-query": "^5.51.11",
-    "@tanstack/react-virtual": "^3.8.3",
+    "@solana/web3.js": "^1.95.2",
+    "@tanstack/react-query": "^5.51.15",
+    "@tanstack/react-virtual": "^3.8.4",
     "i18next": "^23.12.2",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
@@ -53,8 +53,8 @@
     "react-intersection-observer": "^9.13.0",
     "react-router-dom": "^6.25.1",
     "uuid": "^10.0.0",
-    "viem": "^2.17.11",
-    "wagmi": "^2.12.0",
+    "viem": "^2.18.5",
+    "wagmi": "^2.12.1",
     "zustand": "^4.5.4"
   },
   "peerDependencies": {

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,10 +1,11 @@
 import type { FullStatusData } from '@lifi/sdk';
 import { ContentCopyRounded } from '@mui/icons-material';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { Card } from '../../components/Card/Card.js';
+import { CardIconButton } from '../../components/Card/CardIconButton.js';
 import { CardTitle } from '../../components/Card/CardTitle.js';
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
 import { PageContainer } from '../../components/PageContainer.js';
@@ -124,10 +125,10 @@ export const TransactionDetailsPage: React.FC = () => {
           }}
         >
           <CardTitle flex={1}>{t('main.supportId')}</CardTitle>
-          <Box mr={1} mt={1}>
-            <IconButton size="medium" onClick={copySupportId}>
-              <ContentCopyRounded fontSize="small" />
-            </IconButton>
+          <Box mr={2} mt={1}>
+            <CardIconButton size="small" onClick={copySupportId}>
+              <ContentCopyRounded fontSize="inherit" />
+            </CardIconButton>
           </Box>
         </Box>
         <Typography

package/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -6,9 +6,11 @@ import { forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js';
 import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
-import { calcValueLoss } from './utils.js';
+import { calculateValueLossPercentage } from './utils.js';
 
 interface TokenValueBottomSheetProps {
   route: Route;
@@ -44,6 +46,10 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
   const { t } = useTranslation();
   const ref = useRef<HTMLElement>();
   useSetContentHeight(ref);
+  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =
+    getAccumulatedFeeCostsBreakdown(route);
+  const fromAmountUSD = parseFloat(route.fromAmountUSD);
+  const toAmountUSD = parseFloat(route.toAmountUSD);
   return (
     <Box p={3} ref={ref}>
       <CenterContainer>
@@ -62,11 +68,23 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
         </Typography>
       </Box>
       <Box display="flex" justifyContent="space-between" mt={0.25}>
-        <Typography>{t('main.gasCost')}</Typography>
-        <Typography fontWeight={600}>
-          {t('format.currency', { value: route.gasCostUSD })}
-        </Typography>
+        <Typography>{t('main.fees.network')}</Typography>
+        <FeeBreakdownTooltip gasCosts={gasCosts}>
+          <Typography fontWeight={600}>
+            {t('format.currency', { value: gasCostUSD })}
+          </Typography>
+        </FeeBreakdownTooltip>
       </Box>
+      {feeCostUSD ? (
+        <Box display="flex" justifyContent="space-between" mt={0.25}>
+          <Typography>{t('main.fees.provider')}</Typography>
+          <FeeBreakdownTooltip feeCosts={feeCosts}>
+            <Typography fontWeight={600}>
+              {t('format.currency', { value: feeCostUSD })}
+            </Typography>
+          </FeeBreakdownTooltip>
+        </Box>
+      ) : null}
       <Box display="flex" justifyContent="space-between" mt={0.25}>
         <Typography>{t('main.receiving')}</Typography>
         <Typography fontWeight={600}>
@@ -75,7 +93,15 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
       </Box>
       <Box display="flex" justifyContent="space-between" mt={0.25}>
         <Typography>{t('main.valueLoss')}</Typography>
-        <Typography fontWeight={600}>{calcValueLoss(route)}</Typography>
+        <Typography fontWeight={600}>
+          {calculateValueLossPercentage(
+            fromAmountUSD,
+            toAmountUSD,
+            gasCostUSD,
+            feeCostUSD,
+          )}
+          %
+        </Typography>
       </Box>
       <Box display="flex" mt={3}>
         <Button variant="text" onClick={onCancel} fullWidth>
@@ -89,16 +115,3 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
     </Box>
   );
 };
-
-export const getTokenValueLossThreshold = (route?: Route) => {
-  if (!route) {
-    return false;
-  }
-  const fromAmountUSD = Number(route.fromAmountUSD || 0);
-  const toAmountUSD = Number(route.toAmountUSD || 0);
-  const gasCostUSD = Number(route.gasCostUSD || 0);
-  if (!fromAmountUSD && !toAmountUSD) {
-    return false;
-  }
-  return toAmountUSD / (fromAmountUSD + gasCostUSD) < 0.9;
-};

package/pages/TransactionPage/TransactionPage.tsx

@@ -18,16 +18,17 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { RouteExecutionStatus } from '../../stores/routes/types.js';
 import { WidgetEvent } from '../../types/events.js';
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
 import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js';
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js';
 import { RouteTracker } from './RouteTracker.js';
 import { StartTransactionButton } from './StartTransactionButton.js';
 import { StatusBottomSheet } from './StatusBottomSheet.js';
+import { TokenValueBottomSheet } from './TokenValueBottomSheet.js';
 import {
-  TokenValueBottomSheet,
+  calculateValueLossPercentage,
   getTokenValueLossThreshold,
-} from './TokenValueBottomSheet.js';
-import { calcValueLoss } from './utils.js';
+} from './utils.js';
 
 export const TransactionPage: React.FC = () => {
   const { t } = useTranslation();
@@ -99,15 +100,22 @@ export const TransactionPage: React.FC = () => {
     return null;
   }
 
-  const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(route);
-
   const handleExecuteRoute = () => {
     if (tokenValueBottomSheetRef.current?.isOpen()) {
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+      const fromAmountUSD = parseFloat(route.fromAmountUSD);
+      const toAmountUSD = parseFloat(route.toAmountUSD);
       emitter.emit(WidgetEvent.RouteHighValueLoss, {
-        fromAmountUsd: route.fromAmountUSD,
-        gasCostUSD: route.gasCostUSD,
-        toAmountUSD: route.toAmountUSD,
-        valueLoss: calcValueLoss(route),
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD,
+        valueLoss: calculateValueLossPercentage(
+          fromAmountUSD,
+          toAmountUSD,
+          gasCostUSD,
+          feeCostUSD,
+        ),
       });
     }
     tokenValueBottomSheetRef.current?.close();
@@ -121,6 +129,15 @@ export const TransactionPage: React.FC = () => {
 
   const handleStartClick = async () => {
     if (status === RouteExecutionStatus.Idle) {
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+      const fromAmountUSD = parseFloat(route.fromAmountUSD);
+      const toAmountUSD = parseFloat(route.toAmountUSD);
+      const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD,
+      );
       if (tokenValueLossThresholdExceeded && subvariant !== 'custom') {
         tokenValueBottomSheetRef.current?.open();
       } else {
@@ -197,7 +214,7 @@ export const TransactionPage: React.FC = () => {
         </>
       ) : null}
       {status ? <StatusBottomSheet status={status} route={route} /> : null}
-      {tokenValueLossThresholdExceeded && subvariant !== 'custom' ? (
+      {subvariant !== 'custom' ? (
         <TokenValueBottomSheet
           route={route}
           ref={tokenValueBottomSheetRef}

package/pages/TransactionPage/utils.ts

@@ -1,10 +1,25 @@
-import type { Route } from '@lifi/sdk';
+export const calculateValueLossPercentage = (
+  fromAmountUSD: number,
+  toAmountUSD: number,
+  gasCostUSD: number,
+  feeCostUSD: number,
+) => {
+  return parseFloat(
+    (
+      (toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) *
+      100
+    ).toFixed(2),
+  );
+};
 
-export const calcValueLoss = (route: Route) => {
-  return `${(
-    (Number(route.toAmountUSD || 0) /
-      (Number(route.fromAmountUSD || 0) + Number(route.gasCostUSD || 0)) -
-      1) *
-    100
-  ).toFixed(2)}%`;
+export const getTokenValueLossThreshold = (
+  fromAmountUSD: number,
+  toAmountUSD: number,
+  gasCostUSD: number,
+  feeCostUSD: number,
+) => {
+  if (!fromAmountUSD || !toAmountUSD) {
+    return false;
+  }
+  return toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) < 0.9;
 };

package/stores/routes/types.ts

@@ -15,10 +15,10 @@ export interface RouteExecutionState {
 }
 
 export enum RouteExecutionStatus {
-  Idle = 0,
-  Pending = 1 << 0,
-  Done = 1 << 1,
-  Failed = 1 << 2,
-  Partial = 1 << 3,
-  Refunded = 1 << 4,
+  Idle = 1 << 0,
+  Pending = 1 << 1,
+  Done = 1 << 2,
+  Failed = 1 << 3,
+  Partial = 1 << 4,
+  Refunded = 1 << 5,
 }

package/types/events.ts

@@ -37,10 +37,11 @@ export interface ContactSupport {
 }
 
 export interface RouteHighValueLossUpdate {
-  fromAmountUsd: string;
-  gasCostUSD?: string;
-  toAmountUSD: string;
-  valueLoss: string;
+  fromAmountUSD: number;
+  toAmountUSD: number;
+  gasCostUSD?: number;
+  feeCostUSD?: number;
+  valueLoss: number;
 }
 
 export interface RouteExecutionUpdate {

package/types/widget.ts

@@ -83,6 +83,7 @@ export enum HiddenUI {
   ToAddress = 'toAddress',
   ToToken = 'toToken',
   WalletMenu = 'walletMenu',
+  FeeCollectionStepDetails = 'feeCollectionStepDetails',
 }
 export type HiddenUIType = `${HiddenUI}`;
 
@@ -114,6 +115,11 @@ export interface WidgetContractTool {
   name: string;
 }
 
+export interface WidgetFeeTool {
+  logoURI: string;
+  name: string;
+}
+
 export interface ToAddress {
   name?: string;
   address: string;
@@ -145,6 +151,7 @@ export interface WidgetConfig {
   integrator: string;
   apiKey?: string;
   fee?: number;
+  feeTool?: WidgetFeeTool;
   referrer?: string;
 
   routePriority?: Order;

package/utils/converters.ts

@@ -167,7 +167,7 @@ export const buildRouteFromTxHistory = (
             toAmountMin: receiving.amount ?? '',
             toAmount: receiving.amount ?? '',
             toAmountUSD: receiving.amountUSD ?? '',
-            executionDuration: 30,
+            executionDuration: 0,
           },
           includedSteps: [
             {

package/utils/fees.ts

@@ -7,6 +7,30 @@ export interface FeesBreakdown {
   token: Token;
 }
 
+export const getAccumulatedFeeCostsBreakdown = (
+  route: RouteExtended,
+  included: boolean = false,
+) => {
+  const gasCosts = getGasCostsBreakdown(route);
+  const feeCosts = getFeeCostsBreakdown(route, included);
+  const gasCostUSD = gasCosts.reduce(
+    (sum, gasCost) => sum + gasCost.amountUSD,
+    0,
+  );
+  const feeCostUSD = feeCosts.reduce(
+    (sum, feeCost) => sum + feeCost.amountUSD,
+    0,
+  );
+  const combinedFeesUSD = gasCostUSD + feeCostUSD;
+  return {
+    gasCosts,
+    feeCosts,
+    gasCostUSD,
+    feeCostUSD,
+    combinedFeesUSD,
+  };
+};
+
 export const getGasCostsBreakdown = (route: RouteExtended): FeesBreakdown[] => {
   return Array.from(
     route.steps

package/_esm/components/Step/StepProcess.style.d.ts

@@ -1,9 +0,0 @@
-export declare const LinkButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "disabled" | "action" | "size" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    component?: import("react").ElementType;
-} & import("@mui/material").LinkOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "style" | "className" | "align" | "classes" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping" | "TypographyClasses" | "underline"> & {
-    component?: import("react").ElementType;
-}, {}, {}>;

package/_esm/components/Step/StepProcess.style.js

@@ -1,6 +0,0 @@
-import { styled } from '@mui/material';
-import { CardIconButton } from '../Card/CardIconButton.js';
-export const LinkButton = styled(CardIconButton)(({ theme }) => ({
-    padding: theme.spacing(0.5),
-}));
-//# sourceMappingURL=StepProcess.style.js.map