@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/components/PoweredBy/PoweredBy.tsx

@@ -0,0 +1,54 @@
+import { Box, Tooltip, Typography } from '@mui/material';
+import { useLocation } from 'react-router-dom';
+import { version } from '../../config/version';
+import { useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
+import { navigationRoutes } from '../../utils';
+import { Link } from './PoweredBy.style';
+
+export const PoweredBy: React.FC = () => {
+  const { hiddenUI } = useWidgetConfig();
+  const { pathname } = useLocation();
+  if (
+    pathname.includes(navigationRoutes.fromToken) ||
+    pathname.includes(navigationRoutes.toToken) ||
+    pathname.includes(navigationRoutes.transactionHistory)
+  ) {
+    return null;
+  }
+  return (
+    <Box
+      px={3}
+      pt={1}
+      pb={hiddenUI?.includes(HiddenUI.PoweredBy) ? 1 : 2}
+      sx={{
+        display: 'flex',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-end',
+      }}
+    >
+      {!hiddenUI?.includes(HiddenUI.PoweredBy) ? (
+        <Tooltip title={`v${version}`} placement="top" enterDelay={1000} arrow>
+          <Link
+            href="https://li.fi"
+            target="_blank"
+            underline="none"
+            color="text.primary"
+          >
+            <Typography
+              color="text.secondary"
+              fontSize={12}
+              fontWeight={500}
+              px={0.5}
+            >
+              Powered by
+            </Typography>
+            <Typography color="text.primary" fontSize={12} fontWeight={500}>
+              LI.FI
+            </Typography>
+          </Link>
+        </Tooltip>
+      ) : null}
+    </Box>
+  );
+};

package/src/components/ProgressToNextUpdate/ProgressToNextUpdate.tsx

@@ -0,0 +1,96 @@
+import type { IconButtonProps } from '@mui/material';
+import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Trans } from 'react-i18next';
+
+const getProgressValue = (updatedAt: number, timeToUpdate: number) =>
+  updatedAt
+    ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100)
+    : 0;
+
+const getSecondsToUpdate = (updatedAt: number, timeToUpdate: number) =>
+  Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0);
+
+export const ProgressToNextUpdate: React.FC<
+  {
+    updatedAt: number;
+    timeToUpdate: number;
+    isLoading?: boolean;
+  } & IconButtonProps
+> = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
+  const [value, setValue] = useState(() =>
+    getProgressValue(updatedAt, timeToUpdate),
+  );
+
+  useEffect(() => {
+    setValue(getProgressValue(updatedAt, timeToUpdate));
+    const id = setInterval(() => {
+      const time = getProgressValue(updatedAt, timeToUpdate);
+      setValue(time);
+      if (time >= 100) {
+        clearInterval(id);
+      }
+    }, 1000);
+    return () => clearInterval(id);
+  }, [timeToUpdate, updatedAt]);
+
+  useEffect(() => {
+    if (isLoading) {
+      setValue(0);
+    }
+  }, [isLoading]);
+
+  return (
+    <IconButton onClick={onClick} disabled={isLoading} {...other}>
+      <Tooltip
+        title={
+          <Trans
+            i18nKey="tooltip.progressToNextUpdate"
+            values={{
+              value: getSecondsToUpdate(updatedAt, timeToUpdate),
+            }}
+            components={[<br />]}
+          />
+        }
+        placement="top"
+        enterDelay={400}
+        arrow
+      >
+        <Box
+          sx={{
+            display: 'grid',
+            position: 'relative',
+            placeItems: 'center',
+            width: 24,
+            height: 24,
+          }}
+        >
+          <CircularProgress
+            variant="determinate"
+            size={24}
+            value={100}
+            sx={(theme) => ({
+              position: 'absolute',
+              color:
+                theme.palette.mode === 'light'
+                  ? theme.palette.grey[300]
+                  : theme.palette.grey[800],
+            })}
+          />
+          <CircularProgress
+            variant={isLoading ? 'indeterminate' : 'determinate'}
+            size={24}
+            value={value}
+            sx={(theme) => ({
+              opacity: value === 100 && !isLoading ? 0.5 : 1,
+              color:
+                theme.palette.mode === 'light'
+                  ? theme.palette.primary.main
+                  : theme.palette.primary.light,
+            })}
+          />
+        </Box>
+      </Tooltip>
+    </IconButton>
+  );
+};

package/src/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -0,0 +1,19 @@
+import { IconButton as MuiIconButton } from '@mui/material';
+import { darken, lighten, styled } from '@mui/material/styles';
+
+export const IconButton = styled(MuiIconButton)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid`,
+  borderColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800],
+  zIndex: 1100,
+  padding: theme.spacing(0.5),
+  '&:hover': {
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? darken(theme.palette.background.paper, 0.02)
+        : lighten(theme.palette.background.paper, 0.02),
+  },
+}));

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -0,0 +1,29 @@
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import SwapVertIcon from '@mui/icons-material/SwapVert';
+import { useFormContext } from 'react-hook-form';
+import { FormKey } from '../../providers';
+import { IconButton } from './ReverseTokensButton.style';
+
+export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
+  vertical,
+}) => {
+  const { setValue, getValues } = useFormContext();
+  const handleClick = () => {
+    const [fromChain, fromToken, toChain, toToken] = getValues([
+      FormKey.FromChain,
+      FormKey.FromToken,
+      FormKey.ToChain,
+      FormKey.ToToken,
+    ]);
+    setValue(FormKey.FromAmount, '', { shouldTouch: true });
+    setValue(FormKey.FromChain, toChain, { shouldTouch: true });
+    setValue(FormKey.FromToken, toToken, { shouldTouch: true });
+    setValue(FormKey.ToChain, fromChain, { shouldTouch: true });
+    setValue(FormKey.ToToken, fromToken, { shouldTouch: true });
+  };
+  return (
+    <IconButton onClick={handleClick} size="small">
+      {vertical ? <SwapVertIcon /> : <SwapHorizIcon />}
+    </IconButton>
+  );
+};

package/src/components/RouteCard/RouteCard.style.ts

@@ -0,0 +1,11 @@
+import { Typography } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+
+export const IconTypography = styled(Typography)(({ theme }) => ({
+  color:
+    theme.palette.mode === 'light'
+      ? alpha(theme.palette.common.black, 0.24)
+      : alpha(theme.palette.common.white, 0.32),
+  lineHeight: 0,
+  marginRight: theme.spacing(0.5),
+}));

package/src/components/RouteCard/RouteCard.tsx

@@ -0,0 +1,170 @@
+import type { TokenAmount } from '@lifi/sdk';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import type { TooltipProps } from '@mui/material';
+import { Box, Collapse, Tooltip, Typography } from '@mui/material';
+import type { MouseEventHandler } from 'react';
+import { Fragment, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../../providers';
+import { formatTokenAmount } from '../../utils';
+import type { CardProps } from '../Card';
+import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
+import type { InsuredAmount } from '../Insurance';
+import { StepActions } from '../StepActions';
+import { Token } from '../Token';
+import { RouteCardEssentials } from './RouteCardEssentials';
+import type { RouteCardProps } from './types';
+
+export const RouteCard: React.FC<
+  RouteCardProps & Omit<CardProps, 'variant'>
+> = ({ route, active, variant = 'default', expanded, ...other }) => {
+  const { t } = useTranslation();
+  const { subvariant } = useWidgetConfig();
+  const [cardExpanded, setCardExpanded] = useState(expanded);
+  const insurable = route.insurance?.state === 'INSURABLE';
+
+  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setCardExpanded((expanded) => !expanded);
+  };
+
+  const token: TokenAmount =
+    subvariant === 'nft'
+      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+      : { ...route.toToken, amount: BigInt(route.toAmount) };
+
+  const RecommendedTagTooltip =
+    route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : Fragment;
+
+  const cardContent = (
+    <Box flex={1}>
+      {subvariant !== 'refuel' && (insurable || route.tags?.length) ? (
+        <Box display="flex" alignItems="center" mb={2}>
+          {insurable ? (
+            <InsuranceTooltip
+              insuredAmount={formatTokenAmount(
+                BigInt(route.toAmountMin),
+                route.toToken.decimals,
+              )}
+              insuredTokenSymbol={route.toToken.symbol}
+            >
+              <CardLabel
+                type={
+                  route.tags?.length && !cardExpanded
+                    ? 'insurance-icon'
+                    : 'insurance'
+                }
+              >
+                <VerifiedUserIcon fontSize="inherit" />
+                {cardExpanded || !route.tags?.length ? (
+                  <CardLabelTypography type="icon">
+                    {t(`main.tags.insurable`)}
+                  </CardLabelTypography>
+                ) : null}
+              </CardLabel>
+            </InsuranceTooltip>
+          ) : null}
+          {route.tags?.length ? (
+            <RecommendedTagTooltip>
+              <CardLabel type={active ? 'active' : undefined}>
+                <CardLabelTypography>
+                  {t(`main.tags.${route.tags[0].toLowerCase()}` as any)}
+                </CardLabelTypography>
+              </CardLabel>
+            </RecommendedTagTooltip>
+          ) : null}
+        </Box>
+      ) : null}
+      <Box display="flex" justifyContent="space-between" alignItems="start">
+        <Token
+          token={token}
+          step={!cardExpanded ? route.steps[0] : undefined}
+        />
+        {!expanded ? (
+          <CardIconButton onClick={handleExpand} size="small">
+            {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </CardIconButton>
+        ) : null}
+      </Box>
+      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
+        {route.steps.map((step) => (
+          <StepActions key={step.id} step={step} mt={2} />
+        ))}
+      </Collapse>
+      <RouteCardEssentials route={route} />
+    </Box>
+  );
+
+  return subvariant === 'refuel' || variant === 'cardless' ? (
+    cardContent
+  ) : (
+    <Card
+      variant={active ? 'selected' : 'default'}
+      selectionColor="secondary"
+      indented
+      {...other}
+    >
+      {cardContent}
+    </Card>
+  );
+};
+
+const InsuranceTooltip: React.FC<
+  InsuredAmount & Pick<TooltipProps, 'children'>
+> = ({ insuredAmount, insuredTokenSymbol, children }) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip
+      title={
+        <Box component="span">
+          <Typography fontSize={12} fontWeight="500">
+            <Trans
+              i18nKey="insurance.insure"
+              values={{
+                amount: insuredAmount,
+                tokenSymbol: insuredTokenSymbol,
+              }}
+              components={[<strong />]}
+            />
+          </Typography>
+          <Box
+            sx={{
+              listStyleType: 'disc',
+              pl: 2,
+            }}
+          >
+            <Typography fontSize={12} fontWeight="500" display="list-item">
+              {t('insurance.bridgeExploits')}
+            </Typography>
+            <Typography fontSize={12} fontWeight="500" display="list-item">
+              {t('insurance.slippageError')}
+            </Typography>
+          </Box>
+        </Box>
+      }
+      placement="top"
+      enterDelay={400}
+      arrow
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+const RecommendedTooltip: React.FC<Pick<TooltipProps, 'children'>> = ({
+  children,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip
+      title={t('tooltip.recommended')}
+      placement="top"
+      enterDelay={400}
+      arrow
+    >
+      {children}
+    </Tooltip>
+  );
+};

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -0,0 +1,150 @@
+import AccessTimeIcon from '@mui/icons-material/AccessTimeFilled';
+import EvStationIcon from '@mui/icons-material/EvStation';
+import LayersIcon from '@mui/icons-material/Layers';
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
+import { Box, Tooltip, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { IconTypography } from './RouteCard.style';
+import type { RouteCardEssentialsProps } from './types';
+import { getFeeCostsBreakdown, getGasCostsBreakdown } from './utils';
+
+export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
+  route,
+  dense,
+}) => {
+  const { t } = 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);
+  return (
+    <Box display="flex" justifyContent={'space-between'} flex={1} mt={2}>
+      <Tooltip
+        title={
+          <Box component="span">
+            {t(`tooltip.estimatedNetworkFee`)}
+            {gasCosts.map((gas, index) => (
+              <Typography
+                fontSize={12}
+                fontWeight="500"
+                key={`${gas.token.address}${index}`}
+              >
+                {parseFloat(
+                  formatUnits(gas.amount, gas.token.decimals),
+                )?.toFixed(9)}{' '}
+                {gas.token.symbol} (
+                {t(`format.currency`, { value: gas.amountUSD })})
+              </Typography>
+            ))}
+          </Box>
+        }
+        placement="top"
+        enterDelay={400}
+        arrow
+      >
+        <Box display="flex" alignItems="center" mr={dense ? 0 : 2}>
+          <IconTypography>
+            <EvStationIcon fontSize="small" />
+          </IconTypography>
+          <Typography
+            fontSize={14}
+            color="text.primary"
+            fontWeight="500"
+            lineHeight={1}
+          >
+            {t(`format.currency`, { value: gasCostUSD })}
+          </Typography>
+        </Box>
+      </Tooltip>
+      <Tooltip
+        title={
+          <Box component="span">
+            {t(`tooltip.additionalProviderFee`)}
+            {feeCosts.map((fee, index) => (
+              <Typography
+                fontSize={12}
+                fontWeight="500"
+                key={`${fee.token.address}${index}`}
+              >
+                {parseFloat(
+                  formatUnits(fee.amount, fee.token.decimals),
+                )?.toFixed(9)}{' '}
+                {fee.token.symbol} (
+                {t(`format.currency`, { value: fee.amountUSD })})
+              </Typography>
+            ))}
+          </Box>
+        }
+        placement="top"
+        enterDelay={400}
+        arrow
+      >
+        <Box display="flex" alignItems="center" mr={dense ? 0 : 2}>
+          <IconTypography>
+            <MonetizationOnIcon fontSize="small" />
+          </IconTypography>
+          <Typography
+            fontSize={14}
+            color="text.primary"
+            fontWeight="500"
+            lineHeight={1}
+          >
+            {t(`format.currency`, {
+              value: feeCosts.reduce(
+                (sum, feeCost) => sum + feeCost.amountUSD,
+                0,
+              ),
+            })}
+          </Typography>
+        </Box>
+      </Tooltip>
+      <Tooltip
+        title={t(`tooltip.estimatedTime`)}
+        placement="top"
+        enterDelay={400}
+        arrow
+      >
+        <Box display="flex" alignItems="center" mr={dense ? 0 : 2}>
+          <IconTypography>
+            <AccessTimeIcon fontSize="small" />
+          </IconTypography>
+          <Typography
+            fontSize={14}
+            color="text.primary"
+            fontWeight="500"
+            lineHeight={1}
+          >
+            {t('main.estimatedTime', {
+              value: executionTimeMinutes,
+            })}
+          </Typography>
+        </Box>
+      </Tooltip>
+      <Tooltip
+        title={t(`tooltip.numberOfSteps`)}
+        placement="top"
+        enterDelay={400}
+        arrow
+      >
+        <Box display="flex" alignItems="center">
+          <IconTypography>
+            <LayersIcon fontSize="small" />
+          </IconTypography>
+          <Typography
+            fontSize={14}
+            color="text.primary"
+            fontWeight="500"
+            lineHeight={1}
+          >
+            {route.steps.length}
+          </Typography>
+        </Box>
+      </Tooltip>
+    </Box>
+  );
+};

package/src/components/RouteCard/RouteCardSkeleton.tsx

@@ -0,0 +1,60 @@
+import type { BoxProps } from '@mui/material';
+import { Box, Skeleton } from '@mui/material';
+import { useWidgetConfig } from '../../providers';
+import { Card } from '../Card';
+import type { RouteCardSkeletonProps } from './types';
+
+export const RouteCardSkeleton: React.FC<RouteCardSkeletonProps & BoxProps> = ({
+  variant,
+  ...other
+}) => {
+  const { subvariant } = useWidgetConfig();
+
+  const cardContent = (
+    <Box flex={1}>
+      {subvariant !== 'refuel' && subvariant !== 'nft' ? (
+        <Box display="flex" alignItems="center" mb={2}>
+          <Skeleton
+            variant="rectangular"
+            width={112}
+            height={24}
+            sx={(theme) => ({
+              borderRadius: `${theme.shape.borderRadius}px`,
+            })}
+          />
+        </Box>
+      ) : null}
+      <Box>
+        <Box display="flex" alignItems="center">
+          <Box mr={2}>
+            <Skeleton variant="circular" width={32} height={32} />
+          </Box>
+          <Skeleton variant="text" width={96} height={32} />
+        </Box>
+        <Box ml={6} display="flex" alignItems="center">
+          <Skeleton variant="text" width={102} height={16} />
+          <Skeleton
+            variant="text"
+            width={72}
+            height={16}
+            sx={{ marginLeft: 1 }}
+          />
+        </Box>
+      </Box>
+      <Box mt={2} display="flex" justifyContent="space-between">
+        <Skeleton variant="text" width={64} height={20} />
+        <Skeleton variant="text" width={64} height={20} />
+        <Skeleton variant="text" width={48} height={20} />
+        <Skeleton variant="text" width={32} height={20} />
+      </Box>
+    </Box>
+  );
+
+  return subvariant === 'refuel' || variant === 'cardless' ? (
+    cardContent
+  ) : (
+    <Card indented {...other}>
+      {cardContent}
+    </Card>
+  );
+};

package/src/components/RouteCard/RouteNotFoundCard.tsx

@@ -0,0 +1,34 @@
+import RouteIcon from '@mui/icons-material/Route';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+export const RouteNotFoundCard: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        flex: 1,
+      }}
+      py={1.625}
+    >
+      <Typography fontSize={48}>
+        <RouteIcon fontSize="inherit" />
+      </Typography>
+      <Typography fontSize={18} fontWeight={700}>
+        {t('info.title.routeNotFound')}
+      </Typography>
+      <Typography
+        fontSize={14}
+        color="text.secondary"
+        textAlign="center"
+        mt={2}
+      >
+        {t('info.message.routeNotFound')}
+      </Typography>
+    </Box>
+  );
+};

package/src/components/RouteCard/types.ts

@@ -0,0 +1,17 @@
+import type { Route } from '@lifi/sdk';
+
+export interface RouteCardProps {
+  route: Route;
+  variant?: 'default' | 'cardless';
+  active?: boolean;
+  expanded?: boolean;
+}
+
+export interface RouteCardEssentialsProps {
+  route: Route;
+  dense?: boolean;
+}
+
+export interface RouteCardSkeletonProps {
+  variant?: 'default' | 'cardless';
+}