diff options
Diffstat (limited to 'packages/instant/src/components')
| -rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 14 | ||||
| -rw-r--r-- | packages/instant/src/components/order_details.tsx | 92 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 4 |
3 files changed, 69 insertions, 41 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index cde3862c7..951858695 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; import { ethDecimals } from '../constants'; import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; import { ColorOption } from '../style/theme'; +import { format } from '../util/format'; import { Container, Flex, Text } from './ui'; @@ -19,23 +20,14 @@ const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: 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`; + return format.ethBaseAmount(totalEthBaseAmount, 4, '...loading'); }; 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)}`; + return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '...loading'); }; export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => ( diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index dbf2c1f0b..78359898f 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -1,53 +1,88 @@ +import { BuyQuoteInfo } from '@0xproject/asset-buyer'; +import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import * as _ from 'lodash'; import * as React from 'react'; +import { BIG_NUMBER_ZERO, ethDecimals } from '../constants'; + import { ColorOption } from '../style/theme'; +import { format } from '../util/format'; import { Container, Flex, Text } from './ui'; -export interface OrderDetailsProps {} - -export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = props => ( - <Container padding="20px" width="100%"> - <Container marginBottom="10px"> - <Text - letterSpacing="1px" - fontColor={ColorOption.primaryColor} - fontWeight={600} - textTransform="uppercase" - fontSize="14px" - > - Order Details - </Text> - </Container> - <OrderDetailsRow name="Token Price" primaryValue=".013 ETH" secondaryValue="$24.32" /> - <OrderDetailsRow name="Fee" primaryValue=".005 ETH" secondaryValue="$1.04" /> - <OrderDetailsRow name="Total Cost" primaryValue="1.66 ETH" secondaryValue="$589.56" shouldEmphasize={true} /> - </Container> -); +export interface OrderDetailsProps { + buyQuoteInfo?: BuyQuoteInfo; + ethUsdPrice?: BigNumber; +} -OrderDetails.displayName = 'OrderDetails'; +export class OrderDetails extends React.Component<OrderDetailsProps> { + public render(): React.ReactNode { + const { buyQuoteInfo, ethUsdPrice } = this.props; + const ethAssetPrice = _.get(buyQuoteInfo, 'ethPerAssetPrice'); + const ethTokenFee = _.get(buyQuoteInfo, 'feeEthAmount'); + const totalEthAmount = _.get(buyQuoteInfo, 'totalEthAmount'); + return ( + <Container padding="20px" width="100%"> + <Container marginBottom="10px"> + <Text + letterSpacing="1px" + fontColor={ColorOption.primaryColor} + fontWeight={600} + textTransform="uppercase" + fontSize="14px" + > + Order Details + </Text> + </Container> + <OrderDetailsRow + name="Token Price" + ethAmount={ethAssetPrice} + ethUsdPrice={ethUsdPrice} + shouldConvertEthToUnitAmount={false} + /> + <OrderDetailsRow name="Fee" ethAmount={ethTokenFee} ethUsdPrice={ethUsdPrice} /> + <OrderDetailsRow + name="Total Cost" + ethAmount={totalEthAmount} + ethUsdPrice={ethUsdPrice} + shouldEmphasize={true} + /> + </Container> + ); + } +} export interface OrderDetailsRowProps { name: string; - primaryValue: string; - secondaryValue: string; + ethAmount?: BigNumber; + shouldConvertEthToUnitAmount?: boolean; + ethUsdPrice?: BigNumber; shouldEmphasize?: boolean; } -export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = props => { - const fontWeight = props.shouldEmphasize ? 700 : 400; +export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = ({ + name, + ethAmount, + shouldConvertEthToUnitAmount, + ethUsdPrice, + shouldEmphasize, +}) => { + const fontWeight = shouldEmphasize ? 700 : 400; + const usdFormatter = shouldConvertEthToUnitAmount ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; + const ethFormatter = shouldConvertEthToUnitAmount ? format.ethBaseAmount : format.ethUnitAmount; return ( <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}> <Flex justify="space-between"> <Text fontWeight={fontWeight} fontColor={ColorOption.grey}> - {props.name} + {name} </Text> <Container> <Container marginRight="3px" display="inline-block"> - <Text fontColor={ColorOption.lightGrey}>({props.secondaryValue}) </Text> + <Text fontColor={ColorOption.lightGrey}>({usdFormatter(ethAmount, ethUsdPrice)})</Text> </Container> <Text fontWeight={fontWeight} fontColor={ColorOption.grey}> - {props.primaryValue} + {ethFormatter(ethAmount)} </Text> </Container> </Flex> @@ -57,6 +92,7 @@ export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = p OrderDetailsRow.defaultProps = { shouldEmphasize: false, + shouldConvertEthToUnitAmount: true, }; OrderDetailsRow.displayName = 'OrderDetailsRow'; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 4ff8b51bd..44f702aa2 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; +import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; @@ -7,7 +8,6 @@ import { ColorOption } from '../style/theme'; import { BuyButton } from './buy_button'; import { InstantHeading } from './instant_heading'; -import { OrderDetails } from './order_details'; import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} @@ -16,7 +16,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white} borderRadius="3px"> <Flex direction="column" justify="flex-start"> <SelectedAssetInstantHeading /> - <OrderDetails /> + <LatestBuyQuoteOrderDetails /> <SelectedAssetBuyButton /> </Flex> </Container> |