1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-13 05:07:12 +01:00
metamask-extension/ui/pages/import-token/token-search/token-search.component.js

87 lines
2.1 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Fuse from 'fuse.js';
import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '../../../components/ui/text-field';
import { isEqualCaseInsensitive } from '../../../helpers/utils/util';
2018-05-20 08:04:19 +02:00
export default class TokenSearch extends Component {
static contextTypes = {
t: PropTypes.func,
};
2018-05-20 08:04:19 +02:00
static defaultProps = {
error: null,
};
2018-05-20 08:04:19 +02:00
static propTypes = {
onSearch: PropTypes.func,
error: PropTypes.string,
tokenList: PropTypes.object,
};
2018-05-20 08:04:19 +02:00
state = {
searchQuery: '',
};
2018-05-20 08:04:19 +02:00
constructor(props) {
super(props);
const { tokenList } = this.props;
this.tokenList = Object.values(tokenList);
this.tokenSearchFuse = new Fuse(this.tokenList, {
shouldSort: true,
threshold: 0.45,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
{ name: 'name', weight: 0.5 },
{ name: 'symbol', weight: 0.5 },
],
});
}
2020-11-03 00:41:28 +01:00
handleSearch(searchQuery) {
this.setState({ searchQuery });
const fuseSearchResult = this.tokenSearchFuse.search(searchQuery);
const addressSearchResult = this.tokenList.filter((token) => {
return (
token.address &&
searchQuery &&
isEqualCaseInsensitive(token.address, searchQuery)
);
});
const results = [...addressSearchResult, ...fuseSearchResult];
this.props.onSearch({ searchQuery, results });
2018-05-20 08:04:19 +02:00
}
2020-11-03 00:41:28 +01:00
renderAdornment() {
2018-05-20 08:04:19 +02:00
return (
2020-11-03 00:41:28 +01:00
<InputAdornment position="start" style={{ marginRight: '12px' }}>
<img src="images/search.svg" width="17" height="17" alt="" />
2018-05-20 08:04:19 +02:00
</InputAdornment>
);
2018-05-20 08:04:19 +02:00
}
2020-11-03 00:41:28 +01:00
render() {
const { error } = this.props;
const { searchQuery } = this.state;
2018-05-20 08:04:19 +02:00
return (
<TextField
id="search-tokens"
placeholder={this.context.t('searchTokens')}
type="text"
value={searchQuery}
2020-02-15 21:34:12 +01:00
onChange={(e) => this.handleSearch(e.target.value)}
2018-05-20 08:04:19 +02:00
error={error}
fullWidth
autoFocus
autoComplete="off"
2018-05-20 08:04:19 +02:00
startAdornment={this.renderAdornment()}
/>
);
2018-05-20 08:04:19 +02:00
}
}