Remove fuse

package.json

@@ -64,7 +64,6 @@
     "eth-testing": "1.9.1",
     "ethers": "6.12.1",
     "framer-motion": "11.1.9",
-    "fuse.js": "7.0.0",
     "graphql": "15.8.0",
     "hex-to-rgba": "2.0.1",
     "html-to-image": "^1.10.8",

src/components/MarketSelector/GmPoolsSelectorForGlvMarket.tsx

@@ -6,7 +6,7 @@ import { BiChevronDown } from "react-icons/bi";
 import { getNormalizedTokenSymbol } from "config/tokens";
 
 import { getByKey } from "lib/objects";
-import { useFuse } from "lib/useFuse";
+import { searchBy } from "lib/searchBy";
 
 import { FavoriteTabs } from "components/FavoriteTabs/FavoriteTabs";
 import SearchInput from "components/SearchInput/SearchInput";
@@ -16,8 +16,8 @@ import TokenIcon from "components/TokenIcon/TokenIcon";
 import {
   GlvInfo,
   MarketInfo,
-  getMarketIndexName,
   getGlvOrMarketAddress,
+  getMarketIndexName,
   getMarketPoolName,
   isMarketInfo,
 } from "domain/synthetics/markets";
@@ -114,24 +114,16 @@ export function GmPoolsSelectorForGlvMarket({
   const selectedMarketInfo = selectedPool?.marketInfo;
   const marketInfo = selectedMarketInfo && isMarketInfo(selectedMarketInfo) ? selectedMarketInfo : undefined;
 
-  const fuse = useFuse(
-    () =>
-      marketsOptions.map((item, index) => {
-        const indexTokenName = stripBlacklistedWords((item.marketInfo as MarketInfo).indexToken.name);
-        const indexTokenSymbol = (item.marketInfo as MarketInfo).indexToken.symbol;
-
-        return {
-          id: index,
-          indexTokenName,
-          indexTokenSymbol,
-        };
-      }),
-    marketsOptions?.map((item) => (item.marketInfo as MarketInfo).marketTokenAddress)
-  );
-
   const filteredOptions = useMemo(() => {
     const textMatched = searchKeyword.trim()
-      ? fuse.search(searchKeyword).map((result) => marketsOptions[result.item.id])
+      ? searchBy(
+          marketsOptions,
+          [
+            (item) => stripBlacklistedWords((item.marketInfo as MarketInfo).indexToken.name),
+            (item) => (item.marketInfo as MarketInfo).indexToken.symbol,
+          ],
+          searchKeyword
+        )
       : marketsOptions;
 
     const tabMatched = textMatched?.filter((item) => {
@@ -143,7 +135,7 @@ export function GmPoolsSelectorForGlvMarket({
     });
 
     return tabMatched;
-  }, [favoriteTokens, fuse, marketsOptions, searchKeyword, tab]);
+  }, [favoriteTokens, marketsOptions, searchKeyword, tab]);
 
   const onSelectGmPool = useCallback(
     function onSelectOption(option: MarketOption) {

src/components/MarketSelector/MarketSelector.tsx

@@ -13,7 +13,7 @@ import { stripBlacklistedWords } from "domain/tokens/utils";
 import { importImage } from "lib/legacy";
 import { formatTokenAmount, formatUsd } from "lib/numbers";
 import { getByKey } from "lib/objects";
-import { useFuse } from "lib/useFuse";
+import { searchBy } from "lib/searchBy";
 
 import FavoriteStar from "components/FavoriteStar/FavoriteStar";
 import { FavoriteTabs } from "components/FavoriteTabs/FavoriteTabs";
@@ -104,19 +104,16 @@ export function MarketSelector({
 
   const marketInfo = marketsOptions.find((option) => option.indexName === selectedIndexName)?.marketInfo;
 
-  const fuse = useFuse(
-    () =>
-      marketsOptions.map((item, index) => ({
-        id: index,
-        name: item.indexName,
-        indexTokenName: item.marketInfo.isSpotOnly ? "" : stripBlacklistedWords(item.marketInfo.indexToken.name),
-      })),
-    marketsOptions?.map((item) => item.marketInfo.indexToken.address)
-  );
-
   const filteredOptions = useMemo(() => {
     const textMatched = searchKeyword.trim()
-      ? fuse.search(searchKeyword).map((result) => marketsOptions[result.item.id])
+      ? searchBy(
+          marketsOptions,
+          [
+            "indexName",
+            (item) => (item.marketInfo.isSpotOnly ? "" : stripBlacklistedWords(item.marketInfo.indexToken.name)),
+          ],
+          searchKeyword
+        )
       : marketsOptions;
 
     const tabMatched = textMatched?.filter((item) => {
@@ -128,7 +125,7 @@ export function MarketSelector({
     });
 
     return tabMatched;
-  }, [favoriteTokens, fuse, marketsOptions, searchKeyword, tab]);
+  }, [favoriteTokens, marketsOptions, searchKeyword, tab]);
 
   useMissedCoinsSearch({
     searchText: searchKeyword,

src/components/MarketSelector/PoolSelector.tsx

@@ -16,7 +16,7 @@ import { convertToUsd } from "domain/synthetics/tokens";
 import { useTokensFavorites } from "domain/synthetics/tokens/useTokensFavorites";
 import { stripBlacklistedWords } from "domain/tokens/utils";
 import { getByKey } from "lib/objects";
-import { useFuse } from "lib/useFuse";
+import { searchBy } from "lib/searchBy";
 
 import { FavoriteTabs } from "components/FavoriteTabs/FavoriteTabs";
 import SearchInput from "components/SearchInput/SearchInput";
@@ -97,20 +97,17 @@ export function PoolSelector({
     [marketsOptions, selectedMarketAddress]
   );
 
-  const fuse = useFuse(
-    () =>
-      marketsOptions.map((item, index) => ({
-        id: index,
-        name: isGlvInfo(item.marketInfo) ? getGlvDisplayName(item.marketInfo) : item.name,
-        longTokenName: stripBlacklistedWords(item.marketInfo.longToken.name),
-        shortTokenName: stripBlacklistedWords(item.marketInfo.shortToken.name),
-      })),
-    marketsOptions?.map((item) => item.indexName)
-  );
-
   const filteredOptions = useMemo(() => {
     const textMatched = searchKeyword.trim()
-      ? fuse.search(searchKeyword).map((result) => marketsOptions[result.item.id])
+      ? searchBy(
+          marketsOptions,
+          [
+            (item) => (isGlvInfo(item.marketInfo) ? getGlvDisplayName(item.marketInfo) : item.name),
+            (item) => stripBlacklistedWords(item.marketInfo.longToken.name),
+            (item) => stripBlacklistedWords(item.marketInfo.shortToken.name),
+          ],
+          searchKeyword
+        )
       : marketsOptions;
 
     const tabMatched = textMatched?.filter((item) => {
@@ -122,7 +119,7 @@ export function PoolSelector({
     });
 
     return tabMatched;
-  }, [favoriteTokens, fuse, marketsOptions, searchKeyword, tab]);
+  }, [favoriteTokens, marketsOptions, searchKeyword, tab]);
 
   function onSelectOption(option: MarketOption) {
     onSelectMarket(option.marketInfo);

src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx

@@ -17,12 +17,11 @@ import { PreferredTradeTypePickStrategy } from "domain/synthetics/markets/choose
 import { getMarketIndexName, getMarketPoolName } from "domain/synthetics/markets/utils";
 import { useTokensFavorites } from "domain/synthetics/tokens/useTokensFavorites";
 import { TradeType } from "domain/synthetics/trade";
-import type { Token } from "domain/tokens";
-import { stripBlacklistedWords } from "domain/tokens/utils";
+import { stripBlacklistedWords, type Token } from "domain/tokens";
 import { helperToast } from "lib/helperToast";
 import { formatAmountHuman, formatUsd } from "lib/numbers";
-import { EMPTY_ARRAY, getByKey } from "lib/objects";
-import { useFuse } from "lib/useFuse";
+import { getByKey } from "lib/objects";
+import { searchBy } from "lib/searchBy";
 
 import FavoriteStar from "components/FavoriteStar/FavoriteStar";
 import { FavoriteTabs } from "components/FavoriteTabs/FavoriteTabs";
@@ -291,16 +290,15 @@ function useFilterSortTokens({
   direction: SortDirection;
   orderBy: SortField;
 }) {
-  const fuse = useFuse(
-    () =>
-      options?.map((item, index) => ({ id: index, name: stripBlacklistedWords(item.name), symbol: item.symbol })) ||
-      EMPTY_ARRAY,
-    options?.map((item) => item.address)
-  );
-
   const filteredTokens: Token[] | undefined = useMemo(() => {
     const textMatched =
-      searchKeyword.trim() && options ? fuse.search(searchKeyword).map((result) => options[result.item.id]) : options;
+      searchKeyword.trim() && options
+        ? searchBy(
+            options,
+            [(item) => stripBlacklistedWords(item.name), (item) => `${getTokenVisualMultiplier(item)}${item.symbol}`],
+            searchKeyword
+          )
+        : options;
 
     const tabMatched = textMatched?.filter((item) => {
       if (tab === "favorites") {
@@ -311,7 +309,7 @@ function useFilterSortTokens({
     });
 
     return tabMatched;
-  }, [favoriteTokens, fuse, options, searchKeyword, tab]);
+  }, [favoriteTokens, options, searchKeyword, tab]);
 
   const getMaxLongShortLiquidityPool = useSelector(selectTradeboxGetMaxLongShortLiquidityPool);
 

src/components/Synthetics/GmList/GmList.tsx

@@ -1,13 +1,12 @@
 import { Trans, t } from "@lingui/macro";
 import cx from "classnames";
-import keys from "lodash/keys";
 import values from "lodash/values";
 import React, { useMemo, useState } from "react";
 import { useAccount } from "wagmi";
 
 import usePagination, { DEFAULT_PAGE_SIZE } from "components/Referrals/usePagination";
 import { getIcons } from "config/icons";
-import { getNormalizedTokenSymbol } from "config/tokens";
+import { getNormalizedTokenSymbol, getTokenVisualMultiplier } from "config/tokens";
 import { useSettings } from "context/SettingsContext/SettingsContextProvider";
 import { useTokensData } from "context/SyntheticsStateContext/hooks/globalsHooks";
 import {
@@ -37,7 +36,7 @@ import { TokenFavoritesTabOption, useTokensFavorites } from "domain/synthetics/t
 import { stripBlacklistedWords } from "domain/tokens/utils";
 import { formatTokenAmount, formatUsd, formatUsdPrice } from "lib/numbers";
 import { getByKey } from "lib/objects";
-import { useFuse } from "lib/useFuse";
+import { searchBy } from "lib/searchBy";
 import { sortGmTokensByField } from "./sortGmTokensByField";
 import { sortGmTokensDefault } from "./sortGmTokensDefault";
 
@@ -275,44 +274,42 @@ function useFilterSortPools({
 }) {
   const chainId = useSelector(selectChainId);
 
-  const fuse = useFuse(
-    () =>
-      values(marketsInfo).map((market) => {
-        let name = "";
-        let symbol = "";
-        if (isGlvInfo(market)) {
-          const longTokenSymbol = market.longToken.symbol;
-          symbol = `${market.glvToken.symbol} ${longTokenSymbol}`;
-
-          const displayName = getGlvDisplayName(market);
-          const subtitle = getGlvMarketSubtitle(chainId, market.glvTokenAddress);
-          const longTokenName = stripBlacklistedWords(market.longToken.name);
-
-          name = [displayName, subtitle, longTokenName].filter(Boolean).join(" ");
-        } else if (market.isSpotOnly) {
-          symbol = "SWAP-ONLY";
-          name = getMarketPoolName(market);
-        } else {
-          symbol = market.indexToken.symbol;
-          name = stripBlacklistedWords(market.indexToken.name);
-        }
-
-        return {
-          id: getGlvOrMarketAddress(market),
-          name,
-          symbol,
-        };
-      }),
-    [chainId, keys(marketsInfo).join(",")]
-  );
-
   const sortedTokens = useMemo(() => {
     if (!marketsInfo || !marketTokensData) {
       return [];
     }
 
     if (searchText.trim()) {
-      return fuse.search(searchText).map((result) => marketTokensData[result.item.id]);
+      return searchBy(
+        values(marketTokensData),
+        [
+          (marketToken) => {
+            const market = getByKey(marketsInfo, marketToken?.address)!;
+            let name = "";
+            let symbol = "";
+            if (isGlvInfo(market)) {
+              const longTokenSymbol = market.longToken.symbol;
+              symbol = `${market.glvToken.symbol} ${longTokenSymbol}`;
+
+              const displayName = getGlvDisplayName(market);
+              const subtitle = getGlvMarketSubtitle(chainId, market.glvTokenAddress);
+              const longTokenName = stripBlacklistedWords(market.longToken.name);
+
+              name = [displayName, subtitle, longTokenName].filter(Boolean).join(" ");
+            } else if (market.isSpotOnly) {
+              symbol = "SWAP-ONLY";
+              name = getMarketPoolName(market);
+            } else {
+              symbol = market.indexToken.symbol;
+              const prefix = getTokenVisualMultiplier(market.indexToken);
+              name = `${prefix}${stripBlacklistedWords(market.indexToken.name)}`;
+            }
+
+            return `${name} ${symbol}`;
+          },
+        ],
+        searchText
+      );
     }
 
     if (orderBy === "unspecified" || direction === "unspecified") {
@@ -343,7 +340,6 @@ function useFilterSortPools({
     glvTokensIncentiveAprData,
     glvTokensApyData,
     marketsTokensLidoAprData,
-    fuse,
   ]);
 
   const filteredTokens = useMemo(() => {

src/components/Synthetics/MarketTokenSelector/MarketTokenSelector.tsx

@@ -26,7 +26,7 @@ import { TokenFavoritesTabOption, useTokensFavorites } from "domain/synthetics/t
 import useSortedPoolsWithIndexToken from "domain/synthetics/trade/useSortedPoolsWithIndexToken";
 import { formatAmountHuman, formatTokenAmount, formatUsd } from "lib/numbers";
 import { getByKey } from "lib/objects";
-import { useFuse } from "lib/useFuse";
+import { searchBy } from "lib/searchBy";
 
 import { AprInfo } from "components/AprInfo/AprInfo";
 import FavoriteStar from "components/FavoriteStar/FavoriteStar";
@@ -334,25 +334,22 @@ function useFilterSortTokensInfo({
   orderBy: SortField;
   direction: SortDirection;
 }) {
-  const fuse = useFuse(
-    () =>
-      sortedMarketsByIndexToken.map((market, index) => {
-        const marketInfo = getByKey(marketsInfoData, market?.address)!;
-        return {
-          id: index,
-          marketName: isGlvInfo(marketInfo) ? getGlvDisplayName(marketInfo) : marketInfo.name,
-        };
-      }),
-    sortedMarketsByIndexToken.map((market) => market.address)
-  );
-
   const filteredTokensInfo = useMemo(() => {
     if (sortedMarketsByIndexToken.length < 1) {
       return [];
     }
 
     const textMatched = searchKeyword.trim()
-      ? fuse.search(searchKeyword).map((result) => sortedMarketsByIndexToken[result.item.id])
+      ? searchBy(
+          sortedMarketsByIndexToken,
+          [
+            (item) => {
+              const marketInfo = getByKey(marketsInfoData, item?.address)!;
+              return isGlvInfo(marketInfo) ? getGlvDisplayName(marketInfo) : marketInfo.name;
+            },
+          ],
+          searchKeyword
+        )
       : sortedMarketsByIndexToken;
 
     const tabMatched = textMatched.filter((item) => {
@@ -397,7 +394,6 @@ function useFilterSortTokensInfo({
   }, [
     sortedMarketsByIndexToken,
     searchKeyword,
-    fuse,
     tab,
     favoriteTokens,
     marketsInfoData,