Discharge7443/brave-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(wallet): use Fuse.js for fuzzy-search in select-assets list

Browse Source
This commit is contained in:
Anirudha Bose
2021-09-17 00:17:12 +05:30
parent 6e2c6b55c9
commit 340cc182f8
4 changed files with 47 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/brave_wallet_ui/components/buy-send-swap/select-asset/index.tsx
+27 -11
View File
@@ -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<AccountAssetOptionType[]>(assets)
const filterAssetList = (event: any) => {
const filterAssetList = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
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<AccountAssetOptionType>) => result.item)
setFilteredAssetList(filteredList)
}
}
}, [fuse, assets])
return (
<SelectWrapper>
<Header title={locale.selectAsset} onBack={onBack} />
<SearchBar placeholder={locale.searchAsset} action={filterAssetList} />
<SelectScrollSearchContainer>
{filteredAssetList.map((asset) => <SelectAssetItem key={asset.asset.contractAddress} asset={asset} onSelectAsset={onSelectAsset(asset)} />)}
{
filteredAssetList.map((asset: AccountAssetOptionType) =>
<SelectAssetItem
key={asset.asset.contractAddress}
asset={asset}
onSelectAsset={onSelectAsset(asset)}
/>
)
}
</SelectScrollSearchContainer>
</SelectWrapper>
)
package-lock.json
Generated
+15 -21
View File
@@ -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",
package.json
+1
View File
@@ -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",
third_party/npm_fuse.js/README.chromium
Vendored
+4
View File
@@ -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