Selected Asset button

3 files changed, 62 insertions, 8 deletions

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);