diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-25 03:56:11 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-25 03:56:11 +0800 |
commit | 6da6540c038640abf75f703a294cb758c6defc47 (patch) | |
tree | bf320d263a86da9b0f75358305649f4d00b94265 /packages/instant/src/components/instant_heading.tsx | |
parent | f89b314a94f867fa905a1ce18eba9336ee4d1634 (diff) | |
parent | 06ba26a6d30565e7c6c4032528089d30ecc39fdd (diff) | |
download | dexon-0x-contracts-6da6540c038640abf75f703a294cb758c6defc47.tar dexon-0x-contracts-6da6540c038640abf75f703a294cb758c6defc47.tar.gz dexon-0x-contracts-6da6540c038640abf75f703a294cb758c6defc47.tar.bz2 dexon-0x-contracts-6da6540c038640abf75f703a294cb758c6defc47.tar.lz dexon-0x-contracts-6da6540c038640abf75f703a294cb758c6defc47.tar.xz dexon-0x-contracts-6da6540c038640abf75f703a294cb758c6defc47.tar.zst dexon-0x-contracts-6da6540c038640abf75f703a294cb758c6defc47.zip |
Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/input-fees-rounding
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 150 |
1 files changed, 89 insertions, 61 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index c9f0ea95a..0efb58360 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -7,81 +7,109 @@ import { ColorOption } from '../style/theme'; import { AsyncProcessState } from '../types'; import { format } from '../util/format'; +import { AmountPlaceholder } from './amount_placeholder'; import { Container, Flex, Text } from './ui'; +import { Icon } from './ui/icon'; export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; - quoteState: AsyncProcessState; + quoteRequestState: AsyncProcessState; + buyOrderState: AsyncProcessState; } -const Placeholder = () => ( - <Text fontWeight="bold" fontColor={ColorOption.white}> - — - </Text> -); -const displaytotalEthBaseAmount = ({ - selectedAssetAmount, - totalEthBaseAmount, -}: InstantHeadingProps): React.ReactNode => { - if (_.isUndefined(selectedAssetAmount)) { - return '0 ETH'; +const placeholderColor = ColorOption.white; +export class InstantHeading extends React.Component<InstantHeadingProps, {}> { + public render(): React.ReactNode { + const iconOrAmounts = this._renderIcon() || this._renderAmountsSection(); + return ( + <Container + backgroundColor={ColorOption.primaryColor} + padding="20px" + width="100%" + borderRadius="3px 3px 0px 0px" + > + <Container marginBottom="5px"> + <Text + letterSpacing="1px" + fontColor={ColorOption.white} + opacity={0.7} + fontWeight={500} + textTransform="uppercase" + fontSize="12px" + > + {this._renderTopText()} + </Text> + </Container> + <Flex direction="row" justify="space-between"> + <Flex height="60px"> + <SelectedAssetAmountInput startingFontSizePx={38} /> + </Flex> + <Flex direction="column" justify="space-between"> + {iconOrAmounts} + </Flex> + </Flex> + </Container> + ); } - return format.ethBaseAmount(totalEthBaseAmount, 4, <Placeholder />); -}; -const displayUsdAmount = ({ - totalEthBaseAmount, - selectedAssetAmount, - ethUsdPrice, -}: InstantHeadingProps): React.ReactNode => { - if (_.isUndefined(selectedAssetAmount)) { - return '$0.00'; + private _renderAmountsSection(): React.ReactNode { + return ( + <Container> + <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container> + <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container> + </Container> + ); + } + + private _renderIcon(): React.ReactNode { + if (this.props.buyOrderState === AsyncProcessState.FAILURE) { + return <Icon icon={'failed'} width={34} height={34} color={ColorOption.white} />; + } + return undefined; } - return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, <Placeholder />); -}; -const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => { - if (quoteState === AsyncProcessState.PENDING) { + private _renderTopText(): React.ReactNode { + if (this.props.buyOrderState === AsyncProcessState.FAILURE) { + return 'Order failed'; + } + + return 'I want to buy'; + } + + private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { + if (this.props.quoteRequestState === AsyncProcessState.PENDING) { + return <AmountPlaceholder isPulsating={true} color={placeholderColor} />; + } + if (_.isUndefined(this.props.selectedAssetAmount)) { + return <AmountPlaceholder isPulsating={false} color={placeholderColor} />; + } + return amountFunction(); + } + + private readonly _ethAmount = (): React.ReactNode => { return ( - <Text fontWeight="bold" fontColor={ColorOption.white}> - …loading + <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> + {format.ethBaseAmount( + this.props.totalEthBaseAmount, + 4, + <AmountPlaceholder isPulsating={false} color={placeholderColor} />, + )} </Text> ); - } else { - return amount; - } -}; + }; -export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => ( - <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px"> - <Container marginBottom="5px"> - <Text - letterSpacing="1px" - fontColor={ColorOption.white} - opacity={0.7} - fontWeight={500} - textTransform="uppercase" - fontSize="12px" - > - I want to buy + private readonly _dollarAmount = (): React.ReactNode => { + return ( + <Text fontSize="16px" fontColor={ColorOption.white}> + {format.ethBaseAmountInUsd( + this.props.totalEthBaseAmount, + this.props.ethUsdPrice, + 2, + <AmountPlaceholder isPulsating={false} color={ColorOption.white} />, + )} </Text> - </Container> - <Flex direction="row" justify="space-between"> - <Flex height="65px"> - <SelectedAssetAmountInput startingFontSizePx={38} /> - </Flex> - <Flex direction="column" justify="space-between"> - <Container marginBottom="5px" whiteSpace="nowrap"> - <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> - {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))} - </Text> - </Container> - <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}> - {loadingOrAmount(props.quoteState, displayUsdAmount(props))} - </Text> - </Flex> - </Flex> - </Container> -); + ); + }; +} |