Show View Transaction button on failure, and allow setting of width for Try Again button and View Txn button

6 files changed, 32 insertions, 13 deletions

diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
index 44115e5a1..73a4d62e2 100644
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { Flex } from '../components/ui/flex';
+
 import { PlacingOrderButton } from '../components/placing_order_button';
 import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
 import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button';
@@ -10,9 +12,15 @@ export interface BuyOrderStateButtonProps {
     buyOrderProcessingState: OrderProcessState;
 }
 
+// TODO: rename to buttons
 export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
     if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
-        return <SelectedAssetRetryButton />;
+        return (
+            <Flex justify="space-between">
+                <SelectedAssetRetryButton width="48%" />
+                <SelectedAssetViewTransactionButton width="48%" />
+            </Flex>
+        );
     } else if (
         props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
         props.buyOrderProcessingState === OrderProcessState.PROCESSING
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
index 0d6188e6a..36ae55e72 100644
--- a/packages/instant/src/components/retry_button.tsx
+++ b/packages/instant/src/components/retry_button.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-import { SecondaryButton } from './secondary_button';
+import { SecondaryButton, SecondaryButtonProps } from './secondary_button';
 
-export interface RetryButtonProps {
+export interface RetryButtonProps extends SecondaryButtonProps {
     onClick: () => void;
 }
 
 export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
-    return <SecondaryButton onClick={props.onClick}>Try Again</SecondaryButton>;
+    return <SecondaryButton {...props}>Try Again</SecondaryButton>;
 };
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 3c139a233..849003d0a 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -8,13 +8,14 @@ import { Text } from './ui/text';
 
 export interface SecondaryButtonProps extends ButtonProps {}
 
+// TODO: don't hard code this
 export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => {
     const buttonProps = _.omit(props, 'text');
     return (
         <Button
             backgroundColor={ColorOption.white}
             borderColor={ColorOption.lightGrey}
-            width="100%"
+            width={props.width}
             onClick={props.onClick}
             {...buttonProps}
         >
@@ -24,3 +25,6 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
         </Button>
     );
 };
+SecondaryButton.defaultProps = {
+    width: '100%',
+};
diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx
index 7aa44e657..8d11bf132 100644
--- a/packages/instant/src/components/view_transaction_button.tsx
+++ b/packages/instant/src/components/view_transaction_button.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-import { SecondaryButton } from './secondary_button';
+import { SecondaryButton, SecondaryButtonProps } from './secondary_button';
 
-export interface ViewTransactionButtonProps {
+export interface ViewTransactionButtonProps extends SecondaryButtonProps {
     onClick: () => void;
 }
 
 export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => {
-    return <SecondaryButton onClick={props.onClick}>View Transaction</SecondaryButton>;
+    return <SecondaryButton {...props}>View Transaction</SecondaryButton>;
 };
diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx
index b2b140be6..30e564c7b 100644
--- a/packages/instant/src/containers/selected_asset_retry_button.tsx
+++ b/packages/instant/src/containers/selected_asset_retry_button.tsx
@@ -7,7 +7,9 @@ import { Action, actions } from '../redux/actions';
 
 import { RetryButton } from '../components/retry_button';
 
-export interface SelectedAssetRetryButtonProps {}
+export interface SelectedAssetRetryButtonProps {
+    width?: string;
+}
 
 interface ConnectedDispatch {
     onClick: () => void;
@@ -21,6 +23,6 @@ const mapDispatchToProps = (
 });
 
 export const SelectedAssetRetryButton: React.ComponentClass<SelectedAssetRetryButtonProps> = connect(
-    undefined,
+    _.noop,
     mapDispatchToProps,
 )(RetryButton);
diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
index 064b877be..c74f07209 100644
--- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
+++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
@@ -8,18 +8,22 @@ import { ViewTransactionButton } from '../components/view_transaction_button';
 import { OrderProcessState } from '../types';
 import { etherscanUtil } from '../util/etherscan';
 
-export interface SelectedAssetViewTransactionButtonProps {}
+export interface SelectedAssetViewTransactionButtonProps {
+    width?: string;
+}
 
 interface ConnectedState {
     onClick: () => void;
+    width?: string;
 }
 
-const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+const mapStateToProps = (state: State, ownProps: SelectedAssetViewTransactionButtonProps): ConnectedState => ({
     onClick: () => {
         if (
             state.assetBuyer &&
             (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
-                state.buyOrderState.processState === OrderProcessState.SUCCESS)
+                state.buyOrderState.processState === OrderProcessState.SUCCESS ||
+                state.buyOrderState.processState === OrderProcessState.FAILURE)
         ) {
             const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
                 state.buyOrderState.txHash,
@@ -31,6 +35,7 @@ const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
             }
         }
     },
+    width: ownProps.width,
 });
 
 export const SelectedAssetViewTransactionButton: React.ComponentClass<