From 092d010c2dcdeffa7c44c147d380255c33649679 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 19 Oct 2018 15:57:11 -0700
Subject: Render failure icon

---
 .../instant/src/components/instant_heading.tsx     | 25 ++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 5d39e4048..7ae509e3a 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -9,6 +9,7 @@ import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
 import { Container, Flex, Text } from './ui';
+import { Icon } from './ui/icon';
 
 export interface InstantHeadingProps {
     selectedAssetAmount?: BigNumber;
@@ -43,14 +44,34 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 <Flex direction="row" justify="space-between">
                     <SelectedAssetAmountInput fontSize="45px" />
                     <Flex direction="column" justify="space-between">
-                        <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container>
-                        <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container>
+                        {this._renderIconOrAmounts()}
                     </Flex>
                 </Flex>
             </Container>
         );
     }
 
+    private _renderIconOrAmounts(): React.ReactNode {
+        const icon = this._renderIcon();
+        if (icon) {
+            return icon;
+        }
+
+        return (
+            <Container>
+                <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container>
+                <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container>
+            </Container>
+        );
+    }
+
+    private _renderIcon(): React.ReactNode {
+        if (this.props.buyOrderState === AsyncProcessState.FAILURE) {
+            return <Icon icon={'failed'} width={34} height={34} color={ColorOption.white} />;
+        }
+        return undefined;
+    }
+
     private _renderTopText(): React.ReactNode {
         if (this.props.buyOrderState === AsyncProcessState.FAILURE) {
             return 'Order failed';
-- 
cgit v1.2.3