Show order failed messaging when order fails

2 files changed, 45 insertions, 27 deletions

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index a36d35a93..6fc5a0963 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -14,6 +14,7 @@ export interface InstantHeadingProps {
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteState: AsyncProcessState;
+    buyOrderState: AsyncProcessState;
 }
 
 const Placeholder = () => (
@@ -54,32 +55,47 @@ const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode)
     }
 };
 
-export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => (
-    <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px">
-        <Container marginBottom="5px">
-            <Text
-                letterSpacing="1px"
-                fontColor={ColorOption.white}
-                opacity={0.7}
-                fontWeight={500}
-                textTransform="uppercase"
-                fontSize="12px"
-            >
-                I want to buy
-            </Text>
-        </Container>
-        <Flex direction="row" justify="space-between">
-            <SelectedAssetAmountInput fontSize="45px" />
-            <Flex direction="column" justify="space-between">
-                <Container marginBottom="5px">
-                    <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
-                        {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))}
-                    </Text>
-                </Container>
-                <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
-                    {loadingOrAmount(props.quoteState, displayUsdAmount(props))}
+const topText = (buyOrderState: AsyncProcessState): string => {
+    if (buyOrderState === AsyncProcessState.FAILURE) {
+        return 'Order failed';
+    }
+
+    return 'I want to buy';
+};
+
+export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => {
+    return (
+        <Container
+            backgroundColor={ColorOption.primaryColor}
+            padding="20px"
+            width="100%"
+            borderRadius="3px 3px 0px 0px"
+        >
+            <Container marginBottom="5px">
+                <Text
+                    letterSpacing="1px"
+                    fontColor={ColorOption.white}
+                    opacity={0.7}
+                    fontWeight={500}
+                    textTransform="uppercase"
+                    fontSize="12px"
+                >
+                    {topText(props.buyOrderState)}
                 </Text>
+            </Container>
+            <Flex direction="row" justify="space-between">
+                <SelectedAssetAmountInput fontSize="45px" />
+                <Flex direction="column" justify="space-between">
+                    <Container marginBottom="5px">
+                        <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
+                            {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))}
+                        </Text>
+                    </Container>
+                    <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
+                        {loadingOrAmount(props.quoteState, displayUsdAmount(props))}
+                    </Text>
+                </Flex>
             </Flex>
-        </Flex>
-    </Container>
-);
+        </Container>
+    );
+};
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index 0509db5da..743362151 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;
     quoteState: 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,
     quoteState: state.quoteState,
+    buyOrderState: state.buyOrderState,
 });
 
 export const SelectedAssetInstantHeading: React.ComponentClass<InstantHeadingProps> = connect(mapStateToProps)(