diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-18 18:35:07 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-18 18:35:07 +0800 |
commit | cdd650d0eb83153a992922c6ffff35b494f299d3 (patch) | |
tree | fc12135e69ae74403a26408d2d7625e8a3fe334e /packages/instant/src/components/instant_heading.tsx | |
parent | c333d093b585fa0250a6973f2d396eb3cf227334 (diff) | |
parent | bd8ba14bf46cb901e14f0ee718ac01cdbc833e86 (diff) | |
download | dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.gz dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.bz2 dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.lz dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.xz dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.zst dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.zip |
merge development
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 62 |
1 files changed, 51 insertions, 11 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index be0414b8d..f57b59b73 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -1,11 +1,58 @@ +import { BigNumber } from '@0xproject/utils'; +import * as _ from 'lodash'; import * as React from 'react'; import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; import { ColorOption } from '../style/theme'; +import { AsyncProcessState } from '../types'; +import { format } from '../util/format'; import { Container, Flex, Text } from './ui'; -export interface InstantHeadingProps {} +export interface InstantHeadingProps { + selectedAssetAmount?: BigNumber; + totalEthBaseAmount?: BigNumber; + ethUsdPrice?: BigNumber; + quoteState: AsyncProcessState; +} + +const Placeholder = () => ( + <Text fontWeight="bold" fontColor={ColorOption.white}> + — + </Text> +); +const displaytotalEthBaseAmount = ({ + selectedAssetAmount, + totalEthBaseAmount, +}: InstantHeadingProps): React.ReactNode => { + if (_.isUndefined(selectedAssetAmount)) { + return '0 ETH'; + } + 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 />); +}; + +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; + } +}; export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => ( <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px"> @@ -22,22 +69,15 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro </Text> </Container> <Flex direction="row" justify="space-between"> - <Container> - <SelectedAssetAmountInput fontSize="45px" /> - <Container display="inline-block" marginLeft="10px"> - <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase"> - rep - </Text> - </Container> - </Container> + <SelectedAssetAmountInput fontSize="45px" /> <Flex direction="column" justify="space-between"> <Container marginBottom="5px"> <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> - 0 ETH + {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))} </Text> </Container> <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}> - $0.00 + {loadingOrAmount(props.quoteState, displayUsdAmount(props))} </Text> </Flex> </Flex> |