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')

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