Merge branch 'development' into feature/instant/processing-state

12 files changed, 59 insertions, 52 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 1afd216d8..9c42f3d87 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -23,7 +23,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         onBuyFailure: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const shouldDisableButton = _.isUndefined(this.props.buyQuote);
+        const shouldDisableButton = _.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer);
         return (
             <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
                 <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
new file mode 100644
index 000000000..5bc965c7d
--- /dev/null
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { PlacingOrderButton } from '../components/placing_order_button';
+import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
+import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button';
+import { SelectedAssetViewTransactionButton } from '../containers/selected_asset_view_transaction_button';
+import { AsyncProcessState } from '../types';
+
+export interface BuyOrderStateButtonProps {
+    buyOrderProcessingState: AsyncProcessState;
+}
+
+export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
+    if (props.buyOrderProcessingState === AsyncProcessState.FAILURE) {
+        return <SelectedAssetRetryButton />;
+    } else if (props.buyOrderProcessingState === AsyncProcessState.SUCCESS) {
+        return <SelectedAssetViewTransactionButton />;
+    } else if (props.buyOrderProcessingState === AsyncProcessState.PENDING) {
+        return <PlacingOrderButton />;
+    }
+
+    return <SelectedAssetBuyButton />;
+};
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 142e74dae..ffa5a8250 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -31,7 +31,7 @@ export interface ZeroExInstantOptionalProps {
 }
 
 export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
-    public store: Store;
+    private readonly _store: Store;
     private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State {
         // Create merged object such that properties in props override default settings
         const optionalPropsWithDefaults: ZeroExInstantOptionalProps = {
@@ -58,14 +58,14 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     }
     constructor(props: ZeroExInstantProps) {
         super(props);
-        this.store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE));
+        this._store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE));
         // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchAndDispatchToStore(this.store);
+        asyncData.fetchAndDispatchToStore(this._store);
     }
 
     public render(): React.ReactNode {
         return (
-            <Provider store={this.store}>
+            <Provider store={this._store}>
                 <SelectedAssetThemeProvider>
                     <ZeroExInstantContainer />
                 </SelectedAssetThemeProvider>
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 088d0a93e..1d17ed12a 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
 import { LatestError } from '../containers/latest_error';
-import { SelectedAssetButton } from '../containers/selected_asset_button';
+import { SelectedAssetBuyOrderStateButton } from '../containers/selected_asset_buy_order_state_button';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
 import { ColorOption } from '../style/theme';
@@ -27,7 +27,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
                 <SelectedAssetInstantHeading />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
-                    <SelectedAssetButton />
+                    <SelectedAssetBuyOrderStateButton />
                 </Container>
             </Flex>
         </Container>
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 7f4c5a058..31491c80a 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -1,3 +1,4 @@
 import { BigNumber } from '@0x/utils';
 export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ethDecimals = 18;
+export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx
deleted file mode 100644
index d368d05e1..000000000
--- a/packages/instant/src/containers/selected_asset_button.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { SecondaryButton } from '../components/secondary_button';
-import { State } from '../redux/reducer';
-import { AsyncProcessState, OrderState } from '../types';
-
-import { PlacingOrderButton } from '../components/placing_order_button';
-
-import { SelectedAssetBuyButton } from './selected_asset_buy_button';
-import { SelectedAssetRetryButton } from './selected_asset_retry_button';
-import { SelectedAssetViewTransactionButton } from './selected_asset_view_transaction_button';
-
-interface ConnectedState {
-    buyOrderState: OrderState;
-}
-export interface SelectedAssetButtonProps {}
-const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
-    buyOrderState: state.buyOrderState,
-});
-
-const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{
-    buyOrderState: OrderState;
-}> = props => {
-    if (props.buyOrderState.processState === AsyncProcessState.FAILURE) {
-        return <SelectedAssetRetryButton />;
-    } else if (props.buyOrderState.processState === AsyncProcessState.SUCCESS) {
-        return <SelectedAssetViewTransactionButton />;
-    } else if (props.buyOrderState.processState === AsyncProcessState.PENDING) {
-        return <PlacingOrderButton />;
-    }
-
-    return <SelectedAssetBuyButton />;
-};
-
-export const SelectedAssetButton: React.ComponentClass<SelectedAssetButtonProps> = connect(mapStateToProps)(
-    SelectedAssetButtonPresentationComponent,
-);
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
new file mode 100644
index 000000000..f3efbb5d2
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
@@ -0,0 +1,20 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+import { AsyncProcessState } from '../types';
+
+import { BuyOrderStateButton } from '../components/buy_order_state_button';
+
+interface ConnectedState {
+    buyOrderProcessingState: AsyncProcessState;
+}
+export interface SelectedAssetButtonProps {}
+const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
+    buyOrderProcessingState: state.buyOrderState.processState,
+});
+
+export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect(
+    mapStateToProps,
+)(BuyOrderStateButton);
diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx
index 66177551d..b2b140be6 100644
--- a/packages/instant/src/containers/selected_asset_retry_button.tsx
+++ b/packages/instant/src/containers/selected_asset_retry_button.tsx
@@ -17,10 +17,10 @@ const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     _ownProps: SelectedAssetRetryButtonProps,
 ): ConnectedDispatch => ({
-    onClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()),
+    onClick: () => dispatch(actions.resetAmount()),
 });
 
 export const SelectedAssetRetryButton: React.ComponentClass<SelectedAssetRetryButtonProps> = connect(
-    null,
+    undefined,
     mapDispatchToProps,
 )(RetryButton);
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index fe78ce401..f648b37f2 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
+import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR } from './constants';
 import { ZeroExInstant, ZeroExInstantProps } from './index';
 
-export const render = (props: ZeroExInstantProps, selector: string = '#zeroExInstantContainer') => {
+export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
     ReactDOM.render(React.createElement(ZeroExInstant, props), document.querySelector(selector));
 };
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 1360634d7..9c084ab3c 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -31,7 +31,7 @@ export enum ActionTypes {
     SET_ERROR = 'SET_ERROR',
     HIDE_ERROR = 'HIDE_ERROR',
     CLEAR_ERROR = 'CLEAR_ERROR',
-    CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT = 'CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT',
+    RESET_AMOUNT = 'RESET_AMOUNT',
 }
 
 export const actions = {
@@ -45,5 +45,5 @@ export const actions = {
     setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error),
     hideError: () => createAction(ActionTypes.HIDE_ERROR),
     clearError: () => createAction(ActionTypes.CLEAR_ERROR),
-    clearBuyQuoteAndSelectedAssetAmount: () => createAction(ActionTypes.CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT),
+    resetAmount: () => createAction(ActionTypes.RESET_AMOUNT),
 };
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 1aedcbcc4..c6a05ac52 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -101,7 +101,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 selectedAsset: newSelectedAsset,
             };
-        case ActionTypes.CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT:
+        case ActionTypes.RESET_AMOUNT:
             return {
                 ...state,
                 latestBuyQuote: undefined,
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index b7b16f4d7..c5521c63c 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -55,6 +55,7 @@ export interface ERC721Asset {
     assetData: string;
     metaData: ERC721AssetMetaData;
 }
+
 export interface Asset {
     assetData: string;
     metaData: AssetMetaData;