import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; import { ERC20Asset } from '../types'; import { analytics } from '../util/analytics'; 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: '', }; public render(): React.ReactNode { const { tokens, onTokenSelect } = this.props; return ( Select Token {_.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, }); analytics.trackTokenSelectorSearched(searchQuery); }; private readonly _isTokenQueryMatch = (token: ERC20Asset): boolean => { const { searchQuery } = this.state; const searchQueryLowerCase = searchQuery.toLowerCase().trim(); if (searchQueryLowerCase === '') { return true; } const tokenName = token.metaData.name.toLowerCase(); const tokenSymbol = token.metaData.symbol.toLowerCase(); return _.startsWith(tokenSymbol, searchQueryLowerCase) || _.startsWith(tokenName, searchQueryLowerCase); }; } interface TokenSelectorRowProps { token: ERC20Asset; onClick: (token: ERC20Asset) => void; } class TokenSelectorRow extends React.Component { public render(): React.ReactNode { const { token } = this.props; const circleColor = token.metaData.primaryColor || 'black'; const displaySymbol = assetUtils.bestNameForAsset(token); return ( {displaySymbol} - {token.metaData.name} ); } private readonly _handleClick = (): void => { this.props.onClick(this.props.token); }; } interface TokenSelectorRowIconProps { token: ERC20Asset; } const getTokenIcon = (symbol: string): React.StatelessComponent | undefined => { try { return require(`../assets/icons/${symbol}.svg`) as React.StatelessComponent; } catch (e) { // Can't find icon return undefined; } }; const TokenSelectorRowIcon: React.StatelessComponent = props => { const { token } = props; const iconUrlIfExists = token.metaData.iconUrl; const TokenIcon = getTokenIcon(token.metaData.symbol); const displaySymbol = assetUtils.bestNameForAsset(token); if (!_.isUndefined(iconUrlIfExists)) { return ; } else if (!_.isUndefined(TokenIcon)) { return ; } else { return ( {displaySymbol} ); } };