@lifi/widget 3.0.0-alpha.7 → 3.0.0-alpha.8

package/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/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/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/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/components/RouteCard/index.ts

@@ -0,0 +1,3 @@
+export * from './RouteCard';
+export * from './RouteCardSkeleton';
+export * from './RouteNotFoundCard';

package/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';
+}

package/components/RouteCard/utils.ts

@@ -0,0 +1,91 @@
+import type { Route, Token } from '@lifi/sdk';
+
+export const getGasCostsBreakdown = (route: Route) => {
+  return Object.values(
+    route.steps.reduce(
+      (groupedGasCosts, step) => {
+        if (step.estimate.gasCosts?.length) {
+          const { token } = step.estimate.gasCosts[0];
+          const gasCostAmount = step.estimate.gasCosts.reduce(
+            (amount, gasCost) => amount + BigInt(gasCost.amount || 0),
+            0n,
+          );
+          const gasCostAmountUSD = step.estimate.gasCosts.reduce(
+            (amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'),
+            0,
+          );
+          const groupedGasCost = groupedGasCosts[token.chainId];
+          const amount = groupedGasCost
+            ? groupedGasCost.amount + gasCostAmount
+            : gasCostAmount;
+          const amountUSD = groupedGasCost
+            ? groupedGasCost.amountUSD + gasCostAmountUSD
+            : gasCostAmountUSD;
+          groupedGasCosts[token.chainId] = {
+            amount,
+            amountUSD,
+            token,
+          };
+          return groupedGasCosts;
+        }
+        return groupedGasCosts;
+      },
+      {} as Record<
+        number,
+        {
+          amount: bigint;
+          amountUSD: number;
+          token: Token;
+        }
+      >,
+    ),
+  );
+};
+
+export const getFeeCostsBreakdown = (route: Route, included?: boolean) => {
+  return Object.values(
+    route.steps.reduce(
+      (groupedFeeCosts, step) => {
+        let feeCosts = step.estimate.feeCosts;
+        if (typeof included === 'boolean') {
+          feeCosts = feeCosts?.filter(
+            (feeCost) => feeCost.included === included,
+          );
+        }
+        if (feeCosts?.length) {
+          const { token } = feeCosts[0];
+          const feeCostAmount = feeCosts.reduce(
+            (amount, feeCost) => amount + BigInt(feeCost.amount || 0),
+            0n,
+          );
+          const feeCostAmountUSD = feeCosts.reduce(
+            (amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'),
+            0,
+          );
+          const groupedFeeCost = groupedFeeCosts[token.chainId];
+          const amount = groupedFeeCost
+            ? groupedFeeCost.amount + feeCostAmount
+            : feeCostAmount;
+          const amountUSD = groupedFeeCost
+            ? groupedFeeCost.amountUSD + feeCostAmountUSD
+            : feeCostAmountUSD;
+          groupedFeeCosts[token.chainId] = {
+            amount,
+            amountUSD,
+            token,
+          };
+          return groupedFeeCosts;
+        }
+        return groupedFeeCosts;
+      },
+      {} as Record<
+        number,
+        {
+          amount: bigint;
+          amountUSD: number;
+          token: Token;
+        }
+      >,
+    ),
+  );
+};

package/components/Routes/Routes.tsx

@@ -0,0 +1,82 @@
+import type { BoxProps } from '@mui/material';
+import { Box, Button, Collapse } from '@mui/material';
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
+import { RouteCard, RouteCardSkeleton, RouteNotFoundCard } from '../RouteCard';
+
+export const Routes: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { subvariant, useRecommendedRoute } = useWidgetConfig();
+  const { isValid, isValidating } = useFormState();
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+  } = useRoutes();
+
+  const currentRoute = routes?.[0];
+
+  if (!currentRoute && !isLoading && !isFetching && !isFetched) {
+    return null;
+  }
+
+  const handleCardClick = () => {
+    navigate(navigationRoutes.routes);
+  };
+
+  const routeNotFound = !currentRoute && !isLoading && !isFetching;
+  const onlyRecommendedRoute = subvariant === 'refuel' || useRecommendedRoute;
+  const showAll =
+    !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
+
+  return (
+    <Card {...props}>
+      <CardTitle>
+        {subvariant === 'nft' ? t('main.fromAmount') : t('header.youGet')}
+      </CardTitle>
+      <ProgressToNextUpdate
+        updatedAt={dataUpdatedAt || new Date().getTime()}
+        timeToUpdate={refetchTime}
+        isLoading={isFetching}
+        onClick={() => refetch()}
+        sx={{
+          position: 'absolute',
+          top: 8,
+          right: 8,
+        }}
+      />
+      <Box p={2}>
+        {isLoading ? (
+          <RouteCardSkeleton variant="cardless" />
+        ) : !currentRoute ? (
+          <RouteNotFoundCard />
+        ) : (
+          <RouteCard route={currentRoute} variant="cardless" active />
+        )}
+
+        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter appear>
+          <Box mt={2}>
+            <Button
+              onClick={handleCardClick}
+              disabled={isValidating || !isValid}
+              fullWidth
+            >
+              {t('button.showAll')}
+            </Button>
+          </Box>
+        </Collapse>
+      </Box>
+    </Card>
+  );
+};

package/components/Routes/RoutesExpanded.style.ts

@@ -0,0 +1,39 @@
+import { Box, ScopedCssBaseline } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { maxHeight } from '../AppContainer';
+
+export const CollapseContainer = styled(Box)(({ theme }) => ({
+  height: maxHeight,
+  zIndex: 0,
+}));
+
+export const ScrollableContainer = styled(Box)({
+  overflowY: 'auto',
+  height: '100%',
+  width: '100%',
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const Container = styled(ScopedCssBaseline)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  overflow: 'auto',
+  width: 436,
+  maxHeight,
+  marginLeft: theme.spacing(3),
+  display: 'flex',
+  flexDirection: 'column',
+}));
+
+export const Header = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  backdropFilter: 'blur(12px)',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(1.5, 3),
+  position: 'sticky',
+  top: 0,
+  zIndex: 1200,
+}));