Merge branch 'feature/instant/beta-render-et-al' into feature/instant/failure-state

6 files changed, 48 insertions, 13 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 1d02cab23..b75ec00aa 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -3,8 +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 { Asset } from '../types';
+import { State } from '../redux/reducer';
+import { Asset, DisplayStatus } from '../types';
 import { errorUtil } from '../util/error';
 
 export interface LatestErrorComponentProps {
@@ -30,7 +30,7 @@ export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
     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 6cd39b855..0d847cf02 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -62,13 +62,13 @@ const updateBuyQuoteAsync = async (
     const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
 
     // mark quote as pending
-    dispatch(actions.updateBuyQuoteStatePending());
+    dispatch(actions.setQuoteRequestStatePending());
 
     let newBuyQuote: BuyQuote | undefined;
     try {
         newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue);
     } catch (error) {
-        dispatch(actions.updateBuyQuoteStateFailure());
+        dispatch(actions.setQuoteRequestStateFailure());
         errorUtil.errorFlasher.flashNewError(dispatch, error);
         return;
     }
@@ -90,11 +90,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(asset) && !_.isUndefined(assetBuyer)) {
             // 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(assetBuyer, dispatch, asset, value);
         }
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 7306ec2ec..208bb2582 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -18,7 +18,7 @@ interface ConnectedState {
 }
 
 interface ConnectedDispatch {
-    onBuyClick: (buyQuote: BuyQuote) => void;
+    onClick: (buyQuote: BuyQuote) => void;
     onBuySuccess: (buyQuote: BuyQuote) => void;
     onBuyFailure: (buyQuote: BuyQuote) => void;
 }
@@ -29,9 +29,9 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps):
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onBuyClick: 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 743362151..24efed32e 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -15,7 +15,7 @@ interface ConnectedState {
     selectedAssetAmount?: BigNumber;
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
-    quoteState: AsyncProcessState;
+    quoteRequestState: AsyncProcessState;
     buyOrderState: AsyncProcessState;
 }
 
@@ -23,7 +23,7 @@ const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): Connecte
     selectedAssetAmount: state.selectedAssetAmount,
     totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
     ethUsdPrice: state.ethUsdPrice,
-    quoteState: state.quoteState,
+    quoteRequestState: state.quoteRequestState,
     buyOrderState: state.buyOrderState,
 });
 
diff --git a/packages/instant/src/containers/selected_asset_theme_provider.ts b/packages/instant/src/containers/selected_asset_theme_provider.ts
new file mode 100644
index 000000000..6e6b83d73
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_theme_provider.ts
@@ -0,0 +1,32 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+import { Theme, theme as defaultTheme, ThemeProvider } from '../style/theme';
+import { Asset } from '../types';
+
+export interface SelectedAssetThemeProviderProps {}
+
+interface ConnectedState {
+    theme: Theme;
+}
+
+const getTheme = (asset?: Asset): Theme => {
+    if (!_.isUndefined(asset) && !_.isUndefined(asset.metaData.primaryColor)) {
+        return {
+            ...defaultTheme,
+            primaryColor: asset.metaData.primaryColor,
+        };
+    }
+    return defaultTheme;
+};
+
+const mapStateToProps = (state: State, _ownProps: SelectedAssetThemeProviderProps): ConnectedState => {
+    const theme = getTheme(state.selectedAsset);
+    return { theme };
+};
+
+export const SelectedAssetThemeProvider: React.ComponentClass<SelectedAssetThemeProviderProps> = connect(
+    mapStateToProps,
+)(ThemeProvider);