diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-11 09:27:06 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-11 09:28:12 +0800 |
commit | 19f61906d3075391efb32c17c99c2cba1f7a3858 (patch) | |
tree | 5341adb545f8cbc883f3e569adf99b58a8b03de1 /packages/instant/src/components/instant_heading.tsx | |
parent | a5a033c359a1a00a144ae0655080b4e6d0e43c88 (diff) | |
download | dexon-sol-tools-19f61906d3075391efb32c17c99c2cba1f7a3858.tar dexon-sol-tools-19f61906d3075391efb32c17c99c2cba1f7a3858.tar.gz dexon-sol-tools-19f61906d3075391efb32c17c99c2cba1f7a3858.tar.bz2 dexon-sol-tools-19f61906d3075391efb32c17c99c2cba1f7a3858.tar.lz dexon-sol-tools-19f61906d3075391efb32c17c99c2cba1f7a3858.tar.xz dexon-sol-tools-19f61906d3075391efb32c17c99c2cba1f7a3858.tar.zst dexon-sol-tools-19f61906d3075391efb32c17c99c2cba1f7a3858.zip |
feat: Move over features from zrx-buyer
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 39 |
1 files changed, 35 insertions, 4 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index be0414b8d..cde3862c7 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -1,11 +1,42 @@ +import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import * as _ from 'lodash'; import * as React from 'react'; +import { ethDecimals } from '../constants'; import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; import { ColorOption } from '../style/theme'; import { Container, Flex, Text } from './ui'; -export interface InstantHeadingProps {} +export interface InstantHeadingProps { + selectedAssetAmount?: BigNumber; + totalEthBaseAmount?: BigNumber; + ethUsdPrice?: BigNumber; +} + +const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: InstantHeadingProps): string => { + if (_.isUndefined(selectedAssetAmount)) { + return '0 ETH'; + } + if (_.isUndefined(totalEthBaseAmount)) { + return '...loading'; + } + const ethUnitAmount = Web3Wrapper.toUnitAmount(totalEthBaseAmount, ethDecimals); + const roundedAmount = ethUnitAmount.round(4); + return `${roundedAmount} ETH`; +}; + +const displayUsdAmount = ({ totalEthBaseAmount, selectedAssetAmount, ethUsdPrice }: InstantHeadingProps): string => { + if (_.isUndefined(selectedAssetAmount)) { + return '$0.00'; + } + if (_.isUndefined(totalEthBaseAmount) || _.isUndefined(ethUsdPrice)) { + return '...loading'; + } + const ethUnitAmount = Web3Wrapper.toUnitAmount(totalEthBaseAmount, ethDecimals); + return `$${ethUnitAmount.mul(ethUsdPrice).round(2)}`; +}; export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => ( <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px"> @@ -26,18 +57,18 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro <SelectedAssetAmountInput fontSize="45px" /> <Container display="inline-block" marginLeft="10px"> <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase"> - rep + zrx </Text> </Container> </Container> <Flex direction="column" justify="space-between"> <Container marginBottom="5px"> <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> - 0 ETH + {displaytotalEthBaseAmount(props)} </Text> </Container> <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}> - $0.00 + {displayUsdAmount(props)} </Text> </Flex> </Flex> |