Simplify search to use substring search (#710)

skip-mev · Jan 24, 2025 · 749eea4 · 749eea4
1 parent 5c29ffa
commit 749eea4
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 56 deletions.
diff --git a/.changeset/green-boxes-sparkle.md b/.changeset/green-boxes-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": patch
+---
+
+Simplify search to use substring search
diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -120,7 +120,6 @@
     "jotai-effect": "^1.0.2",
     "jotai-tanstack-query": "^0.8.6",
     "lodash.debounce": "^4.0.8",
-    "match-sorter": "^6.3.4",
     "pluralize": "^8.0.0",
     "rc-virtual-list": "^3.14.5",
     "react-error-boundary": "^4.0.13",

diff --git a/packages/widget/src/modals/AssetAndChainSelectorModal/useFilteredAssets.ts b/packages/widget/src/modals/AssetAndChainSelectorModal/useFilteredAssets.ts
@@ -1,4 +1,3 @@
-import { matchSorter } from "match-sorter";
 import { useMemo } from "react";
 import { GroupedAsset } from "./AssetAndChainSelectorModal";
 
@@ -36,26 +35,26 @@ export const useFilteredAssets = ({
       })
       .filter(Boolean) as GroupedAsset[];
 
-    return matchSorter(sanitizedAssets, searchQuery, {
-      keys: ["id", "name"],
-    }).sort((assetA, assetB) => {
-      const bothHaveZeroBalance = assetA.totalUsd === 0 && assetB.totalUsd === 0;
+    return sanitizedAssets
+      .filter((asset) => asset.id?.toLowerCase()?.includes(searchQuery.toLowerCase()))
+      .sort((assetA, assetB) => {
+        const bothHaveZeroBalance = assetA.totalUsd === 0 && assetB.totalUsd === 0;
 
-      if (bothHaveZeroBalance) {
-        const aPrivilegedIndex = PRIVILEGED_ASSETS.indexOf(assetA.id);
-        const bPrivilegedIndex = PRIVILEGED_ASSETS.indexOf(assetB.id);
+        if (bothHaveZeroBalance) {
+          const aPrivilegedIndex = PRIVILEGED_ASSETS.indexOf(assetA.id);
+          const bPrivilegedIndex = PRIVILEGED_ASSETS.indexOf(assetB.id);
 
-        const bothArePrivileged = aPrivilegedIndex !== -1 && bPrivilegedIndex !== -1;
-        if (bothArePrivileged) {
-          return aPrivilegedIndex - bPrivilegedIndex;
-        }
+          const bothArePrivileged = aPrivilegedIndex !== -1 && bPrivilegedIndex !== -1;
+          if (bothArePrivileged) {
+            return aPrivilegedIndex - bPrivilegedIndex;
+          }
 
-        if (bPrivilegedIndex !== -1) return 1;
-        if (aPrivilegedIndex !== -1) return -1;
-      }
+          if (bPrivilegedIndex !== -1) return 1;
+          if (aPrivilegedIndex !== -1) return -1;
+        }
 
-      return assetB.totalUsd - assetA.totalUsd;
-    });
+        return assetB.totalUsd - assetA.totalUsd;
+      });
   }, [groupedAssetsByRecommendedSymbol, searchQuery]);
 
   return filteredAssets;

diff --git a/packages/widget/src/modals/AssetAndChainSelectorModal/useFilteredChains.ts b/packages/widget/src/modals/AssetAndChainSelectorModal/useFilteredChains.ts
@@ -1,4 +1,3 @@
-import { matchSorter } from "match-sorter";
 import { useMemo } from "react";
 import { ChainWithAsset, GroupedAsset } from "./AssetAndChainSelectorModal";
 import { skipChainsAtom } from "@/state/skipClient";
@@ -50,28 +49,30 @@ export const useFilteredChains = ({
         return isAllowedByFilter && isPenumbraAllowed;
       }) as ChainWithAsset[];
 
-    return matchSorter(chainsWithAssets, searchQuery, {
-      keys: ["prettyName", "chainName", "chainID"],
-    }).sort((chainWithAssetA, chainWithAssetB) => {
-      const usdValueA = Number(
-        getBalance(chainWithAssetA.chainID, chainWithAssetA.asset.denom)?.valueUSD ?? 0,
-      );
-      const usdValueB = Number(
-        getBalance(chainWithAssetB.chainID, chainWithAssetB.asset.denom)?.valueUSD ?? 0,
-      );
+    return chainsWithAssets
+      .filter((chainWithAsset) =>
+        chainWithAsset.chainName.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+      .sort((chainWithAssetA, chainWithAssetB) => {
+        const usdValueA = Number(
+          getBalance(chainWithAssetA.chainID, chainWithAssetA.asset.denom)?.valueUSD ?? 0,
+        );
+        const usdValueB = Number(
+          getBalance(chainWithAssetB.chainID, chainWithAssetB.asset.denom)?.valueUSD ?? 0,
+        );
 
-      // 1. Sort by USD value
-      if (usdValueB !== usdValueA) return usdValueB - usdValueA;
+        // 1. Sort by USD value
+        if (usdValueB !== usdValueA) return usdValueB - usdValueA;
 
-      const chainAIsOrigin = chainWithAssetA.asset.originChainID === chainWithAssetA.chainID;
-      const chainBIsOrigin = chainWithAssetB.asset.originChainID === chainWithAssetB.chainID;
+        const chainAIsOrigin = chainWithAssetA.asset.originChainID === chainWithAssetA.chainID;
+        const chainBIsOrigin = chainWithAssetB.asset.originChainID === chainWithAssetB.chainID;
 
-      // 2. If USD values are equal, sort by origin chain
-      if (chainBIsOrigin) return 1;
-      if (chainAIsOrigin) return -1;
+        // 2. If USD values are equal, sort by origin chain
+        if (chainBIsOrigin) return 1;
+        if (chainAIsOrigin) return -1;
 
-      return 0;
-    });
+        return 0;
+      });
   }, [chainFilter, chains, context, getBalance, searchQuery, selectedGroup]);
 
   return filteredChains;

diff --git a/yarn.lock b/yarn.lock
@@ -1901,7 +1901,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4":
   version: 7.24.7
   resolution: "@babel/runtime@npm:7.24.7"
   dependencies:
@@ -7834,7 +7834,6 @@ __metadata:
     jotai-effect: ^1.0.2
     jotai-tanstack-query: ^0.8.6
     lodash.debounce: ^4.0.8
-    match-sorter: ^6.3.4
     node-polyfill-webpack-plugin: ^4.0.0
     pino-pretty: ^13.0.0
     pluralize: ^8.0.0
@@ -20404,16 +20403,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"match-sorter@npm:^6.3.4":
-  version: 6.3.4
-  resolution: "match-sorter@npm:6.3.4"
-  dependencies:
-    "@babel/runtime": ^7.23.8
-    remove-accents: 0.5.0
-  checksum: 950c1600173a639e216947559a389b64258d52f33aea3a6ddb97500589888b83c976a028f731f40bc08d9d8af20de7916992fabb403f38330183a1df44c7634b
-  languageName: node
-  linkType: hard
-
 "md5.js@npm:^1.3.4":
   version: 1.3.5
   resolution: "md5.js@npm:1.3.5"
@@ -24131,13 +24120,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remove-accents@npm:0.5.0":
-  version: 0.5.0
-  resolution: "remove-accents@npm:0.5.0"
-  checksum: 7045b37015acb03df406d21f9cbe93c3fcf2034189f5d2e33b1dace9c7d6bdcd839929905ced21a5d76c58553557e1a42651930728702312a5774179d5b9147b
-  languageName: node
-  linkType: hard
-
 "require-directory@npm:^2.1.1":
   version: 2.1.1
   resolution: "require-directory@npm:2.1.1"