diff options
| author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-12-13 00:25:20 +0800 |
|---|---|---|
| committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-12-13 00:25:20 +0800 |
| commit | 8923817b2ff6c8d3cffe6914634e75cdf06db4a9 (patch) | |
| tree | fe04d0c8a73a704dfde5c94583c59e45ab5245ac | |
| parent | 7aacf1f5a457e1166f5188836d30a8c38f3f2c68 (diff) | |
| download | dexon-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.tsx | 62 |
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 { |