feat: add basic token search functionality

3 files changed, 75 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>
diff --git a/packages/instant/src/components/search_input.tsx b/packages/instant/src/components/search_input.tsx
new file mode 100644
index 000000000..f082eaa16
--- /dev/null
+++ b/packages/instant/src/components/search_input.tsx
@@ -0,0 +1,26 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Icon, Input, InputProps } from './ui';
+
+export interface SearchInputProps extends InputProps {
+    backgroundColor?: ColorOption;
+}
+
+export const SearchInput: React.StatelessComponent<SearchInputProps> = props => (
+    <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .3em">
+        <Flex justify="flex-start" align="flex-end">
+            <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="0px 12px" />
+            <Input {...props} fontSize="14px" fontColor={props.fontColor} />
+        </Flex>
+    </Container>
+);
+
+SearchInput.displayName = 'SearchInput';
+
+SearchInput.defaultProps = {
+    backgroundColor: ColorOption.lightestGrey,
+    fontColor: ColorOption.grey,
+};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 65cf838b0..a884ff7cb 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -9,6 +9,7 @@ export interface InputProps {
     fontSize?: string;
     fontColor?: ColorOption;
     placeholder?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const Input =