Merge pull request #1159 from 0xProject/feature/instant/beta-render-et-al

[instant] Pass in liquiditySource, assetData and other settings from render

4 files changed, 90 insertions, 22 deletions

diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 413cf16ad..b75ec00aa 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -4,11 +4,11 @@ import { connect } from 'react-redux';
 
 import { SlidingError } from '../components/sliding_error';
 import { State } from '../redux/reducer';
-import { DisplayStatus } from '../types';
+import { Asset, DisplayStatus } from '../types';
 import { errorUtil } from '../util/error';
 
 export interface LatestErrorComponentProps {
-    assetData?: string;
+    asset?: Asset;
     latestError?: any;
     slidingDirection: 'down' | 'up';
 }
@@ -17,18 +17,18 @@ export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponent
     if (!props.latestError) {
         return <div />;
     }
-    const { icon, message } = errorUtil.errorDescription(props.latestError, props.assetData);
+    const { icon, message } = errorUtil.errorDescription(props.latestError, props.asset);
     return <SlidingError direction={props.slidingDirection} icon={icon} message={message} />;
 };
 
 interface ConnectedState {
-    assetData?: string;
+    asset?: Asset;
     latestError?: any;
     slidingDirection: 'down' | 'up';
 }
 export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
-    assetData: state.selectedAssetData,
+    asset: state.selectedAsset,
     latestError: state.latestError,
     slidingDirection: state.latestErrorDisplay === DisplayStatus.Present ? 'up' : 'down',
 });
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index e55c8b991..0d847cf02 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -1,4 +1,5 @@
-import { BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
@@ -6,12 +7,10 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
-import { zrxDecimals } from '../constants';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { AsyncProcessState } from '../types';
-import { assetBuyer } from '../util/asset_buyer';
+import { AsyncProcessState, ERC20Asset } from '../types';
 import { errorUtil } from '../util/error';
 
 import { AssetAmountInput } from '../components/asset_amount_input';
@@ -22,33 +21,52 @@ export interface SelectedAssetAmountInputProps {
 }
 
 interface ConnectedState {
+    assetBuyer?: AssetBuyer;
     value?: BigNumber;
-    assetData?: string;
+    asset?: ERC20Asset;
 }
 
 interface ConnectedDispatch {
-    onChange: (value?: BigNumber, assetData?: string) => void;
+    updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumber, asset?: ERC20Asset) => void;
 }
 
-const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => ({
-    value: state.selectedAssetAmount,
-    assetData: state.selectedAssetData,
-});
+interface ConnectedProps {
+    value?: BigNumber;
+    asset?: ERC20Asset;
+    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
+}
+
+type FinalProps = ConnectedProps & SelectedAssetAmountInputProps;
+
+const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => {
+    const selectedAsset = state.selectedAsset;
+    if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) {
+        return {
+            value: state.selectedAssetAmount,
+        };
+    }
+    return {
+        assetBuyer: state.assetBuyer,
+        value: state.selectedAssetAmount,
+        asset: selectedAsset as ERC20Asset,
+    };
+};
 
 const updateBuyQuoteAsync = async (
+    assetBuyer: AssetBuyer,
     dispatch: Dispatch<Action>,
-    assetData: string,
+    asset: ERC20Asset,
     assetAmount: BigNumber,
 ): Promise<void> => {
     // get a new buy quote.
-    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals);
+    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
 
     // mark quote as pending
     dispatch(actions.setQuoteRequestStatePending());
 
     let newBuyQuote: BuyQuote | undefined;
     try {
-        newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue);
+        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue);
     } catch (error) {
         dispatch(actions.setQuoteRequestStateFailure());
         errorUtil.errorFlasher.flashNewError(dispatch, error);
@@ -66,7 +84,7 @@ const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     _ownProps: SelectedAssetAmountInputProps,
 ): ConnectedDispatch => ({
-    onChange: (value, assetData) => {
+    updateBuyQuote: (assetBuyer, value, asset) => {
         // Update the input
         dispatch(actions.updateSelectedAssetAmount(value));
         // invalidate the last buy quote.
@@ -74,16 +92,32 @@ const mapDispatchToProps = (
         // reset our buy state
         dispatch(actions.updateBuyOrderState(AsyncProcessState.NONE));
 
-        if (!_.isUndefined(value) && !_.isUndefined(assetData)) {
+        if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
-            debouncedUpdateBuyQuoteAsync(dispatch, assetData, value);
+            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value);
         }
     },
 });
 
+const mergeProps = (
+    connectedState: ConnectedState,
+    connectedDispatch: ConnectedDispatch,
+    ownProps: SelectedAssetAmountInputProps,
+): FinalProps => {
+    return {
+        ...ownProps,
+        asset: connectedState.asset,
+        value: connectedState.value,
+        onChange: (value, asset) => {
+            connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
+        },
+    };
+};
+
 export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(
     mapStateToProps,
     mapDispatchToProps,
+    mergeProps,
 )(AssetAmountInput);
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 4d3315b1a..8189a5377 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -1,4 +1,4 @@
-import { BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -13,6 +13,7 @@ import { BuyButton } from '../components/buy_button';
 export interface SelectedAssetBuyButtonProps {}
 
 interface ConnectedState {
+    assetBuyer?: AssetBuyer;
     text: string;
     buyQuote?: BuyQuote;
 }
@@ -39,6 +40,7 @@ const textForState = (state: AsyncProcessState): string => {
 };
 
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
+    assetBuyer: state.assetBuyer,
     text: textForState(state.buyOrderState),
     buyQuote: state.latestBuyQuote,
 });
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);