feat: implement basic erc20 token selector

2 files changed, 36 insertions, 1 deletions

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
new file mode 100644
index 000000000..a98176e9b
--- /dev/null
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -0,0 +1,34 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ERC20Asset } from '../types';
+
+import { Button, Container } from './ui';
+
+export interface ERC20TokenSelectorProps {
+    tokens: ERC20Asset[];
+    onTokenSelect: (token: ERC20Asset) => void;
+}
+
+export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
+    <Container>{_.map(tokens, token => <TokenSelectorRow token={token} onClick={onTokenSelect} />)}</Container>
+);
+
+interface TokenSelectorRowProps {
+    token: ERC20Asset;
+    onClick: (token: ERC20Asset) => void;
+}
+
+class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
+    public render(): React.ReactNode {
+        const { token } = this.props;
+        return (
+            <Container>
+                <Button onClick={this._handleClick}>Select {token.metaData.symbol}</Button>
+            </Container>
+        );
+    }
+    private readonly _handleClick = (): void => {
+        this.props.onClick(this.props.token);
+    };
+}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 009ad9b2a..765ff7e3d 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
 import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
 import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
@@ -45,7 +46,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                         animationState={this.state.tokenSelectionPanelAnimationState}
                         onClose={this._handlePanelClose}
                     >
-                        Select Your Token
+                        <AvailableERC20TokenSelector />
                     </SlidingPanel>
                 </Container>
             </Container>