@lifi/widget 3.7.0 → 3.8.0-beta.0

package/components/Token/Token.style.tsx

@@ -1,30 +0,0 @@
-import { Box, Typography, alpha, styled } from '@mui/material';
-
-export const TextSecondaryContainer = styled(Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  flexWrap: 'wrap',
-  flex: 1,
-}));
-
-export const TextSecondary = styled(Typography, {
-  shouldForwardProp: (prop: string) => !['dot'].includes(prop),
-})<{ dot?: boolean }>(({ theme, dot }) => ({
-  fontSize: 12,
-  lineHeight: 1,
-  fontWeight: 500,
-  color: dot
-    ? alpha(theme.palette.text.secondary, 0.56)
-    : theme.palette.text.secondary,
-  whiteSpace: 'nowrap',
-}));
-
-export const TokenDivider = styled(Box)(({ theme }) => ({
-  height: 16,
-  borderLeftWidth: 2,
-  borderLeftStyle: 'solid',
-  borderColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800],
-}));

package/components/Token/Token.tsx

@@ -1,248 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import type { LiFiStep, TokenAmount } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-import { Box, Grow, Skeleton, Tooltip } from '@mui/material';
-import type { FC, PropsWithChildren, ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useChain } from '../../hooks/useChain.js';
-import { useToken } from '../../hooks/useToken.js';
-import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
-import { AvatarBadgedSkeleton } from '../Avatar/Avatar.js';
-import { TokenAvatar } from '../Avatar/TokenAvatar.js';
-import { SmallAvatar } from '../SmallAvatar.js';
-import { TextFitter } from '../TextFitter/TextFitter.js';
-import { TextSecondary, TextSecondaryContainer } from './Token.style.js';
-
-interface TokenProps {
-  token: TokenAmount;
-  impactToken?: TokenAmount;
-  enableImpactTokenTooltip?: boolean;
-  step?: LiFiStep;
-  stepVisible?: boolean;
-  disableDescription?: boolean;
-  isLoading?: boolean;
-}
-
-export const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {
-  if (!token.priceUSD || !token.logoURI) {
-    return <TokenFallback token={token} {...other} />;
-  }
-  return <TokenBase token={token} {...other} />;
-};
-
-export const TokenFallback: FC<TokenProps & BoxProps> = ({
-  token,
-  isLoading,
-  ...other
-}) => {
-  const { token: chainToken, isLoading: isLoadingToken } = useToken(
-    token.chainId,
-    token.address,
-  );
-
-  return (
-    <TokenBase
-      token={{ ...token, ...chainToken } as TokenAmount}
-      isLoading={isLoading || isLoadingToken}
-      {...other}
-    />
-  );
-};
-
-export const TokenBase: FC<TokenProps & BoxProps> = ({
-  token,
-  impactToken,
-  enableImpactTokenTooltip,
-  step,
-  stepVisible,
-  disableDescription,
-  isLoading,
-  ...other
-}) => {
-  const { t, i18n } = useTranslation();
-  const { chain } = useChain(token?.chainId);
-
-  if (isLoading) {
-    return (
-      <TokenSkeleton
-        token={token}
-        step={step}
-        disableDescription={disableDescription}
-        {...other}
-      />
-    );
-  }
-
-  const tokenAmount = formatTokenAmount(token.amount, token.decimals);
-  const tokenPrice = formatTokenPrice(tokenAmount, token.priceUSD);
-
-  let priceImpact;
-  let priceImpactPercent;
-  if (impactToken) {
-    const impactTokenAmount = formatTokenAmount(
-      impactToken.amount,
-      impactToken.decimals,
-    );
-    const impactTokenPrice =
-      formatTokenPrice(impactTokenAmount, impactToken.priceUSD) || 0.01;
-
-    priceImpact = tokenPrice / impactTokenPrice - 1;
-    priceImpactPercent = priceImpact * 100;
-  }
-
-  const tokenOnChain = !disableDescription ? (
-    <TextSecondary>
-      {t(`main.tokenOnChain`, {
-        tokenSymbol: token.symbol,
-        chainName: chain?.name,
-      })}
-    </TextSecondary>
-  ) : null;
-
-  return (
-    <Box flex={1} display="flex" alignItems="center" {...other}>
-      <TokenAvatar
-        token={token}
-        chain={chain}
-        isLoading={isLoading}
-        sx={{ marginRight: 2 }}
-      />
-      <Box flex={1}>
-        <Box mb={0.5} height={24} display="flex" alignItems="center">
-          <TextFitter
-            height={30}
-            textStyle={{
-              fontWeight: 700,
-            }}
-          >
-            {t('format.number', {
-              value: tokenAmount,
-            })}
-          </TextFitter>
-        </Box>
-        <TextSecondaryContainer component="span">
-          <TextSecondary>
-            {t(`format.currency`, {
-              value: tokenPrice,
-            })}
-          </TextSecondary>
-          {impactToken ? (
-            <TextSecondary px={0.5} dot>
-              &#x2022;
-            </TextSecondary>
-          ) : null}
-          {impactToken ? (
-            enableImpactTokenTooltip ? (
-              <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
-                <TextSecondary>
-                  {t('format.percent', { value: priceImpact })}
-                </TextSecondary>
-              </Tooltip>
-            ) : (
-              <TextSecondary
-                title={priceImpactPercent?.toLocaleString(i18n.language, {
-                  maximumFractionDigits: 9,
-                })}
-              >
-                {t('format.percent', { value: priceImpact })}
-              </TextSecondary>
-            )
-          ) : null}
-          {!disableDescription ? (
-            <TextSecondary px={0.5} dot>
-              &#x2022;
-            </TextSecondary>
-          ) : null}
-          {step ? (
-            <TokenStep
-              step={step}
-              stepVisible={stepVisible}
-              disableDescription={disableDescription}
-            >
-              {tokenOnChain}
-            </TokenStep>
-          ) : (
-            tokenOnChain
-          )}
-        </TextSecondaryContainer>
-      </Box>
-    </Box>
-  );
-};
-
-const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
-  step,
-  stepVisible,
-  disableDescription,
-  children,
-}) => {
-  return (
-    <Box flex={1} position="relative" overflow="hidden" height={16}>
-      <Grow
-        in={!stepVisible && !disableDescription}
-        style={{
-          position: 'absolute',
-        }}
-        appear={false}
-        timeout={225}
-      >
-        <Box display="flex" alignItems="center" height={16}>
-          {children as ReactElement}
-        </Box>
-      </Grow>
-      <Grow
-        in={stepVisible}
-        style={{
-          position: 'absolute',
-        }}
-        appear={false}
-        timeout={225}
-      >
-        <Box display="flex" alignItems="center" height={16}>
-          <Box mr={0.75} height={16}>
-            <SmallAvatar
-              src={step?.toolDetails.logoURI}
-              alt={step?.toolDetails.name}
-            >
-              {step?.toolDetails.name[0]}
-            </SmallAvatar>
-          </Box>
-          <TextSecondary>{step?.toolDetails.name}</TextSecondary>
-        </Box>
-      </Grow>
-    </Box>
-  );
-};
-
-export const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({
-  step,
-  disableDescription,
-  ...other
-}) => {
-  return (
-    <Box flex={1} {...other}>
-      <Box display="flex" flex={1} alignItems="center">
-        <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />
-        <Box flex={1}>
-          <Skeleton width={112} height={24} variant="text" />
-          <TextSecondaryContainer component="span">
-            <Skeleton
-              width={48}
-              height={12}
-              variant="rounded"
-              sx={{ marginTop: 0.5 }}
-            />
-            {!step && !disableDescription ? (
-              <Skeleton
-                width={96}
-                height={12}
-                variant="rounded"
-                sx={{ marginTop: 0.5, marginLeft: 1.5 }}
-              />
-            ) : null}
-          </TextSecondaryContainer>
-        </Box>
-      </Box>
-    </Box>
-  );
-};

package/components/TokenList/TokenList.style.tsx

@@ -1,30 +0,0 @@
-import type { IconButtonProps, LinkProps } from '@mui/material';
-import { IconButton as MuiIconButton, styled } from '@mui/material';
-import { getContrastAlphaColor } from '../../utils/colors.js';
-import { ListItem as ListItemBase } from '../ListItem/ListItem.js';
-
-export const ListItem = styled(ListItemBase)(({ theme }) => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-}));
-
-export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
-  ({ theme }) => ({
-    lineHeight: 1,
-    fontSize: 12,
-    fontWeight: 400,
-    padding: theme.spacing(0.375, 0.375),
-    margin: theme.spacing(0, 0, 0, 0.25),
-    color: 'inherit',
-    backgroundColor: 'unset',
-    minWidth: 'unset',
-    borderRadius: theme.shape.borderRadiusTertiary,
-    '&:hover': {
-      backgroundColor: getContrastAlphaColor(theme, 0.04),
-    },
-    svg: {
-      fontSize: 14,
-    },
-  }),
-);

package/components/TokenList/TokenList.tsx

@@ -1,101 +0,0 @@
-import { Box } from '@mui/material';
-import type { FC } from 'react';
-import { useAccount } from '../../hooks/useAccount.js';
-import { useChain } from '../../hooks/useChain.js';
-import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js';
-import { useTokenBalances } from '../../hooks/useTokenBalances.js';
-import { useTokenSearch } from '../../hooks/useTokenSearch.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import type { TokenAmount } from '../../types/token.js';
-import { TokenNotFound } from './TokenNotFound.js';
-import { VirtualizedTokenList } from './VirtualizedTokenList.js';
-import type { TokenListProps } from './types.js';
-import { useTokenSelect } from './useTokenSelect.js';
-import { filteredTokensComparator } from './utils.js';
-
-export const TokenList: FC<TokenListProps> = ({
-  formType,
-  parentRef,
-  height,
-  onClick,
-}) => {
-  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
-  const [tokenSearchFilter]: string[] = useDebouncedWatch(
-    320,
-    'tokenSearchFilter',
-  );
-
-  const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
-  const { account } = useAccount({ chainType: chain?.chainType });
-
-  const {
-    tokens: chainTokens,
-    tokensWithBalance,
-    isLoading: isTokensLoading,
-    isBalanceLoading,
-    featuredTokens,
-    popularTokens,
-  } = useTokenBalances(selectedChainId);
-
-  let filteredTokens = (tokensWithBalance ??
-    chainTokens ??
-    []) as TokenAmount[];
-  const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '');
-  const searchFilter = normalizedSearchFilter?.toUpperCase() ?? '';
-
-  filteredTokens = tokenSearchFilter
-    ? filteredTokens
-        .filter(
-          (token) =>
-            token.name?.toUpperCase().includes(searchFilter) ||
-            token.symbol.toUpperCase().includes(searchFilter) ||
-            token.address.toUpperCase().includes(searchFilter),
-        )
-        .sort(filteredTokensComparator(searchFilter))
-    : filteredTokens;
-
-  const tokenSearchEnabled =
-    !isTokensLoading &&
-    !filteredTokens.length &&
-    !!tokenSearchFilter &&
-    !!selectedChainId;
-
-  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(selectedChainId, normalizedSearchFilter, tokenSearchEnabled);
-
-  const isLoading =
-    isTokensLoading ||
-    isChainLoading ||
-    (tokenSearchEnabled && isSearchedTokenLoading);
-
-  const tokens = filteredTokens.length
-    ? filteredTokens
-    : searchedToken
-      ? [searchedToken]
-      : filteredTokens;
-
-  const handleTokenClick = useTokenSelect(formType, onClick);
-  const showCategories =
-    Boolean(featuredTokens?.length || popularTokens?.length) &&
-    !tokenSearchFilter;
-
-  return (
-    <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
-      {!tokens.length && !isLoading ? (
-        <TokenNotFound formType={formType} />
-      ) : null}
-      <VirtualizedTokenList
-        account={account}
-        tokens={tokens}
-        scrollElementRef={parentRef}
-        chainId={selectedChainId}
-        chain={chain}
-        isLoading={isLoading}
-        isBalanceLoading={isBalanceLoading}
-        showCategories={showCategories}
-        onClick={handleTokenClick}
-      />
-    </Box>
-  );
-};

package/components/TokenList/TokenListItem.tsx

@@ -1,215 +0,0 @@
-import { OpenInNewRounded } from '@mui/icons-material';
-import {
-  Avatar,
-  Box,
-  Link,
-  ListItemAvatar,
-  ListItemText,
-  Skeleton,
-  Slide,
-  Typography,
-} from '@mui/material';
-import type { MouseEventHandler } from 'react';
-import { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { formatUnits } from 'viem';
-import { useExplorer } from '../../hooks/useExplorer.js';
-import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
-import { shortenAddress } from '../../utils/wallet.js';
-import { ListItemButton } from '../ListItem/ListItemButton.js';
-import { IconButton, ListItem } from './TokenList.style.js';
-import type { TokenListItemButtonProps, TokenListItemProps } from './types.js';
-
-export const TokenListItem: React.FC<TokenListItemProps> = ({
-  onClick,
-  size,
-  start,
-  token,
-  chain,
-  showBalance,
-  isBalanceLoading,
-  startAdornment,
-  endAdornment,
-}) => {
-  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
-    e.stopPropagation();
-    onClick?.(token.address);
-  };
-  return (
-    <ListItem
-      style={{
-        height: `${size}px`,
-        transform: `translateY(${start}px)`,
-      }}
-    >
-      {startAdornment}
-      <TokenListItemButton
-        token={token}
-        chain={chain}
-        showBalance={showBalance}
-        isBalanceLoading={isBalanceLoading}
-        onClick={handleClick}
-      />
-      {endAdornment}
-    </ListItem>
-  );
-};
-
-export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
-  onClick,
-  token,
-  chain,
-  showBalance,
-  isBalanceLoading,
-}) => {
-  const { t } = useTranslation();
-  const { getAddressLink } = useExplorer();
-
-  const tokenPrice = token.amount
-    ? formatTokenPrice(
-        formatUnits(token.amount, token.decimals),
-        token.priceUSD,
-      )
-    : undefined;
-  const container = useRef(null);
-  const timeoutId = useRef<ReturnType<typeof setTimeout>>();
-  const [showAddress, setShowAddress] = useState(false);
-
-  const onMouseEnter = () => {
-    timeoutId.current = setTimeout(() => setShowAddress(true), 350);
-  };
-
-  const onMouseLeave = () => {
-    clearTimeout(timeoutId.current);
-    if (showAddress) {
-      setShowAddress(false);
-    }
-  };
-
-  return (
-    <ListItemButton
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      dense
-    >
-      <ListItemAvatar>
-        <Avatar src={token.logoURI} alt={token.symbol}>
-          {token.symbol?.[0]}
-        </Avatar>
-      </ListItemAvatar>
-      <ListItemText
-        primary={token.symbol}
-        secondaryTypographyProps={{
-          component: 'div',
-        }}
-        secondary={
-          <Box position="relative" height={20} ref={container}>
-            <Slide
-              direction="down"
-              in={!showAddress}
-              container={container.current}
-              style={{
-                position: 'absolute',
-              }}
-              appear={false}
-            >
-              <Box pt={0.25}>{token.name}</Box>
-            </Slide>
-            <Slide
-              direction="up"
-              in={showAddress}
-              container={container.current}
-              style={{
-                position: 'absolute',
-              }}
-              appear={false}
-              mountOnEnter
-            >
-              <Box display="flex">
-                <Box display="flex" alignItems="center" pt={0.125}>
-                  {shortenAddress(token.address)}
-                </Box>
-                <IconButton
-                  size="small"
-                  LinkComponent={Link}
-                  href={getAddressLink(token.address, chain)}
-                  target="_blank"
-                  rel="nofollow noreferrer"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <OpenInNewRounded />
-                </IconButton>
-              </Box>
-            </Slide>
-          </Box>
-        }
-      />
-      {showBalance ? (
-        isBalanceLoading ? (
-          <TokenAmountSkeleton />
-        ) : (
-          <Box sx={{ textAlign: 'right' }}>
-            {token.amount ? (
-              <Typography fontWeight={600} noWrap>
-                {t('format.number', {
-                  value: formatTokenAmount(token.amount, token.decimals),
-                })}
-              </Typography>
-            ) : null}
-            {tokenPrice ? (
-              <Typography
-                fontWeight={500}
-                fontSize={12}
-                color="text.secondary"
-                data-price={token.priceUSD}
-              >
-                {t(`format.currency`, {
-                  value: tokenPrice,
-                })}
-              </Typography>
-            ) : null}
-          </Box>
-        )
-      ) : null}
-    </ListItemButton>
-  );
-};
-
-export const TokenListItemSkeleton = () => {
-  return (
-    <ListItem
-      secondaryAction={<TokenAmountSkeleton />}
-      disablePadding
-      sx={{ position: 'relative', flexDirection: 'row', alignItems: 'center' }}
-    >
-      <ListItemAvatar>
-        <Skeleton
-          variant="circular"
-          width={40}
-          height={40}
-          sx={{ marginLeft: 1.5, marginRight: 2 }}
-        />
-      </ListItemAvatar>
-      <ListItemText
-        primary={<Skeleton variant="text" width={56} height={24} />}
-        secondary={<Skeleton variant="text" width={96} height={16} />}
-      />
-    </ListItem>
-  );
-};
-
-export const TokenAmountSkeleton: React.FC = () => {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'flex-end',
-      }}
-    >
-      <Skeleton variant="text" width={56} height={24} />
-      <Skeleton variant="text" width={48} height={16} />
-    </Box>
-  );
-};

package/components/TokenList/TokenNotFound.tsx

@@ -1,20 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import type { FormTypeProps } from '../../stores/form/types.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { SearchNotFound } from '../Search/SearchNotFound.js';
-
-export const TokenNotFound: React.FC<FormTypeProps> = ({ formType }) => {
-  const { t } = useTranslation();
-  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
-  const { getChainById } = useAvailableChains();
-
-  return (
-    <SearchNotFound
-      message={t('info.message.emptyTokenList', {
-        chainName: getChainById(selectedChainId)?.name,
-      })}
-    />
-  );
-};