diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-20 06:40:44 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-20 06:40:44 +0800 |
commit | 30b077099306b8f2b522d0bc462da49fa9ee42e2 (patch) | |
tree | 05df98f7788993c2953d00acf64840de2ad6e9d4 /packages/instant/src/components/instant_heading.tsx | |
parent | d2766d7ced990efd5a91441b459f36e8a21f8513 (diff) | |
parent | a017f5e38561a152e8a757b340c1b0c6b3a3e21f (diff) | |
download | dexon-sol-tools-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar dexon-sol-tools-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.gz dexon-sol-tools-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.bz2 dexon-sol-tools-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.lz dexon-sol-tools-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.xz dexon-sol-tools-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.zst dexon-sol-tools-30b077099306b8f2b522d0bc462da49fa9ee42e2.zip |
Merge branch 'feature/instant/beta-render-et-al' into feature/instant/failure-state
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 145 |
1 files changed, 70 insertions, 75 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 6fc5a0963..5d39e4048 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -7,95 +7,90 @@ 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'; 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 { + 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"> + <SelectedAssetAmountInput fontSize="45px" /> + <Flex direction="column" justify="space-between"> + <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container> + <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container> + </Flex> + </Flex> + </Container> + ); } - return format.ethBaseAmount(totalEthBaseAmount, 4, <Placeholder />); -}; -const displayUsdAmount = ({ - totalEthBaseAmount, - selectedAssetAmount, - ethUsdPrice, -}: InstantHeadingProps): React.ReactNode => { - if (_.isUndefined(selectedAssetAmount)) { - return '$0.00'; - } - return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, <Placeholder />); -}; + private _renderTopText(): React.ReactNode { + if (this.props.buyOrderState === AsyncProcessState.FAILURE) { + return 'Order failed'; + } -const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => { - if (quoteState === AsyncProcessState.PENDING) { - return ( - <Text fontWeight="bold" fontColor={ColorOption.white}> - …loading - </Text> - ); - } else { - return amount; + return 'I want to buy'; } -}; -const topText = (buyOrderState: AsyncProcessState): string => { - if (buyOrderState === AsyncProcessState.FAILURE) { - return 'Order failed'; + 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(); } - return 'I want to buy'; -}; + private readonly _ethAmount = (): React.ReactNode => { + return ( + <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> + {format.ethBaseAmount( + this.props.totalEthBaseAmount, + 4, + <AmountPlaceholder isPulsating={false} color={placeholderColor} />, + )} + </Text> + ); + }; -export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => { - 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" - > - {topText(props.buyOrderState)} - </Text> - </Container> - <Flex direction="row" justify="space-between"> - <SelectedAssetAmountInput fontSize="45px" /> - <Flex direction="column" justify="space-between"> - <Container marginBottom="5px"> - <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> - ); -}; + 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> + ); + }; +} |