@lifi/widget 3.7.0-beta.0 → 3.7.0-beta.10

package/components/ListItem/ListItem.tsx

@@ -1,26 +0,0 @@
-import {
-  ListItem as MuiListItem,
-  listItemSecondaryActionClasses,
-  listItemTextClasses,
-  styled,
-} from '@mui/material';
-
-export const ListItem = styled(MuiListItem)(({ theme }) => ({
-  height: 64,
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  padding: theme.spacing(0, 1.5),
-  [`.${listItemSecondaryActionClasses.root}`]: {
-    right: theme.spacing(3),
-  },
-  [`& .${listItemTextClasses.secondary}`]: {
-    fontSize: 12,
-    fontWeight: 500,
-  },
-  [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
-    lineHeight: 1.3334,
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-}));

package/components/ListItem/ListItemButton.tsx

@@ -1,9 +0,0 @@
-import { styled } from '@mui/material';
-import { ListItemButton as ListItemButtonBase } from '../ListItemButton.js';
-
-export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
-  paddingLeft: theme.spacing(1.5),
-  paddingRight: theme.spacing(1.5),
-  height: 64,
-  width: '100%',
-}));

package/components/ListItemButton.tsx

@@ -1,18 +0,0 @@
-import { ListItemButton as MuiListItemButton, styled } from '@mui/material';
-import { getContrastAlphaColor } from '../utils/colors.js';
-
-export const ListItemButton = styled(MuiListItemButton)(({
-  theme,
-  disabled,
-}) => {
-  const backgroundHoverColor = getContrastAlphaColor(theme, 0.04);
-  return {
-    borderRadius: theme.shape.borderRadius,
-    paddingLeft: theme.spacing(1.5),
-    height: 56,
-    '&:hover': {
-      backgroundColor: !disabled && backgroundHoverColor,
-    },
-    ...(disabled ? { opacity: 0.5, cursor: 'auto' } : {}),
-  };
-});

package/components/ListItemText.tsx

@@ -1,11 +0,0 @@
-import {
-  ListItemText as MuiListItemText,
-  listItemTextClasses,
-  styled,
-} from '@mui/material';
-
-export const ListItemText = styled(MuiListItemText)(({ theme }) => ({
-  [`.${listItemTextClasses.primary}`]: {
-    fontWeight: 500,
-  },
-}));

package/components/Menu.tsx

@@ -1,27 +0,0 @@
-import {
-  Menu as MuiMenu,
-  menuClasses,
-  menuItemClasses,
-  styled,
-  svgIconClasses,
-} from '@mui/material';
-
-export const Menu = styled(MuiMenu)(({ theme }) => ({
-  [`& .${menuClasses.paper}`]: {
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
-    padding: theme.spacing(2),
-    [`& .${menuClasses.list}`]: {
-      padding: 0,
-    },
-    [`& .${menuItemClasses.root}`]: {
-      borderRadius: theme.shape.borderRadiusSecondary,
-      padding: theme.spacing(1, 2, 1, 1),
-      [`& .${svgIconClasses.root}`]: {
-        fontSize: 20,
-        color: theme.palette.text.primary,
-        marginRight: theme.spacing(1.5),
-      },
-    },
-  },
-}));

package/components/NotFound.tsx

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

package/components/PageContainer.ts

@@ -1,26 +0,0 @@
-import { Container, styled } from '@mui/material';
-
-export interface PageContainerProps {
-  halfGutters?: boolean;
-  topGutters?: boolean;
-  bottomGutters?: boolean;
-}
-
-export const PageContainer = styled(Container, {
-  shouldForwardProp: (prop) =>
-    !['halfGutters', 'topGutters', 'bottomGutters'].includes(prop as string),
-})<PageContainerProps>(
-  ({ theme, disableGutters, halfGutters, topGutters, bottomGutters }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    padding: disableGutters
-      ? 0
-      : theme.spacing(
-          topGutters ? 1 : 0,
-          halfGutters ? 1.5 : 3,
-          bottomGutters ? 3 : 0,
-          halfGutters ? 1.5 : 3,
-        ),
-  }),
-);

package/components/PoweredBy/PoweredBy.style.ts

@@ -1,10 +0,0 @@
-import { Link as MuiLink, styled } from '@mui/material';
-
-export const Link = styled(MuiLink)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  border: 'none',
-  ':hover': {
-    color: theme.palette.primary.main,
-  },
-}));

package/components/PoweredBy/PoweredBy.tsx

@@ -1,39 +0,0 @@
-import { Box, Tooltip, Typography } from '@mui/material';
-import { version } from '../../config/version.js';
-import { Link } from './PoweredBy.style.js';
-
-export const PoweredBy: React.FC = () => {
-  return (
-    <Box
-      pt={1}
-      pb={2}
-      flex={1}
-      sx={{
-        display: 'flex',
-        alignItems: 'flex-end',
-        justifyContent: 'flex-end',
-      }}
-    >
-      <Tooltip title={`v${version}`} enterDelay={1000}>
-        <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={600}>
-            LI.FI
-          </Typography>
-        </Link>
-      </Tooltip>
-    </Box>
-  );
-};

package/components/ProgressToNextUpdate.tsx

@@ -1,93 +0,0 @@
-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 />]}
-          />
-        }
-      >
-        <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/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -1,31 +0,0 @@
-import { Box, styled } from '@mui/material';
-import { Card } from '../Card/Card.js';
-
-export const IconCard = styled(Card)(({ theme }) => ({
-  height: 32,
-  width: 32,
-  fontSize: 16,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: theme.shape.borderRadiusTertiary,
-  zIndex: 1110,
-}));
-
-export const ReverseContainer = styled(Box)(({ theme }) => {
-  return {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: theme.spacing(-1),
-  };
-});
-
-export const ReverseTokensButtonEmpty = styled(Box)(({ theme }) => {
-  return {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: theme.spacing(1),
-  };
-});

package/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,44 +0,0 @@
-import { ArrowDownward, ArrowForward } from '@mui/icons-material';
-import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import { useToAddressReset } from '../../hooks/useToAddressReset.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { IconCard, ReverseContainer } from './ReverseTokensButton.style.js';
-
-export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
-  vertical,
-}) => {
-  const { setFieldValue, getFieldValues } = useFieldActions();
-  const { getChainById } = useAvailableChains();
-  const { tryResetToAddress } = useToAddressReset();
-
-  const handleClick = () => {
-    const [fromChainId, fromToken, toChainId, toToken] = getFieldValues(
-      'fromChain',
-      'fromToken',
-      'toChain',
-      'toToken',
-    );
-    setFieldValue('fromAmount', '', { isTouched: true });
-    setFieldValue('fromChain', toChainId, { isTouched: true });
-    setFieldValue('fromToken', toToken, { isTouched: true });
-    setFieldValue('toChain', fromChainId, { isTouched: true });
-    setFieldValue('toToken', fromToken, { isTouched: true });
-
-    // fromChainId becomes toChainId after using reverse
-    const toChain = getChainById(fromChainId);
-    if (toChain) {
-      tryResetToAddress(toChain);
-    }
-  };
-  return (
-    <ReverseContainer>
-      <IconCard onClick={handleClick}>
-        {vertical ? (
-          <ArrowDownward fontSize="inherit" />
-        ) : (
-          <ArrowForward fontSize="inherit" />
-        )}
-      </IconCard>
-    </ReverseContainer>
-  );
-};

package/components/RouteCard/RouteCard.style.ts

@@ -1,8 +0,0 @@
-import { Box, styled } from '@mui/material';
-
-export const TokenContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  height: 40,
-}));

package/components/RouteCard/RouteCard.tsx

@@ -1,102 +0,0 @@
-import type { TokenAmount } from '@lifi/sdk';
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { Box, Collapse } from '@mui/material';
-import type { MouseEventHandler } from 'react';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import type { CardProps } from '../Card/Card.js';
-import { Card } from '../Card/Card.js';
-import { CardIconButton } from '../Card/CardIconButton.js';
-import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js';
-import { StepActions } from '../StepActions/StepActions.js';
-import { Token } from '../Token/Token.js';
-import { TokenContainer } from './RouteCard.style.js';
-import { RouteCardEssentials } from './RouteCardEssentials.js';
-import { RouteCardEssentialsExpanded } from './RouteCardEssentialsExpanded.js';
-import type { RouteCardProps } from './types.js';
-
-export const RouteCard: React.FC<
-  RouteCardProps & Omit<CardProps, 'variant'>
-> = ({
-  route,
-  active,
-  variant = 'default',
-  expanded: defaulExpanded,
-  ...other
-}) => {
-  const { t } = useTranslation();
-  const { subvariant } = useWidgetConfig();
-  const [cardExpanded, setCardExpanded] = useState(defaulExpanded);
-
-  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.stopPropagation();
-    setCardExpanded((expanded) => !expanded);
-  };
-
-  const token: TokenAmount =
-    subvariant === 'custom'
-      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
-      : { ...route.toToken, amount: BigInt(route.toAmount) };
-  const impactToken: TokenAmount | undefined =
-    subvariant !== 'custom'
-      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
-      : undefined;
-
-  const tags = route.tags?.filter(
-    (tag) => tag === 'CHEAPEST' || tag === 'FASTEST',
-  );
-
-  const cardContent = (
-    <Box flex={1}>
-      {subvariant !== 'refuel' && route.tags?.length ? (
-        <Box display="flex" alignItems="center" mb={2}>
-          {tags?.length ? (
-            <CardLabel type={active ? 'active' : undefined}>
-              <CardLabelTypography>
-                {t(`main.tags.${tags[0].toLowerCase()}` as any)}
-              </CardLabelTypography>
-            </CardLabel>
-          ) : null}
-        </Box>
-      ) : null}
-      <TokenContainer>
-        <Token
-          token={token}
-          impactToken={impactToken}
-          step={route.steps[0]}
-          stepVisible={!cardExpanded}
-        />
-        {!defaulExpanded ? (
-          <CardIconButton onClick={handleExpand} size="small">
-            {cardExpanded ? (
-              <ExpandLess fontSize="inherit" />
-            ) : (
-              <ExpandMore fontSize="inherit" />
-            )}
-          </CardIconButton>
-        ) : null}
-      </TokenContainer>
-      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
-        {route.steps.map((step) => (
-          <StepActions key={step.id} step={step} mt={2} />
-        ))}
-        <RouteCardEssentialsExpanded route={route} />
-      </Collapse>
-      <RouteCardEssentials route={route} />
-    </Box>
-  );
-
-  return subvariant === 'refuel' || variant === 'cardless' ? (
-    cardContent
-  ) : (
-    <Card
-      type={active ? 'selected' : 'default'}
-      selectionColor="secondary"
-      indented
-      {...other}
-    >
-      {cardContent}
-    </Card>
-  );
-};

package/components/RouteCard/RouteCardEssentials.tsx

@@ -1,76 +0,0 @@
-import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material';
-import { Box, Tooltip, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
-import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js';
-import { IconTypography } from '../IconTypography.js';
-import { TokenRate } from '../TokenRate/TokenRate.js';
-import type { RouteCardEssentialsProps } from './types.js';
-
-export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
-  route,
-}) => {
-  const { t, i18n } = useTranslation();
-  const executionTimeSeconds = Math.floor(
-    route.steps.reduce(
-      (duration, step) => duration + step.estimate.executionDuration,
-      0,
-    ),
-  );
-  const executionTimeMinutes = Math.floor(executionTimeSeconds / 60);
-  const { gasCosts, feeCosts, combinedFeesUSD } =
-    getAccumulatedFeeCostsBreakdown(route);
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      justifyContent={'space-between'}
-      flex={1}
-      mt={2}
-    >
-      <TokenRate route={route} />
-      <Box display="flex" alignItems="center">
-        <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
-          <Box display="flex" mr={1.5} alignItems="center">
-            <IconTypography mr={0.5} fontSize={16}>
-              <LocalGasStationRounded fontSize="inherit" />
-            </IconTypography>
-            <Typography
-              fontSize={14}
-              color="text.primary"
-              fontWeight={600}
-              lineHeight={1}
-              data-value={combinedFeesUSD}
-            >
-              {t(`format.currency`, {
-                value: combinedFeesUSD,
-              })}
-            </Typography>
-          </Box>
-        </FeeBreakdownTooltip>
-        <Tooltip title={t(`tooltip.estimatedTime`)} sx={{ cursor: 'help' }}>
-          <Box display="flex" alignItems="center">
-            <IconTypography mr={0.5} fontSize={16}>
-              <AccessTimeFilled fontSize="inherit" />
-            </IconTypography>
-            <Typography
-              fontSize={14}
-              color="text.primary"
-              fontWeight={600}
-              lineHeight={1}
-            >
-              {(executionTimeSeconds < 60
-                ? executionTimeSeconds
-                : executionTimeMinutes
-              ).toLocaleString(i18n.language, {
-                style: 'unit',
-                unit: executionTimeSeconds < 60 ? 'second' : 'minute',
-                unitDisplay: 'narrow',
-              })}
-            </Typography>
-          </Box>
-        </Tooltip>
-      </Box>
-    </Box>
-  );
-};

package/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -1,38 +0,0 @@
-import { Layers } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { IconTypography } from '../IconTypography.js';
-import type { RouteCardEssentialsProps } from './types.js';
-
-export const RouteCardEssentialsExpanded: React.FC<
-  RouteCardEssentialsProps
-> = ({ route }) => {
-  const { t } = useTranslation();
-  return (
-    <Box flex={1} 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>
-  );
-};

package/components/RouteCard/RouteCardSkeleton.tsx

@@ -1,42 +0,0 @@
-import { Box, Skeleton } from '@mui/material';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import type { CardProps } from '../Card/Card.js';
-import { Card } from '../Card/Card.js';
-import { TokenSkeleton } from '../Token/Token.js';
-import type { RouteCardSkeletonProps } from './types.js';
-
-export const RouteCardSkeleton: React.FC<
-  RouteCardSkeletonProps & Omit<CardProps, 'variant'>
-> = ({ variant, ...other }) => {
-  const { subvariant } = useWidgetConfig();
-
-  const cardContent = (
-    <Box flex={1}>
-      {subvariant !== 'refuel' && subvariant !== 'custom' ? (
-        <Box display="flex" alignItems="center" mb={2}>
-          <Skeleton
-            variant="rectangular"
-            width={112}
-            height={24}
-            sx={(theme) => ({
-              borderRadius: `${theme.shape.borderRadius}px`,
-            })}
-          />
-        </Box>
-      ) : null}
-      <TokenSkeleton />
-      <Box mt={2} display="flex" justifyContent="space-between">
-        <Skeleton variant="text" width={64} height={20} />
-        <Skeleton variant="text" width={56} height={20} />
-      </Box>
-    </Box>
-  );
-
-  return subvariant === 'refuel' || variant === 'cardless' ? (
-    cardContent
-  ) : (
-    <Card indented {...other}>
-      {cardContent}
-    </Card>
-  );
-};

package/components/RouteCard/RouteNotFoundCard.tsx

@@ -1,34 +0,0 @@
-import { Route } from '@mui/icons-material';
-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}>
-        <Route 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>
-  );
-};