crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render OrderDetailsRow directly

Browse Source
This commit is contained in:
Steve Klebanoff
2018-12-12 08:23:40 -08:00
parent 5f7ed71937
commit 7aacf1f5a4
2 changed files with 29 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/instant/src/components/order_details.tsx
View File

@@ -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>
);

35
packages/instant/src/util/buy_quote.ts
View File

@@ -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),
};
},
};