aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-02 09:55:37 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-02 09:55:37 +0800
commite2ff7b7c846fa97b56d6bd36192329dd8f485af0 (patch)
treeb4f6bf7cc949f9f5c98ed0f21bf700a5c18298fc /packages/instant
parent209b2c9dcb6e9e81011b64e7b8bad719dec35379 (diff)
downloaddexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar
dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.gz
dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.bz2
dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.lz
dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.xz
dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.zst
dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.zip
feat: add basic token search functionality
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx59
-rw-r--r--packages/instant/src/components/search_input.tsx26
-rw-r--r--packages/instant/src/components/ui/input.tsx1
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 =