diff options
| author | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 09:36:34 +0800 |
|---|---|---|
| committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 09:36:34 +0800 |
| commit | cdaa1407dacacc53e01a70b1e0ac46536342a4e0 (patch) | |
| tree | 154ea733755d4fc7b793902e88c4d0448d8b73a7 /packages/instant/src/components/erc20_token_selector.tsx | |
| parent | 92706a4b431e0023cf21adec62635447594d8ab3 (diff) | |
| download | dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.gz dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.bz2 dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.lz dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.xz dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.tar.zst dexon-sol-tools-cdaa1407dacacc53e01a70b1e0ac46536342a4e0.zip | |
feat: implement search bar UI
Diffstat (limited to 'packages/instant/src/components/erc20_token_selector.tsx')
| -rw-r--r-- | packages/instant/src/components/erc20_token_selector.tsx | 6 |
1 files changed, 4 insertions, 2 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index 2f637a1a6..a9728365b 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -5,6 +5,7 @@ import { ColorOption } from '../style/theme'; import { ERC20Asset } from '../types'; import { assetUtils } from '../util/asset'; +import { SearchInput } from './search_input'; import { Circle, Container, Flex, Text } from './ui'; export interface ERC20TokenSelectorProps { @@ -14,7 +15,8 @@ export interface ERC20TokenSelectorProps { export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => ( <Container> - <Container overflow="scroll" height="325px"> + <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> @@ -40,7 +42,7 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { darkenOnHover={true} cursor="pointer" > - <Container marginLeft="10px"> + <Container marginLeft="5px"> <Flex justify="flex-start"> <Container marginRight="10px"> <Circle diameter={30} fillColor={token.metaData.primaryColor}> |