4 files changed, 62 insertions, 17 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 8189a5377..208bb2582 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -14,7 +14,6 @@ export interface SelectedAssetBuyButtonProps {}
 
 interface ConnectedState {
     assetBuyer?: AssetBuyer;
-    text: string;
     buyQuote?: BuyQuote;
 }
 
@@ -24,24 +23,8 @@ interface ConnectedDispatch {
     onBuyFailure: (buyQuote: BuyQuote) => void;
 }
 
-const textForState = (state: AsyncProcessState): string => {
-    switch (state) {
-        case AsyncProcessState.NONE:
-            return 'Buy';
-        case AsyncProcessState.PENDING:
-            return '...Loading';
-        case AsyncProcessState.SUCCESS:
-            return 'Success!';
-        case AsyncProcessState.FAILURE:
-            return 'Failed';
-        default:
-            return 'Buy';
-    }
-};
-
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
     assetBuyer: state.assetBuyer,
-    text: textForState(state.buyOrderState),
     buyQuote: state.latestBuyQuote,
 });
 
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index 43127582c..24efed32e 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -16,6 +16,7 @@ interface ConnectedState {
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
+    buyOrderState: AsyncProcessState;
 }
 
 const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
@@ -23,6 +24,7 @@ const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): Connecte
     totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
     ethUsdPrice: state.ethUsdPrice,
     quoteRequestState: state.quoteRequestState,
+    buyOrderState: state.buyOrderState,
 });
 
 export const SelectedAssetInstantHeading: React.ComponentClass<InstantHeadingProps> = connect(mapStateToProps)(
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);