feat(instant): Add failure state and icon

3 files changed, 35 insertions, 15 deletions

diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
index 5e36506d0..28547ce54 100644
--- a/packages/instant/src/components/retry_button.tsx
+++ b/packages/instant/src/components/retry_button.tsx
@@ -1,24 +1,11 @@
 import * as React from 'react';
 
-import { ColorOption } from '../style/theme';
-
-import { Button, Text } from './ui';
+import { SecondaryButton } from './secondary_button';
 
 export interface RetryButtonProps {
     onClick: () => void;
 }
 
 export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
-    return (
-        <Button
-            backgroundColor={ColorOption.white}
-            borderColor={ColorOption.lightGrey}
-            width="100%"
-            onClick={props.onClick}
-        >
-            <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px">
-                Try Again
-            </Text>
-        </Button>
-    );
+    return <SecondaryButton text="Try Again" onClick={props.onClick} />;
 };
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
new file mode 100644
index 000000000..e073f6061
--- /dev/null
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -0,0 +1,28 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Button, ButtonProps } from './ui/button';
+import { Text } from './ui/text';
+
+export interface SecondaryButtonProps extends ButtonProps {
+    text: string;
+}
+
+export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => {
+    const buttonProps = _.omit(props, 'text');
+    return (
+        <Button
+            backgroundColor={ColorOption.white}
+            borderColor={ColorOption.lightGrey}
+            width="100%"
+            onClick={props.onClick}
+            {...buttonProps}
+        >
+            <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px">
+                {props.text}
+            </Text>
+        </Button>
+    );
+};
diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx
index d84ae1a52..8c617804e 100644
--- a/packages/instant/src/containers/selected_asset_button.tsx
+++ b/packages/instant/src/containers/selected_asset_button.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
 
+import { SecondaryButton } from '../components/secondary_button';
 import { State } from '../redux/reducer';
 import { AsyncProcessState } from '../types';
 
@@ -21,6 +22,10 @@ const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{
 }> = props => {
     if (props.buyOrderState === AsyncProcessState.FAILURE) {
         return <SelectedAssetRetryButton />;
+    } else if (props.buyOrderState === AsyncProcessState.SUCCESS) {
+        return <SecondaryButton text="Success" isDisabled={true} />;
+    } else if (props.buyOrderState === AsyncProcessState.PENDING) {
+        return <SecondaryButton text="Processing" isDisabled={true} />;
     }
 
     return <SelectedAssetBuyButton />;