From ced4c893ba412ca401430a66694e194806d46e6b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 25 Oct 2018 15:42:35 -0700
Subject: Show View Transaction button on failure, and allow setting of width
 for Try Again button and View Txn button

---
 packages/instant/src/components/buy_order_state_button.tsx    | 10 +++++++++-
 packages/instant/src/components/retry_button.tsx              |  6 +++---
 packages/instant/src/components/secondary_button.tsx          |  6 +++++-
 packages/instant/src/components/view_transaction_button.tsx   |  6 +++---
 .../instant/src/containers/selected_asset_retry_button.tsx    |  6 ++++--
 .../src/containers/selected_asset_view_transaction_button.tsx | 11 ++++++++---
 6 files changed, 32 insertions(+), 13 deletions(-)

(limited to 'packages')

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<
-- 
cgit