wip: retry button

3 files changed, 90 insertions, 9 deletions

diff --git a/packages/instant/src/components/asset_button.tsx b/packages/instant/src/components/asset_button.tsx
new file mode 100644
index 000000000..84a27303d
--- /dev/null
+++ b/packages/instant/src/components/asset_button.tsx
@@ -0,0 +1,55 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import * as React from 'react';
+
+import { AsyncProcessState } from '../types';
+
+// TODO: better name?
+
+import { BuyButton } from './buy_button';
+import { RetryButton } from './retry_button';
+import { Container } from './ui';
+
+interface AssetButtonProps {
+    assetBuyer?: AssetBuyer;
+    buyQuote?: BuyQuote;
+    buyOrderState: AsyncProcessState;
+    onBuyClick: (buyQuote: BuyQuote) => void;
+    onBuySuccess: (buyQuote: BuyQuote) => void;
+    onBuyFailure: (buyQuote: BuyQuote) => void;
+}
+
+export class AssetButton extends React.Component<AssetButtonProps, {}> {
+    public render(): React.ReactNode {
+        return (
+            <Container padding="20px" width="100%">
+                {this._renderButton()}
+            </Container>
+        );
+    }
+    private _renderButton(): React.ReactNode {
+        // TODO: figure out why buyOrderState is undefined in beginning, get rid of default
+        switch (this.props.buyOrderState) {
+            case AsyncProcessState.FAILURE:
+                return (
+                    <RetryButton
+                        onClick={() => {
+                            console.log('try again');
+                        }}
+                    />
+                );
+            case AsyncProcessState.SUCCESS:
+                return <div />;
+            default:
+                return (
+                    <BuyButton
+                        buyQuote={this.props.buyQuote}
+                        assetBuyer={this.props.assetBuyer}
+                        onClick={this.props.onBuyClick}
+                        onBuySuccess={this.props.onBuySuccess}
+                        onBuyFailure={this.props.onBuyFailure}
+                        text={'Buy'}
+                    />
+                );
+        }
+    }
+}
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 3ef7c1f5c..4d2386620 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -24,15 +24,14 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         onBuyFailure: util.boundNoop,
     };
     public render(): React.ReactNode {
+        // TODO: move container out
         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>
+            <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
+                <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
+                    {this.props.text}
+                </Text>
+            </Button>
         );
     }
     private readonly _handleClick = async () => {
@@ -43,10 +42,13 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         this.props.onClick(this.props.buyQuote);
         let txnHash;
         try {
-            txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
+            txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote, {
+                gasLimit: 5000000,
+            });
             await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
             this.props.onBuySuccess(this.props.buyQuote, txnHash);
-        } catch {
+        } catch (e) {
+            console.log('error', e);
             this.props.onBuyFailure(this.props.buyQuote, txnHash);
         }
     };
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
new file mode 100644
index 000000000..5e36506d0
--- /dev/null
+++ b/packages/instant/src/components/retry_button.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Button, Text } from './ui';
+
+export interface RetryButtonProps {
+    onClick: () => void;
+}
+
+export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
+    return (
+        <Button
+            backgroundColor={ColorOption.white}
+            borderColor={ColorOption.lightGrey}
+            width="100%"
+            onClick={props.onClick}
+        >
+            <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px">
+                Try Again
+            </Text>
+        </Button>
+    );
+};