aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-13 00:25:20 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-13 00:25:20 +0800
commit8923817b2ff6c8d3cffe6914634e75cdf06db4a9 (patch)
treefe04d0c8a73a704dfde5c94583c59e45ab5245ac
parent7aacf1f5a457e1166f5188836d30a8c38f3f2c68 (diff)
downloaddexon-sol-tools-8923817b2ff6c8d3cffe6914634e75cdf06db4a9.tar
dexon-sol-tools-8923817b2ff6c8d3cffe6914634e75cdf06db4a9.tar.gz
dexon-sol-tools-8923817b2ff6c8d3cffe6914634e75cdf06db4a9.tar.bz2
dexon-sol-tools-8923817b2ff6c8d3cffe6914634e75cdf06db4a9.tar.lz
dexon-sol-tools-8923817b2ff6c8d3cffe6914634e75cdf06db4a9.tar.xz
dexon-sol-tools-8923817b2ff6c8d3cffe6914634e75cdf06db4a9.tar.zst
dexon-sol-tools-8923817b2ff6c8d3cffe6914634e75cdf06db4a9.zip
Move header to helper
-rw-r--r--packages/instant/src/components/order_details.tsx62
1 files changed, 33 insertions, 29 deletions
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 {