@lifi/widget 3.7.0 → 3.8.0-beta.1

package/components/Routes/RoutesExpanded.tsx

@@ -1,175 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import type { Route } from '@lifi/sdk';
-import { Collapse, Grow, Stack, Typography } from '@mui/material';
-import { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { RouteObject } from 'react-router-dom';
-import { useRoutes as useDOMRoutes, useNavigate } from 'react-router-dom';
-import { useAccount } from '../../hooks/useAccount.js';
-import { useRoutes } from '../../hooks/useRoutes.js';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { WidgetEvent } from '../../types/events.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { PageContainer } from '../PageContainer.js';
-import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js';
-import { RouteCard } from '../RouteCard/RouteCard.js';
-import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js';
-import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js';
-import {
-  CollapseContainer,
-  Container,
-  Header,
-  RouteTopLevelGrow,
-  RoutesExpandedCollapse,
-  ScrollableContainer,
-} from './RoutesExpanded.style.js';
-
-const timeout = { enter: 225, exit: 225, appear: 0 };
-
-const routes: RouteObject[] = [
-  {
-    path: '/',
-    element: true,
-  },
-  {
-    path: '*',
-    element: null,
-  },
-];
-
-export const RoutesExpanded = () => {
-  const element = useDOMRoutes(routes);
-  const match = Boolean(element?.props?.children);
-
-  return (
-    <CollapseContainer>
-      <Collapse timeout={timeout} in={match} orientation="horizontal">
-        <RouteTopLevelGrow
-          timeout={timeout}
-          in={match}
-          mountOnEnter
-          unmountOnExit
-        >
-          <div>
-            <RoutesExpandedElement />
-          </div>
-        </RouteTopLevelGrow>
-      </Collapse>
-    </CollapseContainer>
-  );
-};
-
-export const RoutesExpandedElement = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { subvariant } = useWidgetConfig();
-  const routesRef = useRef<Route[]>();
-  const emitter = useWidgetEvents();
-  const routesActiveRef = useRef(false);
-  const {
-    routes,
-    isLoading,
-    isFetching,
-    isFetched,
-    dataUpdatedAt,
-    refetchTime,
-    fromChain,
-    refetch,
-    setReviewableRoute,
-  } = useRoutes();
-  const { account } = useAccount({ chainType: fromChain?.chainType });
-  const [toAddress] = useFieldValues('toAddress');
-  const { requiredToAddress } = useToAddressRequirements();
-
-  const handleRouteClick = (route: Route) => {
-    setReviewableRoute(route);
-    navigate(navigationRoutes.transactionExecution, {
-      state: { routeId: route.id },
-    });
-  };
-
-  const onExit = () => {
-    // Clean routes cache on exit
-    routesRef.current = undefined;
-  };
-
-  // We cache routes results in ref for a better exit animation
-  if (routesRef.current && !routes) {
-    routesActiveRef.current = false;
-  } else {
-    routesRef.current = routes;
-    routesActiveRef.current = Boolean(routes);
-  }
-
-  const currentRoute = routesRef.current?.[0];
-
-  const expanded = Boolean(
-    routesActiveRef.current || isLoading || isFetching || isFetched,
-  );
-
-  const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress;
-  const allowInteraction = account.isConnected && !toAddressUnsatisfied;
-
-  useEffect(() => {
-    emitter.emit(WidgetEvent.WidgetExpanded, expanded);
-  }, [emitter, expanded]);
-
-  return (
-    <RoutesExpandedCollapse
-      timeout={timeout.enter}
-      in={expanded}
-      orientation="horizontal"
-      onExited={onExit}
-    >
-      <Grow timeout={timeout.enter} in={expanded} mountOnEnter unmountOnExit>
-        <Container enableColorScheme minimumHeight={isLoading}>
-          <ScrollableContainer>
-            <Header>
-              <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
-                {subvariant === 'custom'
-                  ? t('header.youPay')
-                  : t('header.receive')}
-              </Typography>
-              <ProgressToNextUpdate
-                updatedAt={dataUpdatedAt || new Date().getTime()}
-                timeToUpdate={refetchTime}
-                isLoading={isFetching}
-                onClick={() => refetch()}
-                sx={{ marginRight: -1 }}
-              />
-            </Header>
-            <PageContainer>
-              <Stack direction="column" spacing={2} flex={1} paddingBottom={3}>
-                {routeNotFound ? (
-                  <RouteNotFoundCard />
-                ) : isLoading || (isFetching && !routesRef.current?.length) ? (
-                  Array.from({ length: 3 }).map((_, index) => (
-                    <RouteCardSkeleton key={index} />
-                  ))
-                ) : (
-                  routesRef.current?.map((route: Route, index: number) => (
-                    <RouteCard
-                      key={index}
-                      route={route}
-                      onClick={
-                        allowInteraction
-                          ? () => handleRouteClick(route)
-                          : undefined
-                      }
-                      active={index === 0}
-                      expanded={routesRef.current?.length === 1}
-                    />
-                  ))
-                )}
-              </Stack>
-            </PageContainer>
-          </ScrollableContainer>
-        </Container>
-      </Grow>
-    </RoutesExpandedCollapse>
-  );
-};

package/components/Search/SearchInput.style.tsx

@@ -1,46 +0,0 @@
-import { Box, List, styled } from '@mui/material';
-import { Input as InputBase } from '../../components/Input.js';
-
-export const Input = styled(InputBase)(({ theme }) => ({
-  paddingRight: theme.spacing(1.5),
-}));
-
-interface SearchStickyContainerProps {
-  headerHeight: number;
-}
-
-export const searchContainerHeight = 64;
-
-// When the widget is in Full Height layout mode in order to appear "sticky the StickySearchInputContainer needs to use
-// position fixed in the same way as the header (see Header.tsx). The headerHeight value here is used as the top value
-// to ensure that this container positioned correctly beneath the header
-export const StickySearchInputContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'headerHeight',
-})<SearchStickyContainerProps>(({ theme, headerHeight }) => ({
-  position: 'sticky',
-  top: headerHeight,
-  zIndex: 1,
-  height: searchContainerHeight,
-  paddingBottom: theme.spacing(2),
-  paddingLeft: theme.spacing(3),
-  paddingRight: theme.spacing(3),
-  backgroundColor: theme.palette.background.default,
-  ...(theme.header?.position === 'fixed'
-    ? {
-        position: 'fixed',
-        minWidth: theme.breakpoints.values.xs,
-        maxWidth: theme.breakpoints.values.sm,
-        width: '100%',
-      }
-    : {}),
-}));
-
-// When in Full Height layout mode, as the StickySearchInputContainer (see above) uses fixed position, the list element needs to provide
-// additional paddingTop in order to be positioned correctly.
-export const SearchList = styled(List)(({ theme }) => ({
-  paddingTop:
-    theme.header?.position === 'fixed' ? `${searchContainerHeight}px` : 0,
-  paddingLeft: theme.spacing(1.5),
-  paddingRight: theme.spacing(1.5),
-  paddingBottom: theme.spacing(1.5),
-}));

package/components/Search/SearchInput.tsx

@@ -1,57 +0,0 @@
-import { Search } from '@mui/icons-material';
-import { FormControl, InputAdornment } from '@mui/material';
-import type { FocusEventHandler, FormEventHandler } from 'react';
-import { InputCard } from '../../components/Card/InputCard.js';
-import { useHeaderHeight } from '../../stores/header/useHeaderStore.js';
-import { Input, StickySearchInputContainer } from './SearchInput.style.js';
-
-interface SearchInputProps {
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  onChange?: FormEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-}
-
-export const SearchInput = ({
-  name,
-  placeholder,
-  onChange,
-  onBlur,
-  value,
-}: SearchInputProps) => {
-  return (
-    <InputCard>
-      <FormControl fullWidth>
-        <Input
-          size="small"
-          placeholder={placeholder}
-          endAdornment={
-            <InputAdornment position="end">
-              <Search />
-            </InputAdornment>
-          }
-          inputProps={{
-            inputMode: 'search',
-            onChange,
-            onBlur,
-            name,
-            value,
-            maxLength: 128,
-          }}
-          autoComplete="off"
-        />
-      </FormControl>
-    </InputCard>
-  );
-};
-
-export const StickySearchInput = ({ ...rest }: SearchInputProps) => {
-  const { headerHeight } = useHeaderHeight();
-
-  return (
-    <StickySearchInputContainer headerHeight={headerHeight}>
-      <SearchInput {...rest} />
-    </StickySearchInputContainer>
-  );
-};

package/components/Search/SearchNotFound.style.tsx

@@ -1,36 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import { Box, styled, Typography } from '@mui/material';
-import { searchContainerHeight } from './SearchInput.style.js';
-
-interface NotFoundContainerProps extends BoxProps {
-  adjustForStickySearchInput?: boolean;
-}
-
-export const NotFoundContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'adjustForStickySearchInput',
-})<NotFoundContainerProps>(({ theme, adjustForStickySearchInput }) => ({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  flexDirection: 'column',
-  flex: 1,
-  padding: theme.spacing(3),
-  ...(adjustForStickySearchInput && theme.header?.position === 'fixed'
-    ? { paddingTop: `calc(${searchContainerHeight}px + ${theme.spacing(3)})` }
-    : {}),
-}));
-
-export const NotFoundMessage = styled(Typography)(({ theme }) => ({
-  fontSize: 14,
-  color: theme.palette.text.secondary,
-  textAlign: 'center',
-  flex: 1,
-  marginTop: theme.spacing(2),
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-}));
-
-export const NotFoundIconContainer = styled(Typography)(({ theme }) => ({
-  fontSize: 48,
-  lineHeight: 1,
-}));

package/components/Search/SearchNotFound.tsx

@@ -1,23 +0,0 @@
-import { SearchOff } from '@mui/icons-material';
-import {
-  NotFoundContainer,
-  NotFoundIconContainer,
-  NotFoundMessage,
-} from './SearchNotFound.style.js';
-
-interface SearchNotFoundProps {
-  message: string;
-  adjustForStickySearchInput?: boolean;
-}
-
-export const SearchNotFound = ({
-  message,
-  adjustForStickySearchInput,
-}: SearchNotFoundProps) => (
-  <NotFoundContainer adjustForStickySearchInput={adjustForStickySearchInput}>
-    <NotFoundIconContainer>
-      <SearchOff fontSize="inherit" />
-    </NotFoundIconContainer>
-    <NotFoundMessage>{message}</NotFoundMessage>
-  </NotFoundContainer>
-);

package/components/Select.tsx

@@ -1,32 +0,0 @@
-import {
-  Select as MuiSelect,
-  inputBaseClasses,
-  listItemIconClasses,
-  outlinedInputClasses,
-  selectClasses,
-  styled,
-} from '@mui/material';
-
-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/components/SelectChainAndToken.tsx

@@ -1,58 +0,0 @@
-import type { BoxProps, Theme } from '@mui/material';
-import { Box, useMediaQuery } from '@mui/material';
-import { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js';
-import { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js';
-import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldValues } from '../stores/form/useFieldValues.js';
-import { DisabledUI, HiddenUI } from '../types/widget.js';
-import { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js';
-
-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] = useFieldValues(
-    'fromChain',
-    'toChain',
-    'fromToken',
-    'toToken',
-  );
-
-  const hiddenReverse =
-    subvariant === 'refuel' ||
-    disabledUI?.includes(DisabledUI.FromToken) ||
-    disabledUI?.includes(DisabledUI.ToToken) ||
-    hiddenUI?.includes(HiddenUI.ToToken);
-
-  const hiddenToToken =
-    subvariant === 'custom' || 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 ? (
-        !hiddenReverse ? (
-          <ReverseTokensButton vertical={!isCompact} />
-        ) : (
-          <ReverseTokensButtonEmpty />
-        )
-      ) : null}
-      {!hiddenToToken ? (
-        <SelectTokenButton formType="to" compact={isCompact} />
-      ) : null}
-    </Box>
-  );
-};

package/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -1,88 +0,0 @@
-import {
-  CardContent as MuiCardContent,
-  cardHeaderClasses,
-  darken,
-  lighten,
-  styled,
-} from '@mui/material';
-import type { FormType } from '../../stores/form/types.js';
-import { Card } from '../Card/Card.js';
-import { CardHeader } from '../Card/CardHeader.js';
-
-export const SelectTokenCardHeader = styled(CardHeader, {
-  shouldForwardProp: (prop) =>
-    !['selected', 'compact'].includes(prop as string),
-})<{ selected?: boolean; compact?: boolean }>(
-  ({ theme, selected, compact }) => ({
-    padding: theme.spacing(2),
-    [`.${cardHeaderClasses.title}`]: {
-      color: selected
-        ? theme.palette.text.primary
-        : theme.palette.text.secondary,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: compact ? 96 : 256,
-      fontSize: compact && !selected ? 16 : 18,
-      fontWeight: selected ? 600 : 500,
-      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: compact ? 96 : 224,
-      },
-    },
-    [`.${cardHeaderClasses.subheader}`]: {
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: compact ? 96 : 256,
-      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: compact ? 96 : 224,
-      },
-    },
-  }),
-);
-
-export const SelectTokenCard = styled(Card)(({ theme }) => {
-  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
-  return {
-    flex: 1,
-    ...(cardVariant !== 'outlined' && {
-      background: 'none',
-      '&:hover': {
-        cursor: 'pointer',
-        background: 'none',
-      },
-    }),
-  };
-});
-
-export const CardContent = styled(MuiCardContent, {
-  shouldForwardProp: (prop) => prop !== 'formType' && prop !== 'compact',
-})<{ formType: FormType; compact: boolean }>(({ theme, formType, compact }) => {
-  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
-  const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)';
-  const horizontal = compact ? direction : '50%';
-  const vertical = compact ? '50%' : direction;
-  return {
-    padding: 0,
-    transition: theme.transitions.create(['background-color'], {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
-    '&:last-child': {
-      paddingBottom: 0,
-    },
-    ...(cardVariant !== 'outlined' && {
-      backgroundColor: theme.palette.background.paper,
-      mask: `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`,
-    }),
-    ...(cardVariant === 'filled' && {
-      '&:hover': {
-        cursor: 'pointer',
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? darken(theme.palette.background.paper, 0.02)
-            : lighten(theme.palette.background.paper, 0.02),
-      },
-    }),
-  };
-});

package/components/SelectTokenButton/SelectTokenButton.tsx

@@ -1,99 +0,0 @@
-import { Skeleton } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useChain } from '../../hooks/useChain.js';
-import { useSwapOnly } from '../../hooks/useSwapOnly.js';
-import { useToken } from '../../hooks/useToken.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import type { FormTypeProps } from '../../stores/form/types.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js';
-import { TokenAvatar } from '../Avatar/TokenAvatar.js';
-import { CardTitle } from '../Card/CardTitle.js';
-import {
-  CardContent,
-  SelectTokenCard,
-  SelectTokenCardHeader,
-} from './SelectTokenButton.style.js';
-
-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] = useFieldValues(
-    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 === 'custom'
-      ? t(`header.payWith`)
-      : t(`main.${formType}`);
-  return (
-    <SelectTokenCard component="button" onClick={onClick}>
-      <CardContent formType={formType} compact={compact}>
-        <CardTitle>{cardTitle}</CardTitle>
-        {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
-          <SelectTokenCardHeader
-            avatar={<AvatarBadgedSkeleton />}
-            title={<Skeleton variant="text" width={64} height={24} />}
-            subheader={<Skeleton variant="text" width={72} height={16} />}
-            compact={compact}
-          />
-        ) : (
-          <SelectTokenCardHeader
-            avatar={
-              isSelected ? (
-                <TokenAvatar token={token} chain={chain} />
-              ) : (
-                <AvatarBadgedDefault />
-              )
-            }
-            title={isSelected ? token.symbol : defaultPlaceholder}
-            titleTypographyProps={{
-              title: isSelected ? token.symbol : defaultPlaceholder,
-            }}
-            subheader={isSelected ? chain.name : null}
-            subheaderTypographyProps={
-              isSelected
-                ? {
-                    title: chain.name,
-                  }
-                : undefined
-            }
-            selected={isSelected}
-            compact={compact}
-          />
-        )}
-      </CardContent>
-    </SelectTokenCard>
-  );
-};

package/components/SendToWallet/SendToWallet.style.tsx

@@ -1,34 +0,0 @@
-import { cardHeaderClasses, styled } from '@mui/material';
-import { CardHeader } from '../Card/CardHeader.js';
-
-export const SendToWalletCardHeader = styled(CardHeader, {
-  shouldForwardProp: (prop) => !['selected'].includes(prop as string),
-})<{ selected?: boolean }>(({ theme, selected }) => ({
-  width: '100%',
-  [`.${cardHeaderClasses.title}`]: {
-    color: selected ? theme.palette.text.primary : theme.palette.text.secondary,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    fontWeight: selected ? 600 : 500,
-    width: selected ? 224 : 254,
-    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-      width: selected ? 192 : 224,
-    },
-  },
-  [`.${cardHeaderClasses.subheader}`]: {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    width: selected ? 224 : 254,
-    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-      width: selected ? 192 : 224,
-    },
-  },
-  [`.${cardHeaderClasses.action}`]: {
-    marginRight: 0,
-  },
-  [`.${cardHeaderClasses.action} > button`]: {
-    fontSize: 16,
-  },
-}));