From 3f918622bcce21ba104e0f13e71247796345ab0f Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 31 Oct 2018 19:50:37 -0700 Subject: feat: implement basic erc20 token selector --- .../src/components/erc20_token_selector.tsx | 34 ++++++++++++++++++++ .../src/components/zero_ex_instant_container.tsx | 3 +- .../containers/available_erc20_token_selector.ts | 36 ++++++++++++++++++++++ packages/instant/src/redux/actions.ts | 2 +- packages/instant/src/redux/reducer.ts | 12 +------- packages/instant/src/util/asset.ts | 7 +++++ 6 files changed, 81 insertions(+), 13 deletions(-) create mode 100644 packages/instant/src/components/erc20_token_selector.tsx create mode 100644 packages/instant/src/containers/available_erc20_token_selector.ts 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 = ({ tokens, onTokenSelect }) => ( + {_.map(tokens, token => )} +); + +interface TokenSelectorRowProps { + token: ERC20Asset; + onClick: (token: ERC20Asset) => void; +} + +class TokenSelectorRow extends React.Component { + public render(): React.ReactNode { + const { token } = this.props; + return ( + + + + ); + } + 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 - Select Your Token + diff --git a/packages/instant/src/containers/available_erc20_token_selector.ts b/packages/instant/src/containers/available_erc20_token_selector.ts new file mode 100644 index 000000000..6b5ecb6ac --- /dev/null +++ b/packages/instant/src/containers/available_erc20_token_selector.ts @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; + +import { State } from '../redux/reducer'; +import { ERC20Asset } from '../types'; +import { assetUtils } from '../util/asset'; + +import { ERC20TokenSelector } from '../components/erc20_token_selector'; +import { Action, actions } from '../redux/actions'; + +export interface AvailableERC20TokenSelectorProps {} + +interface ConnectedState { + tokens: ERC20Asset[]; +} + +interface ConnectedDispatch { + onTokenSelect: (token: ERC20Asset) => void; +} + +const mapStateToProps = (state: State, _ownProps: AvailableERC20TokenSelectorProps): ConnectedState => ({ + tokens: assetUtils.getERC20AssetsFromAssets(state.availableAssets), +}); + +const mapDispatchToProps = ( + dispatch: Dispatch, + ownProps: AvailableERC20TokenSelectorProps, +): ConnectedDispatch => ({ + onTokenSelect: (token: ERC20Asset) => dispatch(actions.updateSelectedAsset(token)), +}); + +export const AvailableERC20TokenSelector: React.ComponentClass = connect( + mapStateToProps, + mapDispatchToProps, +)(ERC20TokenSelector); diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index eadd8b42c..813c5e819 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -43,7 +43,7 @@ export const actions = { createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount), updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), - updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData), + updateSelectedAsset: (asset: Asset) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, asset), setAvailableAssets: (availableAssets: Asset[]) => createAction(ActionTypes.SET_AVAILABLE_ASSETS, availableAssets), setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING), setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index c0a8c1771..57d95167a 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -14,7 +14,6 @@ import { OrderProcessState, OrderState, } from '../types'; -import { assetUtils } from '../util/asset'; import { BigNumberInput } from '../util/big_number_input'; import { Action, ActionTypes } from './actions'; @@ -108,18 +107,9 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => latestErrorDisplayStatus: DisplayStatus.Hidden, }; case ActionTypes.UPDATE_SELECTED_ASSET: - const newSelectedAssetData = action.data; - let newSelectedAsset: Asset | undefined; - if (!_.isUndefined(newSelectedAssetData)) { - newSelectedAsset = assetUtils.createAssetFromAssetDataOrThrow( - newSelectedAssetData, - state.assetMetaDataMap, - state.network, - ); - } return { ...state, - selectedAsset: newSelectedAsset, + selectedAsset: action.data, }; case ActionTypes.RESET_AMOUNT: return { diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index 0576a7b60..2efaadbd2 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -98,4 +98,11 @@ export const assetUtils = { } return assetDataGroupIfExists[Network.Mainnet]; }, + getERC20AssetsFromAssets: (assets: Asset[]): ERC20Asset[] => { + const erc20sOrUndefined = _.map( + assets, + asset => (asset.metaData.assetProxyId === AssetProxyId.ERC20 ? (asset as ERC20Asset) : undefined), + ); + return _.compact(erc20sOrUndefined); + }, }; -- cgit v1.2.3