aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/order_details.tsx19
-rw-r--r--packages/instant/src/containers/latest_buy_quote_order_details.ts2
2 files changed, 15 insertions, 6 deletions
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 9abd7137e..fc316b9f8 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { oc } from 'ts-optchain';
+import { BIG_NUMBER_ZERO } from '../constants';
import { ColorOption } from '../style/theme';
import { format } from '../util/format';
@@ -15,16 +16,23 @@ import { Text } from './ui/text';
export interface OrderDetailsProps {
buyQuoteInfo?: BuyQuoteInfo;
+ selectedAssetAmount?: BigNumber;
ethUsdPrice?: BigNumber;
isLoading: boolean;
}
export class OrderDetails extends React.Component<OrderDetailsProps> {
public render(): React.ReactNode {
- const { buyQuoteInfo, ethUsdPrice } = this.props;
+ const { buyQuoteInfo, ethUsdPrice, selectedAssetAmount } = this.props;
const buyQuoteAccessor = oc(buyQuoteInfo);
- const ethAssetPrice = buyQuoteAccessor.ethPerAssetPrice();
- const ethTokenFee = buyQuoteAccessor.feeEthAmount();
+ const assetEthAmount = buyQuoteAccessor.assetEthAmount();
+ const feeEthAmount = buyQuoteAccessor.feeEthAmount();
const totalEthAmount = buyQuoteAccessor.totalEthAmount();
+ const perUnitEthAmount =
+ !_.isUndefined(assetEthAmount) &&
+ !_.isUndefined(selectedAssetAmount) &&
+ !selectedAssetAmount.eq(BIG_NUMBER_ZERO)
+ ? assetEthAmount.div(selectedAssetAmount).ceil()
+ : undefined;
return (
<Container padding="20px" width="100%" flexGrow={1}>
<Container marginBottom="10px">
@@ -40,14 +48,13 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
</Container>
<EthAmountRow
rowLabel="Token Price"
- ethAmount={ethAssetPrice}
+ ethAmount={perUnitEthAmount}
ethUsdPrice={ethUsdPrice}
- isEthAmountInBaseUnits={false}
isLoading={this.props.isLoading}
/>
<EthAmountRow
rowLabel="Fee"
- ethAmount={ethTokenFee}
+ ethAmount={feeEthAmount}
ethUsdPrice={ethUsdPrice}
isLoading={this.props.isLoading}
/>
diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts
index 2b59ed3ae..2413e90aa 100644
--- a/packages/instant/src/containers/latest_buy_quote_order_details.ts
+++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts
@@ -14,6 +14,7 @@ export interface LatestBuyQuoteOrderDetailsProps {}
interface ConnectedState {
buyQuoteInfo?: BuyQuoteInfo;
+ selectedAssetAmount?: BigNumber;
ethUsdPrice?: BigNumber;
isLoading: boolean;
}
@@ -21,6 +22,7 @@ interface ConnectedState {
const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({
// use the worst case quote info
buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(),
+ selectedAssetAmount: state.selectedAssetAmount,
ethUsdPrice: state.ethUsdPrice,
isLoading: state.quoteRequestState === AsyncProcessState.Pending,
});