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

package/src/components/Token/Token.tsx

@@ -1,143 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import type { LiFiStep, TokenAmount } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-import { Box, Skeleton } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useChain, useToken } from '../../hooks';
-import { formatTokenAmount, formatTokenPrice } from '../../utils';
-import { SmallAvatar } from '../SmallAvatar';
-import { TextFitter } from '../TextFitter';
-import { TokenAvatar } from '../TokenAvatar';
-import { TextSecondary, TextSecondaryContainer } from './Token.style';
-
-interface TokenProps {
-  token: TokenAmount;
-  connected?: boolean;
-  step?: LiFiStep;
-  disableDescription?: boolean;
-  isLoading?: boolean;
-}
-
-export const Token: React.FC<TokenProps & BoxProps> = ({ token, ...other }) => {
-  if (!token.priceUSD || !token.logoURI) {
-    return <TokenFallback token={token} {...other} />;
-  }
-  return <TokenBase token={token} {...other} />;
-};
-
-export const TokenFallback: React.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: React.FC<TokenProps & BoxProps> = ({
-  token,
-  connected,
-  step,
-  disableDescription,
-  isLoading,
-  ...other
-}) => {
-  const { t } = useTranslation();
-  const { chain } = useChain(token?.chainId);
-  const formattedTokenAmount = formatTokenAmount(token.amount, token.decimals);
-  const formattedTokenPrice = formatTokenPrice(
-    formattedTokenAmount,
-    token.priceUSD,
-  );
-  return (
-    <Box flex={1} {...other}>
-      <Box display="flex" flex={1} alignItems="center">
-        <TokenAvatar
-          token={token}
-          chain={chain}
-          isLoading={isLoading}
-          sx={{ marginRight: 2 }}
-        />
-        {isLoading ? (
-          <Skeleton width={112} height={32} variant="text" />
-        ) : (
-          <TextFitter
-            height={30}
-            textStyle={{
-              fontWeight: 700,
-            }}
-          >
-            {t('format.number', {
-              value: formattedTokenAmount,
-            })}
-          </TextFitter>
-        )}
-      </Box>
-      <TextSecondaryContainer connected={connected} component="span">
-        {isLoading ? (
-          <Skeleton
-            width={48}
-            height={12}
-            variant="rounded"
-            sx={{ marginTop: 0.5 }}
-          />
-        ) : (
-          <TextSecondary connected={connected}>
-            {t(`format.currency`, {
-              value: formattedTokenPrice,
-            })}
-          </TextSecondary>
-        )}
-        {!disableDescription ? (
-          <TextSecondary connected={connected} px={0.5} dot>
-            &#x2022;
-          </TextSecondary>
-        ) : null}
-        {!step && !disableDescription ? (
-          isLoading ? (
-            <Skeleton
-              width={96}
-              height={12}
-              variant="rounded"
-              sx={{ marginTop: 0.5 }}
-            />
-          ) : (
-            <TextSecondary connected={connected}>
-              {t(`main.tokenOnChain`, {
-                tokenSymbol: token.symbol,
-                chainName: chain?.name,
-              })}
-            </TextSecondary>
-          )
-        ) : null}
-        {step ? (
-          <Box display="flex" alignItems="flex-end" height={12} mt={0.5}>
-            <Box pr={0.75}>
-              <SmallAvatar
-                src={step.toolDetails.logoURI}
-                alt={step.toolDetails.name}
-                sx={{
-                  border: 0,
-                  marginBottom: -0.25,
-                }}
-              >
-                {step.toolDetails.name[0]}
-              </SmallAvatar>
-            </Box>
-            <TextSecondary connected>{step.toolDetails.name}</TextSecondary>
-          </Box>
-        ) : null}
-      </TextSecondaryContainer>
-    </Box>
-  );
-};

package/src/components/TokenAvatar/TokenAvatar.style.tsx

@@ -1,31 +0,0 @@
-import { AvatarGroup, Box } from '@mui/material';
-import { avatarClasses } from '@mui/material/Avatar';
-import { badgeClasses } from '@mui/material/Badge';
-import { styled } from '@mui/material/styles';
-
-export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
-  [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {
-    marginLeft: theme.spacing(-1),
-    boxSizing: 'border-box',
-  },
-  [`& .${badgeClasses.root}:last-child`]: {
-    marginLeft: theme.spacing(1),
-  },
-}));
-
-export const AvatarDefault = styled(Box)(({ theme }) => ({
-  background:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800],
-  borderRadius: '50%',
-}));
-
-export const AvatarDefaultBadge = styled(Box)(({ theme }) => ({
-  background:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800],
-  border: `2px solid ${theme.palette.background.paper}`,
-  borderRadius: '50%',
-}));

package/src/components/TokenAvatar/TokenAvatar.tsx

@@ -1,92 +0,0 @@
-import type { Chain, StaticToken } from '@lifi/sdk';
-import type { SxProps, Theme } from '@mui/material';
-import { Avatar, Badge, Skeleton } from '@mui/material';
-import { useChain, useToken } from '../../hooks';
-import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar';
-import { AvatarDefault, AvatarDefaultBadge } from './TokenAvatar.style';
-
-export const TokenAvatarFallback: React.FC<{
-  token?: StaticToken;
-  isLoading?: boolean;
-  sx?: SxProps<Theme>;
-}> = ({ token, isLoading, sx }) => {
-  const { chain } = useChain(token?.chainId);
-  const { token: chainToken, isLoading: isLoadingToken } = useToken(
-    token?.chainId,
-    token?.address,
-  );
-  return (
-    <TokenAvatarBase
-      token={chainToken ?? token}
-      isLoading={isLoading || isLoadingToken}
-      chain={chain}
-      sx={sx}
-    />
-  );
-};
-
-export const TokenAvatarBase: React.FC<{
-  token?: StaticToken;
-  chain?: Chain;
-  isLoading?: boolean;
-  sx?: SxProps<Theme>;
-}> = ({ token, chain, isLoading, sx }) => {
-  return (
-    <Badge
-      overlap="circular"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={
-        chain && !isLoading ? (
-          <SmallAvatar src={chain.logoURI} alt={chain.name}>
-            {chain.name[0]}
-          </SmallAvatar>
-        ) : (
-          <SmallAvatarSkeleton />
-        )
-      }
-      sx={sx}
-    >
-      {isLoading ? (
-        <Skeleton width={32} height={32} variant="circular" />
-      ) : (
-        <Avatar src={token?.logoURI} alt={token?.symbol}>
-          {token?.symbol?.[0]}
-        </Avatar>
-      )}
-    </Badge>
-  );
-};
-
-export const TokenAvatar: React.FC<{
-  token?: StaticToken;
-  chain?: Chain;
-  isLoading?: boolean;
-  sx?: SxProps<Theme>;
-}> = ({ token, chain, isLoading, sx }) => {
-  if (!chain || !token?.logoURI) {
-    return <TokenAvatarFallback token={token} isLoading={isLoading} sx={sx} />;
-  }
-  return (
-    <TokenAvatarBase
-      token={token}
-      chain={chain}
-      isLoading={isLoading}
-      sx={sx}
-    />
-  );
-};
-
-export const TokenAvatarDefault: React.FC<{
-  sx?: SxProps<Theme>;
-}> = ({ sx }) => {
-  return (
-    <Badge
-      overlap="circular"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<AvatarDefaultBadge width={16} height={16} />}
-      sx={sx}
-    >
-      <AvatarDefault width={32} height={32} />
-    </Badge>
-  );
-};

package/src/components/TokenList/TokenList.style.tsx

@@ -1,61 +0,0 @@
-import type { StyledComponent } from '@emotion/styled';
-import type { IconButtonProps, LinkProps } from '@mui/material';
-import {
-  IconButton as MuiIconButton,
-  ListItem as MuiListItem,
-} from '@mui/material';
-import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
-import { listItemTextClasses } from '@mui/material/ListItemText';
-import { alpha, styled } from '@mui/material/styles';
-import { ListItemButton as ListItemButtonBase } from '../ListItemButton';
-
-export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
-  paddingLeft: theme.spacing(1.5),
-  paddingRight: theme.spacing(1.5),
-  height: 64,
-  width: '100%',
-}));
-
-export const ListItem = styled(MuiListItem)(({ theme }) => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  height: 64,
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  padding: theme.spacing(0, 1.5),
-  [`.${listItemSecondaryActionClasses.root}`]: {
-    right: theme.spacing(3),
-  },
-  [`& .${listItemTextClasses.primary}`]: {
-    height: 22,
-  },
-  [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-}));
-
-export const IconButton: StyledComponent<IconButtonProps & LinkProps> = styled(
-  MuiIconButton,
-)<IconButtonProps & LinkProps>(({ theme }) => ({
-  lineHeight: 1,
-  fontSize: '0.75rem',
-  fontWeight: 400,
-  padding: theme.spacing(0.375, 0.375),
-  marginLeft: theme.spacing(0.25),
-  color: 'inherit',
-  backgroundColor: 'unset',
-  minWidth: 'unset',
-  borderRadius: '50%',
-  '&:hover': {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.common.black, 0.04)
-        : alpha(theme.palette.common.white, 0.08),
-  },
-  svg: {
-    fontSize: '0.875rem',
-  },
-}));

package/src/components/TokenList/TokenList.tsx

@@ -1,98 +0,0 @@
-import { Box } from '@mui/material';
-import type { FC } from 'react';
-import { useRef } from 'react';
-import { useWatch } from 'react-hook-form';
-import {
-  useAccount,
-  useChain,
-  useDebouncedWatch,
-  useTokenBalances,
-  useTokenSearch,
-} from '../../hooks';
-import { FormKey, FormKeyHelper } from '../../providers';
-import type { TokenAmount } from '../../types';
-import { TokenNotFound } from './TokenNotFound';
-import { VirtualizedTokenList } from './VirtualizedTokenList';
-import type { TokenListProps } from './types';
-import { useTokenSelect } from './useTokenSelect';
-
-export const TokenList: FC<TokenListProps> = ({
-  formType,
-  height,
-  onClick,
-}) => {
-  const parentRef = useRef<HTMLUListElement | null>(null);
-  const { account } = useAccount();
-  const [selectedChainId] = useWatch({
-    name: [FormKeyHelper.getChainKey(formType)],
-  });
-  const [tokenSearchFilter]: string[] = useDebouncedWatch(
-    [FormKey.TokenSearchFilter],
-    320,
-  );
-
-  const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
-
-  const {
-    tokens: chainTokens,
-    tokensWithBalance,
-    isLoading: isTokensLoading,
-    isBalanceLoading,
-    featuredTokens,
-  } = useTokenBalances(selectedChainId);
-
-  let filteredTokens = (tokensWithBalance ??
-    chainTokens ??
-    []) as TokenAmount[];
-  const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
-  filteredTokens = tokenSearchFilter
-    ? filteredTokens.filter(
-        (token) =>
-          token.name.toUpperCase().includes(searchFilter) ||
-          token.symbol.toUpperCase().includes(searchFilter) ||
-          token.address.toUpperCase().includes(searchFilter),
-      )
-    : filteredTokens;
-
-  const tokenSearchEnabled =
-    !isTokensLoading &&
-    !filteredTokens.length &&
-    !!tokenSearchFilter &&
-    !!selectedChainId;
-
-  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
-
-  const isLoading =
-    isTokensLoading ||
-    isChainLoading ||
-    (tokenSearchEnabled && isSearchedTokenLoading);
-
-  const tokens = filteredTokens.length
-    ? filteredTokens
-    : searchedToken
-      ? [searchedToken]
-      : filteredTokens;
-
-  const handleTokenClick = useTokenSelect(formType, onClick);
-
-  return (
-    <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
-      {!tokens.length && !isLoading ? (
-        <TokenNotFound formType={formType} />
-      ) : null}
-      <VirtualizedTokenList
-        tokens={tokens}
-        featuredTokensLength={featuredTokens?.length}
-        scrollElementRef={parentRef}
-        chainId={selectedChainId}
-        chain={chain}
-        isLoading={isLoading}
-        isBalanceLoading={isBalanceLoading}
-        showBalance={account.isConnected}
-        showFeatured={!tokenSearchFilter}
-        onClick={handleTokenClick}
-      />
-    </Box>
-  );
-};

package/src/components/TokenList/TokenListItem.tsx

@@ -1,211 +0,0 @@
-import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
-import {
-  Avatar,
-  Box,
-  Link,
-  ListItemAvatar,
-  ListItemText,
-  Skeleton,
-  Slide,
-  Typography,
-} from '@mui/material';
-import { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { formatUnits } from 'viem';
-import {
-  formatTokenAmount,
-  formatTokenPrice,
-  shortenAddress,
-} from '../../utils';
-import { IconButton, ListItem, ListItemButton } from './TokenList.style';
-import type { TokenListItemButtonProps, TokenListItemProps } from './types';
-
-export const TokenListItem: React.FC<TokenListItemProps> = ({
-  onClick,
-  size,
-  start,
-  token,
-  chain,
-  showBalance,
-  isBalanceLoading,
-  startAdornment,
-  endAdornment,
-}) => {
-  const handleClick = () => onClick?.(token.address);
-  return (
-    <ListItem
-      disablePadding
-      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 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={`${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`}
-                  target="_blank"
-                  rel="nofollow noreferrer"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <OpenInNewIcon />
-                </IconButton>
-              </Box>
-            </Slide>
-          </Box>
-        }
-      />
-      {showBalance ? (
-        isBalanceLoading ? (
-          <TokenAmountSkeleton />
-        ) : (
-          <Box sx={{ textAlign: 'right' }}>
-            {token.amount ? (
-              <Typography variant="body1" noWrap>
-                {t('format.number', {
-                  value: formatTokenAmount(token.amount, token.decimals),
-                })}
-              </Typography>
-            ) : null}
-            {tokenPrice ? (
-              <Typography
-                fontWeight={400}
-                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={32}
-          height={32}
-          sx={{ marginLeft: 1.5, marginRight: 2 }}
-        />
-      </ListItemAvatar>
-      <ListItemText
-        primary={<Skeleton variant="text" width={48} height={20} />}
-        secondary={<Skeleton variant="text" width={96} height={20} />}
-      />
-    </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={18} />
-    </Box>
-  );
-};

package/src/components/TokenList/TokenNotFound.tsx

@@ -1,42 +0,0 @@
-import SearchOffIcon from '@mui/icons-material/SearchOff';
-import { Box, Typography } from '@mui/material';
-import { useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useAvailableChains } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
-
-export const TokenNotFound: React.FC<FormTypeProps> = ({ formType }) => {
-  const { t } = useTranslation();
-  const [selectedChainId] = useWatch({
-    name: [FormKeyHelper.getChainKey(formType)],
-  });
-  const { getChainById } = useAvailableChains();
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'column',
-        flex: 1,
-        padding: 3,
-      }}
-    >
-      <Typography fontSize={48} lineHeight={1}>
-        <SearchOffIcon fontSize="inherit" />
-      </Typography>
-      <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
-        px={2}
-      >
-        {t('info.message.emptyTokenList', {
-          chainName: getChainById(selectedChainId)?.name,
-        })}
-      </Typography>
-    </Box>
-  );
-};