From 4b348e1e603ec45e1e4bf39533b4b204423cafa0 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 18 Oct 2018 11:09:23 -0700
Subject: quoteState -> quoteRequestState

---
 packages/instant/src/components/instant_heading.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages/instant/src/components/instant_heading.tsx')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index a36d35a93..9dd13299c 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -13,7 +13,7 @@ export interface InstantHeadingProps {
     selectedAssetAmount?: BigNumber;
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
-    quoteState: AsyncProcessState;
+    quoteRequestState: AsyncProcessState;
 }
 
 const Placeholder = () => (
@@ -42,8 +42,8 @@ const displayUsdAmount = ({
     return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, <Placeholder />);
 };
 
-const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => {
-    if (quoteState === AsyncProcessState.PENDING) {
+const loadingOrAmount = (quoteRequestState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => {
+    if (quoteRequestState === AsyncProcessState.PENDING) {
         return (
             <Text fontWeight="bold" fontColor={ColorOption.white}>
                 &hellip;loading
@@ -73,11 +73,11 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
             <Flex direction="column" justify="space-between">
                 <Container marginBottom="5px">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
-                        {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))}
+                        {loadingOrAmount(props.quoteRequestState, displaytotalEthBaseAmount(props))}
                     </Text>
                 </Container>
                 <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
-                    {loadingOrAmount(props.quoteState, displayUsdAmount(props))}
+                    {loadingOrAmount(props.quoteRequestState, displayUsdAmount(props))}
                 </Text>
             </Flex>
         </Flex>
-- 
cgit v1.2.3


From 12b6877aeb0a6bcddab4193b62cd10347b8c328b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 18 Oct 2018 13:31:11 -0700
Subject: Pulsating holder element showing, even if amount is empty

---
 .../instant/src/components/instant_heading.tsx     | 112 ++++++++++-----------
 1 file changed, 55 insertions(+), 57 deletions(-)

(limited to 'packages/instant/src/components/instant_heading.tsx')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 9dd13299c..9ca4ce598 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -7,6 +7,7 @@ import { ColorOption } from '../style/theme';
 import { AsyncProcessState } from '../types';
 import { format } from '../util/format';
 
+import { AmountPlaceholder } from './amount_placeholder';
 import { Container, Flex, Text } from './ui';
 
 export interface InstantHeadingProps {
@@ -16,70 +17,67 @@ export interface InstantHeadingProps {
     quoteRequestState: AsyncProcessState;
 }
 
-const Placeholder = () => (
-    <Text fontWeight="bold" fontColor={ColorOption.white}>
-        &mdash;
-    </Text>
-);
-const displaytotalEthBaseAmount = ({
-    selectedAssetAmount,
-    totalEthBaseAmount,
-}: InstantHeadingProps): React.ReactNode => {
-    if (_.isUndefined(selectedAssetAmount)) {
-        return '0 ETH';
+export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
+    public render(): React.ReactNode {
+        const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow();
+        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"
+                    >
+                        I want to buy
+                    </Text>
+                </Container>
+                <Flex direction="row" justify="space-between">
+                    <SelectedAssetAmountInput fontSize="45px" />
+                    <Flex direction="column" justify="space-between">
+                        <Container marginBottom="5px">{placeholderAmountToAlwaysShow || this._ethAmount()}</Container>
+                        <Container opacity={0.7}>{placeholderAmountToAlwaysShow || this._dollarAmount()}</Container>
+                    </Flex>
+                </Flex>
+            </Container>
+        );
     }
-    return format.ethBaseAmount(totalEthBaseAmount, 4, <Placeholder />);
-};
 
-const displayUsdAmount = ({
-    totalEthBaseAmount,
-    selectedAssetAmount,
-    ethUsdPrice,
-}: InstantHeadingProps): React.ReactNode => {
-    if (_.isUndefined(selectedAssetAmount)) {
-        return '$0.00';
+    private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined {
+        if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
+            return <AmountPlaceholder pulsating={true} />;
+        }
+        if (_.isUndefined(this.props.selectedAssetAmount)) {
+            return <AmountPlaceholder pulsating={false} />;
+        }
+        return undefined;
     }
-    return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, <Placeholder />);
-};
 
-const loadingOrAmount = (quoteRequestState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => {
-    if (quoteRequestState === AsyncProcessState.PENDING) {
+    private _ethAmount(): React.ReactNode {
         return (
-            <Text fontWeight="bold" fontColor={ColorOption.white}>
-                &hellip;loading
+            <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
+                {format.ethBaseAmount(this.props.totalEthBaseAmount, 4, <AmountPlaceholder pulsating={false} />)}
             </Text>
         );
-    } else {
-        return amount;
     }
-};
 
-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
+    private _dollarAmount(): React.ReactNode {
+        return (
+            <Text fontSize="16px" fontColor={ColorOption.white}>
+                {format.ethBaseAmountInUsd(
+                    this.props.totalEthBaseAmount,
+                    this.props.ethUsdPrice,
+                    2,
+                    <AmountPlaceholder pulsating={false} />,
+                )}
             </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.quoteRequestState, displaytotalEthBaseAmount(props))}
-                    </Text>
-                </Container>
-                <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
-                    {loadingOrAmount(props.quoteRequestState, displayUsdAmount(props))}
-                </Text>
-            </Flex>
-        </Flex>
-    </Container>
-);
+        );
+    }
+}
-- 
cgit v1.2.3


From 8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 18 Oct 2018 14:51:45 -0700
Subject: feat(instant): Indicate that order details section is loading by
 having pulsing placeholder

---
 packages/instant/src/components/instant_heading.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

(limited to 'packages/instant/src/components/instant_heading.tsx')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 9ca4ce598..6a4c850f2 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -17,6 +17,7 @@ export interface InstantHeadingProps {
     quoteRequestState: AsyncProcessState;
 }
 
+const placeholderColor = ColorOption.white;
 export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
         const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow();
@@ -52,10 +53,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
 
     private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined {
         if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
-            return <AmountPlaceholder pulsating={true} />;
+            return <AmountPlaceholder pulsating={true} color={placeholderColor} />;
         }
         if (_.isUndefined(this.props.selectedAssetAmount)) {
-            return <AmountPlaceholder pulsating={false} />;
+            return <AmountPlaceholder pulsating={false} color={placeholderColor} />;
         }
         return undefined;
     }
@@ -63,7 +64,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private _ethAmount(): React.ReactNode {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
-                {format.ethBaseAmount(this.props.totalEthBaseAmount, 4, <AmountPlaceholder pulsating={false} />)}
+                {format.ethBaseAmount(
+                    this.props.totalEthBaseAmount,
+                    4,
+                    <AmountPlaceholder pulsating={false} color={placeholderColor} />,
+                )}
             </Text>
         );
     }
@@ -75,7 +80,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                     this.props.totalEthBaseAmount,
                     this.props.ethUsdPrice,
                     2,
-                    <AmountPlaceholder pulsating={false} />,
+                    <AmountPlaceholder pulsating={false} color={ColorOption.white} />,
                 )}
             </Text>
         );
-- 
cgit v1.2.3


From aa0e07b0581a645c3d2ea035d3acf28a74de0384 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 18 Oct 2018 15:30:14 -0700
Subject: pulsating -> isPulsating

---
 packages/instant/src/components/instant_heading.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages/instant/src/components/instant_heading.tsx')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 6a4c850f2..e2ef2d668 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -53,10 +53,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
 
     private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined {
         if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
-            return <AmountPlaceholder pulsating={true} color={placeholderColor} />;
+            return <AmountPlaceholder isPulsating={true} color={placeholderColor} />;
         }
         if (_.isUndefined(this.props.selectedAssetAmount)) {
-            return <AmountPlaceholder pulsating={false} color={placeholderColor} />;
+            return <AmountPlaceholder isPulsating={false} color={placeholderColor} />;
         }
         return undefined;
     }
@@ -67,7 +67,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 {format.ethBaseAmount(
                     this.props.totalEthBaseAmount,
                     4,
-                    <AmountPlaceholder pulsating={false} color={placeholderColor} />,
+                    <AmountPlaceholder isPulsating={false} color={placeholderColor} />,
                 )}
             </Text>
         );
@@ -80,7 +80,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                     this.props.totalEthBaseAmount,
                     this.props.ethUsdPrice,
                     2,
-                    <AmountPlaceholder pulsating={false} color={ColorOption.white} />,
+                    <AmountPlaceholder isPulsating={false} color={ColorOption.white} />,
                 )}
             </Text>
         );
-- 
cgit v1.2.3


From ff1f0a967802529e5ee50a7ff52d67bae1252b51 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 18 Oct 2018 15:31:18 -0700
Subject: undefined -> null to follow convention

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

(limited to 'packages/instant/src/components/instant_heading.tsx')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index e2ef2d668..48cda7f88 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -51,14 +51,14 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         );
     }
 
-    private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined {
+    private _placeholderAmountToAlwaysShow(): React.ReactNode | null {
         if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
             return <AmountPlaceholder isPulsating={true} color={placeholderColor} />;
         }
         if (_.isUndefined(this.props.selectedAssetAmount)) {
             return <AmountPlaceholder isPulsating={false} color={placeholderColor} />;
         }
-        return undefined;
+        return null;
     }
 
     private _ethAmount(): React.ReactNode {
-- 
cgit v1.2.3


From 1737411ab7478de4a394242c930fcc7189daae07 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 18 Oct 2018 17:16:28 -0700
Subject: Show order failed messaging when order fails

---
 .../instant/src/components/instant_heading.tsx     | 70 +++++++++++++---------
 1 file changed, 43 insertions(+), 27 deletions(-)

(limited to 'packages/instant/src/components/instant_heading.tsx')

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>
+    );
+};
-- 
cgit v1.2.3


From 2f4e498a099ebbd8078139f90a054941e427de15 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 19 Oct 2018 10:32:37 -0700
Subject: Refactor to make placeholder logic more straightforward

---
 packages/instant/src/components/instant_heading.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

(limited to 'packages/instant/src/components/instant_heading.tsx')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 48cda7f88..265c3e0a5 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -20,7 +20,6 @@ export interface InstantHeadingProps {
 const placeholderColor = ColorOption.white;
 export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
-        const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow();
         return (
             <Container
                 backgroundColor={ColorOption.primaryColor}
@@ -43,22 +42,24 @@ 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">{placeholderAmountToAlwaysShow || this._ethAmount()}</Container>
-                        <Container opacity={0.7}>{placeholderAmountToAlwaysShow || this._dollarAmount()}</Container>
+                        <Container marginBottom="5px">
+                            {this._placeholderOrAmount(this._ethAmount.bind(this))}
+                        </Container>
+                        <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount.bind(this))}</Container>
                     </Flex>
                 </Flex>
             </Container>
         );
     }
 
-    private _placeholderAmountToAlwaysShow(): React.ReactNode | null {
+    private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
         if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
             return <AmountPlaceholder isPulsating={true} color={placeholderColor} />;
         }
         if (_.isUndefined(this.props.selectedAssetAmount)) {
             return <AmountPlaceholder isPulsating={false} color={placeholderColor} />;
         }
-        return null;
+        return amountFunction();
     }
 
     private _ethAmount(): React.ReactNode {
-- 
cgit v1.2.3


From 6f80c7e6d94124d16685853b0928f725a262e09e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 19 Oct 2018 12:05:57 -0700
Subject: arrow function syntax so no need to bind

---
 packages/instant/src/components/instant_heading.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

(limited to 'packages/instant/src/components/instant_heading.tsx')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 265c3e0a5..625961b84 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -42,10 +42,8 @@ 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.bind(this))}
-                        </Container>
-                        <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount.bind(this))}</Container>
+                        <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container>
+                        <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container>
                     </Flex>
                 </Flex>
             </Container>
@@ -62,7 +60,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         return amountFunction();
     }
 
-    private _ethAmount(): React.ReactNode {
+    private _ethAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
                 {format.ethBaseAmount(
@@ -72,9 +70,9 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 )}
             </Text>
         );
-    }
+    };
 
-    private _dollarAmount(): React.ReactNode {
+    private _dollarAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white}>
                 {format.ethBaseAmountInUsd(
@@ -85,5 +83,5 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 )}
             </Text>
         );
-    }
+    };
 }
-- 
cgit v1.2.3


From c070142dc02e97a3512cf8db189f5fffc9eb469a Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 19 Oct 2018 12:08:33 -0700
Subject: linting

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

(limited to 'packages/instant/src/components/instant_heading.tsx')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 625961b84..63d2138a5 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -60,7 +60,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         return amountFunction();
     }
 
-    private _ethAmount = (): React.ReactNode => {
+    private readonly _ethAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
                 {format.ethBaseAmount(
@@ -72,7 +72,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         );
     };
 
-    private _dollarAmount = (): React.ReactNode => {
+    private readonly _dollarAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white}>
                 {format.ethBaseAmountInUsd(
-- 
cgit v1.2.3


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/instant/src/components/instant_heading.tsx')

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


From ac2d93ab2261e19f87870f4143806d62c1d1c619 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 19 Oct 2018 16:06:42 -0700
Subject: Small refacotor of icons or amounts part

---
 packages/instant/src/components/instant_heading.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

(limited to 'packages/instant/src/components/instant_heading.tsx')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 7ae509e3a..856e4d43e 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -22,6 +22,7 @@ export interface InstantHeadingProps {
 const placeholderColor = ColorOption.white;
 export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
+        const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
         return (
             <Container
                 backgroundColor={ColorOption.primaryColor}
@@ -44,19 +45,14 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 <Flex direction="row" justify="space-between">
                     <SelectedAssetAmountInput fontSize="45px" />
                     <Flex direction="column" justify="space-between">
-                        {this._renderIconOrAmounts()}
+                        {iconOrAmounts}
                     </Flex>
                 </Flex>
             </Container>
         );
     }
 
-    private _renderIconOrAmounts(): React.ReactNode {
-        const icon = this._renderIcon();
-        if (icon) {
-            return icon;
-        }
-
+    private _renderAmountsSection(): React.ReactNode {
         return (
             <Container>
                 <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container>
-- 
cgit v1.2.3