aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-19 06:27:34 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-19 06:33:14 +0800
commit8ff5e1926993979229783cfb03d38aabd6f2f3d3 (patch)
tree65a0588cf40fd68d00f002fef24dd8d4d5bc3671 /packages/instant/src/components
parent8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7 (diff)
downloaddexon-sol-tools-8ff5e1926993979229783cfb03d38aabd6f2f3d3.tar
dexon-sol-tools-8ff5e1926993979229783cfb03d38aabd6f2f3d3.tar.gz
dexon-sol-tools-8ff5e1926993979229783cfb03d38aabd6f2f3d3.tar.bz2
dexon-sol-tools-8ff5e1926993979229783cfb03d38aabd6f2f3d3.tar.lz
dexon-sol-tools-8ff5e1926993979229783cfb03d38aabd6f2f3d3.tar.xz
dexon-sol-tools-8ff5e1926993979229783cfb03d38aabd6f2f3d3.tar.zst
dexon-sol-tools-8ff5e1926993979229783cfb03d38aabd6f2f3d3.zip
Move USD section into helper function
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/order_details.tsx88
1 files changed, 42 insertions, 46 deletions
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index f48f27edb..9a0dbc47a 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -15,7 +15,6 @@ export interface OrderDetailsProps {
ethUsdPrice?: BigNumber;
isLoading: boolean;
}
-
export class OrderDetails extends React.Component<OrderDetailsProps> {
public render(): React.ReactNode {
const { buyQuoteInfo, ethUsdPrice } = this.props;
@@ -70,51 +69,48 @@ export interface EthAmountRowProps {
isLoading: boolean;
}
-export const EthAmountRow: React.StatelessComponent<EthAmountRowProps> = ({
- rowLabel,
- ethAmount,
- isEthAmountInBaseUnits,
- ethUsdPrice,
- shouldEmphasize,
- isLoading,
-}) => {
- // TODO: put in private function
- const usdFormatter = isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
- const shouldHideUsdPriceSection = _.isUndefined(ethUsdPrice) || _.isUndefined(ethAmount);
- const usdPriceSection = shouldHideUsdPriceSection ? null : (
- <Container marginRight="3px" display="inline-block">
- <Text fontColor={ColorOption.lightGrey}>({usdFormatter(ethAmount, ethUsdPrice)})</Text>
- </Container>
- );
+export class EthAmountRow extends React.Component<EthAmountRowProps> {
+ public static defaultProps = {
+ shouldEmphasize: false,
+ isEthAmountInBaseUnits: true,
+ };
+ public static displayName = 'EthAmountRow';
+ public render(): React.ReactNode {
+ const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props;
- const fontWeight = shouldEmphasize ? 700 : 400;
- const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount;
- return (
- <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
- <Flex justify="space-between">
- <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
- {rowLabel}
- </Text>
- <Container>
- {usdPriceSection}
+ const fontWeight = shouldEmphasize ? 700 : 400;
+ const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount;
+ return (
+ <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
+ <Flex justify="space-between">
<Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
- {ethFormatter(
- ethAmount,
- 4,
- <Container opacity={0.5}>
- <AmountPlaceholder color={ColorOption.lightGrey} pulsating={isLoading} />
- </Container>,
- )}
+ {rowLabel}
</Text>
- </Container>
- </Flex>
- </Container>
- );
-};
-
-EthAmountRow.defaultProps = {
- shouldEmphasize: false,
- isEthAmountInBaseUnits: true,
-};
-
-EthAmountRow.displayName = 'EthAmountRow';
+ <Container>
+ {this._usdSection()}
+ <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
+ {ethFormatter(
+ ethAmount,
+ 4,
+ <Container opacity={0.5}>
+ <AmountPlaceholder color={ColorOption.lightGrey} pulsating={isLoading} />
+ </Container>,
+ )}
+ </Text>
+ </Container>
+ </Flex>
+ </Container>
+ );
+ }
+ private _usdSection(): React.ReactNode {
+ const usdFormatter = this.props.isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
+ const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount);
+ return shouldHideUsdPriceSection ? null : (
+ <Container marginRight="3px" display="inline-block">
+ <Text fontColor={ColorOption.lightGrey}>
+ ({usdFormatter(this.props.ethAmount, this.props.ethUsdPrice)})
+ </Text>
+ </Container>
+ );
+ }
+}