@lifi/widget 3.7.0 → 3.8.0-beta.1

package/components/TokenList/VirtualizedTokenList.tsx

@@ -1,150 +0,0 @@
-import { List, Typography } from '@mui/material';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import type { FC } from 'react';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { TokenAmount } from '../../types/token.js';
-import { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js';
-import type { VirtualizedTokenListProps } from './types.js';
-
-export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
-  account,
-  tokens,
-  scrollElementRef,
-  chainId,
-  chain,
-  isLoading,
-  isBalanceLoading,
-  showCategories,
-  onClick,
-}) => {
-  const { t } = useTranslation();
-
-  const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
-    count: tokens.length,
-    overscan: 10,
-    paddingEnd: 12,
-    getScrollElement: () => scrollElementRef.current,
-    estimateSize: (index) => {
-      // Base size for TokenListItem
-      let size = 64;
-      // Early return if categories are not shown
-      if (!showCategories) {
-        return size;
-      }
-
-      const currentToken = tokens[index];
-      const previousToken = tokens[index - 1];
-
-      // Adjust size for the first featured token
-      if (currentToken.featured && index === 0) {
-        size += 24;
-      }
-
-      // Adjust size based on changes between the current and previous tokens
-      const isCategoryChanged =
-        (previousToken?.amount && !currentToken.amount) ||
-        (previousToken?.featured && !currentToken.featured) ||
-        (previousToken?.popular && !currentToken.popular);
-
-      if (isCategoryChanged) {
-        size += 32;
-      }
-
-      return size;
-    },
-    getItemKey: (index) => `${tokens[index].address}-${index}`,
-  });
-
-  useEffect(() => {
-    // Scroll to the top of the list when switching the chains
-    if (getVirtualItems().length) {
-      scrollToIndex(0, { align: 'start' });
-    }
-  }, [scrollToIndex, chainId, getVirtualItems]);
-
-  if (isLoading) {
-    return (
-      <List disablePadding>
-        {Array.from({ length: 3 }).map((_, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <TokenListItemSkeleton key={index} />
-        ))}
-      </List>
-    );
-  }
-
-  return (
-    <List style={{ height: getTotalSize() }} disablePadding>
-      {getVirtualItems().map((item) => {
-        const currentToken = tokens[item.index];
-        const previousToken: TokenAmount | undefined = tokens[item.index - 1];
-
-        const isFirstFeaturedToken = currentToken.featured && item.index === 0;
-
-        const isTransitionFromFeaturedTokens =
-          previousToken?.featured && !currentToken.featured;
-
-        const isTransitionFromMyTokens =
-          previousToken?.amount && !currentToken.amount;
-
-        const isTransitionToMyTokens =
-          isTransitionFromFeaturedTokens && currentToken.amount;
-
-        const isTransitionToPopularTokens =
-          (isTransitionFromFeaturedTokens || isTransitionFromMyTokens) &&
-          currentToken.popular;
-
-        const shouldShowAllTokensCategory =
-          isTransitionFromMyTokens ||
-          isTransitionFromFeaturedTokens ||
-          (previousToken?.popular && !currentToken.popular);
-
-        const startAdornmentLabel = showCategories
-          ? (() => {
-              if (isFirstFeaturedToken) {
-                return t('main.featuredTokens');
-              }
-              if (isTransitionToMyTokens) {
-                return t('main.myTokens');
-              }
-              if (isTransitionToPopularTokens) {
-                return t('main.popularTokens');
-              }
-              if (shouldShowAllTokensCategory) {
-                return t('main.allTokens');
-              }
-              return null;
-            })()
-          : null;
-
-        return (
-          <TokenListItem
-            key={item.key}
-            onClick={onClick}
-            size={item.size}
-            start={item.start}
-            token={currentToken}
-            chain={chain}
-            isBalanceLoading={isBalanceLoading}
-            showBalance={account.isConnected}
-            startAdornment={
-              startAdornmentLabel ? (
-                <Typography
-                  fontSize={14}
-                  fontWeight={600}
-                  lineHeight="16px"
-                  px={1.5}
-                  pt={isFirstFeaturedToken ? 0 : 1}
-                  pb={1}
-                >
-                  {startAdornmentLabel}
-                </Typography>
-              ) : null
-            }
-          />
-        );
-      })}
-    </List>
-  );
-};

package/components/TokenList/types.ts

@@ -1,47 +0,0 @@
-import type { ExtendedChain } from '@lifi/sdk';
-import type { MouseEventHandler, MutableRefObject } from 'react';
-import type { Account } from '../../hooks/useAccount.js';
-import type { FormType } from '../../stores/form/types.js';
-import type { TokenAmount } from '../../types/token.js';
-
-export interface TokenListProps {
-  parentRef: MutableRefObject<HTMLElement | null>;
-  formType: FormType;
-  height: number;
-  onClick?(): void;
-}
-
-export interface VirtualizedTokenListProps {
-  account: Account;
-  tokens: TokenAmount[];
-  scrollElementRef: MutableRefObject<HTMLElement | null>;
-  isLoading: boolean;
-  isBalanceLoading: boolean;
-  chainId?: number;
-  chain?: ExtendedChain;
-  showCategories?: boolean;
-  onClick(tokenAddress: string): void;
-}
-
-export interface TokenListItemBaseProps {
-  onClick?(tokenAddress: string): void;
-  size: number;
-  start: number;
-}
-
-export interface TokenListItemProps extends TokenListItemBaseProps {
-  showBalance?: boolean;
-  token: TokenAmount;
-  chain?: ExtendedChain;
-  isBalanceLoading?: boolean;
-  startAdornment?: React.ReactNode;
-  endAdornment?: React.ReactNode;
-}
-
-export interface TokenListItemButtonProps {
-  onClick?: MouseEventHandler<HTMLDivElement>;
-  showBalance?: boolean;
-  token: TokenAmount;
-  chain?: ExtendedChain;
-  isBalanceLoading?: boolean;
-}

package/components/TokenList/useTokenSelect.ts

@@ -1,91 +0,0 @@
-import { useCallback } from 'react';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.js';
-import type { FormType } from '../../stores/form/types.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldController } from '../../stores/form/useFieldController.js';
-import { WidgetEvent } from '../../types/events.js';
-import type { DisabledUI } from '../../types/widget.js';
-
-export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
-  const { subvariant, disabledUI } = useWidgetConfig();
-  const emitter = useWidgetEvents();
-  const { setFieldValue, getFieldValues } = useFieldActions();
-  const tokenKey = FormKeyHelper.getTokenKey(formType);
-  const { onChange } = useFieldController({ name: tokenKey });
-  const chainOrderStore = useChainOrderStoreContext();
-
-  return useCallback(
-    (tokenAddress: string, chainId?: number) => {
-      onChange(tokenAddress);
-      const selectedChainId =
-        chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0];
-      // Set chain again to trigger URL builder update
-      setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
-        isDirty: true,
-        isTouched: true,
-      });
-      const amountKey = FormKeyHelper.getAmountKey(formType);
-      if (!disabledUI?.includes(amountKey as DisabledUI)) {
-        setFieldValue(amountKey, '');
-      }
-      const oppositeFormType = formType === 'from' ? 'to' : 'from';
-      const [selectedOppositeToken, selectedOppositeChainId] = getFieldValues(
-        FormKeyHelper.getTokenKey(oppositeFormType),
-        FormKeyHelper.getChainKey(oppositeFormType),
-      );
-      // TODO: remove when we enable same chain/token transfers
-      if (
-        selectedOppositeToken === tokenAddress &&
-        selectedOppositeChainId === selectedChainId &&
-        subvariant !== 'custom'
-      ) {
-        setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
-          isDirty: true,
-          isTouched: true,
-        });
-      }
-
-      // Check if the selected source chain matches any chain on the destination chain selection view (chainOrder array).
-      // If a match exists and the destination token is not selected, update the destination chain to match the source.
-      if (
-        formType === 'from' &&
-        !selectedOppositeToken &&
-        selectedChainId &&
-        chainOrderStore.getState().chainOrder.to.includes(selectedChainId)
-      ) {
-        setFieldValue(FormKeyHelper.getChainKey('to'), selectedChainId, {
-          isDirty: true,
-          isTouched: true,
-        });
-      }
-
-      const eventToEmit =
-        formType === 'from'
-          ? WidgetEvent.SourceChainTokenSelected
-          : WidgetEvent.DestinationChainTokenSelected;
-
-      if (selectedChainId) {
-        emitter.emit(eventToEmit, {
-          chainId: selectedChainId,
-          tokenAddress,
-        });
-      }
-
-      onClick?.();
-    },
-    [
-      chainOrderStore,
-      disabledUI,
-      emitter,
-      formType,
-      getFieldValues,
-      onChange,
-      onClick,
-      setFieldValue,
-      subvariant,
-    ],
-  );
-};

package/components/TokenList/utils.ts

@@ -1,42 +0,0 @@
-import type { TokenAmount } from '../../types/token.js';
-
-export const filteredTokensComparator = (searchFilter: string) => {
-  const isExactMatch = (token: TokenAmount) => {
-    return (
-      token.name?.toUpperCase() === searchFilter ||
-      token.symbol.toUpperCase() === searchFilter ||
-      token.address.toUpperCase() === searchFilter
-    );
-  };
-  return (tokenA: TokenAmount, tokenB: TokenAmount) => {
-    const isExactMatchA = isExactMatch(tokenA);
-    const isExactMatchB = isExactMatch(tokenB);
-
-    // Exact match with logo
-    if (isExactMatchB && tokenB.logoURI) {
-      return 1;
-    }
-    if (isExactMatchA && tokenA.logoURI) {
-      return -1;
-    }
-
-    // Any token with a logo (exact match or not)
-    if (tokenB.logoURI && !tokenA.logoURI) {
-      return 1;
-    }
-    if (tokenA.logoURI && !tokenB.logoURI) {
-      return -1;
-    }
-
-    // Exact match without logo
-    if (isExactMatchB && !tokenB.logoURI) {
-      return 1;
-    }
-    if (isExactMatchA && !tokenA.logoURI) {
-      return -1;
-    }
-
-    // All other tokens are considered equal in sorting priority
-    return 0;
-  };
-};

package/components/TokenRate/TokenRate.style.ts

@@ -1,17 +0,0 @@
-import { Typography, styled } from '@mui/material';
-
-export const TokenRateTypography = styled(Typography)(({ theme }) => ({
-  fontSize: 14,
-  lineHeight: 1.429,
-  fontWeight: 500,
-  color: theme.palette.text.primary,
-  cursor: 'pointer',
-  '&:hover': {
-    opacity: 1,
-  },
-  opacity: 0.56,
-  transition: theme.transitions.create(['opacity'], {
-    duration: theme.transitions.duration.enteringScreen,
-    easing: theme.transitions.easing.easeOut,
-  }),
-}));

package/components/TokenRate/TokenRate.tsx

@@ -1,69 +0,0 @@
-import type { RouteExtended } from '@lifi/sdk';
-import type { TypographyProps } from '@mui/material';
-import type { MouseEventHandler } from 'react';
-import { formatUnits } from 'viem';
-import { create } from 'zustand';
-import {
-  convertToSubscriptFormat,
-  precisionFormatter,
-} from '../../utils/format.js';
-import { TokenRateTypography } from './TokenRate.style.js';
-
-interface TokenRateProps extends TypographyProps {
-  route: RouteExtended;
-}
-
-interface TokenRateState {
-  isForward: boolean;
-  toggleIsForward(): void;
-}
-
-const useTokenRateStore = create<TokenRateState>((set) => ({
-  isForward: true,
-  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),
-}));
-
-export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
-  const { isForward, toggleIsForward } = useTokenRateStore();
-
-  const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {
-    e.stopPropagation();
-    toggleIsForward();
-  };
-
-  const lastStep = route.steps.at(-1);
-
-  const fromToken = {
-    ...route.fromToken,
-    amount: BigInt(route.fromAmount),
-  };
-  const toToken = {
-    ...(lastStep?.execution?.toToken ??
-      lastStep?.action.toToken ??
-      route.toToken),
-    amount: lastStep?.execution?.toAmount
-      ? BigInt(lastStep.execution.toAmount)
-      : BigInt(route.toAmount),
-  };
-
-  const fromToRate =
-    parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /
-    parseFloat(formatUnits(fromToken.amount!, fromToken.decimals));
-  const toFromRate =
-    parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /
-    parseFloat(formatUnits(toToken.amount!, toToken.decimals));
-
-  const rateText = isForward
-    ? `1 ${fromToken.symbol} ≈ ${convertToSubscriptFormat(fromToRate)} ${toToken.symbol}`
-    : `1 ${toToken.symbol} ≈ ${convertToSubscriptFormat(toFromRate)} ${fromToken.symbol}`;
-
-  const rateTitle = isForward
-    ? `1 ${fromToken.symbol} ≈ ${precisionFormatter.format(fromToRate)} ${toToken.symbol}`
-    : `1 ${toToken.symbol} ≈ ${precisionFormatter.format(toFromRate)} ${fromToken.symbol}`;
-
-  return (
-    <TokenRateTypography onClick={toggleRate} role="button" title={rateTitle}>
-      {rateText}
-    </TokenRateTypography>
-  );
-};

package/components/TransactionDetails.tsx

@@ -1,214 +0,0 @@
-import type { RouteExtended } from '@lifi/sdk';
-import {
-  ExpandLess,
-  ExpandMore,
-  LocalGasStationRounded,
-} from '@mui/icons-material';
-import type { CardProps } from '@mui/material';
-import { Box, Collapse, Tooltip, Typography } from '@mui/material';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { formatUnits } from 'viem';
-import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
-import { isRouteDone } from '../stores/routes/utils.js';
-import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js';
-import { formatTokenAmount, formatTokenPrice } from '../utils/format.js';
-import { Card } from './Card/Card.js';
-import { CardIconButton } from './Card/CardIconButton.js';
-import { FeeBreakdownTooltip } from './FeeBreakdownTooltip.js';
-import { IconTypography } from './IconTypography.js';
-import { TokenRate } from './TokenRate/TokenRate.js';
-
-interface TransactionDetailsProps extends CardProps {
-  route: RouteExtended;
-}
-
-export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
-  route,
-  ...props
-}) => {
-  const { t } = useTranslation();
-  const { feeConfig } = useWidgetConfig();
-  const [cardExpanded, setCardExpanded] = useState(false);
-
-  const toggleCard = () => {
-    setCardExpanded((cardExpanded) => !cardExpanded);
-  };
-  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD, combinedFeesUSD } =
-    getAccumulatedFeeCostsBreakdown(route);
-
-  const fromTokenAmount = formatTokenAmount(
-    BigInt(route.fromAmount),
-    route.fromToken.decimals,
-  );
-  const fromTokenPrice = formatTokenPrice(
-    fromTokenAmount,
-    route.fromToken.priceUSD,
-  );
-  const toTokenAmount = formatTokenAmount(
-    BigInt(route.toAmount),
-    route.toToken.decimals,
-  );
-  const toTokenPrice =
-    formatTokenPrice(toTokenAmount, route.toToken.priceUSD) || 0.01;
-
-  const priceImpact = toTokenPrice / fromTokenPrice - 1;
-
-  const feeCollectionStep = route.steps[0].includedSteps.find(
-    (includedStep) => includedStep.tool === 'feeCollection',
-  );
-
-  let feeAmountUSD: number = 0;
-
-  if (feeCollectionStep) {
-    const estimatedFromAmount =
-      BigInt(feeCollectionStep.estimate.fromAmount) -
-      BigInt(feeCollectionStep.estimate.toAmount);
-
-    const feeAmount = formatUnits(
-      estimatedFromAmount,
-      feeCollectionStep.action.fromToken.decimals,
-    );
-
-    feeAmountUSD =
-      parseFloat(feeAmount) *
-      parseFloat(feeCollectionStep.action.fromToken.priceUSD);
-  }
-
-  const showIntegratorFeeCollectionDetails =
-    feeAmountUSD || Number.isFinite(feeConfig?.fee);
-
-  return (
-    <Card selectionColor="secondary" {...props}>
-      <Box display="flex" alignItems="center" px={2} py={1.75}>
-        <Box display="flex" flex={1} alignItems="center" justifyContent="left">
-          <TokenRate route={route} />
-        </Box>
-        <Collapse timeout={100} in={!cardExpanded} mountOnEnter>
-          <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
-            <Box
-              display="flex"
-              alignItems="center"
-              onClick={toggleCard}
-              role="button"
-              sx={{ cursor: 'pointer' }}
-              px={1}
-            >
-              <IconTypography mr={0.5} fontSize={16}>
-                <LocalGasStationRounded fontSize="inherit" />
-              </IconTypography>
-              <Typography
-                fontSize={14}
-                color="text.primary"
-                fontWeight="600"
-                lineHeight={1.429}
-                data-value={combinedFeesUSD}
-              >
-                {t(`format.currency`, { value: combinedFeesUSD })}
-              </Typography>
-            </Box>
-          </FeeBreakdownTooltip>
-        </Collapse>
-        <CardIconButton onClick={toggleCard} size="small">
-          {cardExpanded ? (
-            <ExpandLess fontSize="inherit" />
-          ) : (
-            <ExpandMore fontSize="inherit" />
-          )}
-        </CardIconButton>
-      </Box>
-      <Collapse timeout={225} in={cardExpanded} mountOnEnter>
-        <Box px={2} pb={2}>
-          <Box display="flex" justifyContent="space-between" mb={0.5}>
-            <Typography variant="body2">{t('main.fees.network')}</Typography>
-            <FeeBreakdownTooltip gasCosts={gasCosts}>
-              <Typography variant="body2">
-                {t(`format.currency`, {
-                  value: gasCostUSD,
-                })}
-              </Typography>
-            </FeeBreakdownTooltip>
-          </Box>
-          {feeCosts.length ? (
-            <Box display="flex" justifyContent="space-between" mb={0.5}>
-              <Typography variant="body2">{t('main.fees.provider')}</Typography>
-              <FeeBreakdownTooltip feeCosts={feeCosts}>
-                <Typography variant="body2">
-                  {t(`format.currency`, {
-                    value: feeCostUSD,
-                  })}
-                </Typography>
-              </FeeBreakdownTooltip>
-            </Box>
-          ) : null}
-          {showIntegratorFeeCollectionDetails ? (
-            <Box display="flex" justifyContent="space-between" mb={0.5}>
-              <Typography variant="body2">
-                {feeConfig?.name
-                  ? t('main.fees.integrator', { tool: feeConfig.name })
-                  : t('main.fees.defaultIntegrator')}
-              </Typography>
-              {feeConfig?.name ? (
-                <Tooltip
-                  title={t('tooltip.feeCollection', { tool: feeConfig.name })}
-                  sx={{ cursor: 'help' }}
-                >
-                  <Typography variant="body2">
-                    {t(`format.currency`, {
-                      value: feeAmountUSD,
-                    })}
-                  </Typography>
-                </Tooltip>
-              ) : (
-                <Typography variant="body2">
-                  {t(`format.currency`, {
-                    value: feeAmountUSD,
-                  })}
-                </Typography>
-              )}
-            </Box>
-          ) : null}
-          <Box display="flex" justifyContent="space-between" mb={0.5}>
-            <Typography variant="body2">{t('main.priceImpact')}</Typography>
-            <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
-              <Typography variant="body2">
-                {t('format.percent', { value: priceImpact })}
-              </Typography>
-            </Tooltip>
-          </Box>
-          {!isRouteDone(route) ? (
-            <>
-              <Box display="flex" justifyContent="space-between" mb={0.5}>
-                <Typography variant="body2">{t('main.maxSlippage')}</Typography>
-                <Tooltip title={t('tooltip.slippage')} sx={{ cursor: 'help' }}>
-                  <Typography variant="body2">
-                    {t('format.percent', {
-                      value: route.steps[0].action.slippage,
-                    })}
-                  </Typography>
-                </Tooltip>
-              </Box>
-              <Box display="flex" justifyContent="space-between">
-                <Typography variant="body2">{t('main.minReceived')}</Typography>
-                <Tooltip
-                  title={t('tooltip.minReceived')}
-                  sx={{ cursor: 'help' }}
-                >
-                  <Typography variant="body2">
-                    {t('format.number', {
-                      value: formatTokenAmount(
-                        BigInt(route.toAmountMin),
-                        route.toToken.decimals,
-                      ),
-                    })}{' '}
-                    {route.toToken.symbol}
-                  </Typography>
-                </Tooltip>
-              </Box>
-            </>
-          ) : null}
-        </Box>
-      </Collapse>
-    </Card>
-  );
-};

package/config/coinbase.ts

@@ -1,7 +0,0 @@
-import type { CoinbaseWalletParameters } from 'wagmi/connectors';
-import { LiFiToolLogo } from '../icons/lifi.js';
-
-export const defaultCoinbaseConfig: CoinbaseWalletParameters = {
-  appName: 'LI.FI',
-  appLogoUrl: LiFiToolLogo,
-};

package/config/constants.ts

@@ -1,3 +0,0 @@
-export const defaultMaxHeight = 686;
-
-export const lifiExplorerUrl = 'https://scan.li.fi';

package/config/metaMask.ts

@@ -1,13 +0,0 @@
-import type { MetaMaskParameters } from 'wagmi/connectors';
-import { LiFiToolLogo } from '../icons/lifi.js';
-
-export const defaultMetaMaskConfig: MetaMaskParameters = {
-  dappMetadata: {
-    name: 'LI.FI',
-    url:
-      typeof window !== 'undefined'
-        ? (window as any)?.location.href
-        : 'https://li.fi/',
-    base64Icon: LiFiToolLogo,
-  },
-};

package/config/queryClient.ts

@@ -1,21 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      enabled: true,
-      refetchInterval: false,
-      refetchIntervalInBackground: false,
-      refetchOnWindowFocus: true,
-      refetchOnReconnect: true,
-      refetchOnMount: true,
-      retryOnMount: true,
-      // suspense: true,
-    },
-    mutations: {
-      onError: (error) => {
-        //
-      },
-    },
-  },
-});

package/config/version.ts

@@ -1,2 +0,0 @@
-export const name = '@lifi/widget';
-export const version = '3.7.0';