@lifi/widget 3.0.0-alpha.21 → 3.0.0-alpha.23

package/components/TokenList/VirtualizedTokenList.tsx

@@ -3,51 +3,54 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useAccount } from '../../hooks';
+import type { TokenAmount } from '../../types';
 import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
 import type { VirtualizedTokenListProps } from './types';
 
 export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
+  account,
   tokens,
-  featuredTokensLength,
   scrollElementRef,
   chainId,
   chain,
   isLoading,
   isBalanceLoading,
-  showFeatured,
+  showCategories,
   onClick,
 }) => {
-  const { account } = useAccount({ chainType: chain?.chainType });
   const { t } = useTranslation();
 
-  const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
-  const featuredTokensLastIndex = (featuredTokensLength ?? 0) - 1;
-  const tokensLastIndex = tokens.length - 1;
-
   const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
     count: tokens.length,
     overscan: 10,
     paddingEnd: 12,
     getScrollElement: () => scrollElementRef.current,
     estimateSize: (index) => {
-      // heigth of TokenListItem
+      // Base size for TokenListItem
       let size = 64;
-      if (!hasFeaturedTokens) {
+      // Early return if categories are not shown
+      if (!showCategories) {
         return size;
       }
-      if (index === 0 && tokens[index]?.featured) {
-        // height of startAdornment
+
+      const currentToken = tokens[index];
+      const previousToken = tokens[index - 1];
+
+      // Adjust size for the first featured token
+      if (currentToken.featured && index === 0) {
         size += 24;
       }
-      if (
-        index === featuredTokensLastIndex &&
-        index !== tokensLastIndex &&
-        tokens[index]?.featured
-      ) {
-        // height of endAdornment
+
+      // 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}`,
@@ -74,43 +77,62 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   return (
     <List style={{ height: getTotalSize() }} disablePadding>
       {getVirtualItems().map((item) => {
-        const token = tokens[item.index];
+        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)) &&
+          showCategories;
+
+        const startAdornmentLabel = (() => {
+          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;
+        })();
+
         return (
           <TokenListItem
             key={item.key}
             onClick={onClick}
             size={item.size}
             start={item.start}
-            token={token}
+            token={currentToken}
             chain={chain}
             isBalanceLoading={isBalanceLoading}
             showBalance={account.isConnected}
             startAdornment={
-              hasFeaturedTokens && token.featured && item.index === 0 ? (
-                <Typography
-                  fontSize={14}
-                  fontWeight={600}
-                  lineHeight={1}
-                  px={2}
-                  pb={1.25}
-                >
-                  {t('main.featuredTokens')}
-                </Typography>
-              ) : null
-            }
-            endAdornment={
-              hasFeaturedTokens &&
-              token.featured &&
-              item.index === featuredTokensLastIndex &&
-              item.index !== tokensLastIndex ? (
+              startAdornmentLabel ? (
                 <Typography
                   fontSize={14}
                   fontWeight={600}
-                  lineHeight={1}
-                  px={2}
-                  py={1.25}
+                  lineHeight="16px"
+                  px={1.5}
+                  pt={isFirstFeaturedToken ? 0 : 1}
+                  pb={1}
                 >
-                  {t('main.otherTokens')}
+                  {startAdornmentLabel}
                 </Typography>
               ) : null
             }

package/components/TokenList/types.ts

@@ -1,5 +1,6 @@
 import type { ExtendedChain } from '@lifi/sdk';
 import type { MouseEventHandler, MutableRefObject } from 'react';
+import type { Account } from '../../hooks';
 import type { FormType } from '../../stores';
 import type { TokenAmount } from '../../types';
 
@@ -10,14 +11,14 @@ export interface TokenListProps {
 }
 
 export interface VirtualizedTokenListProps {
+  account: Account;
   tokens: TokenAmount[];
-  featuredTokensLength?: number;
   scrollElementRef: MutableRefObject<HTMLElement | null>;
   isLoading: boolean;
   isBalanceLoading: boolean;
   chainId?: number;
   chain?: ExtendedChain;
-  showFeatured?: boolean;
+  showCategories?: boolean;
   onClick(tokenAddress: string): void;
 }
 

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.0-alpha.21';
+export const version = '3.0.0-alpha.23';

package/hooks/index.ts

@@ -7,7 +7,6 @@ export * from './useContentHeight';
 export * from './useDebouncedWatch';
 export * from './useDefaultElementId';
 export * from './useExpandableVariant';
-export * from './useFeaturedTokens';
 export * from './useFromTokenSufficiency';
 export * from './useGasRecommendation';
 export * from './useGasRefuel';

package/hooks/useAvailableChains.ts

@@ -5,17 +5,20 @@ import { useCallback } from 'react';
 import { useHasExternalWalletProvider, useWidgetConfig } from '../providers';
 import { isItemAllowed } from '../utils';
 
+const supportedChainTypes = [ChainType.EVM, ChainType.SVM];
+
 export const useAvailableChains = () => {
   const { chains } = useWidgetConfig();
   const { providers } = useHasExternalWalletProvider();
   const { data, isLoading } = useQuery({
     queryKey: ['chains', providers, chains?.types] as const,
     queryFn: async ({ queryKey: [, providers, chainTypes] }) => {
+      const chainTypesRequest = (
+        providers.length > 0 ? providers : supportedChainTypes
+      ).filter((chainType) => isItemAllowed(chainType, chainTypes));
+
       const availableChains = await getChains({
-        chainTypes: (providers.length > 0
-          ? providers
-          : Object.values(ChainType)
-        ).filter((chainType) => isItemAllowed(chainType, chainTypes)),
+        chainTypes: chainTypesRequest,
       });
       config.setChains(availableChains);
       return availableChains;

package/hooks/useRoutes.ts

@@ -21,17 +21,17 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const queryClient = useQueryClient();
   const swapOnly = useSwapOnly();
   const {
-    slippage,
-    enabledBridges,
+    disabledBridges,
+    disabledExchanges,
     enabledAutoRefuel,
-    enabledExchanges,
     routePriority,
+    slippage,
   } = useSettings([
-    'slippage',
-    'routePriority',
+    'disabledBridges',
+    'disabledExchanges',
     'enabledAutoRefuel',
-    'enabledBridges',
-    'enabledExchanges',
+    'routePriority',
+    'slippage',
   ]);
   const [fromTokenAmount] = useDebouncedWatch(320, 'fromAmount');
   const [
@@ -117,8 +117,9 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     toContractCallData,
     toContractGasLimit,
     slippage,
-    swapOnly ? [] : enabledBridges,
-    enabledExchanges,
+    swapOnly,
+    disabledBridges,
+    disabledExchanges,
     routePriority,
     subvariant,
     sdkConfig?.routeOptions?.allowSwitchChain,
@@ -146,8 +147,9 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           toContractCallData,
           toContractGasLimit,
           slippage = defaultSlippage,
-          enabledBridges,
-          enabledExchanges,
+          swapOnly,
+          disabledBridges,
+          disabledExchanges,
           routePriority,
           subvariant,
           allowSwitchChain,
@@ -165,21 +167,29 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
         ).toString();
         const formattedSlippage = parseFloat(slippage) / 100;
 
-        const allowedBridges: string[] = insurableRoute
-          ? insurableRoute.steps.flatMap((step) =>
-              step.includedSteps
-                .filter((includedStep) => includedStep.type === 'cross')
-                .map((includedStep) => includedStep.toolDetails.key),
-            )
-          : enabledBridges;
+        const allowedBridges = swapOnly
+          ? []
+          : insurableRoute
+            ? insurableRoute.steps.flatMap((step) =>
+                step.includedSteps.reduce((toolKeys, includedStep) => {
+                  if (includedStep.type === 'cross') {
+                    toolKeys.push(includedStep.toolDetails.key);
+                  }
+                  return toolKeys;
+                }, [] as string[]),
+              )
+            : undefined;
 
-        const allowedExchanges: string[] = insurableRoute
+        const allowedExchanges = insurableRoute
           ? insurableRoute.steps.flatMap((step) =>
-              step.includedSteps
-                .filter((includedStep) => includedStep.type === 'swap')
-                .map((includedStep) => includedStep.toolDetails.key),
+              step.includedSteps.reduce((toolKeys, includedStep) => {
+                if (includedStep.type === 'swap') {
+                  toolKeys.push(includedStep.toolDetails.key);
+                }
+                return toolKeys;
+              }, [] as string[]),
             )
-          : enabledExchanges;
+          : undefined;
 
         if (subvariant === 'nft') {
           const contractCallQuote = await getContractCallQuote(
@@ -194,7 +204,12 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
               toContractAddress,
               toContractCallData,
               toContractGasLimit,
+              denyBridges: disabledBridges.length ? disabledBridges : undefined,
+              denyExchanges: disabledExchanges.length
+                ? disabledExchanges
+                : undefined,
               allowBridges: allowedBridges,
+              allowExchanges: allowedExchanges,
               toFallbackAddress: toWalletAddress,
               slippage: formattedSlippage,
             },
@@ -255,17 +270,29 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
                 ? gasRecommendationFromAmount
                 : undefined,
             options: {
-              slippage: formattedSlippage,
-              bridges: {
-                allow: allowedBridges,
-              },
-              exchanges: {
-                allow: allowedExchanges,
-              },
-              order: routePriority,
               allowSwitchChain:
                 subvariant === 'refuel' ? false : allowSwitchChain,
+              bridges:
+                allowedBridges?.length || disabledBridges.length
+                  ? {
+                      allow: allowedBridges,
+                      deny: disabledBridges.length
+                        ? disabledBridges
+                        : undefined,
+                    }
+                  : undefined,
+              exchanges:
+                allowedExchanges?.length || disabledExchanges.length
+                  ? {
+                      allow: allowedExchanges,
+                      deny: disabledExchanges.length
+                        ? disabledExchanges
+                        : undefined,
+                    }
+                  : undefined,
               insurance: insurance ? Boolean(insurableRoute) : undefined,
+              order: routePriority,
+              slippage: formattedSlippage,
             },
           },
           { signal },

package/hooks/useSettingMonitor.ts

@@ -1,24 +1,29 @@
+import { shallow } from 'zustand/shallow';
+import { useWidgetConfig } from '../providers';
 import {
   defaultConfigurableSettings,
   setDefaultSettings,
   useSettingsStore,
 } from '../stores';
-import { shallow } from 'zustand/shallow';
 import { useTools } from './useTools';
-import { useWidgetConfig } from '../providers';
 
 export const useSettingMonitor = () => {
-  const [enabledBridges, enabledExchanges, routePriority, slippage, gasPrice] =
-    useSettingsStore(
-      (state) => [
-        state.enabledBridges,
-        state.enabledExchanges,
-        state.routePriority,
-        state.slippage,
-        state.gasPrice,
-      ],
-      shallow,
-    );
+  const [
+    disabledBridges,
+    disabledExchanges,
+    routePriority,
+    slippage,
+    gasPrice,
+  ] = useSettingsStore(
+    (state) => [
+      state.disabledBridges,
+      state.disabledExchanges,
+      state.routePriority,
+      state.slippage,
+      state.gasPrice,
+    ],
+    shallow,
+  );
   const { tools } = useTools();
   const resetSettings = useSettingsStore((state) => state.reset);
   const config = useWidgetConfig();
@@ -36,13 +41,8 @@ export const useSettingMonitor = () => {
 
   const isGasPriceChanged = gasPrice !== defaultConfigurableSettings.gasPrice;
 
-  const isBridgesChanged = tools?.bridges
-    ? tools?.bridges?.length !== enabledBridges?.length
-    : false;
-
-  const isExchangesChanged = tools?.exchanges
-    ? tools?.exchanges?.length !== enabledExchanges?.length
-    : false;
+  const isBridgesChanged = Boolean(disabledBridges.length);
+  const isExchangesChanged = Boolean(disabledExchanges.length);
 
   const isCustomRouteSettings =
     isBridgesChanged ||
@@ -56,7 +56,6 @@ export const useSettingMonitor = () => {
   const reset = () => {
     if (tools) {
       resetSettings(
-        config,
         tools.bridges.map((tool) => tool.key),
         tools.exchanges.map((tool) => tool.key),
       );

package/hooks/useTokenAddressBalance.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import type { TokenAmount } from '../types';
 import { useTokenBalances } from './useTokenBalances';
 
 export const useTokenAddressBalance = (
@@ -13,7 +14,7 @@ export const useTokenAddressBalance = (
       const token = (tokensWithBalance ?? tokens)?.find(
         (token) => token.address === tokenAddress && token.chainId === chainId,
       );
-      return token;
+      return token as TokenAmount;
     }
   }, [chainId, tokenAddress, tokens, tokensWithBalance]);
 

package/hooks/useTokenBalances.ts

@@ -3,14 +3,13 @@ import { useQuery } from '@tanstack/react-query';
 import { formatUnits } from 'viem';
 import type { TokenAmount } from '../types';
 import { useAccount } from './useAccount';
-import { useFeaturedTokens } from './useFeaturedTokens';
 import { useTokens } from './useTokens';
 
 const defaultRefetchInterval = 32_000;
 
 export const useTokenBalances = (selectedChainId?: number) => {
-  const featuredTokens = useFeaturedTokens(selectedChainId);
-  const { tokens, chain, isLoading } = useTokens(selectedChainId);
+  const { tokens, featuredTokens, popularTokens, chain, isLoading } =
+    useTokens(selectedChainId);
   const { account } = useAccount({ chainType: chain?.chainType });
 
   const isBalanceLoadingEnabled =
@@ -30,44 +29,49 @@ export const useTokenBalances = (selectedChainId?: number) => {
       tokens?.length,
     ],
     queryFn: async ({ queryKey: [, accountAddress] }) => {
-      const tokenBalances = await getTokenBalances(
+      const tokensWithBalance: TokenAmount[] = await getTokenBalances(
         accountAddress as string,
         tokens!,
       );
 
-      const featuredTokenAddresses = new Set(
-        featuredTokens?.map((token) => token.address),
-      );
+      if (!tokensWithBalance?.length) {
+        return tokens as TokenAmount[];
+      }
 
       const sortFn = (a: TokenAmount, b: TokenAmount) =>
         parseFloat(formatUnits(b.amount ?? 0n, b.decimals)) *
           parseFloat(b.priceUSD ?? '0') -
         parseFloat(formatUnits(a.amount ?? 0n, a.decimals)) *
           parseFloat(a.priceUSD ?? '0');
-      const formattedTokens = (
-        tokenBalances.length === 0 ? tokens : tokenBalances
-      ) as TokenAmount[];
+
+      const featuredTokens: TokenAmount[] = [];
+      const tokensWithAmount: TokenAmount[] = [];
+      const popularTokens: TokenAmount[] = [];
+      const allTokens: TokenAmount[] = [];
+
+      tokensWithBalance.forEach((token) => {
+        if (token.amount) {
+          token.featured = false;
+          token.popular = false;
+        }
+        if (token.featured) {
+          featuredTokens.push(token);
+        } else if (token.amount) {
+          tokensWithAmount.push(token);
+        } else if (token.popular) {
+          popularTokens.push(token);
+        } else {
+          allTokens.push(token);
+        }
+      });
+
+      tokensWithAmount.sort(sortFn);
 
       const result = [
-        ...formattedTokens
-          .filter(
-            (token) =>
-              token.amount && featuredTokenAddresses.has(token.address),
-          )
-          .sort(sortFn),
-        ...formattedTokens.filter(
-          (token) => !token.amount && featuredTokenAddresses.has(token.address),
-        ),
-        ...formattedTokens
-          .filter(
-            (token) =>
-              token.amount && !featuredTokenAddresses.has(token.address),
-          )
-          .sort(sortFn),
-        ...formattedTokens.filter(
-          (token) =>
-            !token.amount && !featuredTokenAddresses.has(token.address),
-        ),
+        ...featuredTokens,
+        ...tokensWithAmount,
+        ...popularTokens,
+        ...allTokens,
       ];
       return result;
     },
@@ -80,6 +84,7 @@ export const useTokenBalances = (selectedChainId?: number) => {
     tokens,
     tokensWithBalance,
     featuredTokens,
+    popularTokens,
     chain,
     isLoading,
     isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,