@lifi/widget 3.0.2 → 3.1.1

package/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -1,100 +1,18 @@
-import { AccessTimeFilled, Layers, MonetizationOn } from '@mui/icons-material';
+import { Layers } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
-import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { formatUnits } from 'viem';
-import {
-  getFeeCostsBreakdown,
-  getGasCostsBreakdown,
-} from '../../utils/fees.js';
-import { IconTypography } from './RouteCard.style.js';
-import type { FeesBreakdown, RouteCardEssentialsProps } from './types.js';
+import { IconTypography } from '../IconTypography.js';
+import type { RouteCardEssentialsProps } from './types.js';
 
 export const RouteCardEssentialsExpanded: 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 gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
-  const gasCosts = getGasCostsBreakdown(route);
-  const feeCosts = getFeeCostsBreakdown(route, false);
-  const fees =
-    gasCostUSD + feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0);
+  const { t } = useTranslation();
   return (
     <Box flex={1} mt={2}>
-      <Box>
-        <Box display="flex" alignItems="center">
-          <IconTypography ml={1} mr={3}>
-            <MonetizationOn />
-          </IconTypography>
-          <Typography
-            fontSize={16}
-            color="text.primary"
-            fontWeight="600"
-            lineHeight={1.125}
-          >
-            {t(`format.currency`, {
-              value: fees,
-            })}
-          </Typography>
-        </Box>
-        <Box mt={0.5} ml={7}>
-          <Typography
-            fontSize={12}
-            color="text.secondary"
-            fontWeight="500"
-            lineHeight={1.125}
-          >
-            {t('main.fees.networkEstimated')}
-          </Typography>
-          {getFeeBreakdownTypography(gasCosts, t)}
-          {feeCosts.length ? (
-            <Box mt={0.5}>
-              <Typography
-                fontSize={12}
-                color="text.secondary"
-                fontWeight="500"
-                lineHeight={1.125}
-              >
-                {t('main.fees.providerEstimated')}
-              </Typography>
-              {getFeeBreakdownTypography(feeCosts, t)}
-            </Box>
-          ) : null}
-        </Box>
-      </Box>
-      <Box mt={2}>
-        <Box display="flex" alignItems="center">
-          <IconTypography ml={1} mr={3}>
-            <Layers />
-          </IconTypography>
-          <Typography
-            fontSize={16}
-            color="text.primary"
-            fontWeight="600"
-            lineHeight={1.125}
-          >
-            {route.steps.length}
-          </Typography>
-        </Box>
-        <Box mt={0.5} ml={7}>
-          <Typography
-            fontSize={12}
-            color="text.secondary"
-            fontWeight="500"
-            lineHeight={1.125}
-          >
-            {t(`tooltip.numberOfSteps`)}
-          </Typography>
-        </Box>
-      </Box>
-      <Box display="flex" alignItems="center" mt={2}>
+      <Box display="flex" alignItems="center">
         <IconTypography ml={1} mr={3}>
-          <AccessTimeFilled />
+          <Layers />
         </IconTypography>
         <Typography
           fontSize={16}
@@ -102,27 +20,19 @@ export const RouteCardEssentialsExpanded: React.FC<
           fontWeight="600"
           lineHeight={1.125}
         >
-          {new Intl.NumberFormat(i18n.language, {
-            style: 'unit',
-            unit: 'minute',
-            unitDisplay: 'long',
-          }).format(executionTimeMinutes)}
+          {route.steps.length}
+        </Typography>
+      </Box>
+      <Box mt={0.5} ml={7}>
+        <Typography
+          fontSize={12}
+          color="text.secondary"
+          fontWeight="500"
+          lineHeight={1.125}
+        >
+          {t(`tooltip.numberOfSteps`)}
         </Typography>
       </Box>
     </Box>
   );
 };
-
-const getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>
-  fees.map((fee, index) => (
-    <Typography
-      fontSize={12}
-      fontWeight="500"
-      color="text.secondary"
-      key={`${fee.token.address}${index}`}
-    >
-      {t(`format.currency`, { value: fee.amountUSD })} (
-      {parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9)}{' '}
-      {fee.token.symbol})
-    </Typography>
-  ));

package/components/RouteCard/types.ts

@@ -1,4 +1,4 @@
-import type { Route, Token } from '@lifi/sdk';
+import type { Route } from '@lifi/sdk';
 
 export interface RouteCardProps {
   route: Route;
@@ -14,9 +14,3 @@ export interface RouteCardEssentialsProps {
 export interface RouteCardSkeletonProps {
   variant?: 'default' | 'cardless';
 }
-
-export interface FeesBreakdown {
-  amount: bigint;
-  amountUSD: number;
-  token: Token;
-}

package/components/Routes/RoutesExpanded.tsx

@@ -11,7 +11,6 @@ import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.j
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
 import { WidgetEvent } from '../../types/events.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { PageContainer } from '../PageContainer.js';
@@ -59,7 +58,6 @@ export const RoutesExpanded = () => {
 export const RoutesExpandedElement = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const setExecutableRoute = useSetExecutableRoute();
   const { subvariant } = useWidgetConfig();
   const routesRef = useRef<Route[]>();
   const emitter = useWidgetEvents();
@@ -71,15 +69,16 @@ export const RoutesExpandedElement = () => {
     isFetched,
     dataUpdatedAt,
     refetchTime,
-    refetch,
     fromChain,
+    refetch,
+    setReviewableRoute,
   } = useRoutes();
   const { account } = useAccount({ chainType: fromChain?.chainType });
   const [toAddress] = useFieldValues('toAddress');
   const { requiredToAddress } = useToAddressRequirements();
 
   const handleRouteClick = (route: Route) => {
-    setExecutableRoute(route);
+    setReviewableRoute(route);
     navigate(navigationRoutes.transactionExecution, {
       state: { routeId: route.id },
     });

package/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -41,12 +41,7 @@ export const SendToWalletExpandButton: React.FC = () => {
   };
 
   return (
-    <Tooltip
-      title={t('main.sendToWallet')}
-      placement="bottom-end"
-      enterDelay={400}
-      arrow
-    >
+    <Tooltip title={t('main.sendToWallet')} placement="bottom-end">
       <Button
         variant={isActive ? 'contained' : 'text'}
         onClick={handleClick}

package/components/Step/Step.tsx

@@ -17,8 +17,9 @@ export const Step: React.FC<{
   step: LiFiStepExtended;
   fromToken?: TokenAmount;
   toToken?: TokenAmount;
+  impactToken?: TokenAmount;
   toAddress?: string;
-}> = ({ step, fromToken, toToken, toAddress }) => {
+}> = ({ step, fromToken, toToken, impactToken, toAddress }) => {
   const { t } = useTranslation();
   const { getChainById } = useAvailableChains();
   const { subvariant } = useWidgetConfig();
@@ -89,7 +90,15 @@ export const Step: React.FC<{
             toAddressLink={toAddressLink}
           />
         ) : null}
-        {toToken ? <Token token={toToken} px={2} py={1} /> : null}
+        {toToken ? (
+          <Token
+            token={toToken}
+            impactToken={impactToken}
+            enableImpactTokenTooltip
+            px={2}
+            py={1}
+          />
+        ) : null}
       </Box>
     </Card>
   );

package/components/Step/StepList.tsx

@@ -12,19 +12,27 @@ export const getStepList = (
     const lastIndex = steps.length - 1;
     const fromToken: TokenAmount | undefined =
       index === 0
-        ? { ...step.action.fromToken, amount: BigInt(step.action.fromAmount) }
-        : undefined;
-    const toToken: TokenAmount | undefined =
-      index === lastIndex
         ? {
-            ...(step.execution?.toToken ?? step.action?.toToken),
-            amount: step.execution?.toAmount
-              ? BigInt(step.execution.toAmount)
-              : subvariant === 'custom'
-                ? BigInt(route.toAmount)
-                : BigInt(step.estimate.toAmount),
+            ...step.action.fromToken,
+            amount: BigInt(step.action.fromAmount),
           }
         : undefined;
+    let toToken: TokenAmount | undefined;
+    let impactToken: TokenAmount | undefined;
+    if (index === lastIndex) {
+      toToken = {
+        ...(step.execution?.toToken ?? step.action.toToken),
+        amount: step.execution?.toAmount
+          ? BigInt(step.execution.toAmount)
+          : subvariant === 'custom'
+            ? BigInt(route.toAmount)
+            : BigInt(step.estimate.toAmount),
+      };
+      impactToken = {
+        ...steps[0].action.fromToken,
+        amount: BigInt(steps[0].action.fromAmount),
+      };
+    }
     const toAddress =
       index === lastIndex && route.fromAddress !== route.toAddress
         ? route.toAddress
@@ -35,6 +43,7 @@ export const getStepList = (
           step={step}
           fromToken={fromToken}
           toToken={toToken}
+          impactToken={impactToken}
           toAddress={toAddress}
         />
         {steps.length > 1 && index !== steps.length - 1 ? (

package/components/Step/StepTimer.tsx

@@ -1,7 +1,7 @@
 import type { LiFiStepExtended } from '@lifi/sdk';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useTimer } from 'react-timer-hook';
+import { useTimer } from '../../hooks/timer/useTimer.js';
 
 const getExpiryTimestamp = (step: LiFiStepExtended) =>
   new Date(
@@ -52,11 +52,14 @@ export const StepTimer: React.FC<{
   ]);
 
   if (!isExecutionStarted) {
-    return new Intl.NumberFormat(i18n.language, {
-      style: 'unit',
-      unit: 'minute',
-      unitDisplay: 'narrow',
-    }).format(Math.ceil(step.estimate.executionDuration / 60));
+    return Math.ceil(step.estimate.executionDuration / 60).toLocaleString(
+      i18n.language,
+      {
+        style: 'unit',
+        unit: 'minute',
+        unitDisplay: 'narrow',
+      },
+    );
   }
 
   const isTimerExpired = isExpired || (!minutes && !seconds);

package/components/StepActions/StepActions.style.tsx

@@ -20,8 +20,8 @@ export const StepConnector = styled(MuiStepConnector, {
     borderLeftWidth: 2,
     borderColor:
       theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
+        ? alpha(theme.palette.common.black, 0.12)
+        : alpha(theme.palette.common.white, 0.16),
   },
 }));
 
@@ -60,8 +60,8 @@ export const StepContent = styled(Box, {
     ? 'none'
     : `2px solid ${
         theme.palette.mode === 'light'
-          ? theme.palette.grey[300]
-          : theme.palette.grey[800]
+          ? alpha(theme.palette.common.black, 0.12)
+          : alpha(theme.palette.common.white, 0.16)
       }`,
   margin: theme.spacing(0, 0, 0, 2.375),
   paddingLeft: last ? theme.spacing(4.625) : theme.spacing(4.375),

package/components/StepActions/StepActions.tsx

@@ -26,7 +26,6 @@ import {
   StepLabel,
   StepLabelTypography,
 } from './StepActions.style.js';
-import { StepFeeBreakdown } from './StepFeeBreakdown.js';
 import { StepFees } from './StepFees.js';
 import type {
   IncludedStepsProps,
@@ -74,22 +73,21 @@ export const StepActions: React.FC<StepActionsProps> = ({
         </Badge>
         <Box flex={1}>
           <Typography fontSize={18} fontWeight={600} lineHeight={1.3334} ml={2}>
-            {t(`main.stepDetails`, {
-              tool: toolDetails.name,
-            })}
+            {toolDetails.name?.includes('LI.FI')
+              ? toolDetails.name
+              : t(`main.stepDetails`, {
+                  tool: toolDetails.name,
+                })}
           </Typography>
-          <Collapse
-            timeout={225}
-            in={dense && !cardExpanded}
-            mountOnEnter
-            unmountOnExit
-          >
-            <StepFees ml={2} step={step} />
-          </Collapse>
+          <StepFees ml={2} step={step} />
         </Box>
         {dense ? (
           <CardIconButton onClick={handleExpand} size="small">
-            {cardExpanded ? <ExpandLess /> : <ExpandMore />}
+            {cardExpanded ? (
+              <ExpandLess fontSize="inherit" />
+            ) : (
+              <ExpandMore fontSize="inherit" />
+            )}
           </CardIconButton>
         ) : null}
       </Box>
@@ -100,7 +98,6 @@ export const StepActions: React.FC<StepActionsProps> = ({
             subvariant={subvariant}
             subvariantOptions={subvariantOptions}
           />
-          <StepFeeBreakdown step={step} />
         </Collapse>
       ) : (
         <IncludedSteps

package/components/Token/Token.style.tsx

@@ -16,6 +16,7 @@ export const TextSecondary = styled(Typography, {
   color: dot
     ? alpha(theme.palette.text.secondary, 0.56)
     : theme.palette.text.secondary,
+  whiteSpace: 'nowrap',
 }));
 
 export const TokenDivider = styled(Box)(({ theme }) => ({

package/components/Token/Token.tsx

@@ -1,12 +1,16 @@
 /* eslint-disable react/no-array-index-key */
 import type { LiFiStep, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
-import { Box, Grow, Skeleton } from '@mui/material';
+import { Box, Grow, Skeleton, Tooltip } from '@mui/material';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useChain } from '../../hooks/useChain.js';
 import { useToken } from '../../hooks/useToken.js';
-import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
+import {
+  convertToSubscriptFormat,
+  formatTokenAmount,
+  formatTokenPrice,
+} from '../../utils/format.js';
 import { AvatarBadgedSkeleton } from '../Avatar/Avatar.js';
 import { TokenAvatar } from '../Avatar/TokenAvatar.js';
 import { SmallAvatar } from '../SmallAvatar.js';
@@ -15,6 +19,8 @@ import { TextSecondary, TextSecondaryContainer } from './Token.style.js';
 
 interface TokenProps {
   token: TokenAmount;
+  impactToken?: TokenAmount;
+  enableImpactTokenTooltip?: boolean;
   step?: LiFiStep;
   stepVisible?: boolean;
   disableDescription?: boolean;
@@ -49,6 +55,8 @@ export const TokenFallback: FC<TokenProps & BoxProps> = ({
 
 export const TokenBase: FC<TokenProps & BoxProps> = ({
   token,
+  impactToken,
+  enableImpactTokenTooltip,
   step,
   stepVisible,
   disableDescription,
@@ -69,11 +77,29 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
     );
   }
 
-  const formattedTokenAmount = formatTokenAmount(token.amount, token.decimals);
-  const formattedTokenPrice = formatTokenPrice(
-    formattedTokenAmount,
-    token.priceUSD,
-  );
+  const tokenAmount = formatTokenAmount(token.amount, token.decimals);
+  const tokenPrice = formatTokenPrice(tokenAmount, token.priceUSD);
+
+  let priceImpact;
+  if (impactToken) {
+    const impactTokenAmount = formatTokenAmount(
+      impactToken.amount,
+      impactToken.decimals,
+    );
+    const impactTokenPrice =
+      formatTokenPrice(impactTokenAmount, impactToken.priceUSD) || 0.01;
+
+    const impact = (tokenPrice / impactTokenPrice - 1) * 100;
+
+    priceImpact = convertToSubscriptFormat(impact, {
+      notation: 'standard',
+      roundingPriority: 'morePrecision',
+      maximumSignificantDigits: 2,
+      maximumFractionDigits: 2,
+      useGrouping: false,
+      roundingMode: 'trunc',
+    });
+  }
 
   const tokenOnChain = !disableDescription ? (
     <TextSecondary>
@@ -101,16 +127,30 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
             }}
           >
             {t('format.number', {
-              value: formattedTokenAmount,
+              value: tokenAmount,
             })}
           </TextFitter>
         </Box>
         <TextSecondaryContainer component="span">
           <TextSecondary>
             {t(`format.currency`, {
-              value: formattedTokenPrice,
+              value: tokenPrice,
             })}
           </TextSecondary>
+          {impactToken ? (
+            <TextSecondary px={0.5} dot>
+              &#x2022;
+            </TextSecondary>
+          ) : null}
+          {impactToken ? (
+            enableImpactTokenTooltip ? (
+              <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
+                <TextSecondary>{priceImpact}%</TextSecondary>
+              </Tooltip>
+            ) : (
+              <TextSecondary>{priceImpact}%</TextSecondary>
+            )
+          ) : null}
           {!disableDescription ? (
             <TextSecondary px={0.5} dot>
               &#x2022;

package/components/TokenRate.tsx

@@ -0,0 +1,79 @@
+import type { RouteExtended } from '@lifi/sdk';
+import type { TypographyProps } from '@mui/material';
+import { Typography } from '@mui/material';
+import type { MouseEventHandler } from 'react';
+import { formatUnits } from 'viem';
+import { create } from 'zustand';
+import {
+  convertToSubscriptFormat,
+  precisionFormatter,
+} from '../utils/format.js';
+
+interface TokenRateProps extends TypographyProps {
+  route: RouteExtended;
+}
+
+interface TokenRateState {
+  isForward: boolean;
+  toggleIsForward(): void;
+}
+
+const useTokenRateStore = create<TokenRateState>((set) => ({
+  isForward: true,
+  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),
+}));
+
+export const TokenRate: React.FC<TokenRateProps> = ({ route, ...props }) => {
+  const { isForward, toggleIsForward } = useTokenRateStore();
+
+  const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {
+    e.stopPropagation();
+    toggleIsForward();
+  };
+
+  const lastStep = route.steps.at(-1);
+
+  const fromToken = {
+    ...route.fromToken,
+    amount: BigInt(route.fromAmount),
+  };
+  const toToken = {
+    ...(lastStep?.execution?.toToken ??
+      lastStep?.action.toToken ??
+      route.toToken),
+    amount: lastStep?.execution?.toAmount
+      ? BigInt(lastStep.execution.toAmount)
+      : BigInt(route.toAmount),
+  };
+
+  const fromToRate =
+    parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /
+    parseFloat(formatUnits(fromToken.amount!, fromToken.decimals));
+  const toFromRate =
+    parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /
+    parseFloat(formatUnits(toToken.amount!, toToken.decimals));
+
+  const rateText = isForward
+    ? `1 ${fromToken.symbol} ≈ ${convertToSubscriptFormat(fromToRate)} ${toToken.symbol}`
+    : `1 ${toToken.symbol} ≈ ${convertToSubscriptFormat(toFromRate)} ${fromToken.symbol}`;
+
+  const rateTitle = isForward
+    ? `1 ${fromToken.symbol} ≈ ${precisionFormatter.format(fromToRate)} ${toToken.symbol}`
+    : `1 ${toToken.symbol} ≈ ${precisionFormatter.format(toFromRate)} ${fromToken.symbol}`;
+
+  return (
+    <Typography
+      fontSize={14}
+      lineHeight={1.429}
+      color="text.secondary"
+      fontWeight="500"
+      onClick={toggleRate}
+      role="button"
+      sx={{ cursor: 'pointer' }}
+      title={rateTitle}
+      {...props}
+    >
+      {rateText}
+    </Typography>
+  );
+};