Merge pull request #1161 from 0xProject/feature/instant/order-details-loading-state

[instant] Order details loading state

5 files changed, 15 insertions, 11 deletions

diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts
index 597bf3088..092aaaf20 100644
--- a/packages/instant/src/containers/latest_buy_quote_order_details.ts
+++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts
@@ -8,18 +8,21 @@ import { oc } from 'ts-optchain';
 import { State } from '../redux/reducer';
 
 import { OrderDetails } from '../components/order_details';
+import { AsyncProcessState } from '../types';
 
 export interface LatestBuyQuoteOrderDetailsProps {}
 
 interface ConnectedState {
     buyQuoteInfo?: BuyQuoteInfo;
     ethUsdPrice?: BigNumber;
+    isLoading: boolean;
 }
 
 const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({
     // use the worst case quote info
     buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(),
     ethUsdPrice: state.ethUsdPrice,
+    isLoading: state.quoteRequestState === AsyncProcessState.PENDING,
 });
 
 export const LatestBuyQuoteOrderDetails: React.ComponentClass<LatestBuyQuoteOrderDetailsProps> = connect(
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 08ea418e7..413cf16ad 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 
 import { SlidingError } from '../components/sliding_error';
-import { LatestErrorDisplay, State } from '../redux/reducer';
+import { State } from '../redux/reducer';
+import { DisplayStatus } from '../types';
 import { errorUtil } from '../util/error';
 
 export interface LatestErrorComponentProps {
@@ -29,7 +30,7 @@ export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     assetData: state.selectedAssetData,
     latestError: state.latestError,
-    slidingDirection: state.latestErrorDisplay === LatestErrorDisplay.Present ? 'up' : 'down',
+    slidingDirection: state.latestErrorDisplay === DisplayStatus.Present ? 'up' : 'down',
 });
 
 export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index 0810b093a..e55c8b991 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -44,13 +44,13 @@ const updateBuyQuoteAsync = async (
     const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals);
 
     // mark quote as pending
-    dispatch(actions.updateBuyQuoteStatePending());
+    dispatch(actions.setQuoteRequestStatePending());
 
     let newBuyQuote: BuyQuote | undefined;
     try {
         newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue);
     } catch (error) {
-        dispatch(actions.updateBuyQuoteStateFailure());
+        dispatch(actions.setQuoteRequestStateFailure());
         errorUtil.errorFlasher.flashNewError(dispatch, error);
         return;
     }
@@ -72,11 +72,11 @@ const mapDispatchToProps = (
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(undefined));
         // reset our buy state
-        dispatch(actions.updatebuyOrderState(AsyncProcessState.NONE));
+        dispatch(actions.updateBuyOrderState(AsyncProcessState.NONE));
 
         if (!_.isUndefined(value) && !_.isUndefined(assetData)) {
             // even if it's debounced, give them the illusion it's loading
-            dispatch(actions.updateBuyQuoteStatePending());
+            dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
             debouncedUpdateBuyQuoteAsync(dispatch, assetData, value);
         }
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 4a8e31525..4d3315b1a 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -44,9 +44,9 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps):
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)),
-    onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)),
-    onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)),
+    onClick: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.PENDING)),
+    onBuySuccess: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.SUCCESS)),
+    onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.FAILURE)),
 });
 
 export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index 0509db5da..43127582c 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -15,14 +15,14 @@ interface ConnectedState {
     selectedAssetAmount?: BigNumber;
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
-    quoteState: AsyncProcessState;
+    quoteRequestState: AsyncProcessState;
 }
 
 const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
     selectedAssetAmount: state.selectedAssetAmount,
     totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
     ethUsdPrice: state.ethUsdPrice,
-    quoteState: state.quoteState,
+    quoteRequestState: state.quoteRequestState,
 });
 
 export const SelectedAssetInstantHeading: React.ComponentClass<InstantHeadingProps> = connect(mapStateToProps)(