@lifi/widget 3.0.1 → 3.1.0

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.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>
+  );
+};

package/components/TransactionDetails.tsx

@@ -0,0 +1,182 @@
+import type { RouteExtended } from '@lifi/sdk';
+import {
+  ExpandLess,
+  ExpandMore,
+  LocalGasStationRounded,
+} from '@mui/icons-material';
+import type { CardProps } from '@mui/material';
+import { Box, Collapse, Tooltip, Typography } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { isRouteDone } from '../stores/routes/utils.js';
+import { getFeeCostsBreakdown, getGasCostsBreakdown } from '../utils/fees.js';
+import {
+  convertToSubscriptFormat,
+  formatTokenAmount,
+  formatTokenPrice,
+} from '../utils/format.js';
+import { Card } from './Card/Card.js';
+import { CardIconButton } from './Card/CardIconButton.js';
+import { FeeBreakdownTooltip } from './FeeBreakdownTooltip.js';
+import { IconTypography } from './IconTypography.js';
+import { TokenRate } from './TokenRate.js';
+
+interface TransactionDetailsProps extends CardProps {
+  route: RouteExtended;
+}
+
+export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
+  route,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  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 fromTokenAmount = formatTokenAmount(
+    BigInt(route.fromAmount),
+    route.fromToken.decimals,
+  );
+  const fromTokenPrice = formatTokenPrice(
+    fromTokenAmount,
+    route.fromToken.priceUSD,
+  );
+  const toTokenAmount = formatTokenAmount(
+    BigInt(route.toAmount),
+    route.toToken.decimals,
+  );
+  const toTokenPrice =
+    formatTokenPrice(toTokenAmount, route.toToken.priceUSD) || 0.01;
+
+  const impact = (toTokenPrice / fromTokenPrice - 1) * 100;
+
+  const priceImpact = convertToSubscriptFormat(impact, {
+    notation: 'standard',
+    roundingPriority: 'morePrecision',
+    maximumSignificantDigits: 2,
+    maximumFractionDigits: 2,
+    useGrouping: false,
+    roundingMode: 'trunc',
+  });
+
+  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}
+            >
+              {t(`format.currency`, { value: fees })}
+            </Typography>
+          </Box>
+        </FeeBreakdownTooltip>
+        <CardIconButton onClick={toggleCard} size="small">
+          {cardExpanded ? (
+            <ExpandLess fontSize="inherit" />
+          ) : (
+            <ExpandMore fontSize="inherit" />
+          )}
+        </CardIconButton>
+      </Box>
+      <Collapse timeout={225} in={cardExpanded} mountOnEnter>
+        <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={[]}>
+              <Typography variant="body2">
+                {t(`format.currency`, {
+                  value: gasCostUSD,
+                })}
+              </Typography>
+            </FeeBreakdownTooltip>
+          </Box>
+          {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}
+              >
+                <Typography variant="body2">
+                  {t(`format.currency`, {
+                    value: feeCostUSD,
+                  })}
+                </Typography>
+              </FeeBreakdownTooltip>
+            </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' }}>
+              <Typography variant="body2">{priceImpact}%</Typography>
+            </Tooltip>
+          </Box>
+          {!isRouteDone(route) ? (
+            <>
+              <Box display="flex" justifyContent="space-between" mb={0.5}>
+                <Typography variant="body2">{t('main.maxSlippage')}</Typography>
+                <Typography variant="body2">
+                  {route.steps[0].action.slippage * 100}%
+                </Typography>
+              </Box>
+              <Box display="flex" justifyContent="space-between">
+                <Typography variant="body2">{t('main.minReceived')}</Typography>
+                <Tooltip
+                  title={t('tooltip.minReceived')}
+                  sx={{ cursor: 'help' }}
+                >
+                  <Typography variant="body2">
+                    {t('format.number', {
+                      value: formatTokenAmount(
+                        BigInt(route.toAmountMin),
+                        route.toToken.decimals,
+                      ),
+                    })}{' '}
+                    {route.toToken.symbol}
+                  </Typography>
+                </Tooltip>
+              </Box>
+            </>
+          ) : null}
+        </Box>
+      </Collapse>
+    </Card>
+  );
+};

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.1';
+export const version = '3.1.0';

package/hooks/timer/useInterval.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+
+export function useInterval(callback: Function, delay: number) {
+  const callbacRef = useRef<Function>();
+
+  // update callback function with current render callback that has access to latest props and state
+  useEffect(() => {
+    callbacRef.current = callback;
+  });
+
+  useEffect(() => {
+    if (!delay) {
+      return () => {};
+    }
+
+    const interval = setInterval(() => {
+      callbacRef.current && callbacRef.current();
+    }, delay);
+    return () => clearInterval(interval);
+  }, [delay]);
+}

package/hooks/timer/useTimer.ts

@@ -0,0 +1,91 @@
+import { useCallback, useState } from 'react';
+import { useInterval } from './useInterval.js';
+import {
+  getDelayFromExpiryTimestamp,
+  getSecondsFromExpiry,
+  getTimeFromSeconds,
+  validateOnExpire,
+} from './utils.js';
+
+const DEFAULT_DELAY = 1000;
+
+interface UseTimerProps {
+  expiryTimestamp: Date;
+  onExpire: Function;
+  autoStart?: boolean;
+}
+
+// This implementation was taken from the common js project - https://www.npmjs.com/package/react-timer-hook
+// modified to work in the Widget codebase with Typescript
+export function useTimer({
+  expiryTimestamp: expiry,
+  onExpire,
+  autoStart = true,
+}: UseTimerProps) {
+  const [expiryTimestamp, setExpiryTimestamp] = useState(expiry);
+  const [seconds, setSeconds] = useState(getSecondsFromExpiry(expiryTimestamp));
+  const [isRunning, setIsRunning] = useState(autoStart);
+  const [didStart, setDidStart] = useState(autoStart);
+  const [delay, setDelay] = useState(
+    getDelayFromExpiryTimestamp(expiryTimestamp, DEFAULT_DELAY),
+  );
+
+  const handleExpire = useCallback(() => {
+    validateOnExpire(onExpire) && onExpire();
+    setIsRunning(false);
+    setDelay(0);
+  }, [onExpire]);
+
+  const pause = useCallback(() => {
+    setIsRunning(false);
+  }, []);
+
+  const restart = useCallback(
+    (newExpiryTimestamp: Date, newAutoStart = true) => {
+      setDelay(getDelayFromExpiryTimestamp(newExpiryTimestamp, DEFAULT_DELAY));
+      setDidStart(newAutoStart);
+      setIsRunning(newAutoStart);
+      setExpiryTimestamp(newExpiryTimestamp);
+      setSeconds(getSecondsFromExpiry(newExpiryTimestamp));
+    },
+    [],
+  );
+
+  const resume = useCallback(() => {
+    const time = new Date();
+    time.setMilliseconds(time.getMilliseconds() + seconds * 1000);
+    restart(time);
+  }, [seconds, restart]);
+
+  const start = useCallback(() => {
+    if (didStart) {
+      setSeconds(getSecondsFromExpiry(expiryTimestamp));
+      setIsRunning(true);
+    } else {
+      resume();
+    }
+  }, [expiryTimestamp, didStart, resume]);
+
+  useInterval(
+    () => {
+      if (delay !== DEFAULT_DELAY) {
+        setDelay(DEFAULT_DELAY);
+      }
+      const secondsValue = getSecondsFromExpiry(expiryTimestamp);
+      setSeconds(secondsValue);
+      if (secondsValue <= 0) {
+        handleExpire();
+      }
+    },
+    isRunning ? delay : 0,
+  );
+
+  return {
+    ...getTimeFromSeconds(seconds),
+    start,
+    pause,
+    resume,
+    restart,
+    isRunning,
+  };
+}

package/hooks/timer/utils.ts

@@ -0,0 +1,54 @@
+export function getTimeFromSeconds(secs: number) {
+  const totalSeconds = Math.ceil(secs);
+  const days = Math.floor(totalSeconds / (60 * 60 * 24));
+  const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+  const seconds = Math.floor(totalSeconds % 60);
+
+  return {
+    totalSeconds,
+    seconds,
+    minutes,
+    hours,
+    days,
+  };
+}
+
+export function getSecondsFromExpiry(expiry: Date, shouldRound?: boolean) {
+  const now = new Date().getTime();
+  const milliSecondsDistance = expiry.getTime() - now;
+  if (milliSecondsDistance > 0) {
+    const val = milliSecondsDistance / 1000;
+    return shouldRound ? Math.round(val) : val;
+  }
+  return 0;
+}
+
+export function validateExpiryTimestamp(expiryTimestamp: Date) {
+  const isValid = new Date(expiryTimestamp).getTime() > 0;
+  if (!isValid) {
+    console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp); // eslint-disable-line
+  }
+  return isValid;
+}
+
+export function validateOnExpire(onExpire: Function) {
+  const isValid = onExpire && typeof onExpire === 'function';
+  if (onExpire && !isValid) {
+    console.warn('useTimer Invalid onExpire settings function', onExpire);
+  }
+  return isValid;
+}
+
+export function getDelayFromExpiryTimestamp(
+  expiryTimestamp: Date,
+  defaultDelay: number,
+) {
+  if (!validateExpiryTimestamp(expiryTimestamp)) {
+    return 0;
+  }
+
+  const seconds = getSecondsFromExpiry(expiryTimestamp);
+  const extraMilliSeconds = Math.floor((seconds - Math.floor(seconds)) * 1000);
+  return extraMilliSeconds > 0 ? extraMilliSeconds : defaultDelay;
+}