From 340cc182f8dffe9b514eb5dca64749f54015fecb Mon Sep 17 00:00:00 2001 From: Anirudha Bose Date: Fri, 17 Sep 2021 00:17:12 +0530 Subject: [PATCH] feat(wallet): use Fuse.js for fuzzy-search in select-assets list --- .../buy-send-swap/select-asset/index.tsx | 38 +++++++++++++------ package-lock.json | 36 ++++++++---------- package.json | 1 + third_party/npm_fuse.js/README.chromium | 4 ++ 4 files changed, 47 insertions(+), 32 deletions(-) create mode 100644 third_party/npm_fuse.js/README.chromium diff --git a/components/brave_wallet_ui/components/buy-send-swap/select-asset/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/select-asset/index.tsx index 2b9e1cfc956..bdc7aa3ba4f 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/select-asset/index.tsx +++ b/components/brave_wallet_ui/components/buy-send-swap/select-asset/index.tsx @@ -1,4 +1,6 @@ import * as React from 'react' +import Fuse from 'fuse.js' + import SelectAssetItem from '../select-asset-item' import { AccountAssetOptionType } from '../../../constants/types' import { SearchBar } from '../../shared' @@ -18,31 +20,45 @@ export interface Props { function SelectAsset (props: Props) { const { assets, onBack, onSelectAsset } = props + + const fuse = React.useMemo(() => new Fuse(assets, { + shouldSort: true, + threshold: 0.45, + location: 0, + distance: 100, + minMatchCharLength: 1, + keys: [ + { name: 'asset.name', weight: 0.5 }, + { name: 'asset.symbol', weight: 0.5 } + ] + }), [assets]) + const [filteredAssetList, setFilteredAssetList] = React.useState(assets) - const filterAssetList = (event: any) => { + const filterAssetList = React.useCallback((event: React.ChangeEvent) => { const search = event.target.value if (search === '') { setFilteredAssetList(assets) } else { - const filteredList = assets.filter((item) => { - return ( - item.asset.name.toLowerCase() === search.toLowerCase() || - item.asset.name.toLowerCase().startsWith(search.toLowerCase()) || - item.asset.symbol.toLocaleLowerCase() === search.toLowerCase() || - item.asset.symbol.toLowerCase().startsWith(search.toLowerCase()) - ) - }) + const filteredList = fuse.search(search).map((result: Fuse.FuseResult) => result.item) setFilteredAssetList(filteredList) } - } + }, [fuse, assets]) return (
- {filteredAssetList.map((asset) => )} + { + filteredAssetList.map((asset: AccountAssetOptionType) => + + ) + } ) diff --git a/package-lock.json b/package-lock.json index 1a09d89d63d..8f2f08442ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4060,6 +4060,12 @@ "find-up": "^4.1.0" } }, + "fuse.js": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz", + "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==", + "dev": true + }, "markdown-to-jsx": { "version": "6.11.4", "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz", @@ -6201,8 +6207,8 @@ } }, "brave-ui": { - "version": "github:brave/brave-ui#abf54ab62e464a03762197cb751c957dbc801427", - "from": "github:brave/brave-ui#abf54ab62e464a03762197cb751c957dbc801427", + "version": "github:brave/brave-ui#86e384b96d1038fbd25d7b7390f73d4268b50d36", + "from": "github:brave/brave-ui#86e384b96d1038fbd25d7b7390f73d4268b50d36", "dev": true, "requires": { "@ctrl/tinycolor": "^2.2.1", @@ -10019,10 +10025,9 @@ "dev": true }, "fuse.js": { - "version": "3.6.1", - "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz", - "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==", - "dev": true + "version": "6.4.6", + "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.6.tgz", + "integrity": "sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw==" }, "gauge": { "version": "2.7.4", @@ -10939,11 +10944,6 @@ "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=" }, - "ip-regex": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz", - "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==" - }, "ip-set": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/ip-set/-/ip-set-2.1.0.tgz", @@ -11201,14 +11201,6 @@ "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", "dev": true }, - "is-ip": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz", - "integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==", - "requires": { - "ip-regex": "^4.0.0" - } - }, "is-map": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz", @@ -13474,7 +13466,8 @@ "node-fetch": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", - "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", + "dev": true }, "node-gyp-build": { "version": "4.2.3", @@ -14793,7 +14786,8 @@ "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", - "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", + "dev": true }, "pure-color": { "version": "1.3.0", diff --git a/package.json b/package.json index 59b26106a7c..55f0a33090b 100644 --- a/package.json +++ b/package.json @@ -321,6 +321,7 @@ "bluebird": "^3.5.1", "core-js": "^3.9.1", "date-fns": "^2.15.0", + "fuse.js": "^6.4.6", "jszip": "^3.2.2", "prettier-bytes": "^1.0.4", "qr-image": "^3.2.0", diff --git a/third_party/npm_fuse.js/README.chromium b/third_party/npm_fuse.js/README.chromium new file mode 100644 index 00000000000..c661224c670 --- /dev/null +++ b/third_party/npm_fuse.js/README.chromium @@ -0,0 +1,4 @@ +Name: fuse.js +URL: https://github.com/krisk/Fuse +License: Apache-2.0 +License File: /brave/node_modules/fuse.js/LICENSE