import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; import { ERC20Asset } from '../types'; import { assetUtils } from '../util/asset'; import { SearchInput } from './search_input'; import { Circle } from './ui/circle'; import { Container } from './ui/container'; import { Flex } from './ui/flex'; import { Text } from './ui/text'; export interface ERC20TokenSelectorProps { tokens: ERC20Asset[]; onTokenSelect: (token: ERC20Asset) => void; } export interface ERC20TokenSelectorState { searchQuery?: string; } export class ERC20TokenSelector extends React.Component { public state: ERC20TokenSelectorState = { searchQuery: undefined, }; public render(): React.ReactNode { const { tokens, onTokenSelect } = this.props; return ( {_.map(tokens, token => { if (!this._isTokenQueryMatch(token)) { return null; } return ; })} ); } private readonly _handleSearchInputChange = (event: React.ChangeEvent): void => { const searchQuery = event.target.value; this.setState({ searchQuery, }); }; private readonly _isTokenQueryMatch = (token: ERC20Asset): boolean => { const { searchQuery } = this.state; if (_.isUndefined(searchQuery)) { return true; } const stringToSearch = `${token.metaData.name} ${token.metaData.symbol}`; return _.includes(stringToSearch.toLowerCase(), searchQuery.toLowerCase()); }; } interface TokenSelectorRowProps { token: ERC20Asset; onClick: (token: ERC20Asset) => void; } class TokenSelectorRow extends React.Component { public render(): React.ReactNode { const { token } = this.props; const displaySymbol = assetUtils.bestNameForAsset(token); return ( {displaySymbol} {displaySymbol} - {token.metaData.name} ); } private readonly _handleClick = (): void => { this.props.onClick(this.props.token); }; }