aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/order_details.tsx39
-rw-r--r--packages/instant/src/util/buy_quote.ts35
2 files changed, 29 insertions, 45 deletions
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 8bff0af14..f553351ff 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -7,6 +7,7 @@ import { DEFAULT_UNKOWN_ASSET_NAME } from '../constants';
import { ColorOption } from '../style/theme';
import { BaseCurrency } from '../types';
import { buyQuoteUtil } from '../util/buy_quote';
+import { format } from '../util/format';
import { AmountPlaceholder } from './amount_placeholder';
@@ -71,6 +72,19 @@ const tokenAmountLabel = (displayPricePerToken?: React.ReactNode, assetName?: st
return 'Token Amount';
};
+const getDisplayAmount = (
+ baseCurrency: BaseCurrency,
+ weiAmount?: BigNumber,
+ ethUsdPrice?: BigNumber,
+): React.ReactNode => {
+ switch (baseCurrency) {
+ case BaseCurrency.USD:
+ return format.ethBaseUnitAmountInUsd(weiAmount, ethUsdPrice, 2, '');
+ case BaseCurrency.ETH:
+ return format.ethBaseUnitAmount(weiAmount, 4, '');
+ }
+};
+
export interface OrderDetailsProps {
buyQuoteInfo?: BuyQuoteInfo;
selectedAssetUnitAmount?: BigNumber;
@@ -83,13 +97,14 @@ export interface OrderDetailsProps {
}
export class OrderDetails extends React.Component<OrderDetailsProps> {
public render(): React.ReactNode {
- const { buyQuoteInfo, ethUsdPrice, selectedAssetUnitAmount } = this.props;
- const weiAmounts = buyQuoteUtil.getWeiAmounts(selectedAssetUnitAmount, buyQuoteInfo);
+ const { baseCurrency, buyQuoteInfo, ethUsdPrice, selectedAssetUnitAmount } = this.props;
- const displayAmounts =
- this.props.baseCurrency === BaseCurrency.USD
- ? buyQuoteUtil.displayAmountsUsd(weiAmounts, ethUsdPrice)
- : buyQuoteUtil.displayAmountsEth(weiAmounts, ethUsdPrice);
+ const weiAmounts = buyQuoteUtil.getWeiAmounts(selectedAssetUnitAmount, buyQuoteInfo);
+ const secondaryCurrency = baseCurrency === BaseCurrency.USD ? BaseCurrency.ETH : BaseCurrency.USD;
+ const grandTotalValue = grandTotalDisplayValue(
+ getDisplayAmount(baseCurrency, weiAmounts.grandTotalInWei, ethUsdPrice),
+ getDisplayAmount(secondaryCurrency, weiAmounts.grandTotalInWei, ethUsdPrice),
+ );
return (
<Container width="100%" flexGrow={1} padding="20px 20px 0px 20px">
@@ -125,18 +140,22 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
<OrderDetailsRow
isLoading={this.props.isLoading}
labelText={tokenAmountLabel(
- displayAmounts.pricePerToken,
+ getDisplayAmount(baseCurrency, weiAmounts.pricePerTokenInWei, ethUsdPrice),
this.props.assetName,
this.props.selectedAssetUnitAmount,
)}
- value={displayAmounts.assetTotal}
+ value={getDisplayAmount(baseCurrency, weiAmounts.assetTotalInWei, ethUsdPrice)}
+ />
+ <OrderDetailsRow
+ isLoading={this.props.isLoading}
+ labelText="Fee"
+ value={getDisplayAmount(baseCurrency, weiAmounts.feeTotalInWei, ethUsdPrice)}
/>
- <OrderDetailsRow isLoading={this.props.isLoading} labelText="Fee" value={displayAmounts.feeTotal} />
<OrderDetailsRow
isLoading={this.props.isLoading}
isLabelBold={true}
labelText={'Total Cost'}
- value={grandTotalDisplayValue(displayAmounts.primaryGrandTotal, displayAmounts.secondaryGrandTotal)}
+ value={grandTotalValue}
/>
</Container>
);
diff --git a/packages/instant/src/util/buy_quote.ts b/packages/instant/src/util/buy_quote.ts
index acd4d389c..0e880f51c 100644
--- a/packages/instant/src/util/buy_quote.ts
+++ b/packages/instant/src/util/buy_quote.ts
@@ -3,18 +3,8 @@ import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import { oc } from 'ts-optchain';
-import { format } from '../util/format';
-
import { BIG_NUMBER_ZERO } from '../constants';
-export interface DisplayAmounts {
- pricePerToken: React.ReactNode;
- assetTotal: React.ReactNode;
- feeTotal: React.ReactNode;
- primaryGrandTotal: React.ReactNode;
- secondaryGrandTotal?: React.ReactNode;
-}
-
export interface BuyQuoteWeiAmounts {
assetTotalInWei: BigNumber | undefined;
feeTotalInWei: BigNumber | undefined;
@@ -22,13 +12,6 @@ export interface BuyQuoteWeiAmounts {
pricePerTokenInWei: BigNumber | undefined;
}
-const ethDisplayFormat = (amountInWei?: BigNumber) => {
- return format.ethBaseUnitAmount(amountInWei, 4, '');
-};
-const usdDisplayFormat = (amountInWei?: BigNumber, ethUsdPrice?: BigNumber) => {
- return format.ethBaseUnitAmountInUsd(amountInWei, ethUsdPrice, 2, '');
-};
-
export const buyQuoteUtil = {
getWeiAmounts: (
selectedAssetUnitAmount: BigNumber | undefined,
@@ -50,22 +33,4 @@ export const buyQuoteUtil = {
pricePerTokenInWei,
};
},
- displayAmountsEth: (weiAmounts: BuyQuoteWeiAmounts, ethUsdPrice?: BigNumber): DisplayAmounts => {
- return {
- pricePerToken: ethDisplayFormat(weiAmounts.pricePerTokenInWei),
- assetTotal: ethDisplayFormat(weiAmounts.assetTotalInWei),
- feeTotal: ethDisplayFormat(weiAmounts.feeTotalInWei),
- primaryGrandTotal: ethDisplayFormat(weiAmounts.grandTotalInWei),
- secondaryGrandTotal: usdDisplayFormat(weiAmounts.grandTotalInWei, ethUsdPrice),
- };
- },
- displayAmountsUsd: (weiAmounts: BuyQuoteWeiAmounts, ethUsdPrice?: BigNumber): DisplayAmounts => {
- return {
- pricePerToken: usdDisplayFormat(weiAmounts.pricePerTokenInWei, ethUsdPrice),
- assetTotal: usdDisplayFormat(weiAmounts.assetTotalInWei, ethUsdPrice),
- feeTotal: usdDisplayFormat(weiAmounts.feeTotalInWei, ethUsdPrice),
- primaryGrandTotal: usdDisplayFormat(weiAmounts.grandTotalInWei, ethUsdPrice),
- secondaryGrandTotal: ethDisplayFormat(weiAmounts.grandTotalInWei),
- };
- },
};