feat: improve the display of estimated duration and fees (#278)

packages/widget/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -41,7 +41,7 @@ export const ActiveTransactionItem: React.FC<{
         return <ErrorRounded color="error" fontSize="small" />;
       default:
         return (
-          <Typography fontSize={14} fontWeight={500}>
+          <Typography fontSize={14} fontWeight={600}>
             <StepTimer step={lastActiveStep} hideInProgress />
           </Typography>
         );

packages/widget/src/components/Card/CardIconButton.tsx

@@ -1,7 +1,10 @@
+import type { IconButtonProps, LinkProps } from '@mui/material';
 import { IconButton as MuiIconButton, styled } from '@mui/material';
 import { getContrastAlphaColor } from '../../utils/colors.js';
 
-export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
+export const CardIconButton = styled(MuiIconButton)<
+  IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>
+>(({ theme }) => {
   return {
     padding: theme.spacing(0.5),
     backgroundColor: getContrastAlphaColor(theme, 0.04),

packages/widget/src/components/FeeBreakdownTooltip.tsx

@@ -1,42 +1,36 @@
-import type { Route } from '@lifi/sdk';
 import { Box, Tooltip, Typography } from '@mui/material';
 import type { TFunction } from 'i18next';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
 import type { FeesBreakdown } from '../utils/fees.js';
-import { getFeeCostsBreakdown, getGasCostsBreakdown } from '../utils/fees.js';
 
 export interface FeeBreakdownTooltipProps {
-  route: Route;
   gasCosts?: FeesBreakdown[];
   feeCosts?: FeesBreakdown[];
   children: ReactElement<any, any>;
 }
 
 export const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({
-  route,
   gasCosts,
   feeCosts,
   children,
 }) => {
   const { t } = useTranslation();
-  const _gasCosts = gasCosts ?? getGasCostsBreakdown(route);
-  const _feeCosts = feeCosts ?? getFeeCostsBreakdown(route, false);
   return (
     <Tooltip
       title={
         <Box>
-          {_gasCosts.length ? (
+          {gasCosts?.length ? (
             <Box>
               {t('main.fees.network')}
-              {getFeeBreakdownTypography(_gasCosts, t)}
+              {getFeeBreakdownTypography(gasCosts, t)}
             </Box>
           ) : null}
-          {_feeCosts.length ? (
+          {feeCosts?.length ? (
             <Box mt={0.5}>
               {t('main.fees.provider')}
-              {getFeeBreakdownTypography(_feeCosts, t)}
+              {getFeeBreakdownTypography(feeCosts, t)}
             </Box>
           ) : null}
         </Box>

packages/widget/src/components/IconTypography.ts

@@ -1,6 +1,6 @@
-import { Typography, alpha, styled } from '@mui/material';
+import { alpha, Box, styled } from '@mui/material';
 
-export const IconTypography = styled(Typography)(({ theme }) => ({
+export const IconTypography = styled(Box)(({ theme }) => ({
   color:
     theme.palette.mode === 'light'
       ? alpha(theme.palette.common.black, 0.32)

packages/widget/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,7 +1,7 @@
 import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material';
 import { Box, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { getFeeCostsBreakdown } from '../../utils/fees.js';
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
 import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js';
 import { IconTypography } from '../IconTypography.js';
 import { TokenRate } from '../TokenRate/TokenRate.js';
@@ -11,15 +11,15 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
   route,
 }) => {
   const { t, i18n } = useTranslation();
-  const executionTimeMinutes = Math.ceil(
-    route.steps
-      .map((step) => step.estimate.executionDuration)
-      .reduce((duration, x) => duration + x, 0) / 60,
+  const executionTimeSeconds = Math.floor(
+    route.steps.reduce(
+      (duration, step) => duration + step.estimate.executionDuration,
+      0,
+    ),
   );
-  const gasCostUSD = parseFloat(route.gasCostUSD || '0');
-  const feeCosts = getFeeCostsBreakdown(route, false);
-  const fees =
-    gasCostUSD + feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0);
+  const executionTimeMinutes = Math.floor(executionTimeSeconds / 60);
+  const { gasCosts, feeCosts, combinedFeesUSD } =
+    getAccumulatedFeeCostsBreakdown(route);
   return (
     <Box
       display="flex"
@@ -30,19 +30,20 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
     >
       <TokenRate route={route} />
       <Box display="flex" alignItems="center">
-        <FeeBreakdownTooltip route={route} feeCosts={feeCosts}>
+        <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
           <Box display="flex" mr={1.5} alignItems="center">
             <IconTypography mr={0.5} fontSize={16}>
               <LocalGasStationRounded fontSize="inherit" />
             </IconTypography>
             <Typography
               fontSize={14}
               color="text.primary"
-              fontWeight="500"
+              fontWeight={600}
               lineHeight={1}
+              data-value={combinedFeesUSD}
             >
               {t(`format.currency`, {
-                value: fees,
+                value: combinedFeesUSD,
               })}
             </Typography>
           </Box>
@@ -55,12 +56,15 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
             <Typography
               fontSize={14}
               color="text.primary"
-              fontWeight="500"
+              fontWeight={600}
               lineHeight={1}
             >
-              {executionTimeMinutes.toLocaleString(i18n.language, {
+              {(executionTimeSeconds < 60
+                ? executionTimeSeconds
+                : executionTimeMinutes
+              ).toLocaleString(i18n.language, {
                 style: 'unit',
-                unit: 'minute',
+                unit: executionTimeSeconds < 60 ? 'second' : 'minute',
                 unitDisplay: 'narrow',
               })}
             </Typography>

packages/widget/src/components/Step/DestinationWalletAddress.tsx

@@ -2,8 +2,8 @@ import type { LiFiStepExtended } from '@lifi/sdk';
 import { LinkRounded, Wallet } from '@mui/icons-material';
 import { Box, Link, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { CardIconButton } from '../Card/CardIconButton.js';
 import { CircularIcon } from './CircularProgress.style.js';
-import { LinkButton } from './StepProcess.style.js';
 
 export const DestinationWalletAddress: React.FC<{
   step: LiFiStepExtended;
@@ -38,15 +38,15 @@ export const DestinationWalletAddress: React.FC<{
                 address: toAddress,
               })}
         </Typography>
-        <LinkButton
+        <CardIconButton
           size="medium"
           LinkComponent={Link}
           href={toAddressLink}
           target="_blank"
           rel="nofollow noreferrer"
         >
           <LinkRounded />
-        </LinkButton>
+        </CardIconButton>
       </Box>
     </Box>
   );

packages/widget/src/components/Step/Step.tsx

@@ -73,7 +73,7 @@ export const Step: React.FC<{
         }}
       >
         <CardTitle flex={1}>{getCardTitle()}</CardTitle>
-        <CardTitle sx={{ fontWeight: 500 }}>
+        <CardTitle sx={{ fontWeight: 600 }}>
           <StepTimer step={step} />
         </CardTitle>
       </Box>

packages/widget/src/components/Step/StepProcess.tsx

@@ -1,9 +1,9 @@
 import type { LiFiStep, Process } from '@lifi/sdk';
-import { LinkRounded } from '@mui/icons-material';
+import { OpenInNewRounded } from '@mui/icons-material';
 import { Box, Link, Typography } from '@mui/material';
 import { useProcessMessage } from '../../hooks/useProcessMessage.js';
+import { CardIconButton } from '../Card/CardIconButton.js';
 import { CircularProgress } from './CircularProgress.js';
-import { LinkButton } from './StepProcess.style.js';
 
 export const StepProcess: React.FC<{
   step: LiFiStep;
@@ -28,15 +28,15 @@ export const StepProcess: React.FC<{
           {title}
         </Typography>
         {process.txLink ? (
-          <LinkButton
-            size="medium"
+          <CardIconButton
+            size="small"
             LinkComponent={Link}
             href={process.txLink}
             target="_blank"
             rel="nofollow noreferrer"
           >
-            <LinkRounded />
-          </LinkButton>
+            <OpenInNewRounded fontSize="inherit" />
+          </CardIconButton>
         ) : null}
       </Box>
       {message ? (

packages/widget/src/components/Step/StepTimer.tsx

@@ -1,11 +1,22 @@
 import type { LiFiStepExtended } from '@lifi/sdk';
+import { AccessTimeFilled } from '@mui/icons-material';
+import { Box, Tooltip } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTimer } from '../../hooks/timer/useTimer.js';
+import { IconTypography } from '../IconTypography.js';
+
+const getExecutionProcess = (step: LiFiStepExtended) =>
+  step.execution?.process.findLast(
+    (process) =>
+      process.type === 'SWAP' ||
+      process.type === 'CROSS_CHAIN' ||
+      process.type === 'RECEIVING_CHAIN',
+  );
 
 const getExpiryTimestamp = (step: LiFiStepExtended) =>
   new Date(
-    (step.execution?.process[0]?.startedAt ?? Date.now()) +
+    (getExecutionProcess(step)?.startedAt ?? Date.now()) +
       step.estimate.executionDuration * 1000,
   );
 
@@ -15,50 +26,72 @@ export const StepTimer: React.FC<{
 }> = ({ step, hideInProgress }) => {
   const { t, i18n } = useTranslation();
   const [isExpired, setExpired] = useState(false);
-  const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);
-  const [expiryTimestamp] = useState(() => getExpiryTimestamp(step));
+  const [isExecutionStarted, setExecutionStarted] = useState(
+    () => !!getExecutionProcess(step),
+  );
+  const [expiryTimestamp, setExpiryTimestamp] = useState(() =>
+    getExpiryTimestamp(step),
+  );
   const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
     autoStart: false,
     expiryTimestamp,
     onExpire: () => setExpired(true),
   });
 
   useEffect(() => {
-    if (isExpired || !step.execution) {
+    const executionProcess = getExecutionProcess(step);
+    if (!executionProcess) {
+      return;
+    }
+    const shouldRestart = executionProcess.status === 'FAILED';
+    const shouldPause = executionProcess.status === 'ACTION_REQUIRED';
+    const shouldStart =
+      executionProcess.status === 'STARTED' ||
+      executionProcess.status === 'PENDING';
+    const shouldResume = executionProcess.status === 'PENDING';
+    if (isExecutionStarted && shouldRestart) {
+      setExecutionStarted(false);
+      setExpired(false);
       return;
     }
-    if (!isExecutionStarted) {
+    if (isExecutionStarted && isExpired) {
+      return;
+    }
+    if (!isExecutionStarted && shouldStart) {
+      const expiryTimestamp = getExpiryTimestamp(step);
       setExecutionStarted(true);
-      restart(getExpiryTimestamp(step));
+      setExpired(false);
+      setExpiryTimestamp(expiryTimestamp);
+      restart(expiryTimestamp);
+      return;
     }
-    const shouldBePaused = step.execution.process.some(
-      (process) =>
-        process.status === 'ACTION_REQUIRED' || process.status === 'FAILED',
-    );
-    if (isRunning && shouldBePaused) {
+    if (isRunning && shouldPause) {
       pause();
-    } else if (!isRunning && !shouldBePaused) {
+    } else if (!isRunning && shouldResume) {
       resume();
     }
-  }, [
-    expiryTimestamp,
-    isExecutionStarted,
-    isExpired,
-    isRunning,
-    pause,
-    restart,
-    resume,
-    step,
-  ]);
+  }, [isExecutionStarted, isExpired, isRunning, pause, restart, resume, step]);
 
   if (!isExecutionStarted) {
-    return Math.ceil(step.estimate.executionDuration / 60).toLocaleString(
-      i18n.language,
-      {
-        style: 'unit',
-        unit: 'minute',
-        unitDisplay: 'narrow',
-      },
+    const showSeconds = step.estimate.executionDuration < 60;
+    const duration = showSeconds
+      ? Math.floor(step.estimate.executionDuration)
+      : Math.floor(step.estimate.executionDuration / 60);
+    return (
+      <Tooltip title={t(`tooltip.estimatedTime`)} sx={{ cursor: 'help' }}>
+        <Box component="span" display="flex" alignItems="center">
+          <IconTypography component="span" mr={0.5} fontSize={16}>
+            <AccessTimeFilled fontSize="inherit" />
+          </IconTypography>
+          <Box component="span">
+            {duration.toLocaleString(i18n.language, {
+              style: 'unit',
+              unit: showSeconds ? 'second' : 'minute',
+              unitDisplay: 'narrow',
+            })}
+          </Box>
+        </Box>
+      </Tooltip>
     );
   }
 
@@ -72,7 +105,19 @@ export const StepTimer: React.FC<{
     return null;
   }
 
-  return isTimerExpired
-    ? t('main.inProgress')
-    : `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
+  return isTimerExpired ? (
+    t('main.inProgress')
+  ) : (
+    <Tooltip title={t(`tooltip.estimatedTime`)} sx={{ cursor: 'help' }}>
+      <Box component="span" display="flex" alignItems="center">
+        <IconTypography component="span" mr={0.5} fontSize={16}>
+          <AccessTimeFilled fontSize="inherit" />
+        </IconTypography>
+        <Box
+          component="span"
+          sx={{ fontVariantNumeric: 'tabular-nums', cursor: 'help' }}
+        >{`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</Box>
+      </Box>
+    </Tooltip>
+  );
 };

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

@@ -71,11 +71,3 @@ export const StepAvatar = styled(AvatarMasked)(({ theme }) => ({
   color: theme.palette.text.primary,
   backgroundColor: 'transparent',
 }));
-
-export const IconTypography = styled(Typography)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? alpha(theme.palette.common.black, 0.32)
-      : alpha(theme.palette.common.white, 0.4),
-  lineHeight: 0,
-}));