diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-10-18 01:30:29 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-10-18 01:30:29 +0800 |
commit | 84057934c6cda3fe3e4f86cf686b163db017cf9e (patch) | |
tree | 0160c132e134fb04106f232834f0ed021d06ebd5 /packages/instant/src/components/instant_heading.tsx | |
parent | aa1085c8f3866da4965c0102be27c0f5e19b3db6 (diff) | |
parent | c767404ad09ca9fdacf9ab43c0e6b13fc70bffb9 (diff) | |
download | dexon-0x-contracts-84057934c6cda3fe3e4f86cf686b163db017cf9e.tar dexon-0x-contracts-84057934c6cda3fe3e4f86cf686b163db017cf9e.tar.gz dexon-0x-contracts-84057934c6cda3fe3e4f86cf686b163db017cf9e.tar.bz2 dexon-0x-contracts-84057934c6cda3fe3e4f86cf686b163db017cf9e.tar.lz dexon-0x-contracts-84057934c6cda3fe3e4f86cf686b163db017cf9e.tar.xz dexon-0x-contracts-84057934c6cda3fe3e4f86cf686b163db017cf9e.tar.zst dexon-0x-contracts-84057934c6cda3fe3e4f86cf686b163db017cf9e.zip |
Merge branch 'development' into feature/website/asset-buyer-docs
* development: (31 commits)
Update CODEOWNERS
Update CODEOWNERS
Update CODEOWNERS
Add leo to CODEOWNERS on some packages
fix(monorepo-scripts): Format date as UTC not local time.
Bump max bundle size for instant
fix: dont use enum string as type as typedoc gets confused
feat: export AssetData from order-utils
feat: export AssetData from utils
chore: temporarily increase the bundle size for instant
Remove order-utils from dependencies
Run tests on circle CI
Add tests for format and use toFixed instead of round for usd
Remove expiry buffer seconds option from AssetBuyer init
Add ts-optchain and use it instead of lodash get
Hide USD price when ETH-USD price is not available
Rename OrderDetailsRow to EthAmountRow
fix: add Steve's github account to about page, and capitalize AppFolio correctly
Put boundNoop in a util file
Add tnxHash to buy button callbacks
...
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 36 |
1 files changed, 25 insertions, 11 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index be0414b8d..492c1b2c0 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -1,11 +1,32 @@ +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 { format } from '../util/format'; 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'; + } + return format.ethBaseAmount(totalEthBaseAmount, 4, '...loading'); +}; + +const displayUsdAmount = ({ totalEthBaseAmount, selectedAssetAmount, ethUsdPrice }: InstantHeadingProps): string => { + if (_.isUndefined(selectedAssetAmount)) { + return '$0.00'; + } + return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '...loading'); +}; export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => ( <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px"> @@ -22,22 +43,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 + {displaytotalEthBaseAmount(props)} </Text> </Container> <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}> - $0.00 + {displayUsdAmount(props)} </Text> </Flex> </Flex> |