[instant][types][order-utils][asset-buyer] Move over and clean up features from zrx-buyer

packages/asset-buyer/src/index.ts

@@ -9,6 +9,7 @@ export {
     AssetBuyerError,
     AssetBuyerOpts,
     BuyQuote,
+    BuyQuoteInfo,
     BuyQuoteExecutionOpts,
     BuyQuoteRequestOpts,
     OrderProvider,

packages/instant/package.json

@@ -44,6 +44,7 @@
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
     "dependencies": {
         "@0xproject/asset-buyer": "^2.0.0",
+        "@0xproject/order-utils": "^1.0.7",
         "@0xproject/types": "^1.1.4",
         "@0xproject/typescript-typings": "^2.0.2",
         "@0xproject/utils": "^2.0.2",

packages/instant/src/components/amount_input.tsx

@@ -10,10 +10,13 @@ export interface AmountInputProps {
     fontColor?: ColorOption;
     fontSize?: string;
     value?: BigNumber;
-    onChange?: (value?: BigNumber) => void;
+    onChange: (value?: BigNumber) => void;
 }
 
 export class AmountInput extends React.Component<AmountInputProps> {
+    public static defaultProps = {
+        onChange: _.noop.bind(_),
+    };
     public render(): React.ReactNode {
         const { fontColor, fontSize, value } = this.props;
         return (
@@ -24,7 +27,7 @@ export class AmountInput extends React.Component<AmountInputProps> {
                     onChange={this._handleChange}
                     value={!_.isUndefined(value) ? value.toString() : ''}
                     placeholder="0.00"
-                    width="2em"
+                    width="2.2em"
                 />
             </Container>
         );
@@ -40,8 +43,6 @@ export class AmountInput extends React.Component<AmountInputProps> {
                 return;
             }
         }
-        if (!_.isUndefined(this.props.onChange)) {
-            this.props.onChange(bigNumberValue);
-        }
+        this.props.onChange(bigNumberValue);
     };
 }

packages/instant/src/components/asset_amount_input.tsx

@@ -0,0 +1,51 @@
+import { AssetProxyId } from '@0xproject/types';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { assetMetaData } from '../data/asset_meta_data';
+import { ColorOption } from '../style/theme';
+
+import { AmountInput, AmountInputProps } from './amount_input';
+import { Container, Text } from './ui';
+
+export interface AssetAmountInputProps extends AmountInputProps {
+    assetData?: string;
+    onChange: (value?: BigNumber, assetData?: string) => void;
+}
+
+export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
+    public static defaultProps = {
+        onChange: _.noop.bind(_),
+    };
+    public render(): React.ReactNode {
+        const { assetData, onChange, ...rest } = this.props;
+        return (
+            <Container>
+                <AmountInput {...rest} onChange={this._handleChange} />
+                <Container display="inline-block" marginLeft="10px">
+                    <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
+                        {this._getLabel()}
+                    </Text>
+                </Container>
+            </Container>
+        );
+    }
+    private readonly _getLabel = (): string => {
+        const unknownLabel = '???';
+        if (_.isUndefined(this.props.assetData)) {
+            return unknownLabel;
+        }
+        const metaData = assetMetaData[this.props.assetData];
+        if (_.isUndefined(metaData)) {
+            return unknownLabel;
+        }
+        if (metaData.assetProxyId === AssetProxyId.ERC20) {
+            return metaData.symbol;
+        }
+        return unknownLabel;
+    };
+    private readonly _handleChange = (value?: BigNumber): void => {
+        this.props.onChange(value, this.props.assetData);
+    };
+}

packages/instant/src/components/buy_button.tsx

@@ -1,19 +1,56 @@
+import { BuyQuote } from '@0xproject/asset-buyer';
+import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
+import { assetBuyer } from '../util/asset_buyer';
+import { web3Wrapper } from '../util/web3_wrapper';
 
 import { Button, Container, Text } from './ui';
 
-export interface BuyButtonProps {}
+export interface BuyButtonProps {
+    buyQuote?: BuyQuote;
+    onClick: (buyQuote: BuyQuote) => void;
+    onBuySuccess: (buyQuote: BuyQuote) => void;
+    onBuyFailure: (buyQuote: BuyQuote) => void;
+    text: string;
+}
 
-export const BuyButton: React.StatelessComponent<BuyButtonProps> = props => (
-    <Container padding="20px" width="100%">
-        <Button width="100%">
-            <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
-                Buy
-            </Text>
-        </Button>
-    </Container>
-);
+const boundNoop = _.noop.bind(_);
 
-BuyButton.displayName = 'BuyButton';
+export class BuyButton extends React.Component<BuyButtonProps> {
+    public static defaultProps = {
+        onClick: boundNoop,
+        onBuySuccess: boundNoop,
+        onBuyFailure: boundNoop,
+    };
+    public render(): React.ReactNode {
+        const shouldDisableButton = _.isUndefined(this.props.buyQuote);
+        return (
+            <Container padding="20px" width="100%">
+                <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
+                    <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
+                        {this.props.text}
+                    </Text>
+                </Button>
+            </Container>
+        );
+    }
+    private readonly _handleClick = async () => {
+        // The button is disabled when there is no buy quote anyway.
+        if (_.isUndefined(this.props.buyQuote)) {
+            return;
+        }
+        this.props.onClick(this.props.buyQuote);
+        try {
+            const txnHash = await assetBuyer.executeBuyQuoteAsync(this.props.buyQuote, {
+                // HACK: There is a calculation issue in asset-buyer. ETH is refunded anyway so just over-estimate.
+                ethAmount: this.props.buyQuote.worstCaseQuoteInfo.totalEthAmount.mul(2),
+            });
+            await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
+        } catch {
+            this.props.onBuyFailure(this.props.buyQuote);
+        }
+        this.props.onBuySuccess(this.props.buyQuote);
+    };
+}

packages/instant/src/components/instant_heading.tsx

@@ -1,11 +1,32 @@
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
 import * as React from 'react';
 
 import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
 import { ColorOption } from '../style/theme';
+import { format } from '../util/format';
 
 import { Container, Flex, Text } from './ui';
 
-export interface InstantHeadingProps {}
+export interface InstantHeadingProps {
+    selectedAssetAmount?: BigNumber;
+    totalEthBaseAmount?: BigNumber;
+    ethUsdPrice?: BigNumber;
+}
+
+const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: InstantHeadingProps): string => {
+    if (_.isUndefined(selectedAssetAmount)) {
+        return '0 ETH';
+    }
+    return format.ethBaseAmount(totalEthBaseAmount, 4, '...loading');
+};
+
+const displayUsdAmount = ({ totalEthBaseAmount, selectedAssetAmount, ethUsdPrice }: InstantHeadingProps): string => {
+    if (_.isUndefined(selectedAssetAmount)) {
+        return '$0.00';
+    }
+    return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '...loading');
+};
 
 export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => (
     <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px">
@@ -22,22 +43,15 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
             </Text>
         </Container>
         <Flex direction="row" justify="space-between">
-            <Container>
-                <SelectedAssetAmountInput fontSize="45px" />
-                <Container display="inline-block" marginLeft="10px">
-                    <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
-                        rep
-                    </Text>
-                </Container>
-            </Container>
+            <SelectedAssetAmountInput fontSize="45px" />
             <Flex direction="column" justify="space-between">
                 <Container marginBottom="5px">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
-                        0 ETH
+                        {displaytotalEthBaseAmount(props)}
                     </Text>
                 </Container>
                 <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
-                    $0.00
+                    {displayUsdAmount(props)}
                 </Text>
             </Flex>
         </Flex>

packages/instant/src/components/order_details.tsx

@@ -1,53 +1,85 @@
+import { BuyQuoteInfo } from '@0xproject/asset-buyer';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
 import * as React from 'react';
 
 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 +89,7 @@ export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = p
 
 OrderDetailsRow.defaultProps = {
     shouldEmphasize: false,
+    shouldConvertEthToUnitAmount: true,
 };
 
 OrderDetailsRow.displayName = 'OrderDetailsRow';

packages/instant/src/components/zero_ex_instant.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { Provider } from 'react-redux';
 
+import { asyncData } from '../redux/async_data';
 import { store } from '../redux/store';
 import { fonts } from '../style/fonts';
 import { theme, ThemeProvider } from '../style/theme';
 
 import { ZeroExInstantContainer } from './zero_ex_instant_container';
 
 fonts.include();
+// tslint:disable-next-line:no-floating-promises
+asyncData.fetchAndDispatchToStore();
 
 export interface ZeroExInstantProps {}
 

packages/instant/src/components/zero_ex_instant_container.tsx

@@ -1,20 +1,21 @@
 import * as React from 'react';
 
+import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
+import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
+import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
+
 import { ColorOption } from '../style/theme';
 
-import { BuyButton } from './buy_button';
-import { InstantHeading } from './instant_heading';
-import { OrderDetails } from './order_details';
 import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
     <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white} borderRadius="3px">
         <Flex direction="column" justify="flex-start">
-            <InstantHeading />
-            <OrderDetails />
-            <BuyButton />
+            <SelectedAssetInstantHeading />
+            <LatestBuyQuoteOrderDetails />
+            <SelectedAssetBuyButton />
         </Flex>
     </Container>
 );