diff options
| -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 { |