@lifi/widget 3.7.0-beta.7 → 3.7.0

package/hooks/useSetContentHeight.ts

@@ -1,24 +1,28 @@
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect } from 'react';
+import { getRelativeContainer } from '../utils/elements.js';
 import { useDefaultElementId } from './useDefaultElementId.js';
-import { getScrollableContainer } from './useScrollableContainer.js';
+
+// NOTE: this hook is implicitly tied to the widget height functionality in the
+//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
+//   CSS changes in those components can have implications for the functionality in this hook
 
 export const useSetContentHeight = (
   ref: MutableRefObject<HTMLElement | undefined>,
 ) => {
   const elementId = useDefaultElementId();
   useLayoutEffect(() => {
-    const scrollableContainer = getScrollableContainer(elementId);
+    const relativeContainer = getRelativeContainer(elementId);
     if (
-      !scrollableContainer ||
+      !relativeContainer ||
       !ref.current ||
-      ref.current?.clientHeight <= scrollableContainer?.clientHeight
+      ref.current?.clientHeight <= relativeContainer?.clientHeight
     ) {
       return;
     }
-    scrollableContainer.style.height = `${ref.current.clientHeight}px`;
+    relativeContainer.style.minHeight = `${ref.current.clientHeight}px`;
     return () => {
-      scrollableContainer.style.removeProperty('height');
+      relativeContainer.style.removeProperty('min-height');
     };
   }, [elementId, ref]);
 };

package/hooks/useTokenBalance.ts

@@ -1,8 +1,8 @@
 import type { ExtendedChain } from '@lifi/sdk';
 import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
+import { useAccount } from './useAccount.js';
 
 const defaultRefetchInterval = 30_000;
 

package/hooks/useTokenBalances.ts

@@ -1,8 +1,8 @@
 import { getTokenBalances } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
 import { useQuery } from '@tanstack/react-query';
 import { formatUnits } from 'viem';
 import type { TokenAmount } from '../types/token.js';
+import { useAccount } from './useAccount.js';
 import { useTokens } from './useTokens.js';
 
 const defaultRefetchInterval = 32_000;

package/hooks/useTokens.ts

@@ -9,8 +9,7 @@ export const useTokens = (selectedChainId?: number) => {
   const { tokens: configTokens } = useWidgetConfig();
   const { data, isLoading } = useQuery({
     queryKey: ['tokens'],
-    queryFn: () =>
-      getTokens({ chainTypes: [ChainType.EVM, ChainType.SVM, ChainType.UTXO] }),
+    queryFn: () => getTokens({ chainTypes: [ChainType.EVM, ChainType.SVM] }),
     refetchInterval: 3_600_000,
     staleTime: 3_600_000,
   });

package/hooks/useTransactionDetails.ts

@@ -1,11 +1,11 @@
 import type { FullStatusData } from '@lifi/sdk';
 import { getStatus, type StatusResponse } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
 import {
   keepPreviousData,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
+import { useAccount } from './useAccount.js';
 
 export const useTransactionDetails = (transactionHash?: string) => {
   const { account, accounts } = useAccount();

package/hooks/useTransactionHistory.ts

@@ -1,8 +1,8 @@
 import type { FullStatusData, StatusResponse } from '@lifi/sdk';
 import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
 import type { QueryFunction } from '@tanstack/react-query';
 import { useQueries } from '@tanstack/react-query';
+import { useAccount } from './useAccount.js';
 
 export const useTransactionHistory = () => {
   const { accounts } = useAccount();

package/hooks/useWallets.ts

@@ -0,0 +1,147 @@
+import { ChainType } from '@lifi/sdk';
+import type { CreateConnectorFnExtended } from '@lifi/wallet-management';
+import {
+  createCoinbaseConnector,
+  createMetaMaskConnector,
+  createWalletConnectConnector,
+  getWalletPriority,
+  isWalletInstalled,
+} from '@lifi/wallet-management';
+import type { Theme } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
+import { WalletReadyState } from '@solana/wallet-adapter-base';
+import type { Wallet } from '@solana/wallet-adapter-react';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useMemo } from 'react';
+import type { Connector } from 'wagmi';
+import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
+import { defaultCoinbaseConfig } from '../config/coinbase.js';
+import { defaultMetaMaskConfig } from '../config/metaMask.js';
+import { defaultWalletConnectConfig } from '../config/walletConnect.js';
+import type { WidgetChains, WidgetWalletConfig } from '../types/widget.js';
+import { isItemAllowed } from '../utils/item.js';
+
+export const useWallets = (
+  walletConfig?: WidgetWalletConfig,
+  chains?: WidgetChains,
+) => {
+  const account = useWagmiAccount();
+  const { connectors } = useConnect();
+  const { wallets: solanaWallets } = useWallet();
+
+  const isDesktopView = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.up('sm'),
+  );
+
+  const wallets = useMemo(() => {
+    const evmConnectors: (CreateConnectorFnExtended | Connector)[] =
+      Array.from(connectors);
+    if (
+      !connectors.some((connector) =>
+        connector.id.toLowerCase().includes('walletconnect'),
+      )
+    ) {
+      evmConnectors.unshift(
+        createWalletConnectConnector(
+          walletConfig?.walletConnect ?? defaultWalletConnectConfig,
+        ),
+      );
+    }
+    if (
+      !connectors.some((connector) =>
+        connector.id.toLowerCase().includes('coinbase'),
+      ) &&
+      !isWalletInstalled('coinbase')
+    ) {
+      evmConnectors.unshift(
+        createCoinbaseConnector(
+          walletConfig?.coinbase ?? defaultCoinbaseConfig,
+        ),
+      );
+    }
+    if (
+      !connectors.some((connector) =>
+        connector.id.toLowerCase().includes('metamask'),
+      ) &&
+      !isWalletInstalled('metaMask')
+    ) {
+      evmConnectors.unshift(
+        createMetaMaskConnector(
+          walletConfig?.metaMask ?? defaultMetaMaskConfig,
+        ),
+      );
+    }
+    const evmInstalled = isItemAllowed(ChainType.EVM, chains?.types)
+      ? evmConnectors.filter(
+          (connector) =>
+            isWalletInstalled(connector.id!) &&
+            // We should not show already connected connectors
+            account.connector?.id !== connector.id,
+        )
+      : [];
+    const evmNotDetected = isItemAllowed(ChainType.EVM, chains?.types)
+      ? evmConnectors.filter((connector) => !isWalletInstalled(connector.id!))
+      : [];
+    const svmInstalled = isItemAllowed(ChainType.SVM, chains?.types)
+      ? solanaWallets?.filter(
+          (connector) =>
+            connector.adapter.readyState === WalletReadyState.Installed &&
+            // We should not show already connected connectors
+            !connector.adapter.connected,
+        )
+      : [];
+    const svmNotDetected = isItemAllowed(ChainType.SVM, chains?.types)
+      ? solanaWallets?.filter(
+          (connector) =>
+            connector.adapter.readyState !== WalletReadyState.Installed,
+        )
+      : [];
+
+    const installedWallets = [...evmInstalled, ...svmInstalled].sort(
+      walletComparator,
+    );
+
+    if (isDesktopView) {
+      const notDetectedWallets = [...evmNotDetected, ...svmNotDetected].sort(
+        walletComparator,
+      );
+      installedWallets.push(...notDetectedWallets);
+    }
+
+    return installedWallets;
+  }, [
+    account.connector?.id,
+    chains?.types,
+    connectors,
+    isDesktopView,
+    solanaWallets,
+    walletConfig?.coinbase,
+    walletConfig?.metaMask,
+    walletConfig?.walletConnect,
+  ]);
+
+  return wallets;
+};
+
+export const walletComparator = (
+  a: CreateConnectorFnExtended | Connector | Wallet,
+  b: CreateConnectorFnExtended | Connector | Wallet,
+) => {
+  let aId = (a as Connector).id || (a as Wallet).adapter?.name;
+  let bId = (b as Connector).id || (b as Wallet).adapter?.name;
+
+  const priorityA = getWalletPriority(aId);
+  const priorityB = getWalletPriority(bId);
+
+  if (priorityA !== priorityB) {
+    return priorityA - priorityB;
+  }
+
+  if (aId < bId) {
+    return -1;
+  }
+  if (aId > bId) {
+    return 1;
+  }
+  return 0;
+};

package/i18n/en.json

@@ -16,10 +16,10 @@
     "bridgeReview": "Review bridge",
     "buy": "Buy",
     "cancel": "Cancel",
+    "changeWallet": "Change wallet",
     "checkoutReview": "Review purchase",
     "close": "Close",
     "confirm": "Confirm",
-    "connectAnotherWallet": "Connect another wallet",
     "connectWallet": "Connect wallet",
     "contactSupport": "Contact support",
     "continue": "Continue",
@@ -82,6 +82,9 @@
       "autoRefuel": "You're low on {{chainName}} gas. By continuing, you'll get enough gas to complete the transaction.",
       "emptyActiveTransactions": "Transactions in progress will appear here. Once completed, find them in transaction history.",
       "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please search by contract address if your token doesn't appear or choose another chain.",
+      "emptyChainList": "We couldn't find any chains that match your search",
+      "emptyBridgesList": "We couldn't find any bridges that match your search",
+      "emptyExchangesList": "We couldn't find any exchanges that match your search",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
       "fundsToExchange": "Funds sent to an exchange may be lost",
       "toAddressIsRequired": "Please provide the destination wallet address to which the funds will be transferred.",
@@ -139,7 +142,6 @@
       "signatureRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
       "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new quote.",
       "transactionCanceled": "Transaction was canceled.",
-      "transactionConflict": "Transaction couldn't be processed because it's conflicting with another pending transaction using the same funds. Please wait for the pending transaction to be confirmed or check your transaction history before trying again.",
       "transactionExpired": "The block height has exceeded the maximum allowed limit or blockhash is no longer recent enough.",
       "transactionFailed": "Please check the block explorer for more information.",
       "transactionNotSent": "Transaction was not sent.",
@@ -159,7 +161,6 @@
       "signatureRejected": "Signature required",
       "slippageNotMet": "Slippage conditions not met",
       "transactionCanceled": "Transaction canceled",
-      "transactionConflict": "Transaction conflict",
       "transactionExpired": "Transaction expired",
       "transactionFailed": "Transaction failed",
       "transactionSimulationFailed": "Transaction simulation failed",
@@ -277,7 +278,10 @@
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
     "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}}",
     "tokenSearch": "Search by token name or address",
-    "valueLoss": "Value loss"
+    "valueLoss": "Value loss",
+    "searchChains": "Search by chain name",
+    "searchBridges": "Search by bridge name",
+    "searchExchanges": "Search by exchange name"
   },
   "settings": {
     "theme": "Theme",
@@ -305,5 +309,8 @@
     "noBookmarkedWallets": "No bookmarked wallets",
     "noConnectedWallets": "No connected wallets",
     "noRecentWallets": "No recent wallets"
+  },
+  "wallet": {
+    "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
   }
 }

package/index.ts

@@ -8,7 +8,9 @@ export * from './components/ContractComponent/NFT/types.js';
 export * from './components/Skeleton/WidgetSkeleton.js';
 export { defaultMaxHeight } from './config/constants.js';
 export * from './config/version.js';
+export { useAccount } from './hooks/useAccount.js';
 export { useAvailableChains } from './hooks/useAvailableChains.js';
+export { useWallets, walletComparator } from './hooks/useWallets.js';
 export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js';
 export * from './stores/form/types.js';
 export { useFieldActions } from './stores/form/useFieldActions.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.7.0-beta.7",
+  "version": "3.7.0",
   "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": "./_esm/index.js",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@lifi/sdk": "^3.3.0-beta.0",
-    "@lifi/wallet-management": "^3.3.0-beta.7",
+    "@lifi/sdk": "^3.2.3",
+    "@lifi/wallet-management": "^3.1.7",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",
@@ -52,6 +52,7 @@
     "react-i18next": "^15.0.2",
     "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.26.2",
+    "uuid": "^10.0.0",
     "viem": "^2.21.16",
     "wagmi": "^2.12.16",
     "zustand": "^4.5.5"

package/pages/RoutesPage/RoutesPage.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-array-index-key */
 import type { Route } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
 import type { BoxProps } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +7,7 @@ import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
 import { RouteCard } from '../../components/RouteCard/RouteCard.js';
 import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js';
 import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useRoutes } from '../../hooks/useRoutes.js';

package/pages/SelectChainPage/SelectChainPage.tsx

@@ -1,13 +1,19 @@
 import type { ExtendedChain } from '@lifi/sdk';
-import { Avatar, List, ListItemAvatar } from '@mui/material';
+import { Avatar, debounce, ListItemAvatar } from '@mui/material';
+import { type FormEventHandler, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js';
+import { FullPageContainer } from '../../components/FullPageContainer.js';
 import { ListItemButton } from '../../components/ListItemButton.js';
 import { ListItemText } from '../../components/ListItemText.js';
-import { PageContainer } from '../../components/PageContainer.js';
+import { StickySearchInput } from '../../components/Search/SearchInput.js';
+import { SearchList } from '../../components/Search/SearchInput.style.js';
+import { SearchNotFound } from '../../components/Search/SearchNotFound.js';
 import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js';
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useScrollableContainer } from '../../hooks/useScrollableContainer.js';
 import type { SelectChainPageProps } from './types.js';
 
 export const SelectChainPage: React.FC<SelectChainPageProps> = ({
@@ -17,8 +23,11 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
   const { navigateBack } = useNavigateBack();
   const { chains, setCurrentChain } = useChainSelect(formType);
   const selectToken = useTokenSelect(formType, navigateBack);
+  const elementId = useDefaultElementId();
+  const scrollableContainer = useScrollableContainer(elementId);
 
   const { t } = useTranslation();
+
   useHeader(t('header.selectChain'));
 
   const handleClick = async (chain: ExtendedChain) => {
@@ -30,27 +39,57 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
     }
   };
 
+  const [filteredChains, setFilteredChains] = useState<ExtendedChain[]>(
+    chains ?? [],
+  );
+
+  const handleSearchInputChange: FormEventHandler<HTMLInputElement> = (e) => {
+    const value = (e.target as HTMLInputElement).value;
+
+    if (!value) {
+      setFilteredChains(chains ?? []);
+    } else {
+      setFilteredChains(
+        chains
+          ? chains.filter((chain) =>
+              chain.name.toLowerCase().includes(value.toLowerCase()),
+            )
+          : [],
+      );
+    }
+
+    if (scrollableContainer) {
+      scrollableContainer.scrollTop = 0;
+    }
+  };
+
+  const debouncedSearchInputChange = debounce(handleSearchInputChange, 250);
+
   return (
-    <PageContainer disableGutters>
-      <List
-        sx={{
-          paddingTop: 0,
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-          paddingBottom: 1.5,
-        }}
-      >
-        {chains?.map((chain) => (
-          <ListItemButton key={chain.id} onClick={() => handleClick(chain)}>
-            <ListItemAvatar>
-              <Avatar src={chain.logoURI} alt={chain.name}>
-                {chain.name[0]}
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={chain.name} />
-          </ListItemButton>
-        ))}
-      </List>
-    </PageContainer>
+    <FullPageContainer disableGutters>
+      <StickySearchInput
+        onChange={debouncedSearchInputChange}
+        placeholder={t('main.searchChains')}
+      />
+      {filteredChains.length ? (
+        <SearchList>
+          {filteredChains.map((chain) => (
+            <ListItemButton key={chain.id} onClick={() => handleClick(chain)}>
+              <ListItemAvatar>
+                <Avatar src={chain.logoURI} alt={chain.name}>
+                  {chain.name[0]}
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={chain.name} />
+            </ListItemButton>
+          ))}
+        </SearchList>
+      ) : (
+        <SearchNotFound
+          message={t('info.message.emptyChainList')}
+          adjustForStickySearchInput
+        />
+      )}
+    </FullPageContainer>
   );
 };

package/pages/SelectEnabledToolsPage.tsx

@@ -1,3 +1,4 @@
+import type { ToolsResponse } from '@lifi/sdk';
 import {
   Check,
   CheckBoxOutlineBlankOutlined,
@@ -6,20 +7,25 @@ import {
 } from '@mui/icons-material';
 import {
   Avatar,
+  debounce,
   IconButton,
-  List,
   ListItemAvatar,
   Tooltip,
   useTheme,
 } from '@mui/material';
 import type { MouseEventHandler } from 'react';
-import { useMemo } from 'react';
+import { type FormEventHandler, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
+import { FullPageContainer } from '../components/FullPageContainer.js';
 import { ListItemText } from '../components/ListItemText.js';
-import { PageContainer } from '../components/PageContainer.js';
+import { StickySearchInput } from '../components/Search/SearchInput.js';
+import { SearchList } from '../components/Search/SearchInput.style.js';
+import { SearchNotFound } from '../components/Search/SearchNotFound.js';
 import { SettingsListItemButton } from '../components/SettingsListItemButton.js';
+import { useDefaultElementId } from '../hooks/useDefaultElementId.js';
 import { useHeader } from '../hooks/useHeader.js';
+import { useScrollableContainer } from '../hooks/useScrollableContainer.js';
 import { useTools } from '../hooks/useTools.js';
 import { useSettingsStore } from '../stores/settings/useSettingsStore.js';
 
@@ -27,18 +33,22 @@ interface SelectAllCheckboxProps {
   allCheckboxesSelected: boolean;
   onClick: MouseEventHandler;
   anyCheckboxesSelected: boolean;
+  noCheckboxesAvailable: boolean;
 }
 
 const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
   allCheckboxesSelected,
   anyCheckboxesSelected,
+  noCheckboxesAvailable,
   onClick,
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const tooltipTitle = allCheckboxesSelected
-    ? t('tooltip.deselectAll')
-    : t('tooltip.selectAll');
+  const tooltipTitle = noCheckboxesAvailable
+    ? undefined
+    : allCheckboxesSelected
+      ? t('tooltip.deselectAll')
+      : t('tooltip.selectAll');
 
   return (
     <Tooltip title={tooltipTitle}>
@@ -59,33 +69,54 @@ const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
   );
 };
 
+type ToolCollectionTypes =
+  | ToolsResponse['exchanges']
+  | ToolsResponse['bridges'];
+
 export const SelectEnabledToolsPage: React.FC<{
   type: 'Bridges' | 'Exchanges';
 }> = ({ type }) => {
   const typeKey = type.toLowerCase() as 'bridges' | 'exchanges';
   const { tools } = useTools();
-  const [enabledTools, disabledTools, setToolValue, toggleTools] =
+  const [enabledTools, disabledTools, setToolValue, toggleToolKeys] =
     useSettingsStore(
       (state) => [
         state[`_enabled${type}`],
         state[`disabled${type}`],
         state.setToolValue,
-        state.toggleTools,
+        state.toggleToolKeys,
       ],
       shallow,
     );
 
   const { t } = useTranslation();
+  const elementId = useDefaultElementId();
+  const scrollableContainer = useScrollableContainer(elementId);
+  const [filteredTools, setFilteredTools] = useState<ToolCollectionTypes>(
+    tools?.[typeKey] ?? [],
+  );
 
   const headerAction = useMemo(
     () => (
       <SelectAllCheckbox
-        allCheckboxesSelected={!disabledTools.length}
-        anyCheckboxesSelected={Boolean(disabledTools.length)}
-        onClick={() => toggleTools(type)}
+        allCheckboxesSelected={
+          !!filteredTools.length &&
+          filteredTools.every((tool) => !disabledTools.includes(tool.key))
+        }
+        anyCheckboxesSelected={
+          !!filteredTools.length &&
+          filteredTools.some((tool) => disabledTools.includes(tool.key))
+        }
+        noCheckboxesAvailable={!filteredTools.length}
+        onClick={() =>
+          toggleToolKeys(
+            type,
+            filteredTools.map((tool) => tool.key),
+          )
+        }
       />
     ),
-    [disabledTools.length, toggleTools, type],
+    [disabledTools, toggleToolKeys, type, filteredTools],
   );
 
   useHeader(t(`settings.enabled${type}`), headerAction);
@@ -94,31 +125,57 @@ export const SelectEnabledToolsPage: React.FC<{
     setToolValue(type, key, !enabledTools[key]);
   };
 
+  const handleSearchInputChange: FormEventHandler<HTMLInputElement> = (e) => {
+    const value = (e.target as HTMLInputElement).value;
+
+    if (!value) {
+      setFilteredTools(tools?.[typeKey] ?? []);
+    } else {
+      setFilteredTools(
+        (tools?.[typeKey]
+          ? tools[typeKey].filter((tool) =>
+              tool.name.toLowerCase().includes(value.toLowerCase()),
+            )
+          : []) as ToolCollectionTypes,
+      );
+    }
+
+    if (scrollableContainer) {
+      scrollableContainer.scrollTop = 0;
+    }
+  };
+
+  const debouncedSearchInputChange = debounce(handleSearchInputChange, 250);
+
   return (
-    <PageContainer disableGutters>
-      <List
-        sx={{
-          paddingTop: 0,
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-          paddingBottom: 1.5,
-        }}
-      >
-        {tools?.[typeKey].map((tool) => (
-          <SettingsListItemButton
-            key={tool.name}
-            onClick={() => handleClick(tool.key)}
-          >
-            <ListItemAvatar>
-              <Avatar src={tool.logoURI} alt={tool.name}>
-                {tool.name[0]}
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={tool.name} />
-            {enabledTools[tool.key] && <Check color="primary" />}
-          </SettingsListItemButton>
-        ))}
-      </List>
-    </PageContainer>
+    <FullPageContainer disableGutters>
+      <StickySearchInput
+        onChange={debouncedSearchInputChange}
+        placeholder={t(`main.search${type}`)}
+      />
+      {filteredTools.length ? (
+        <SearchList>
+          {filteredTools.map((tool) => (
+            <SettingsListItemButton
+              key={tool.name}
+              onClick={() => handleClick(tool.key)}
+            >
+              <ListItemAvatar>
+                <Avatar src={tool.logoURI} alt={tool.name}>
+                  {tool.name[0]}
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={tool.name} />
+              {enabledTools[tool.key] && <Check color="primary" />}
+            </SettingsListItemButton>
+          ))}
+        </SearchList>
+      ) : (
+        <SearchNotFound
+          message={t(`info.message.empty${type}List`)}
+          adjustForStickySearchInput
+        />
+      )}
+    </FullPageContainer>
   );
 };