Merge branch 'development' into feature/website/asset-buyer-docs

* development: (31 commits)
  Update CODEOWNERS
  Update CODEOWNERS
  Update CODEOWNERS
  Add leo to CODEOWNERS on some packages
  fix(monorepo-scripts): Format date as UTC not local time.
  Bump max bundle size for instant
  fix: dont use enum string as type as typedoc gets confused
  feat: export AssetData from order-utils
  feat: export AssetData from utils
  chore: temporarily increase the bundle size for instant
  Remove order-utils from dependencies
  Run tests on circle CI
  Add tests for format and use toFixed instead of round for usd
  Remove expiry buffer seconds option from AssetBuyer init
  Add ts-optchain and use it instead of lodash get
  Hide USD price when ETH-USD price is not available
  Rename OrderDetailsRow to EthAmountRow
  fix: add Steve's github account to about page, and capitalize AppFolio correctly
  Put boundNoop in a util file
  Add tnxHash to buy button callbacks
  ...

1 files changed, 46 insertions, 12 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 5a32b9575..0706817c9 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/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);
+        }
+    };
+}