From 49a9345bf4435bb51999527df2b7ee8bbf195743 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Mon, 12 Nov 2018 20:34:33 -0800
Subject: feat(instant): calculate per unit eth amount to populate OrderDetails
 component

---
 packages/instant/src/components/order_details.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

(limited to 'packages/instant/src/components')

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}
                 />
-- 
cgit 


From 5527de62ffda68c00ae5fb68781c2e081fcc372e Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 13 Nov 2018 10:14:20 -0800
Subject: chore(instant): update selectedAssetAmount in the redux state to be
 named selectedAssetUnitAmount

---
 .../instant/src/components/instant_heading.tsx     | 14 +++++-----
 packages/instant/src/components/order_details.tsx  | 32 ++++++++++++----------
 .../src/components/payment_method_dropdown.tsx     |  2 +-
 .../src/components/zero_ex_instant_provider.tsx    |  2 +-
 4 files changed, 26 insertions(+), 24 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index b07776b2c..7f9567454 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -15,8 +15,8 @@ import { Spinner } from './ui/spinner';
 import { Text } from './ui/text';
 
 export interface InstantHeadingProps {
-    selectedAssetAmount?: BigNumber;
-    totalEthBaseAmount?: BigNumber;
+    selectedAssetUnitAmount?: BigNumber;
+    totalEthBaseUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
@@ -104,7 +104,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         if (this.props.quoteRequestState === AsyncProcessState.Pending) {
             return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
         }
-        if (_.isUndefined(this.props.selectedAssetAmount)) {
+        if (_.isUndefined(this.props.selectedAssetUnitAmount)) {
             return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />;
         }
         return amountFunction();
@@ -113,8 +113,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private readonly _renderEthAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
-                {format.ethBaseAmount(
-                    this.props.totalEthBaseAmount,
+                {format.ethBaseUnitAmount(
+                    this.props.totalEthBaseUnitAmount,
                     4,
                     <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
                 )}
@@ -125,8 +125,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private readonly _renderDollarAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white}>
-                {format.ethBaseAmountInUsd(
-                    this.props.totalEthBaseAmount,
+                {format.ethBaseUnitAmountInUsd(
+                    this.props.totalEthBaseUnitAmount,
                     this.props.ethUsdPrice,
                     2,
                     <AmountPlaceholder isPulsating={false} color={ColorOption.white} />,
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index fc316b9f8..5fc956e1c 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -16,22 +16,22 @@ import { Text } from './ui/text';
 
 export interface OrderDetailsProps {
     buyQuoteInfo?: BuyQuoteInfo;
-    selectedAssetAmount?: BigNumber;
+    selectedAssetUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     isLoading: boolean;
 }
 export class OrderDetails extends React.Component<OrderDetailsProps> {
     public render(): React.ReactNode {
-        const { buyQuoteInfo, ethUsdPrice, selectedAssetAmount } = this.props;
+        const { buyQuoteInfo, ethUsdPrice, selectedAssetUnitAmount } = this.props;
         const buyQuoteAccessor = oc(buyQuoteInfo);
-        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()
+        const assetEthBaseUnitAmount = buyQuoteAccessor.assetEthAmount();
+        const feeEthBaseUnitAmount = buyQuoteAccessor.feeEthAmount();
+        const totalEthBaseUnitAmount = buyQuoteAccessor.totalEthAmount();
+        const pricePerTokenEth =
+            !_.isUndefined(assetEthBaseUnitAmount) &&
+            !_.isUndefined(selectedAssetUnitAmount) &&
+            !selectedAssetUnitAmount.eq(BIG_NUMBER_ZERO)
+                ? assetEthBaseUnitAmount.div(selectedAssetUnitAmount).ceil()
                 : undefined;
         return (
             <Container padding="20px" width="100%" flexGrow={1}>
@@ -48,19 +48,19 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
                 </Container>
                 <EthAmountRow
                     rowLabel="Token Price"
-                    ethAmount={perUnitEthAmount}
+                    ethAmount={pricePerTokenEth}
                     ethUsdPrice={ethUsdPrice}
                     isLoading={this.props.isLoading}
                 />
                 <EthAmountRow
                     rowLabel="Fee"
-                    ethAmount={feeEthAmount}
+                    ethAmount={feeEthBaseUnitAmount}
                     ethUsdPrice={ethUsdPrice}
                     isLoading={this.props.isLoading}
                 />
                 <EthAmountRow
                     rowLabel="Total Cost"
-                    ethAmount={totalEthAmount}
+                    ethAmount={totalEthBaseUnitAmount}
                     ethUsdPrice={ethUsdPrice}
                     shouldEmphasize={true}
                     isLoading={this.props.isLoading}
@@ -88,7 +88,7 @@ export class EthAmountRow extends React.Component<EthAmountRowProps> {
         const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props;
 
         const fontWeight = shouldEmphasize ? 700 : 400;
-        const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount;
+        const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseUnitAmount : format.ethUnitAmount;
         return (
             <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
                 <Flex justify="space-between">
@@ -112,7 +112,9 @@ export class EthAmountRow extends React.Component<EthAmountRowProps> {
         );
     }
     private _renderUsdSection(): React.ReactNode {
-        const usdFormatter = this.props.isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
+        const usdFormatter = this.props.isEthAmountInBaseUnits
+            ? format.ethBaseUnitAmountInUsd
+            : format.ethUnitAmountInUsd;
         const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount);
         return shouldHideUsdPriceSection ? null : (
             <Container marginRight="3px" display="inline-block">
diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx
index bdce2a49d..58f1cc044 100644
--- a/packages/instant/src/components/payment_method_dropdown.tsx
+++ b/packages/instant/src/components/payment_method_dropdown.tsx
@@ -18,7 +18,7 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
     public render(): React.ReactNode {
         const { accountAddress, accountEthBalanceInWei } = this.props;
         const value = format.ethAddress(accountAddress);
-        const label = format.ethBaseAmount(accountEthBalanceInWei, 4, '') as string;
+        const label = format.ethBaseUnitAmount(accountEthBalanceInWei, 4, '') as string;
         return <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />;
     }
     private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => {
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 411f118cc..e64579518 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -73,7 +73,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
                       completeAssetMetaDataMap,
                       networkId,
                   ),
-            selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
+            selectedAssetUnitAmount: _.isUndefined(props.defaultAssetBuyAmount)
                 ? undefined
                 : new BigNumber(props.defaultAssetBuyAmount),
             availableAssets: _.isUndefined(props.availableAssetDatas)
-- 
cgit