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

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,

package/hooks/useTokens.ts

@@ -4,7 +4,6 @@ import { useMemo } from 'react';
 import { useWidgetConfig } from '../providers';
 import type { TokenAmount } from '../types';
 import { useChains } from './useChains';
-import { useFeaturedTokens } from './useFeaturedTokens';
 
 export const useTokens = (selectedChainId?: number) => {
   const { tokens: configTokens } = useWidgetConfig();
@@ -18,10 +17,9 @@ export const useTokens = (selectedChainId?: number) => {
     isLoading: isSupportedChainsLoading,
     getChainById,
   } = useChains();
-  const featuredTokens = useFeaturedTokens(selectedChainId);
 
   const filteredData = useMemo(() => {
-    if (isSupportedChainsLoading) {
+    if (isSupportedChainsLoading || !data) {
       return;
     }
     const chain = getChainById(selectedChainId, chains);
@@ -29,55 +27,84 @@ export const useTokens = (selectedChainId?: number) => {
     if (!chainAllowed) {
       return;
     }
-    let filteredTokens = data?.tokens[selectedChainId];
+    let filteredTokens = data.tokens?.[selectedChainId] || [];
     const includedTokens = configTokens?.include?.filter(
       (token) => token.chainId === selectedChainId,
     );
     if (includedTokens?.length) {
-      filteredTokens = filteredTokens
-        ? [...includedTokens, ...filteredTokens]
-        : includedTokens;
+      filteredTokens = [...includedTokens, ...filteredTokens];
     }
-    const allowedTokens = configTokens?.allow
-      ?.filter((token) => token.chainId === selectedChainId)
-      .map((token) => token.address);
-    if (allowedTokens?.length) {
-      filteredTokens = filteredTokens?.filter((token) =>
-        allowedTokens.includes(token.address),
+
+    if (configTokens?.allow?.length || configTokens?.deny?.length) {
+      const allowedTokensSet = new Set(
+        configTokens?.allow
+          ?.filter((token) => token.chainId === selectedChainId)
+          .map((token) => token.address),
       );
-    }
-    const deniedTokenAddresses = configTokens?.deny
-      ?.filter((token) => token.chainId === selectedChainId)
-      .map((token) => token.address);
-    if (deniedTokenAddresses?.length) {
-      filteredTokens = filteredTokens?.filter(
-        (token) => !deniedTokenAddresses.includes(token.address),
+
+      const deniedTokenAddressesSet = new Set(
+        configTokens?.deny
+          ?.filter((token) => token.chainId === selectedChainId)
+          .map((token) => token.address),
       );
+
+      if (allowedTokensSet.size || deniedTokenAddressesSet.size) {
+        filteredTokens = filteredTokens.filter(
+          (token) =>
+            (!allowedTokensSet.size || allowedTokensSet.has(token.address)) &&
+            !deniedTokenAddressesSet.has(token.address),
+        );
+      }
     }
-    const featuredTokenAddresses = new Set(
-      featuredTokens?.map((token) => token.address),
+    const filteredTokensMap = new Map(
+      filteredTokens.map((token) => [token.address, token]),
     );
-    const tokens = [
-      ...(featuredTokens?.map((token) => {
-        (token as TokenAmount).featured = true;
+
+    const [popularTokens, featuredTokens] = (
+      ['popular', 'featured'] as ('popular' | 'featured')[]
+    ).map((tokenType) => {
+      const typedConfigTokens = configTokens?.[tokenType]?.filter(
+        (token) => token.chainId === selectedChainId,
+      );
+
+      const populatedConfigTokens = typedConfigTokens?.map((token) => {
+        // Mark token as popular
+        (token as TokenAmount)[tokenType] = true;
+        // Check if this token exists in the filteredTokensMap and add priceUSD if it does
+        const matchingFilteredToken = filteredTokensMap.get(token.address);
+        if (matchingFilteredToken?.priceUSD) {
+          (token as TokenAmount).priceUSD = matchingFilteredToken.priceUSD;
+        }
+        if (!token.logoURI && matchingFilteredToken) {
+          (token as TokenAmount).logoURI = matchingFilteredToken.logoURI;
+        }
         return token;
-      }) ?? []),
-      ...(filteredTokens?.filter(
-        (token) => !featuredTokenAddresses.has(token.address),
-      ) ?? []),
-    ] as TokenAmount[];
+      }) as TokenAmount[];
+
+      if (populatedConfigTokens?.length) {
+        const configTokenAddresses = new Set(
+          populatedConfigTokens?.map((token) => token.address),
+        );
+        filteredTokens = filteredTokens.filter(
+          (token) => !configTokenAddresses.has(token.address),
+        );
+        populatedConfigTokens.push(...filteredTokens);
+        filteredTokens = populatedConfigTokens;
+      }
+
+      return populatedConfigTokens;
+    });
 
     return {
-      tokens,
+      tokens: filteredTokens,
+      featuredTokens,
+      popularTokens,
       chain,
     };
   }, [
     chains,
-    configTokens?.allow,
-    configTokens?.deny,
-    configTokens?.include,
-    data?.tokens,
-    featuredTokens,
+    configTokens,
+    data,
     getChainById,
     isSupportedChainsLoading,
     selectedChainId,
@@ -85,6 +112,8 @@ export const useTokens = (selectedChainId?: number) => {
 
   return {
     tokens: filteredData?.tokens,
+    featuredTokens: filteredData?.featuredTokens,
+    popularTokens: filteredData?.popularTokens,
     chain: filteredData?.chain,
     isLoading,
   };

package/i18n/en.json

@@ -174,6 +174,7 @@
     "deselectAll": "Deselect all"
   },
   "main": {
+    "allTokens": "All tokens",
     "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
     "currentAmount": "Current amount",
     "featuredTokens": "Featured tokens",
@@ -189,10 +190,11 @@
     "fromAmount": "You pay",
     "gasCost": "Gas cost",
     "inProgress": "in progress",
+    "myTokens": "My tokens",
     "nftStepDetails": "Purchase NFT via {{tool}}",
     "onChain": "on {{chainName}}",
-    "otherTokens": "Other tokens",
     "ownedBy": "Owned by",
+    "popularTokens": "Popular tokens",
     "process": {
       "crossChain": {
         "actionRequired": "Please sign the transaction",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.22",
+  "version": "3.0.0-alpha.23",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_cjs/index.js",
@@ -44,19 +44,19 @@
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-wallets": "^0.19.26",
     "@solana/web3.js": "^1.89.1",
-    "@tanstack/react-query": "^5.18.0",
-    "@tanstack/react-virtual": "^3.0.2",
+    "@tanstack/react-query": "^5.18.1",
+    "@tanstack/react-virtual": "^3.0.4",
     "i18next": "^23.8.2",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.1",
-    "react-intersection-observer": "^9.6.0",
+    "react-i18next": "^14.0.3",
+    "react-intersection-observer": "^9.7.0",
     "react-router-dom": "^6.22.0",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "viem": "^2.7.1",
+    "viem": "^2.7.6",
     "wagmi": "^2.5.5",
     "zustand": "^4.5.0"
   },

package/pages/RoutesPage/RoutesPage.tsx

@@ -63,7 +63,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
       ) : (
         routes?.map((route: Route, index: number) => (
           <RouteCard
-            key={route.id}
+            key={index}
             route={route}
             onClick={() => handleRouteClick(route)}
             active={index === 0}

package/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx

@@ -55,52 +55,33 @@ export const SelectEnabledToolsPage: React.FC<{
 }> = ({ type }) => {
   const typeKey = type.toLowerCase() as 'bridges' | 'exchanges';
   const { tools } = useTools();
-  const [enabledTools, setTools] = useSettingsStore(
-    (state) => [state[`enabled${type}`], state.setTools],
-    shallow,
-  );
+  const [enabledTools, disabledTools, setToolValue, toggleTools] =
+    useSettingsStore(
+      (state) => [
+        state[`enabled${type}`],
+        state[`disabled${type}`],
+        state.setToolValue,
+        state.toggleTools,
+      ],
+      shallow,
+    );
   const headerStoreContext = useHeaderStoreContext();
 
   const handleClick = (key: string) => {
-    if (!tools) {
-      return;
-    }
-    const toolKeys = tools[typeKey].map((tool) => tool.key);
-    if (enabledTools?.includes(key)) {
-      setTools(
-        type,
-        enabledTools.filter((toolKey) => toolKey !== key),
-        toolKeys,
-      );
-    } else {
-      setTools(type, [...enabledTools, key], toolKeys);
-    }
+    setToolValue(type, key, !enabledTools[key]);
   };
 
   useEffect(() => {
-    const allToolsSelected = tools?.[typeKey].length === enabledTools.length;
-    const toggleCheckboxes = () => {
-      if (!tools) {
-        return;
-      }
-      const toolKeys = tools[typeKey].map((tool) => tool.key);
-      if (allToolsSelected) {
-        setTools(type, [], toolKeys);
-      } else {
-        setTools(type, toolKeys, toolKeys);
-      }
-    };
-
     return headerStoreContext
       .getState()
       .setAction(
         <SelectAllCheckbox
-          allCheckboxesSelected={allToolsSelected}
-          anyCheckboxesSelected={!!enabledTools.length}
-          onClick={toggleCheckboxes}
+          allCheckboxesSelected={!disabledTools.length}
+          anyCheckboxesSelected={Boolean(disabledTools.length)}
+          onClick={() => toggleTools(type)}
         />,
       );
-  }, [enabledTools.length, headerStoreContext, setTools, tools, type, typeKey]);
+  }, [disabledTools.length, headerStoreContext, toggleTools, type]);
 
   return (
     <PageContainer disableGutters>
@@ -121,7 +102,7 @@ export const SelectEnabledToolsPage: React.FC<{
               </Avatar>
             </ListItemAvatar>
             <ListItemText primary={tool.name} />
-            {enabledTools?.includes(tool.key) && <CheckIcon color="primary" />}
+            {enabledTools[tool.key] && <CheckIcon color="primary" />}
           </SettingsListItemButton>
         ))}
       </List>

package/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -3,10 +3,10 @@ import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { shallow } from 'zustand/shallow';
+import { CardButton } from '../../components/Card';
 import { useSettingMonitor } from '../../hooks';
 import { useSettingsStore } from '../../stores';
 import { navigationRoutes } from '../../utils';
-import { CardButton } from '../../components/Card';
 import { BadgedValue } from './SettingsCard';
 
 const supportedIcons = {
@@ -21,7 +21,7 @@ export const BridgeAndExchangeSettings: React.FC<{
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [enabledTools, tools] = useSettingsStore((state) => {
-    const enabledTools = Object.values(state[`_enabled${type}`] ?? {});
+    const enabledTools = Object.values(state[`enabled${type}`]);
     return [enabledTools.filter(Boolean).length, enabledTools.length];
   }, shallow);