path: root/packages/instant/src/components/order_details.tsx

import { BuyQuoteInfo } from '@0x/asset-buyer';
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { oc } from 'ts-optchain';

import { BIG_NUMBER_ZERO } from '../constants';
import { ColorOption } from '../style/theme';
import { BaseCurrency } from '../types';
import { buyQuoteUtil } from '../util/buy_quote';
import { format } from '../util/format';

import { AmountPlaceholder } from './amount_placeholder';

import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Text, TextProps } from './ui/text';

interface BaseCurrenySwitchProps {
    currencyName: string;
    onClick: () => void;
    isSelected: boolean;
}
const BaseCurrencySelector: React.StatelessComponent<BaseCurrenySwitchProps> = props => {
    const textStyle: TextProps = { onClick: props.onClick, fontSize: '12px' };
    if (props.isSelected) {
        textStyle.fontColor = ColorOption.primaryColor;
        textStyle.fontWeight = 700;
    }
    return <Text {...textStyle}>{props.currencyName}</Text>;
};

export interface OrderDetailsProps {
    buyQuoteInfo?: BuyQuoteInfo;
    selectedAssetUnitAmount?: BigNumber;
    ethUsdPrice?: BigNumber;
    isLoading: boolean;
    assetName?: string;
    baseCurrency: BaseCurrency;
    onBaseCurrencySwitchEth: () => void;
    onBaseCurrencySwitchUsd: () => void;
}
export class OrderDetails extends React.Component<OrderDetailsProps> {
    public render(): React.ReactNode {
        const { buyQuoteInfo, ethUsdPrice, selectedAssetUnitAmount } = this.props;
        const weiAmounts = buyQuoteUtil.getWeiAmounts(selectedAssetUnitAmount, buyQuoteInfo);

        const displayAmounts =
            this.props.baseCurrency === BaseCurrency.USD
                ? buyQuoteUtil.displayAmountsUsd(weiAmounts, ethUsdPrice)
                : buyQuoteUtil.displayAmountsEth(weiAmounts, ethUsdPrice);

        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>
                            <BaseCurrencySelector
                                onClick={this.props.onBaseCurrencySwitchEth}
                                currencyName="ETH"
                                isSelected={this.props.baseCurrency === BaseCurrency.ETH}
                            />
                            <Container marginLeft="3px" marginRight="3px" display="inline">
                                <Text fontSize="12px">/</Text>
                            </Container>
                            <BaseCurrencySelector
                                onClick={this.props.onBaseCurrencySwitchUsd}
                                currencyName="USD"
                                isSelected={this.props.baseCurrency === BaseCurrency.USD}
                            />
                        </Container>
                    </Flex>
                </Container>
                <TokenAmountRow
                    numTokens={selectedAssetUnitAmount}
                    assetName={this.props.assetName}
                    displayPricePerToken={displayAmounts.pricePerToken}
                    displayTotalPrice={displayAmounts.assetTotal}
                    isLoading={this.props.isLoading}
                />
                <OrderDetailsRow labelText="Fee" value={displayAmounts.feeTotal} isLoading={this.props.isLoading} />
                <TotalCostRow
                    displaySecondaryTotalCost={displayAmounts.secondaryGrandTotal}
                    displayPrimaryTotalCost={displayAmounts.primaryGrandTotal}
                    isLoading={this.props.isLoading}
                />
            </Container>
        );
    }
}

export interface EthAmountRowProps {
    rowLabel: string;
    ethAmount?: BigNumber;
    isEthAmountInBaseUnits?: boolean;
    ethUsdPrice?: BigNumber;
    shouldEmphasize?: boolean;
    isLoading: boolean;
}

export interface OrderDetailsRowProps {
    labelText: string;
    isLabelBold?: boolean;
    isLoading: boolean;
    value?: React.ReactNode;
}
export class OrderDetailsRow extends React.Component<OrderDetailsRowProps, {}> {
    public render(): React.ReactNode {
        const { labelText, value, isLabelBold, isLoading } = this.props;
        return (
            <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
                <Flex justify="space-between">
                    <Text fontWeight={isLabelBold ? 700 : 400} fontColor={ColorOption.grey}>
                        {labelText}
                    </Text>
                    <Container>
                        {value || (
                            <Container opacity={0.5}>
                                <AmountPlaceholder color={ColorOption.lightGrey} isPulsating={isLoading} />
                            </Container>
                        )}
                    </Container>
                </Flex>
            </Container>
        );
    }
}
export interface TotalCostRowProps {
    displayPrimaryTotalCost?: React.ReactNode;
    displaySecondaryTotalCost?: React.ReactNode;
    isLoading: boolean;
}
export class TotalCostRow extends React.Component<TotalCostRowProps, {}> {
    public render(): React.ReactNode {
        let value: React.ReactNode;
        if (this.props.displayPrimaryTotalCost) {
            const secondaryText = this.props.displaySecondaryTotalCost && (
                <Container marginRight="3px" display="inline-block">
                    <Text fontColor={ColorOption.lightGrey}>({this.props.displaySecondaryTotalCost})</Text>
                </Container>
            );
            value = (
                <React.Fragment>
                    {secondaryText}
                    <Text fontWeight={700} fontColor={ColorOption.grey}>
                        {this.props.displayPrimaryTotalCost}
                    </Text>
                </React.Fragment>
            );
        }

        return (
            <OrderDetailsRow isLoading={this.props.isLoading} isLabelBold={true} labelText="Total Cost" value={value} />
        );
    }
}

export interface TokenAmountRowProps {
    assetName?: string;
    displayPricePerToken?: React.ReactNode;
    displayTotalPrice?: React.ReactNode;
    isLoading: boolean;
    numTokens?: BigNumber;
}
export class TokenAmountRow extends React.Component<TokenAmountRowProps> {
    public static DEFAULT_TEXT: string = 'Token Price';
    public render(): React.ReactNode {
        return (
            <OrderDetailsRow
                isLoading={this.props.isLoading}
                labelText={this._labelText()}
                value={this.props.displayTotalPrice}
            />
        );
    }
    private _labelText(): string {
        if (this.props.isLoading) {
            return TokenAmountRow.DEFAULT_TEXT;
        }
        const { numTokens, displayPricePerToken, assetName } = this.props;
        if (numTokens) {
            let numTokensWithSymbol = numTokens.toString();

            if (assetName) {
                numTokensWithSymbol += ` ${assetName}`;
            }

            if (displayPricePerToken) {
                numTokensWithSymbol += ` @ ${displayPricePerToken}`;
            }
            return numTokensWithSymbol;
        }

        return TokenAmountRow.DEFAULT_TEXT;
    }
}

export class EthAmountRow extends React.Component<EthAmountRowProps> {
    public static defaultProps = {
        shouldEmphasize: false,
        isEthAmountInBaseUnits: true,
    };
    public render(): React.ReactNode {
        const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props;

        const fontWeight = shouldEmphasize ? 700 : 400;
        const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseUnitAmount : 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>
                        {this._renderUsdSection()}
                        <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
                            {ethFormatter(
                                ethAmount,
                                4,
                                <Container opacity={0.5}>
                                    <AmountPlaceholder color={ColorOption.lightGrey} isPulsating={isLoading} />
                                </Container>,
                            )}
                        </Text>
                    </Container>
                </Flex>
            </Container>
        );
    }
    private _renderUsdSection(): React.ReactNode {
        const usdFormatter = this.props.isEthAmountInBaseUnits
            ? format.ethBaseUnitAmountInUsd
            : 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>
        );
    }
}