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

4 files changed, 20 insertions, 8 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>;
 };