@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.5

package/src/components/RouteCard/RouteCardSkeleton.tsx

@@ -1,60 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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/src/components/RouteCard/utils.ts

@@ -1,91 +0,0 @@
-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/src/components/Routes/Routes.tsx

@@ -1,82 +0,0 @@
-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/src/components/Routes/RoutesExpanded.style.ts

@@ -1,39 +0,0 @@
-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,
-}));

package/src/components/Routes/RoutesExpanded.tsx

@@ -1,119 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import type { Route } from '@lifi/sdk';
-import { Collapse, Grow, Stack, Typography } from '@mui/material';
-import { useFormState } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useMatch, useNavigate } from 'react-router-dom';
-import { useRoutes } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { useSetExecutableRoute } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
-import { RouteCard, RouteCardSkeleton, RouteNotFoundCard } from '../RouteCard';
-import {
-  CollapseContainer,
-  Container,
-  Header,
-  ScrollableContainer,
-} from './RoutesExpanded.style';
-
-const timeout = { enter: 225, exit: 225, appear: 0 };
-
-export const RoutesExpanded = () => {
-  const element = useMatch('/');
-  return (
-    <CollapseContainer>
-      <Collapse timeout={timeout} in={!!element} orientation="horizontal">
-        <Grow timeout={timeout} in={!!element} mountOnEnter unmountOnExit>
-          <div>
-            <RoutesExpandedElement />
-          </div>
-        </Grow>
-      </Collapse>
-    </CollapseContainer>
-  );
-};
-
-export const RoutesExpandedElement = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const setExecutableRoute = useSetExecutableRoute();
-  const { subvariant, containerStyle } = useWidgetConfig();
-  const { isValid, isValidating } = useFormState();
-  const {
-    routes,
-    isLoading,
-    isFetching,
-    isFetched,
-    dataUpdatedAt,
-    refetchTime,
-    refetch,
-  } = useRoutes();
-
-  const currentRoute = routes?.[0];
-
-  const handleRouteClick = (route: Route) => {
-    if (isValid && !isValidating) {
-      setExecutableRoute(route);
-      navigate(navigationRoutes.transactionExecution, {
-        state: { routeId: route.id },
-      });
-    }
-  };
-
-  const expanded = Boolean(
-    currentRoute || isLoading || isFetching || isFetched,
-  );
-
-  const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-
-  return (
-    <Collapse timeout={timeout.enter} in={expanded} orientation="horizontal">
-      <Grow timeout={timeout.enter} in={expanded} mountOnEnter unmountOnExit>
-        <Container sx={containerStyle} enableColorScheme>
-          <ScrollableContainer>
-            <Header>
-              <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
-                {subvariant === 'nft'
-                  ? t('main.fromAmount')
-                  : t('header.youGet')}
-              </Typography>
-              <ProgressToNextUpdate
-                updatedAt={dataUpdatedAt || new Date().getTime()}
-                timeToUpdate={refetchTime}
-                isLoading={isFetching}
-                onClick={() => refetch()}
-                sx={{ marginRight: -1 }}
-              />
-            </Header>
-            <Stack
-              direction="column"
-              spacing={2}
-              flex={1}
-              paddingX={3}
-              paddingBottom={3}
-            >
-              {routeNotFound ? (
-                <RouteNotFoundCard />
-              ) : isLoading || (isFetching && !routes?.length) ? (
-                Array.from({ length: 3 }).map((_, index) => (
-                  <RouteCardSkeleton key={index} />
-                ))
-              ) : (
-                routes?.map((route: Route, index: number) => (
-                  <RouteCard
-                    key={route.id}
-                    route={route}
-                    onClick={() => handleRouteClick(route)}
-                    active={index === 0}
-                    expanded={routes?.length <= 2}
-                  />
-                ))
-              )}
-            </Stack>
-          </ScrollableContainer>
-        </Container>
-      </Grow>
-    </Collapse>
-  );
-};

package/src/components/Select.tsx

@@ -1,30 +0,0 @@
-import { Select as MuiSelect } from '@mui/material';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import { listItemIconClasses } from '@mui/material/ListItemIcon';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { selectClasses } from '@mui/material/Select';
-import { styled } from '@mui/material/styles';
-
-export const Select = styled(MuiSelect, {
-  shouldForwardProp: (prop) => prop !== 'dense',
-})<{ dense?: boolean }>(({ theme, dense }) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.white
-      : theme.palette.background.paper,
-  [`.${inputBaseClasses.input}`]: {
-    padding: dense ? theme.spacing(1.625, 2, 1.5, 2) : theme.spacing(2),
-    display: 'flex',
-    alignItems: 'center',
-  },
-  [`.${selectClasses.icon}`]: {
-    right: 10,
-    color: theme.palette.text.primary,
-  },
-  [`.${listItemIconClasses.root}`]: {
-    minWidth: 38,
-  },
-  [`.${outlinedInputClasses.notchedOutline}`]: {
-    display: 'none',
-  },
-}));

package/src/components/SelectChainAndToken.tsx

@@ -1,66 +0,0 @@
-import type { BoxProps, Theme } from '@mui/material';
-import { Box } from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { useWatch } from 'react-hook-form';
-import { ReverseTokensButton } from '../components/ReverseTokensButton';
-import { SelectTokenButton } from '../components/SelectTokenButton';
-import { FormKey, useWidgetConfig } from '../providers';
-import { DisabledUI, HiddenUI } from '../types';
-
-export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
-  const prefersNarrowView = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down('sm'),
-  );
-  const { disabledUI, hiddenUI, subvariant } = useWidgetConfig();
-  const [fromChain, toChain, fromToken, toToken] = useWatch({
-    name: [
-      FormKey.FromChain,
-      FormKey.ToChain,
-      FormKey.FromToken,
-      FormKey.ToToken,
-    ],
-  });
-
-  const hiddenReverse =
-    subvariant === 'refuel' ||
-    disabledUI?.includes(DisabledUI.FromToken) ||
-    disabledUI?.includes(DisabledUI.ToToken) ||
-    hiddenUI?.includes(HiddenUI.ToToken);
-
-  const hiddenToToken =
-    subvariant === 'nft' || hiddenUI?.includes(HiddenUI.ToToken);
-
-  const isCompact =
-    fromChain &&
-    toChain &&
-    fromToken &&
-    toToken &&
-    !prefersNarrowView &&
-    !hiddenToToken;
-
-  return (
-    <Box
-      sx={{ display: 'flex', flexDirection: isCompact ? 'row' : 'column' }}
-      {...props}
-    >
-      <SelectTokenButton formType="from" compact={isCompact} />
-      {!hiddenToToken ? (
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-          m={!hiddenReverse ? -1.125 : 1}
-        >
-          {!hiddenReverse ? (
-            <ReverseTokensButton vertical={!isCompact} />
-          ) : null}
-        </Box>
-      ) : null}
-      {!hiddenToToken ? (
-        <SelectTokenButton formType="to" compact={isCompact} />
-      ) : null}
-    </Box>
-  );
-};

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -1,35 +0,0 @@
-import { cardHeaderClasses } from '@mui/material/CardHeader';
-import { styled } from '@mui/material/styles';
-import { CardHeader } from '../Card';
-
-export const SelectTokenCardHeader = styled(CardHeader, {
-  shouldForwardProp: (prop) =>
-    !['selected', 'compact'].includes(prop as string),
-})<{ selected?: boolean; compact?: boolean }>(
-  ({ theme, selected, compact }) => ({
-    height: 64,
-    [`.${cardHeaderClasses.title}`]: {
-      color: selected
-        ? theme.palette.text.primary
-        : theme.palette.text.secondary,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: compact ? 92 : 256,
-      fontWeight: selected ? 500 : 400,
-      fontSize: compact && !selected ? '1rem' : '1.125rem',
-      [theme.breakpoints.down(392)]: {
-        width: compact ? 92 : 224,
-      },
-    },
-    [`.${cardHeaderClasses.subheader}`]: {
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: compact ? 92 : 256,
-      [theme.breakpoints.down(392)]: {
-        width: compact ? 92 : 224,
-      },
-    },
-  }),
-);

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -1,80 +0,0 @@
-import { Skeleton } from '@mui/material';
-import { useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useChain, useSwapOnly, useToken } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper, useWidgetConfig } from '../../providers';
-import { navigationRoutes } from '../../utils';
-import { Card, CardTitle } from '../Card';
-import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
-import { SelectTokenCardHeader } from './SelectTokenButton.style';
-
-export const SelectTokenButton: React.FC<
-  FormTypeProps & {
-    compact: boolean;
-  }
-> = ({ formType, compact }) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { disabledUI, subvariant } = useWidgetConfig();
-  const swapOnly = useSwapOnly();
-  const tokenKey = FormKeyHelper.getTokenKey(formType);
-  const [chainId, tokenAddress] = useWatch({
-    name: [FormKeyHelper.getChainKey(formType), tokenKey],
-  });
-  const { chain, isLoading: isChainLoading } = useChain(chainId);
-  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
-
-  const handleClick = () => {
-    navigate(
-      formType === 'from'
-        ? navigationRoutes.fromToken
-        : subvariant === 'refuel'
-          ? navigationRoutes.toTokenNative
-          : navigationRoutes.toToken,
-    );
-  };
-
-  const isSelected = !!(chain && token);
-  const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
-  const defaultPlaceholder =
-    formType === 'to' && subvariant === 'refuel'
-      ? t('main.selectChain')
-      : formType === 'to' && swapOnly
-        ? t('main.selectToken')
-        : t('main.selectChainAndToken');
-  const cardTitle: string =
-    formType === 'from' && subvariant === 'nft'
-      ? t(`header.payWith`)
-      : t(`main.${formType}`);
-  return (
-    <Card flex={1} onClick={onClick}>
-      <CardTitle>{cardTitle}</CardTitle>
-      {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
-        <SelectTokenCardHeader
-          avatar={<Skeleton variant="circular" width={32} height={32} />}
-          title={<Skeleton variant="text" width={64} height={24} />}
-          subheader={<Skeleton variant="text" width={64} height={16} />}
-          compact={compact}
-        />
-      ) : (
-        <SelectTokenCardHeader
-          avatar={
-            isSelected ? (
-              <TokenAvatar token={token} chain={chain} />
-            ) : (
-              <TokenAvatarDefault />
-            )
-          }
-          title={isSelected ? token.symbol : defaultPlaceholder}
-          subheader={
-            isSelected ? t(`main.onChain`, { chainName: chain.name }) : null
-          }
-          selected={isSelected}
-          compact={compact}
-        />
-      )}
-    </Card>
-  );
-};

package/src/components/SendToWallet/SendToWallet.style.tsx

@@ -1,20 +0,0 @@
-import { FormControl as MuiFormControl, InputBase } from '@mui/material';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import { styled } from '@mui/material/styles';
-
-export const FormControl = styled(MuiFormControl)(({ theme }) => ({
-  padding: theme.spacing(1.5, 2, 1.5, 0),
-}));
-
-export const Input = styled(InputBase)(({ theme }) => ({
-  [`.${inputBaseClasses.input}`]: {
-    height: 32,
-    padding: theme.spacing(0, 0, 0, 2),
-  },
-  [`&.${inputBaseClasses.disabled}`]: {
-    color: 'inherit',
-  },
-  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
-    WebkitTextFillColor: 'unset',
-  },
-}));