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

.circleci/config.yml

@@ -98,6 +98,7 @@ jobs:
       - run: yarn wsrun test:circleci @0xproject/subproviders
       - run: yarn wsrun test:circleci @0xproject/web3-wrapper
       - run: yarn wsrun test:circleci @0xproject/utils
+      - run: yarn wsrun test:circleci @0xproject/instant
       - save_cache:
           key: coverage-abi-gen-{{ .Environment.CIRCLE_SHA1 }}
           paths:

package.json

@@ -50,7 +50,7 @@
             },
             {
                 "path": "packages/instant/public/main.bundle.js",
-                "maxSize": "350kB"
+                "maxSize": "500kB"
             }
         ],
         "ci": {

packages/0x.js/CHANGELOG.json

@@ -24,6 +24,10 @@
             {
                 "note": "Make web3-provider-engine types a 'dependency' so it's available to users of the library",
                 "pr": 1105
+            },
+            {
+                "note": "Export new `AssetData` type from types",
+                "pr": 1131
             }
         ]
     },

packages/0x.js/src/index.ts

@@ -79,6 +79,7 @@ export {
     OrderStateInvalid,
     OrderState,
     AssetProxyId,
+    AssetData,
     ERC20AssetData,
     ERC721AssetData,
     SignatureType,

packages/asset-buyer/CHANGELOG.json

@@ -5,6 +5,10 @@
             {
                 "note": "Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts`"
             },
+            {
+                "note": "Export `BuyQuoteInfo` type",
+                "pr": 1131
+            },
             {
                 "note":
                     "Updated to use new modularized artifacts and the latest version of @0xproject/contract-wrappers",

packages/asset-buyer/src/index.ts

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

packages/instant/package.json

@@ -55,12 +55,14 @@
         "react-dom": "^16.5.2",
         "react-redux": "^5.0.7",
         "redux": "^4.0.0",
-        "styled-components": "^3.4.9"
+        "styled-components": "^3.4.9",
+        "ts-optchain": "^0.1.1"
     },
     "devDependencies": {
         "@0xproject/tslint-config": "^1.0.8",
         "@types/enzyme": "^3.1.14",
         "@types/enzyme-adapter-react-16": "^1.0.3",
+        "@types/jest": "^23.3.5",
         "@types/lodash": "^4.14.116",
         "@types/node": "*",
         "@types/react": "^16.4.16",

packages/instant/src/components/amount_input.tsx

@@ -3,17 +3,21 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
 
 import { Container, Input } from './ui';
 
 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: util.boundNoop,
+    };
     public render(): React.ReactNode {
         const { fontColor, fontSize, value } = this.props;
         return (
@@ -24,7 +28,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 +44,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,52 @@
+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 { util } from '../util/util';
+
+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: util.boundNoop,
+    };
+    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._getAssetSymbolLabel()}
+                    </Text>
+                </Container>
+            </Container>
+        );
+    }
+    private readonly _getAssetSymbolLabel = (): 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,53 @@
+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 { util } from '../util/util';
+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, txnHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => 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>
-);
-
-BuyButton.displayName = 'BuyButton';
+export class BuyButton extends React.Component<BuyButtonProps> {
+    public static defaultProps = {
+        onClick: util.boundNoop,
+        onBuySuccess: util.boundNoop,
+        onBuyFailure: util.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);
+        let txnHash;
+        try {
+            txnHash = await assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
+            await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
+            this.props.onBuySuccess(this.props.buyQuote, txnHash);
+        } catch {
+            this.props.onBuyFailure(this.props.buyQuote, txnHash);
+        }
+    };
+}

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>