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/order_details.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/order_details.tsx')
-rw-r--r-- | packages/instant/src/components/order_details.tsx | 110 |
1 files changed, 74 insertions, 36 deletions
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index dbf2c1f0b..a15ff411b 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -1,53 +1,90 @@ +import { BuyQuoteInfo } from '@0xproject/asset-buyer'; +import { BigNumber } from '@0xproject/utils'; +import * as _ from 'lodash'; import * as React from 'react'; +import { oc } from 'ts-optchain'; 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> -); - -OrderDetails.displayName = 'OrderDetails'; - -export interface OrderDetailsRowProps { - name: string; - primaryValue: string; - secondaryValue: string; +export interface OrderDetailsProps { + buyQuoteInfo?: BuyQuoteInfo; + ethUsdPrice?: BigNumber; +} + +export class OrderDetails extends React.Component<OrderDetailsProps> { + public render(): React.ReactNode { + const { buyQuoteInfo, ethUsdPrice } = this.props; + const buyQuoteAccessor = oc(buyQuoteInfo); + const ethAssetPrice = buyQuoteAccessor.ethPerAssetPrice(); + const ethTokenFee = buyQuoteAccessor.feeEthAmount(); + const totalEthAmount = buyQuoteAccessor.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> + <EthAmountRow + rowLabel="Token Price" + ethAmount={ethAssetPrice} + ethUsdPrice={ethUsdPrice} + isEthAmountInBaseUnits={false} + /> + <EthAmountRow rowLabel="Fee" ethAmount={ethTokenFee} ethUsdPrice={ethUsdPrice} /> + <EthAmountRow + rowLabel="Total Cost" + ethAmount={totalEthAmount} + ethUsdPrice={ethUsdPrice} + shouldEmphasize={true} + /> + </Container> + ); + } +} + +export interface EthAmountRowProps { + rowLabel: string; + ethAmount?: BigNumber; + isEthAmountInBaseUnits?: boolean; + ethUsdPrice?: BigNumber; shouldEmphasize?: boolean; } -export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = props => { - const fontWeight = props.shouldEmphasize ? 700 : 400; +export const EthAmountRow: React.StatelessComponent<EthAmountRowProps> = ({ + rowLabel, + ethAmount, + isEthAmountInBaseUnits, + ethUsdPrice, + shouldEmphasize, +}) => { + const fontWeight = shouldEmphasize ? 700 : 400; + const usdFormatter = isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; + const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; + const usdPriceSection = _.isUndefined(ethUsdPrice) ? null : ( + <Container marginRight="3px" display="inline-block"> + <Text fontColor={ColorOption.lightGrey}>({usdFormatter(ethAmount, ethUsdPrice)})</Text> + </Container> + ); return ( <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}> <Flex justify="space-between"> <Text fontWeight={fontWeight} fontColor={ColorOption.grey}> - {props.name} + {rowLabel} </Text> <Container> - <Container marginRight="3px" display="inline-block"> - <Text fontColor={ColorOption.lightGrey}>({props.secondaryValue}) </Text> - </Container> + {usdPriceSection} <Text fontWeight={fontWeight} fontColor={ColorOption.grey}> - {props.primaryValue} + {ethFormatter(ethAmount)} </Text> </Container> </Flex> @@ -55,8 +92,9 @@ export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = p ); }; -OrderDetailsRow.defaultProps = { +EthAmountRow.defaultProps = { shouldEmphasize: false, + isEthAmountInBaseUnits: true, }; -OrderDetailsRow.displayName = 'OrderDetailsRow'; +EthAmountRow.displayName = 'EthAmountRow'; |