wip: retry button

4 files changed, 98 insertions, 30 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>
+    );
+};
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 99f971321..a5fa0aa8e 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -1,3 +1,4 @@
+// TODO: Rename to SelectedAssetButton
 import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -8,45 +9,31 @@ import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { AsyncProcessState } from '../types';
 
-import { BuyButton } from '../components/buy_button';
+import { AssetButton } from '../components/asset_button';
 
+// TODO: rename
 export interface SelectedAssetBuyButtonProps {}
 
 interface ConnectedState {
     assetBuyer?: AssetBuyer;
-    text: string;
+    buyOrderState: AsyncProcessState;
     buyQuote?: BuyQuote;
 }
 
 interface ConnectedDispatch {
-    onClick: (buyQuote: BuyQuote) => void;
+    onBuyClick: (buyQuote: BuyQuote) => void;
     onBuySuccess: (buyQuote: BuyQuote) => void;
     onBuyFailure: (buyQuote: BuyQuote) => void;
 }
 
-const textForState = (state: AsyncProcessState): string => {
-    switch (state) {
-        case AsyncProcessState.NONE:
-            return 'Buy';
-        case AsyncProcessState.PENDING:
-            return '...Loading';
-        case AsyncProcessState.SUCCESS:
-            return 'Success!';
-        case AsyncProcessState.FAILURE:
-            return 'Failed';
-        default:
-            return 'Buy';
-    }
-};
-
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
     assetBuyer: state.assetBuyer,
-    text: textForState(state.buyOrderState),
+    buyOrderState: state.buyOrderState,
     buyQuote: state.latestBuyQuote,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)),
+    onBuyClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)),
     onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)),
     onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)),
 });
@@ -54,4 +41,4 @@ const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetB
 export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
     mapStateToProps,
     mapDispatchToProps,
-)(BuyButton);
+)(AssetButton);