From d2766d7ced990efd5a91441b459f36e8a21f8513 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 14:49:38 -0700 Subject: Selected Asset button --- packages/instant/src/components/asset_button.tsx | 51 ---------------------- packages/instant/src/components/buy_button.tsx | 6 +-- .../src/components/zero_ex_instant_container.tsx | 6 ++- .../src/containers/selected_asset_button.tsx | 33 ++++++++++++++ .../src/containers/selected_asset_buy_button.ts | 10 +---- .../src/containers/selected_asset_retry_button.tsx | 27 ++++++++++++ 6 files changed, 68 insertions(+), 65 deletions(-) delete mode 100644 packages/instant/src/components/asset_button.tsx create mode 100644 packages/instant/src/containers/selected_asset_button.tsx create mode 100644 packages/instant/src/containers/selected_asset_retry_button.tsx diff --git a/packages/instant/src/components/asset_button.tsx b/packages/instant/src/components/asset_button.tsx deleted file mode 100644 index 4ae7a2704..000000000 --- a/packages/instant/src/components/asset_button.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; -import * as React from 'react'; - -import { AsyncProcessState } from '../types'; - -// TODO: better name? - -import { BuyButton } from './buy_button'; -import { RetryButton } from './retry_button'; -import { Container } from './ui'; - -// TODO: split into sepearte components? getting really big.. -interface AssetButtonProps { - assetBuyer?: AssetBuyer; - buyQuote?: BuyQuote; - buyOrderState: AsyncProcessState; - onBuyClick: (buyQuote: BuyQuote) => void; - onBuySuccess: (buyQuote: BuyQuote) => void; - onBuyFailure: (buyQuote: BuyQuote) => void; - onRetryClick: () => void; -} - -export class AssetButton extends React.Component { - public render(): React.ReactNode { - return ( - - {this._renderButton()} - - ); - } - private _renderButton(): React.ReactNode { - // TODO: figure out why buyOrderState is undefined in beginning, get rid of default - switch (this.props.buyOrderState) { - case AsyncProcessState.FAILURE: - return ; - case AsyncProcessState.SUCCESS: - return
; - default: - return ( - - ); - } - } -} diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 4d2386620..5eef18aa3 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -6,7 +6,7 @@ import { ColorOption } from '../style/theme'; import { util } from '../util/util'; import { web3Wrapper } from '../util/web3_wrapper'; -import { Button, Container, Text } from './ui'; +import { Button, Text } from './ui'; export interface BuyButtonProps { buyQuote?: BuyQuote; @@ -14,7 +14,6 @@ export interface BuyButtonProps { onClick: (buyQuote: BuyQuote) => void; onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void; onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void; - text: string; } export class BuyButton extends React.Component { @@ -24,12 +23,11 @@ export class BuyButton extends React.Component { onBuyFailure: util.boundNoop, }; public render(): React.ReactNode { - // TODO: move container out const shouldDisableButton = _.isUndefined(this.props.buyQuote); return ( ); diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index cf918d890..088d0a93e 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { LatestError } from '../containers/latest_error'; -import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button'; +import { SelectedAssetButton } from '../containers/selected_asset_button'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { ColorOption } from '../style/theme'; @@ -26,7 +26,9 @@ export const ZeroExInstantContainer: React.StatelessComponent - + + + diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx new file mode 100644 index 000000000..d6e7303dd --- /dev/null +++ b/packages/instant/src/containers/selected_asset_button.tsx @@ -0,0 +1,33 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; + +import { State } from '../redux/reducer'; +import { AsyncProcessState } from '../types'; + +import { SelectedAssetBuyButton } from './selected_asset_buy_button'; +import { SelectedAssetRetryButton } from './selected_asset_retry_button'; + +interface ConnectedState { + buyOrderState: AsyncProcessState; +} +export interface SelectedAssetButtonProps {} +const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ + buyOrderState: state.buyOrderState, +}); + +const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{ + buyOrderState: AsyncProcessState; +}> = props => { + if (props.buyOrderState === AsyncProcessState.FAILURE) { + return ; + } + + return ; +}; + +export const SelectedAssetButton: React.ComponentClass = connect(mapStateToProps)( + SelectedAssetButtonPresentationComponent, +); diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 41d196b03..7306ec2ec 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -1,4 +1,3 @@ -// TODO: Rename to SelectedAssetButton import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; @@ -9,14 +8,12 @@ import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; import { AsyncProcessState } from '../types'; -import { AssetButton } from '../components/asset_button'; +import { BuyButton } from '../components/buy_button'; -// TODO: rename export interface SelectedAssetBuyButtonProps {} interface ConnectedState { assetBuyer?: AssetBuyer; - buyOrderState: AsyncProcessState; buyQuote?: BuyQuote; } @@ -24,12 +21,10 @@ interface ConnectedDispatch { onBuyClick: (buyQuote: BuyQuote) => void; onBuySuccess: (buyQuote: BuyQuote) => void; onBuyFailure: (buyQuote: BuyQuote) => void; - onRetryClick: () => void; } const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({ assetBuyer: state.assetBuyer, - buyOrderState: state.buyOrderState, buyQuote: state.latestBuyQuote, }); @@ -37,10 +32,9 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetB onBuyClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)), onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)), onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)), - onRetryClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()), }); export const SelectedAssetBuyButton: React.ComponentClass = connect( mapStateToProps, mapDispatchToProps, -)(AssetButton); +)(BuyButton); diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx new file mode 100644 index 000000000..f8963ca8e --- /dev/null +++ b/packages/instant/src/containers/selected_asset_retry_button.tsx @@ -0,0 +1,27 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; + +import { Action, actions } from '../redux/actions'; + +import { RetryButton } from '../components/retry_button'; +import { State } from '../redux/reducer'; + +export interface SelectedAssetRetryButtonProps {} + +interface ConnectedDispatch { + onClick: () => void; +} + +const mapDispatchToProps = ( + dispatch: Dispatch, + _ownProps: SelectedAssetRetryButtonProps, +): ConnectedDispatch => ({ + onClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()), +}); + +export const SelectedAssetRetryButton: React.ComponentClass = connect( + null, + mapDispatchToProps, +)(RetryButton); -- cgit