From 8923817b2ff6c8d3cffe6914634e75cdf06db4a9 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 12 Dec 2018 08:25:20 -0800
Subject: Move header to helper

---
 packages/instant/src/components/order_details.tsx | 62 ++++++++++++-----------
 1 file changed, 33 insertions(+), 29 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index f553351ff..5d306f43e 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -108,35 +108,7 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
 
         return (
             <Container width="100%" flexGrow={1} padding="20px 20px 0px 20px">
-                <Container marginBottom="10px">
-                    <Flex justify="space-between">
-                        <Text
-                            letterSpacing="1px"
-                            fontColor={ColorOption.primaryColor}
-                            fontWeight={600}
-                            textTransform="uppercase"
-                            fontSize="14px"
-                        >
-                            Order Details
-                        </Text>
-
-                        <Container>
-                            <BaseCurrencyChoice
-                                onClick={this.props.onBaseCurrencySwitchEth}
-                                currencyName="ETH"
-                                isSelected={this.props.baseCurrency === BaseCurrency.ETH}
-                            />
-                            <Container marginLeft="3px" marginRight="3px" display="inline">
-                                <Text fontSize="12px">/</Text>
-                            </Container>
-                            <BaseCurrencyChoice
-                                onClick={this.props.onBaseCurrencySwitchUsd}
-                                currencyName="USD"
-                                isSelected={this.props.baseCurrency === BaseCurrency.USD}
-                            />
-                        </Container>
-                    </Flex>
-                </Container>
+                <Container marginBottom="10px">{this._renderHeader()}</Container>
                 <OrderDetailsRow
                     isLoading={this.props.isLoading}
                     labelText={tokenAmountLabel(
@@ -160,6 +132,38 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
             </Container>
         );
     }
+
+    private _renderHeader(): React.ReactNode {
+        return (
+            <Flex justify="space-between">
+                <Text
+                    letterSpacing="1px"
+                    fontColor={ColorOption.primaryColor}
+                    fontWeight={600}
+                    textTransform="uppercase"
+                    fontSize="14px"
+                >
+                    Order Details
+                </Text>
+
+                <Container>
+                    <BaseCurrencyChoice
+                        onClick={this.props.onBaseCurrencySwitchEth}
+                        currencyName="ETH"
+                        isSelected={this.props.baseCurrency === BaseCurrency.ETH}
+                    />
+                    <Container marginLeft="3px" marginRight="3px" display="inline">
+                        <Text fontSize="12px">/</Text>
+                    </Container>
+                    <BaseCurrencyChoice
+                        onClick={this.props.onBaseCurrencySwitchUsd}
+                        currencyName="USD"
+                        isSelected={this.props.baseCurrency === BaseCurrency.USD}
+                    />
+                </Container>
+            </Flex>
+        );
+    }
 }
 
 export interface OrderDetailsRowProps {
-- 
cgit