From 03b235bb428e8a61934ff603f22f057d8394b56a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 11 Oct 2018 17:35:22 -0700
Subject: feat: populate order details with information from worst buy quote

---
 packages/instant/src/components/order_details.tsx | 92 ++++++++++++++++-------
 1 file changed, 64 insertions(+), 28 deletions(-)

(limited to 'packages/instant/src/components/order_details.tsx')

diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index dbf2c1f0b..78359898f 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -1,53 +1,88 @@
+import { BuyQuoteInfo } from '@0xproject/asset-buyer';
+import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import * as _ from 'lodash';
 import * as React from 'react';
 
+import { BIG_NUMBER_ZERO, ethDecimals } from '../constants';
+
 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>
-);
+export interface OrderDetailsProps {
+    buyQuoteInfo?: BuyQuoteInfo;
+    ethUsdPrice?: BigNumber;
+}
 
-OrderDetails.displayName = 'OrderDetails';
+export class OrderDetails extends React.Component<OrderDetailsProps> {
+    public render(): React.ReactNode {
+        const { buyQuoteInfo, ethUsdPrice } = this.props;
+        const ethAssetPrice = _.get(buyQuoteInfo, 'ethPerAssetPrice');
+        const ethTokenFee = _.get(buyQuoteInfo, 'feeEthAmount');
+        const totalEthAmount = _.get(buyQuoteInfo, '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>
+                <OrderDetailsRow
+                    name="Token Price"
+                    ethAmount={ethAssetPrice}
+                    ethUsdPrice={ethUsdPrice}
+                    shouldConvertEthToUnitAmount={false}
+                />
+                <OrderDetailsRow name="Fee" ethAmount={ethTokenFee} ethUsdPrice={ethUsdPrice} />
+                <OrderDetailsRow
+                    name="Total Cost"
+                    ethAmount={totalEthAmount}
+                    ethUsdPrice={ethUsdPrice}
+                    shouldEmphasize={true}
+                />
+            </Container>
+        );
+    }
+}
 
 export interface OrderDetailsRowProps {
     name: string;
-    primaryValue: string;
-    secondaryValue: string;
+    ethAmount?: BigNumber;
+    shouldConvertEthToUnitAmount?: boolean;
+    ethUsdPrice?: BigNumber;
     shouldEmphasize?: boolean;
 }
 
-export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = props => {
-    const fontWeight = props.shouldEmphasize ? 700 : 400;
+export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = ({
+    name,
+    ethAmount,
+    shouldConvertEthToUnitAmount,
+    ethUsdPrice,
+    shouldEmphasize,
+}) => {
+    const fontWeight = shouldEmphasize ? 700 : 400;
+    const usdFormatter = shouldConvertEthToUnitAmount ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
+    const ethFormatter = shouldConvertEthToUnitAmount ? format.ethBaseAmount : format.ethUnitAmount;
     return (
         <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
             <Flex justify="space-between">
                 <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
-                    {props.name}
+                    {name}
                 </Text>
                 <Container>
                     <Container marginRight="3px" display="inline-block">
-                        <Text fontColor={ColorOption.lightGrey}>({props.secondaryValue}) </Text>
+                        <Text fontColor={ColorOption.lightGrey}>({usdFormatter(ethAmount, ethUsdPrice)})</Text>
                     </Container>
                     <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
-                        {props.primaryValue}
+                        {ethFormatter(ethAmount)}
                     </Text>
                 </Container>
             </Flex>
@@ -57,6 +92,7 @@ export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = p
 
 OrderDetailsRow.defaultProps = {
     shouldEmphasize: false,
+    shouldConvertEthToUnitAmount: true,
 };
 
 OrderDetailsRow.displayName = 'OrderDetailsRow';
-- 
cgit v1.2.3


From f3391e1250767eb9ef7a74f78eded38fa3c94586 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 12 Oct 2018 11:00:36 -0700
Subject: feat: make redux actions type-sage

---
 packages/instant/src/components/order_details.tsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'packages/instant/src/components/order_details.tsx')

diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 78359898f..66e7e2406 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -1,11 +1,8 @@
 import { BuyQuoteInfo } from '@0xproject/asset-buyer';
 import { BigNumber } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BIG_NUMBER_ZERO, ethDecimals } from '../constants';
-
 import { ColorOption } from '../style/theme';
 import { format } from '../util/format';
 
-- 
cgit v1.2.3


From fa18db84d976644270adf0815c73a8d6f40cf9a8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 15 Oct 2018 17:33:27 -0700
Subject: Rename OrderDetailsRow to EthAmountRow

---
 packages/instant/src/components/order_details.tsx | 36 +++++++++++------------
 1 file changed, 18 insertions(+), 18 deletions(-)

(limited to 'packages/instant/src/components/order_details.tsx')

diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 66e7e2406..9256d1398 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -32,15 +32,15 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
                         Order Details
                     </Text>
                 </Container>
-                <OrderDetailsRow
-                    name="Token Price"
+                <EthAmountRow
+                    rowLabel="Token Price"
                     ethAmount={ethAssetPrice}
                     ethUsdPrice={ethUsdPrice}
-                    shouldConvertEthToUnitAmount={false}
+                    isEthAmountInBaseUnits={false}
                 />
-                <OrderDetailsRow name="Fee" ethAmount={ethTokenFee} ethUsdPrice={ethUsdPrice} />
-                <OrderDetailsRow
-                    name="Total Cost"
+                <EthAmountRow rowLabel="Fee" ethAmount={ethTokenFee} ethUsdPrice={ethUsdPrice} />
+                <EthAmountRow
+                    rowLabel="Total Cost"
                     ethAmount={totalEthAmount}
                     ethUsdPrice={ethUsdPrice}
                     shouldEmphasize={true}
@@ -50,29 +50,29 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
     }
 }
 
-export interface OrderDetailsRowProps {
-    name: string;
+export interface EthAmountRowProps {
+    rowLabel: string;
     ethAmount?: BigNumber;
-    shouldConvertEthToUnitAmount?: boolean;
+    isEthAmountInBaseUnits?: boolean;
     ethUsdPrice?: BigNumber;
     shouldEmphasize?: boolean;
 }
 
-export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = ({
-    name,
+export const EthAmountRow: React.StatelessComponent<EthAmountRowProps> = ({
+    rowLabel,
     ethAmount,
-    shouldConvertEthToUnitAmount,
+    isEthAmountInBaseUnits,
     ethUsdPrice,
     shouldEmphasize,
 }) => {
     const fontWeight = shouldEmphasize ? 700 : 400;
-    const usdFormatter = shouldConvertEthToUnitAmount ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
-    const ethFormatter = shouldConvertEthToUnitAmount ? format.ethBaseAmount : format.ethUnitAmount;
+    const usdFormatter = isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
+    const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount;
     return (
         <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
             <Flex justify="space-between">
                 <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
-                    {name}
+                    {rowLabel}
                 </Text>
                 <Container>
                     <Container marginRight="3px" display="inline-block">
@@ -87,9 +87,9 @@ export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = (
     );
 };
 
-OrderDetailsRow.defaultProps = {
+EthAmountRow.defaultProps = {
     shouldEmphasize: false,
-    shouldConvertEthToUnitAmount: true,
+    isEthAmountInBaseUnits: true,
 };
 
-OrderDetailsRow.displayName = 'OrderDetailsRow';
+EthAmountRow.displayName = 'EthAmountRow';
-- 
cgit v1.2.3


From 18667d739c112955478ab07cb245dc435b31a974 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 15 Oct 2018 17:39:52 -0700
Subject: Hide USD price when ETH-USD price is not available

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

(limited to 'packages/instant/src/components/order_details.tsx')

diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 9256d1398..bd31bfba8 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -68,6 +68,11 @@ export const EthAmountRow: React.StatelessComponent<EthAmountRowProps> = ({
     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">
@@ -75,9 +80,7 @@ export const EthAmountRow: React.StatelessComponent<EthAmountRowProps> = ({
                     {rowLabel}
                 </Text>
                 <Container>
-                    <Container marginRight="3px" display="inline-block">
-                        <Text fontColor={ColorOption.lightGrey}>({usdFormatter(ethAmount, ethUsdPrice)})</Text>
-                    </Container>
+                    {usdPriceSection}
                     <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
                         {ethFormatter(ethAmount)}
                     </Text>
-- 
cgit v1.2.3


From f2e5fd88469c9e3396197b42298d0b2de8a4d47c Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 15 Oct 2018 18:07:19 -0700
Subject: Add ts-optchain and use it instead of lodash get

---
 packages/instant/src/components/order_details.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'packages/instant/src/components/order_details.tsx')

diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index bd31bfba8..a15ff411b 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -2,6 +2,7 @@ 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';
@@ -16,9 +17,10 @@ export interface OrderDetailsProps {
 export class OrderDetails extends React.Component<OrderDetailsProps> {
     public render(): React.ReactNode {
         const { buyQuoteInfo, ethUsdPrice } = this.props;
-        const ethAssetPrice = _.get(buyQuoteInfo, 'ethPerAssetPrice');
-        const ethTokenFee = _.get(buyQuoteInfo, 'feeEthAmount');
-        const totalEthAmount = _.get(buyQuoteInfo, 'totalEthAmount');
+        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">
-- 
cgit v1.2.3