Selected Asset button

6 files changed, 68 insertions, 65 deletions

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<AssetButtonProps, {}> {
-    public render(): React.ReactNode {
-        return (
-            <Container padding="20px" width="100%">
-                {this._renderButton()}
-            </Container>
-        );
-    }
-    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 <RetryButton onClick={this.props.onRetryClick} />;
-            case AsyncProcessState.SUCCESS:
-                return <div />;
-            default:
-                return (
-                    <BuyButton
-                        buyQuote={this.props.buyQuote}
-                        assetBuyer={this.props.assetBuyer}
-                        onClick={this.props.onBuyClick}
-                        onBuySuccess={this.props.onBuySuccess}
-                        onBuyFailure={this.props.onBuyFailure}
-                        text={'Buy'}
-                    />
-                );
-        }
-    }
-}
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<BuyButtonProps> {
@@ -24,12 +23,11 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         onBuyFailure: util.boundNoop,
     };
     public render(): React.ReactNode {
-        // TODO: move container out
         const shouldDisableButton = _.isUndefined(this.props.buyQuote);
         return (
             <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
                 <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
-                    {this.props.text}
+                    Buy
                 </Text>
             </Button>
         );
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<ZeroExInstantConta
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
                 <LatestBuyQuoteOrderDetails />
-                <SelectedAssetBuyButton />
+                <Container padding="20px" width="100%">
+                    <SelectedAssetButton />
+                </Container>
             </Flex>
         </Container>
     </Container>
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 <SelectedAssetRetryButton />;
+    }
+
+    return <SelectedAssetBuyButton />;
+};
+
+export const SelectedAssetButton: React.ComponentClass<SelectedAssetButtonProps> = 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<Action>, 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<SelectedAssetBuyButtonProps> = 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<Action>,
+    _ownProps: SelectedAssetRetryButtonProps,
+): ConnectedDispatch => ({
+    onClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()),
+});
+
+export const SelectedAssetRetryButton: React.ComponentClass<SelectedAssetRetryButtonProps> = connect(
+    null,
+    mapDispatchToProps,
+)(RetryButton);