aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/erc20_token_selector.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/erc20_token_selector.tsx')
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx59
1 files changed, 48 insertions, 11 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index a9728365b..4a3724052 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -7,20 +7,57 @@ import { assetUtils } from '../util/asset';
import { SearchInput } from './search_input';
import { Circle, Container, Flex, Text } from './ui';
+import { bool } from 'prop-types';
export interface ERC20TokenSelectorProps {
tokens: ERC20Asset[];
onTokenSelect: (token: ERC20Asset) => void;
}
-export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
- <Container>
- <SearchInput placeholder="Search tokens..." width="100%" />
- <Container overflow="scroll" height="325px" marginTop="10px">
- {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
- </Container>
- </Container>
-);
+export interface ERC20TokenSelectorState {
+ searchQuery?: string;
+}
+
+export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> {
+ public state: ERC20TokenSelectorState = {
+ searchQuery: undefined,
+ };
+ public render(): React.ReactNode {
+ const { tokens, onTokenSelect } = this.props;
+ return (
+ <Container>
+ <SearchInput
+ placeholder="Search tokens..."
+ width="100%"
+ value={this.state.searchQuery}
+ onChange={this._handleSearchInputChange}
+ />
+ <Container overflow="scroll" height="275px" marginTop="10px">
+ {_.map(tokens, token => {
+ if (!this._isTokenQueryMatch(token)) {
+ return null;
+ }
+ return <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />;
+ })}
+ </Container>
+ </Container>
+ );
+ }
+ private readonly _handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>): 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;
@@ -53,13 +90,13 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
</Flex>
</Circle>
</Container>
- <Text fontWeight={700} fontColor={ColorOption.black}>
+ <Text fontSize="14px" fontWeight={700} fontColor={ColorOption.black}>
{displaySymbol}
</Text>
<Container margin="0px 5px">
- <Text> - </Text>
+ <Text fontSize="14px"> - </Text>
</Container>
- <Text>{token.metaData.name}</Text>
+ <Text fontSize="14px">{token.metaData.name}</Text>
</Flex>
</Container>
</Container>